Para Los Diseñadores Con Amor (Una Carta De Un Desarrollador Front-End)

Queridos diseñadores,

Esta se ha ido formando durante años. Partes han sido entregadas en discursos y otras en la escritura a diferentes diseñadores durante un largo período de tiempo.

Sin embargo, siempre he temido publicarla por temor a que afectaría ya sea al diseñador o el cliente con los que actualmente estoy trabajando. Así que antes de que me vaya, me gustaría hacer hincapié en que esta no es una queja concreta sino una lista detallada de 18 años de desacuerdos.

Hemos trabajado juntos durante casi dos décadas, y cada archivo PSD que me has enviado ha tenido (más o menos) las mismas cuestiones. Perdóname entonces por la indecencia de intentar enseñarte como hacer tu trabajo.

No me atrevo a enseñarte acerca de los gráficos o la estética. No voy a profundizar en la tipografía, legibilidad, o la utilización del espacio en blanco.

En lugar de ello, me gustaría explicar cómo los frutos de tu trabajo informan al mío.

Me gustaría recordarte lo que se necesita para reproducir los diseños con píxeles perfectos en una página web. Me gustaría decirte cómo tu diseño de archivos será usado para la documentación y cómo las imágenes que creas determinarán las tecnologías utilizadas – hasta la mismísima base de los niveles de escalabilidad y rendimiento.

Asimismo, me gustaría demostrar lo que se puede hacer de forma rápida y sencilla, y lo que generará sobrecarga que arrastre la totalidad de la producción.

Y sobre todo, me gustaría recordarte que el diseño que estás creando ahora se convertirá en una cosa viva que interactúa y responde, que se comunica con miles de diferentes personas, que necesita enseñarles y aprender de ellos en la forma más sencilla posible. Tanto para esta como para ellos.

Diseñando Para La Documentación

Primero que todo, me gustaría recordarte que los archivos PSD que estás produciendo no sólo son la fuente de las imágenes para que el cliente apruebe, sino también son la documentación técnica y los materiales de fuente para los desarrolladores. Por lo tanto, por favor mantén tus capas y grupos ordenados, organizados y denominados.

Desarrolla tu diseño. Crea un archivo separado con los convenios que has utilizado, o toma nota de ellos en una capa oculta.

Dime qué fuentes has utilizado para qué cosa. Déjame saber qué colores, distancias, y contextos usaste. Necesito saberlo.

Además, necesito saber si el extrapolar ha realizado o no el diseño de una característica específica.

Lo que estoy tratando de decir es: si en absoluto es posible crear una pequeña guía de estilo para el producto que estés diseñando.

Para nuestro bien, al añadir bloques de texto estándar – como títulos – agrega un rectángulo detrás de ellos para indicar el espacio alrededor de los mismos, el cual debería permitirte colocarlos sistemáticamente cada vez. Si esto es demasiado trabajo, por lo menos indica qué ejemplo en el documento es canon.

No puedo decirte cuán a menudo me parece que los títulos se colocan a ojo, por lo que colocarlos visualmente no funciona, pero cuando se miden, revelan que cada uno tiene su propio espacio.

Lo mismo va para bloques de contenido. Si tienes una lista de los diferentes bloques de contenido, por favor ponle el espacio de forma coherente.

Te diré más en la sección de diseñando para contenido_, pero por favor, no supongas que tus títulos siempre estarán en una sola línea, y utiliza esa información en el archivo.

Sigo encontrándome con esos títulos con un tamaño de fuente de 22px y un alto de línea de 92px (obviamente, copiados y pegados desde el título de la página principal). La configuración que elijas es relevante aunque no cambia visualmente el archivo exportado.

Diseñando La Tecnología

Hay dos lados en esto: Qué se puede hacer y qué es apropiado para el medio.

Mientras estamos alcanzando rápidamente el punto donde todo será técnicamente posible para el desarrollo de sitios web (Aún puedo dibujar píxel por píxel que utilizando el lienzo) un montón de esas soluciones no están listas para producción.

