Las diez reglas principales de diseño front-end para desarrolladores

Como desarrolladores front-end, nuestro trabajo es, esencialmente, convertir los diseños en realidad a través del código. Comprender y ser competente en el diseño es un componente importante de eso. Desafortunadamente, entender verdaderamente el diseño de front-end es más fácil decirlo que hacerlo. La codificación y el diseño estético requieren algunos conjuntos de habilidades bastante diferentes. Debido a eso, algunos desarrolladores front-end no son tan competentes en el aspecto del diseño como deberían y, como resultado, su trabajo se ve afectado.

Mi objetivo es brindarle algunas reglas y conceptos fáciles de seguir, de un desarrollador front-end a otro, que lo ayudarán a ir de principio a fin de un proyecto sin estropear lo que sus diseñadores trabajaron tan duro (o posiblemente permitiéndote incluso diseñar tus propios proyectos con resultados decentes).

Por supuesto, estas reglas no lo llevarán de malo a magnífico en el tiempo que toma leer un artículo, pero si las aplica a su trabajo, deberían hacer una gran diferencia.

Hacer cosas en un programa de gráficos

Es realmente raro que complete un proyecto y vaya de principio a fin manteniendo cada mutación estética en los archivos de diseño. Y, desafortunadamente, los diseñadores no siempre están disponibles para buscar una solución rápida.

Por lo tanto, siempre llega un punto en cualquier trabajo de front-end en el que terminas teniendo que hacer algunos ajustes relacionados con la estética. Ya sea haciendo la marca de verificación que se muestra cuando marca la casilla de verificación, o haciendo un diseño de página que el PSD omitió, los front-end a menudo terminan manejando estas tareas aparentemente menores. Naturalmente, en un mundo perfecto este no sería el caso, pero todavía tengo que encontrar un mundo perfecto, por lo que debemos ser flexibles.

Para estas situaciones, siempre debes usar un programa de gráficos para maquetas. No me importa qué herramienta elijas: Photoshop, Illustrator, Fireworks, GIMP, lo que sea. Simplemente no intente diseñar a partir de su código. Dedique un minuto a iniciar un programa de gráficos real y averiguar cómo debería verse, luego vaya al código y hágalo realidad. Puede que no seas un diseñador experto, pero aun así obtendrás mejores resultados.

Haga coincidir el diseño, no intente vencerlo

Su trabajo no es impresionar con lo única que es su marca de verificación; su trabajo es hacerlo coincidir con el resto del diseño.

Quienes no tienen mucha experiencia en diseño pueden caer fácilmente en la tentación de dejar su huella en el proyecto con detalles aparentemente menores. Por favor, deje eso a los diseñadores.

En lugar de preguntar "¿Mi marca de verificación se ve increíble?" debería preguntarse: "¿Qué tan bien coincide mi marca de verificación con el diseño?"

Su enfoque siempre debe estar en trabajar con el diseño, no en tratar de superarlo.

La tipografía hace toda la diferencia

Te sorprendería saber cuánto del aspecto final de un diseño está influenciado por la tipografía. Te sorprendería saber cuánto tiempo dedican los diseñadores a ello. Este no es un esfuerzo de "pick-it-and-go", se requiere mucho tiempo y esfuerzo.

Si termina en una situación en la que realmente tiene que elegir la tipografía, debe dedicar una buena cantidad de tiempo a hacerlo. Vaya en línea e investigue buenas combinaciones de fuentes. Pasa algunas horas probando esas combinaciones y asegurándote de terminar con la mejor tipografía para el proyecto.

Si está trabajando con un diseño, asegúrese de seguir las opciones de tipografía del diseñador. Esto no significa solo elegir la fuente, tampoco. Preste atención al espacio entre líneas, entre letras, etc. No pase por alto lo importante que es hacer coincidir la tipografía del diseño.

Además, asegúrese de usar las fuentes correctas en el lugar correcto. Si el diseñador usa Georgia solo para los encabezados y Open Sans para el cuerpo, entonces no debería usar Georgia para el cuerpo y Open Sans para los encabezados. La tipografía puede hacer o deshacer la estética fácilmente. Dedique suficiente tiempo a asegurarse de que coincida con la tipografía de su diseñador. Será un tiempo bien empleado.

El diseño frontal no tolera la visión de túnel

Probablemente estará haciendo pequeñas partes del diseño general.

Un ejemplo con el que he estado yendo es hacer la marca de verificación para un diseño que incluye casillas de verificación personalizadas, sin mostrarlas marcadas. Es importante recordar que las partes que está haciendo son partes pequeñas de un diseño general. Haga que sus cheques sean tan importantes como debe ser una marca de verificación en una página, ni más ni menos. No tengas una visión de túnel sobre tu pequeña parte y conviértela en algo que no debería ser.

De hecho, una buena técnica para hacer esto es tomar una captura de pantalla del programa hasta el momento, o de los archivos de diseño, y diseñar dentro de él, en el contexto en el que se utilizará. De esa manera, realmente verá cómo afecta a otros elementos de diseño en la página y si cumple su función correctamente.

