A los diseñadores con amor (una carta de un desarrollador front-end)

Estimados diseñadores,

Esta carta se viene gestando desde hace años. Partes de él se han entregado en forma oral y escrita a varios diseñadores durante un largo período de tiempo.

Sin embargo, siempre he tenido miedo de publicarlo por temor a que pudiera implicar al diseñador actual o al cliente con el que estoy trabajando. Entonces, antes de continuar, me gustaría enfatizar que esta no es una queja específica sino una lista detallada de 18 años de desacuerdos.

Hemos trabajado juntos durante casi dos décadas, y cada archivo PSD que me ha enviado ha tenido (más o menos) los mismos problemas. Perdóname entonces por la indecencia de tratar de enseñarte tu trabajo.

No pretendo enseñarte sobre gráficos o estética. No profundizaré en la tipografía, la legibilidad o el uso de espacios en blanco.

En su lugar, me gustaría explicar cómo los frutos de su trabajo informan el mío.

Me gustaría recordarle lo que se requiere para reproducir diseños como páginas web con píxeles perfectos. Me gustaría decirle cómo se utilizarán sus archivos de diseño para la documentación y cómo las imágenes que cree determinan las tecnologías utilizadas, hasta los niveles básicos de escalabilidad y rendimiento.

Además, me gustaría demostrar lo que se puede hacer rápida y fácilmente y lo que generará gastos generales que arrastrarán toda la producción a paso de tortuga.

Y, sobre todo, me gustaría recordarles que la imagen que están creando en este momento se convertirá en un ser vivo que interactúa y responde, que se comunica con miles de personas diferentes, que necesita enseñarles y aprender de ellas. ellos de la manera más fácil posible. Tanto para ella como para ellos.

Diseño para documentación

En primer lugar, me gustaría recordarle que los archivos PSD que está produciendo no solo son la fuente de las imágenes para que el cliente las apruebe, sino que también son documentación técnica y materiales fuente para los desarrolladores. Por lo tanto, mantenga sus capas y grupos ordenados, organizados y nombrados .

Anota tu diseño. Cree un archivo separado con las convenciones que ha usado o anótelos en una capa oculta separada.

Dime qué fuentes has usado para qué. Déjame saber qué colores, espacios y contextos usar. Necesito saber.

También necesito saber qué extrapolar si no se ha realizado ningún diseño para una característica específica.

Supongo que lo que estoy tratando de decir es: si es posible , crea una breve guía de estilo para el producto que estás diseñando.

Por el bien de ambos, al agregar bloques de texto estándar, como títulos, agregue un rectángulo detrás de ellos para indicar el espacio alrededor de ellos. Eso debería permitirle colocarlos constantemente cada vez. Si esto es demasiado trabajo, al menos indique qué ejemplo en el documento es canon.

No puedo decirle con qué frecuencia encuentro que los títulos se colocan a simple vista para que se ajusten visualmente a la única instancia en la que se colocan, pero cuando se miden, revelan que cada uno tiene su propio espacio individual.

Lo mismo ocurre con los bloques de contenido. Si tiene una lista de diferentes bloques de contenido, sepárelos de manera consistente.

Le contaré más en la sección Diseño para contenido , pero no asuma que sus títulos siempre estarán en una línea y use esa información en el archivo.

Sigo encontrándome con estos títulos que tienen un tamaño de fuente de 22 px y una altura de línea de 92 px (obviamente copiar y pegar desde el título de la página principal). La configuración que elija es relevante incluso si no cambia visualmente el archivo exportado.

Diseñando para la tecnología

Hay dos lados en esto: lo que se puede hacer y lo que es apropiado para el medio.

Si bien estamos llegando rápidamente al punto en el que todo será técnicamente posible para el desarrollo de sitios web (al menos, todavía puedo dibujarlo píxel por píxel usando lienzo), muchas de esas soluciones no están listas para la producción.

El hecho de que haya encontrado un ejemplo en el que alguien combinó con éxito WebGL 3D con desenfoque CSS más máscaras de filtro para una página de demostración no significa que pueda usarlo como un panel de paralaje de ventana completa en una aplicación de una sola página.

Y si realmente quiere caminar a la vanguardia, consulte con su desarrollador antes de enviar el diseño para su aprobación. De lo contrario, será difícil que el cliente se conforme con menos.

Sin embargo, si realmente quieres probar los bordes y si quieres probarlo por diversión, contáctame en privado. Me encanta crear cosas así tanto como a ti. Simplemente no pongas esas cosas en un proyecto de producción presupuestado.

Más allá de esas cosas, más allá de probar los límites de lo que se puede hacer, trate de ser sensible y sensato con respecto a lo que se debe hacer .

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

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

Para ir por el cliché familiar para los diseñadores de todo el mundo: ¿De qué sirve una silla hermosa si nadie puede sentarse en ella ?

Debe incorporar velocidad de carga, velocidad de ejecución y facilidad de uso en su diseño para que sea un diseño en lugar de una imagen.