El hecho de que encuentres un ejemplo donde alguien combinó con éxito WebGL 3D con la máscara de filtro CSS blur plus para una página de demostración no significa que puedas utilizar como un panel completo de paralaje la ventana en una sola página.

Y si realmente quieres caminar por la vanguardia, por favor consulta con tu desarrollador antes de presentar el diseño para su aprobación. De lo contrario, será difícil que el cliente se conforme.

Si realmente deseas probar los bordes y quieres hacerlo por diversión, ponte en contacto conmigo de forma privada. Me encanta crear este tipo de cosas al igual que a ti. Simplemente no pongas este material en un proyecto de producción presupuestado.

Más allá de esas cosas – más allá de poner a prueba los límites de lo que puede hacerse, trata de ser sensible y sensato con respecto a qué debe hacerse.

No eres un artista gráfico; eres más que eso, eres un diseñador.

No sólo estás diseñando para que se mire de cierta manera, también tienes que diseñarlo para que ejecute, comunique y se comporte de cierta manera.

Para ir por lo cliché familiarizado por diseñadores de todas partes: ¿qué tan buena es una silla si nadie puede sentarse en ella?

Debes incorporar la velocidad de carga y la velocidad de ejecución y facilidad de uso en tu diseño para que sea un diseño en lugar de una imagen.

Intenta conseguir tanto como sea posible con sólo HTML y CSS. Evita el uso de bonitas características que están disponibles en Photoshop. ¡No utilices la mezcla! No uses Faux negrita y Faux cursiva.

A menos que tu intención del elemento sea una imagen, no uses filtros en lo más mínimo – excepto si son las sombras más simples.

No me hagas calcular o elegir los colores porque has mezclado rellenos de color. Por favor, no uses imágenes transparentes falsas mediante la fusión de superposición, de verdad necesito una imagen transparente en el sitio.