Relaciones y jerarquía

Preste especial atención a cómo funciona el diseño con la jerarquía. ¿Qué tan cerca están los títulos del cuerpo del texto? ¿Qué tan lejos están del texto sobre ellos? ¿Cómo parece indicar el diseñador qué elementos/títulos/cuerpos de texto están relacionados y cuáles no? Por lo general, hacen estas cosas agrupando el contenido relacionado, usando espacios en blanco variables para indicar relaciones, usando colores similares o contrastantes para indicar contenido relacionado/no relacionado, y así sucesivamente.

Es su trabajo asegurarse de reconocer las formas en que el diseño logra las relaciones y la jerarquía y asegurarse de que esos conceptos se reflejen en el producto final (incluido el contenido que no fue diseñado específicamente y/o el contenido dinámico). Esta es otra área (como la tipografía) donde vale la pena tomarse un tiempo adicional para asegurarse de que está haciendo un buen trabajo.

Sea exigente con los espacios en blanco y la alineación

Este es un gran consejo para mejorar sus diseños y/o implementar mejor los diseños de otros: si el diseño parece usar espacios de 20 unidades, 40 unidades, etc., asegúrese de que cada espacio sea un múltiplo de 20 unidades.

Esta es una forma realmente simple para que alguien sin ojo para la estética haga una mejora significativa rápidamente. Asegúrese de que sus elementos estén alineados hasta el píxel y que el espacio alrededor de cada borde de cada elemento sea lo más uniforme posible. Donde no pueda hacer eso (como lugares donde necesita espacio adicional para indicar la jerarquía), hágalos múltiplos exactos del espacio que está usando en otro lugar, por ejemplo, dos veces el valor predeterminado para crear alguna separación, tres veces para crear más , y así.

Muchos desarrolladores logran esto para contenido específico en los archivos de diseño, pero cuando se trata de agregar/editar contenido o implementar contenido dinámico, el espacio puede ir por todas partes porque realmente no entendieron lo que estaban implementando.

Haz tu mejor esfuerzo para comprender cómo el diseñador usó los espacios en blanco y sigue esos conceptos en tu compilación. Y sí, dedica tiempo a esto. Una vez que crea que su trabajo está terminado, regrese y mida el espacio para asegurarse de que haya alineado y espaciado uniformemente todo tanto como sea posible, luego pruebe el código con mucho contenido variable para asegurarse de que sea flexible .

Si no sabes lo que haces, haz menos

No soy una de esas personas que piensa que todos los proyectos deben usar un diseño minimalista, pero si no está seguro de sus habilidades de diseño y necesita agregar algo, entonces menos es más.

El diseñador se encargó de las cosas principales; solo necesita hacer rellenos menores. Si no eres muy bueno en el diseño, entonces una buena apuesta es hacer la mínima cantidad posible para que ese elemento funcione. De esa manera, está inyectando menos de su propio diseño en el trabajo del diseñador y afectándolo lo menos posible.

Deje que el trabajo del diseñador ocupe el centro del escenario y deje que su trabajo ocupe el asiento trasero.

El tiempo nos engaña a todos

Te diré un secreto sobre los diseñadores: el 90 por ciento (o más) de lo que realmente ponen en papel, o en un lienzo de Photoshop, no es tan bueno.

Descartan mucho más de lo que nunca ves. A menudo se necesitan muchas revisiones y retoques con un diseño para llegar al punto en que incluso dejen que el tipo en el cubículo de al lado vea su trabajo, sin importar el cliente real. Por lo general, no se pasa de un lienzo en blanco a un buen diseño en un solo paso; hay un montón de iteraciones en el medio. Las personas rara vez hacen un buen trabajo hasta que lo entienden y lo permiten en su proceso.

Entonces, ¿cómo implementar esto? Un método importante es tomarse un tiempo entre versiones. Trabaje hasta que se vea como algo que le guste y luego guárdelo. Dale unas cuantas horas (déjalo toda la noche es incluso mejor), luego ábrelo de nuevo y échale un vistazo. Te sorprenderá lo diferente que se ve con ojos nuevos. Rápidamente seleccionará áreas para mejorar. Serán tan claros que te preguntarás cómo es posible que no los hayas visto en primer lugar.

De hecho, uno de los mejores diseñadores que he conocido lleva esta idea mucho más allá. Comenzaría haciendo tres diseños diferentes. Luego, esperaba al menos 24 horas, los miraba de nuevo y los tiraba a la basura y comenzaba de cero con un cuarto. A continuación, permitiría un día entre cada iteración a medida que mejorara más y más. Solo cuando lo abrió una mañana y estaba totalmente feliz, o al menos, lo más cerca que un diseñador puede llegar a estar totalmente feliz, se lo enviaría al cliente. Este fue el proceso que usó para cada diseño que hizo, y le sirvió muy bien.