Trate de lograr todo lo posible con solo HTML y CSS. Evite el uso de funciones atractivas que están disponibles en Photoshop. ¡No uses la mezcla! No utilices negrita falsa ni cursiva falsa.

A menos que tenga la intención de que el elemento sea una imagen, no use filtros en absoluto, excepto las sombras más simples.

No me hagas calcular o elegir los colores porque has usado rellenos de colores combinados. Por favor, no falsifique imágenes transparentes usando la combinación de superposición; De hecho, necesito una imagen transparente en el sitio.

Si usamos un marco front-end, como Bootstrap, muchos de estos problemas ya estarán resueltos, así que aprenda cómo se hace y cómo se puede modificar. No se limite a diseñar algo que no esté relacionado.

Si su diseño no está en línea con lo que hace el marco, implementarlo no es implementar el diseño. En cambio, terminamos anulando selectivamente el marco, por lo que no interfiere con nuestro diseño y luego lo implementamos desde cero. La carga de trabajo se duplica en lugar de reducirse a la mitad.

Y finalmente, no use más de tres fuentes, o variantes de fuentes, en el sitio. Si necesita seis grosores diferentes, cada uno con sus propias variantes regulares y cursivas, ya no está diseñando para la web.

Diseño para la interactividad

Este es enorme. Y esta carta fue originalmente escrita exclusivamente para este tema. Realmente debe conocer y comprender todas las formas en que los usuarios y la funcionalidad pueden interactuar.

Comencemos con las cosas más simples: enlaces.

Los enlaces no tienen únicamente dos estados.

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

En otros casos, generalmente proporciona estados base y flotante .

Si desea ser un poco fácil de usar, debe tener diseños distintos para los estados de base, desplazamiento y enfoque ( visitado y activo también son buenos para UX). Y para la navegación, un enlace y un enlace activo tienen todos los estados anteriores .

Ah, y no se atreva a cambiar el diseño de un enlace entre estados (variando el ancho del borde, el relleno y cosas por el estilo).

Del mismo modo, si no parece un botón, no tiene fondo. Período. Rellenar un elemento de texto en línea es un desastre, y los fondos de texto sin relleno nunca servirán.

Dado que vamos a usar esto en dispositivos móviles, asegúrese de que haya suficiente espacio en blanco entre los elementos interactivos separados y que cada hitbox sea lo suficientemente grande. Creo que un mínimo de 42px en cada eje es la norma.

Dibuje un rectángulo invisible o una capa oculta que muestre hitboxes; asegúrese de que no se superpongan y de que las interacciones de los usuarios no sean ambiguas.

Los elementos de forma son aún peores.

El caso más común que veo es con los botones de radio y las casillas de verificación. ¡Los estándar son feos! Por lo tanto, diseñe el suyo propio, déme un estado marcado y uno no marcado, y considérese terminado.

Sin embargo, existe una tabla multidimensional completa de estados para una casilla de verificación, y cada uno debe indicarse visualmente al usuario.

Tenemos los siguientes estados:

• Marcado o no marcado
• Desplazarse o no
• Concéntrate o no
• Habilitado o deshabilitado
• error o no

Cada uno de ellos puede combinarse con los demás.

Deshabilitado evita algunas combinaciones (el desplazamiento y el enfoque suelen ser irrelevantes cuando están deshabilitados), pero no todas (marcado-deshabilitado-error es un estado perfectamente válido e informativo para una casilla de verificación). Entonces terminamos con 16 estados habilitados y cuatro deshabilitados, dando un total de al menos 20 estados distintos. Por ejemplo, los estados que normalmente me da son marcado-no-no-habilitado-no y desmarcado-no-no-habilitado-no en esa configuración.

Es posible que otros elementos de formulario no tengan un estado marcado o no marcado, pero pueden estar vacíos o no vacíos (mostrando texto de marcador de posición). También pueden tener un estado informativo más complejo, de modo que el caso de error o no puede ser tan complejo como el éxito de error de advertencia neutral.

Luego, además de eso, debe tener indicadores obligatorios u opcionales junto con un diseño y diseño claramente definidos para etiquetas, ayuda de entrada y texto de error.

Y, si realmente desea que sea fácil de usar, necesita estados prístinos-establecidos-sucios, que indiquen que el usuario nunca proporcionó los datos, o que los datos ya están almacenados, o que se modificaron pero aún no se almacenaron.

Lo que digo es: diseñar para la interactividad es difícil. Y si desea cambiar el aspecto de los botones de radio, no lo haga de manera fácil con dos estados.

Solo un punto final sobre el diseño para la interactividad: decida cómo se ve la interacción. Es decir, decida qué convenciones usará para los elementos interactivos y no las use en nada más.

No, no puede usar el color principal de su marca para indicar enlaces, ¡especialmente si usará la misma solución para acentuar contenido importante!

Diseño para contenido

El diseño ideal de cada elemento lleno de contenido de labios es lo suficientemente bueno para presentar al cliente una imagen para obtener una aprobación del estilo visual. Pero el diseño de contenidos ni empieza ni acaba ahí.