Si estamos usando un front-end, tal como un marco (Bootstrap, muchas de estas cuestiones ya se habrán resuelto, a fin de aprender cómo se hace y cómo puede ser modificado. No vayas a diseñar algo sin relación.

Si tu diseño no está en línea con lo que hace el marco de trabajo, la aplicación no es implementar el diseño. En lugar terminaremos anulando de forma selectiva el marco, para que no se interponga con nuestro diseño y después implementarlo desde cero. Se duplica la carga de trabajo en lugar de reducirlo a la mitad.

Y finalmente, no uses más de tres fuentes – o variantes de fuente – en el sitio. Si necesitas seis pesos diferentes, cada uno con su propio regulador y variantes de cursiva, ya no estás diseñando para la web.

Diseñando Para La Interactividad

Esta es enorme. Y esa carta fue escrita original y exlusivamente para este tema. Realmente tienes que saber y entender todas las maneras por las que los usuarios y la funcionalidad pueden interactuar.

Comencemos con las cosas más sencillas: los enlaces.

Los enlaces no tienen únicamente dos estados.

En la navegación que recibo, siempre se ofrecen diseños para un enlace y para un enlace activo (página actual).

En otros casos sueles proporcionar la base y _estados hover.

Si quieres ser el más amigable para el usuario, debes tener distintos diseños para _ los estados de base, el hover y el focal (visitó y activó también son agradables de tener para UX). Y para la navegación de un enlace y un enlace activo tienen cada uno todos los estados anteriores.

Ah, y no te atrevas a cambiar un diseño de enlace entre los estados (variando de ancho de borde, relleno y similares).

Del mismo modo, si no se ve como un botón, no tiene fundamento. Punto. El relleno de un elemento de texto en línea es un lío, y fondos de texto sin armazones nunca funcionarán.

Dado a que vamos a utilizar esto en el móvil, asegúrate de que haya suficiente espacio en blanco entre los distintos elementos interactivos, y que cada hitbox se suficientemente grande. Creo que un mínimo de 42px en cada eje es la norma.

Dibuja un rectángulo invisible, o una capa oculta mostrando hitboxes; asegúrate de que no se superpongan y que las interacciones del usuario no sean ambiguas.

Los elementos de formulario son aún peores.

El caso más común que veo es con los botones de radio y casillas de verificación. ¡Los estándar son feos! Por lo tanto, diseña tus propios y dame una marcada y un estado sin marcar, y considera tu trabajo terminado.

Sin embargo, hay toda una tabla multidimensional de estados por una casilla de verificación, y cada una debe ser indicada visualmente al usuario.

Tenemos los siguientes estados:

• Revisado o no
• Hover o no
• Focal o no
• Activado o no
• Error o no

Cada una de estas se pueden combinar con los demás.

El deshabilitado impide algunas combinaciones (el hover y el focal generalmente son irrelevantes cuando están desactivados) pero no todas (revisado y deshabilitado es perfectamente válido y un estado informativo para una casilla de verificación). Así que terminamos con 16 activados y con cuatro estados desactivados, dando un total de al menos 20 estados distintos. Por ejemplo, los estados que generalmente me das so verificados-no-no-no-activados y desactivados-no-no-no-habilitados en esta configuración.

Otros elementos del formulario podrían no tener un estado-revisado sin marcar, pero pueden estar vacíos o no vacíos (mostrando el texto de marcador de posición). También pueden tener un estado informativo más complejo de modo que el error-o-no puede ser tan complejo como el éxito de advertencia-de-error-neutral.

Entonces, por encima de eso, debes tener carácter obligatorio u opcional junto con indicadores claramente definidos y una diagramación y diseño de etiquetas, además de ayuda de entrada, y el texto de error.

Y, si realmente quieres ser amigable con el usuario, necesitas un-set-sucio de estados prístinos, indicando que el usuario nunca proporcionó los datos o los datos ya almacenados, o ha sido modificado pero no almacena, todavía.

Lo que estoy diciendo es: diseñar para la interactividad es difícil. Y si deseas cambiar el aspecto de los botones de radio, no lo hagas con ligereza con dos estados.

Sólo una última observación sobre el diseño de interactividad: decide cómo luce la interacción. Me refiero a que decidas qué instrumentos se van a utilizar para los elementos interactivos, y no los utilices en cualquier otra cosa.

¡No! ¡No estás autorizado a utilizar tu marca principal de color para indicar los enlaces, especialmente si vas a utilizar la misma solución para acentuar el contenido importante!

Diseñar para el Contenido

El contenido de cada elemento de diseño ideal lleno de lipsum es lo suficientemente bueno para presentar al cliente una imagen para conseguir una aprobación en el estilo visual. Pero el diseño del contenido no empieza ni termina allí.

Una vez que tengas una idea aproximada de lo que deseas hacer con el diseño del contenido, recuerda que estás trabajando con contenido dinámico. Hay dos casos, debes verificar para cada pieza de contenido:

• ¿Qué pasa si hay demasiado de él?
• ¿Qué pasa si hay demasiado poco (o falta por completo)?

Comprueba lo que sucede si el título es ridículamente corto o inusualmente largo. ¿Cuál debe ser el aspecto de bloque de contenido si faltan elementos fundamentales? ¿Qué pasa si no hay imagen?

Si no hay contenido para la sección de una página, no podemos eliminar la sección completa – título, contenido y todo – o debemos mantener la sección y ver algo así: “¿No hay artículos todavía, vuelva a intentarlo más tarde?” Incluso mejor: “¿Te gustaría ser notificado cuando llegue este contenido? ¡Suscríbase a nuestro boletín de noticias!”

¡Toma las decisiones! Después ¡Diseña aquellas cosas!

Si estás diseñando un feed o contenido cargado desde una fuente externa o dinámica, no te olvides de incluir todos los errores y las notificaciones. De hecho, diseña la página de notificación de contenido meta para mostrar qué aspecto tiene en todo el mundo, y luego adhiérelo con las convenciones de diseño para notificar al usuario en caso de que algo vaya mal.

Evita los botones de ancho fijo, y de altura fija de bloques de texto. Y, si no lo he dicho antes, !Si piensas que siempre va a ser una línea de texto, estás equivocado! Ahora, revisa la mejor manera de hacer multiline.

Asegúrate de que el mismo contenido tenga la misma estructura.

Si el mismo título es visible en varios lugares, !no subrayes una palabra en negrita en un caso y otro en algún otro sitio!

De hecho, intenta evitar las estructuras dentro de los títulos de formato completo. Asimismo, no rompas el texto manualmente en un solo lugar, pero rompelo de manera diferente en otro. ¡No rompas el texto manualmente!

Estas cosas pueden mejorar tu diseño, pero recuerda que es probable que el contenido se resuelva con un CMS y la persona encargada de documentarlo podría no ver qué aspecto tiene hasta que sea publicado, o incluso podría no tener las herramientas para romperlo manualmente, o dar formato al texto.

Diseñalo con las mismas restricciones que el contenido final tendrá – los contenedores de texto de ancho fijo y automático de word-wrap. Si se ve feo de esta forma, el diseño no es bueno.

Diseñando Para La Receptividad

Esto ha progresado mucho últimamente. Al menos en los casos en que es realmente diseñado para movilizarse. Más y más hemos dejado que Bootstrap lo averigüe.

Sin embargo, siempre hay unos pocos principios simples que debes saber.

En primer lugar, las variantes de móviles y de escritorio no son páginas independientes. Yo sé que lo sabes. Son simplemente los reflejos de la misma página.

Sencillamente, es lo mismo que trabajar con texto alineado a la izquierda. La oración no cambia el orden de las palabras o letras sólo porque has colocado un pequeño recipiente.

Asimismo, los grupos de contenido deben ser compartidos entre todos los diseños. Cuando estás agregando columnas, asegúrate de que los saltos de columna sean coherentes.

Además, sus convenciones deberían seguir la misma estructura para las distintas versiones de la página.

Lo que significa que si hay dos elementos idénticos en un escritorio, deben ser idénticos en el móvil también.

Ah, y si quieres parallax, proporciona sutilmente una imagen que sea lo suficientemente grande como para moverse. Si haces encajar o recortar la imagen para que quede derecha sobre el archivo que estás mostrando el cliente, entonces no tengo nada para mover.

Diseñar Excepciones

Por supuesto que las excepciones son siempre posibles. Además, son necesarias para que el producto sea atractivo y eficaz. Sin embargo, no las agregues en el primer cuadro de caja-por-caja.

Si te encuentras resolviendo el mismo problema de diseño una y otra vez y esto no funciona, especialmente si vas por una solución diferente en cada instancia.

Una vez que hayas hecho todo lo anterior, debes conseguir un diseño eficiente, estable y coherente (si algo aburrido). Ahora es el momento de animar un poco las cosas. Mirando una página entera, habla con el cliente para identificar los money shots – los elementos que le dan la mayoría de cambio de tu dinero.

Hemos estado trabajando juntos durante años, y nuestros clientes siempre han quedado satisfechos con el resultado final.

Por supuesto que me voy a asustar si pierdes algunos de estos puntos y cuando se utiliza un diseño complejo está justificado, iré escribiendo acerca de la lógica de representación en JavaScript si es necesario.

Voy a intervenir y justificar el trabajo extra para el cliente si es necesario. He estado diseñando formas e interactividad en la parte superior de diseños recibidos por edades, por lo que este no será un problema.

Sólo espero, que después de haber leído esto puedas mantener algunas de estas sugerencias en mente la próxima vez que trabajemos juntos. Espero que influyan en tu trabajo y que proporcionen orientación cuando no sabes qué hacer. Me gustaría que entiendas que nuestra relación me importa y que no he escrito esto para hacerte daño, sino para hacer que nuestra relación mejore.

Con amor,

Tu desarrollador Front-End