No espero que lo lleve tan lejos, pero resalta lo útil que puede ser el tiempo sin "ojos en el diseño". Es una parte integral del proceso de diseño y puede hacer mejoras a pasos agigantados.

Los píxeles importan

Debe hacer todo lo que esté a su alcance para que coincida con el diseño original en su programa terminado, hasta el último píxel.

En algunas áreas no puedes ser perfecto. Por ejemplo, su control sobre el espaciado entre letras puede no ser tan preciso como el del diseñador, y una sombra de CSS puede no coincidir exactamente con una de Photoshop, pero aun así debe intentar acercarse lo más posible. Para muchos aspectos del diseño, realmente puede obtener una precisión de píxel perfecta. Si lo hace, puede hacer una gran diferencia en el resultado final. Un píxel aquí y allá no parece mucho, pero suma y afecta la estética general mucho más de lo que piensas. Así que mantente atento.

Hay una serie de [herramientas] que lo ayudan a comparar los diseños originales con los resultados finales, o simplemente puede tomar capturas de pantalla y pegarlas en el archivo de diseño para comparar cada elemento lo más cerca posible. Simplemente coloque la captura de pantalla sobre el diseño y hágalo semitransparente para que pueda ver las diferencias. Entonces sabrás cuánto ajuste tienes que hacer para acertar.

Obtener comentarios

Es difícil obtener un "ojo para el diseño". Es aún más difícil hacerlo por su cuenta. Debe buscar la opinión de los demás para ver realmente cómo puede hacer mejoras.

No estoy sugiriendo que tomes a tu vecino y le pidas consejo, quiero decir que deberías consultar a diseñadores reales y dejar que critiquen tu trabajo y te ofrezcan sugerencias.

Se necesita algo de valentía para hacerlo, pero al final es una de las cosas más poderosas que puede hacer para mejorar el proyecto a corto plazo y mejorar su nivel de habilidad a largo plazo.

Incluso si todo lo que tiene que ajustar es una simple marca de verificación, hay muchas personas dispuestas a ayudarlo. Ya sea un amigo diseñador o un foro en línea, busque personas calificadas y obtenga sus comentarios.

Puede sonar lento y puede causar fricciones entre usted y sus diseñadores, pero en el esquema general de las cosas, vale la pena. Los buenos desarrolladores front-end confían en los valiosos aportes de los diseñadores, incluso cuando no es algo que les guste escuchar.

Por lo tanto, es vital construir y mantener una relación constructiva con sus diseñadores. Todos están en el mismo barco, por lo que para obtener los mejores resultados posibles, debe colaborar y comunicarse en cada paso del camino. La inversión en construir lazos con sus diseñadores bien vale la pena, ya que ayudará a que todos hagan un mejor trabajo y ejecuten todo a tiempo.

Conclusión

Para resumir, aquí hay una breve lista de consejos de diseño para desarrolladores front-end:

• Diseño en un programa de gráficos. No diseñes a partir del código, ni siquiera las cosas pequeñas.
• Combina el diseño. Sea consciente del diseño original y no intente mejorarlo, simplemente combínelo.
• La tipografía es enorme. El tiempo que dedique a asegurarse de que sea correcto debe reflejar su importancia.
• Evita la visión de túnel. Asegúrese de que sus adiciones se destaquen tanto como deberían. No son más importantes solo porque tú los diseñaste.
• Relaciones y jerarquía: Comprenda cómo funcionan en el diseño para que pueda implementarlas correctamente.
• Los espacios en blanco y la alineación son importantes. Hágalos precisos al píxel y hágalos uniformemente en todo lo que agregue.
• Si no está seguro de sus habilidades, haga sus adiciones con el estilo mínimo que pueda.
• Tómese un tiempo entre las revisiones. Vuelve más tarde para ver tu trabajo de diseño con nuevos ojos.
• La implementación de píxeles perfectos es importante siempre que sea posible.
• Sé valiente. Busque diseñadores experimentados para criticar su trabajo.

No todos los desarrolladores front-end van a ser diseñadores fantásticos, pero todos los desarrolladores front-end deberían al menos ser competentes en términos de diseño.

Debe comprender lo suficiente sobre los conceptos de diseño para identificar lo que está sucediendo y aplicar correctamente el diseño a su producto final. A veces, puede salirse con la suya con la copia oculta si tiene un diseñador minucioso (y si está lo suficientemente orientado a los detalles como para copiarlo realmente píxel por píxel).

Sin embargo, para que los proyectos grandes brillen en muchas variaciones de contenido, es necesario comprender lo que pasa por la cabeza del diseñador. No solo necesita ver cómo se ve el diseño, necesita saber por qué se ve de esa manera , y de esa manera puede tener en cuenta las limitaciones técnicas y estéticas que afectarán su trabajo.

Por lo tanto, incluso como desarrollador front-end, parte de su superación personal regular siempre debe incluir aprender más sobre diseño.