Una vez que tenga una idea aproximada de lo que quiere hacer con el diseño del contenido, recuerde que está trabajando con contenido dinámico. Hay dos casos que debe verificar para cada pieza de contenido:

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

Compruebe qué sucede si el título es ridículamente corto o inusualmente largo. ¿Cómo debería verse el bloque de contenido si faltan elementos cruciales? ¿Qué pasa si no hay imagen?

Si no hay contenido para una sección de la página, ¿eliminamos toda la sección (título, contenedor y todo) o mantenemos la sección y mostramos algo como: "Todavía no hay artículos, vuelva a consultar más tarde?" Aún mejor: “¿Te gustaría recibir una notificación cuando llegue este contenido? ¡Suscríbete a nuestro boletín!”

¡Toma las decisiones! ¡ Entonces diseña esas cosas!

Si está diseñando un feed o contenido cargado desde una fuente externa o dinámica, no olvide incluir todos los errores y notificaciones. De hecho, diseñe el metacontenido de notificación de la página para mostrar cómo se ve globalmente, luego siga esas convenciones de diseño para notificar al usuario en caso de que algo salga mal.

Evite los botones de ancho fijo y los bloques de texto de altura fija. Y, si no lo he dicho antes, si crees que siempre va a ser una línea de texto, ¡estás equivocado! Ahora, ve a ver la mejor manera de hacerlo multilínea.

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

Si el mismo título está visible en varios lugares, ¡no ponga en negrita una palabra en un caso y otra en otro lugar!

De hecho, trate de evitar por completo las estructuras de formato dentro de los títulos. Del mismo modo, no divida el texto manualmente en un lugar, sino que lo divida de manera diferente en otro. De hecho, ¡no rompa manualmente el texto!

Estas cosas pueden mejorar su diseño, pero recuerde que lo más probable es que el contenido se ingrese a través de un CMS, y es posible que la persona que lo ingresa no vea cómo se ve hasta que se publique, o que ni siquiera tenga las herramientas para romper manualmente, o dar formato al texto.

Diseñe con las mismas restricciones que tendrá el contenido final: contenedores de texto de ancho fijo y ajuste de línea automático. Si se ve feo de esa manera, el diseño no es bueno.

Diseño para la capacidad de respuesta

Esto ha progresado mucho recientemente. Al menos en aquellos casos en los que realmente se diseña móvil. Cada vez más, dejamos que Bootstrap lo resuelva y colocamos curitas en las grietas.

Independientemente, hay algunos principios simples que debe conocer.

Primero, las variantes móvil y de escritorio no son páginas separadas. Yo se que tu sabes esto. Son simplemente reflujos de la misma página.

En pocas palabras, es lo mismo que trabajar con texto alineado a la izquierda. La oración no cambia el orden de las palabras o las letras solo porque la haya colocado en un recipiente más pequeño.

Además, los grupos de contenido deben compartirse en todos los diseños. Cuando agregue columnas, asegúrese de que los saltos de columna sean consistentes.

Además, sus convenciones deben seguir la misma estructura para diferentes versiones de la página. Lo que significa que, si dos elementos se ven idénticos en una computadora de escritorio, también deberían ser idénticos en un dispositivo móvil.

Ah, y si desea paralaje, proporcione una imagen que sea lo suficientemente grande como para moverse. Si encaja o recorta la imagen para que se vea bien en el archivo que le está mostrando al cliente, entonces no tengo nada que mover.

Diseño de excepciones

Por supuesto, las excepciones siempre son posibles. Además, son necesarios para que el producto se vea atractivo y efectivo. Sin embargo, no los agregue en el primer paso caja por caja.

Si se encuentra resolviendo el mismo problema de diseño una y otra vez, esto no funcionará, especialmente si busca una solución diferente en cada instancia.

Una vez que haya hecho todo lo anterior, debería obtener un diseño eficiente, estable y consistente (aunque algo aburrido). Ahora es el momento de darle vida a las cosas. Mirando una página como un todo, hable con el cliente para identificar los tiros de dinero, los artículos que le darán el mayor rendimiento por su dinero.

Llevamos años trabajando juntos y nuestros clientes siempre han quedado satisfechos con el resultado final.

Por supuesto, participaré si se olvida de algunos de estos puntos, y cuando se justifique el uso de un diseño complejo, escribiré la lógica de representación en JavaScript si es necesario.

Intervendré y justificaré el trabajo extra al cliente si es necesario. Diablos, he estado diseñando formularios e interactividad además de los diseños recibidos durante mucho tiempo, por lo que esto no será un problema.

Solo espero que, después de leer esto, tenga en cuenta algunos de estos consejos la próxima vez que trabajemos juntos. Espero que sirvan de base para su trabajo y le brinden orientación cuando no sepa qué hacer. Quiero que entiendas que nuestra relación me importa y que no he escrito esto para lastimarte, sino para mejorar nuestra relación.

Con amor,

Su desarrollador front-end