Las Diez Mejores Reglas 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 competentes en el diseño es un componente importante de esto. Desafortunadamente, entender realmente el diseño de Front-End es más fácil a la hora de decirlo que hacerlo.

La codificación y el diseño estético requieren algunos conjuntos de habilidades bastante diferentes. Debido a esto, algunos desarrolladores Front-End no son tan proficientes en el aspecto de diseño como deberían ser y como resultado, su trabajo sufre.

Mi objetivo es darte algunas reglas y conceptos fáciles de seguir, desde un desarrollador Front-End a otro, que te ayudará a ir desde el inicio hasta el final de un proyecto sin estropear lo que tus diseñadores trabajaron tan duro (o posiblemente incluso permitirte diseñar tus propios proyectos con resultados decentes).

Por supuesto, estas reglas no te llevarán de malo a magnífico en el tiempo que toma para leer un artículo, pero si aplicas su trabajo, debe de hacer una gran diferencia.

Haz Las Cosas En El Programa De Gráficas

Es realmente raro que termines un proyecto y que vayas de principio a fin mientras que mantienes cada mutación estética única en los archivos del diseño. Por desgracia, los diseñadores no están siempre cerca de ejecutar una solución rápida.

Por lo tanto, siempre viene un punto en cualquier trabajo de Front-End donde terminas teniendo que hacer algunos ajustes estéticos relacionados. Ya sea que trates de hacer la marca de verificación que muestra cuando se marca la casilla de verificación, o que hagas un diseño de página que el PSD perdió, Front-Enders a menudo terminan haciendo el manejo de estas tareas aparentemente secundarias. Naturalmente, en un mundo perfecto esto no sería el caso, pero todavía tengo que encontrar un mundo perfecto, por consiguiente necesitamos ser flexibles.

Para estas situaciones, siempre debes utilizar un programa de gráficos para los Mockups. No me importa qué herramienta escojas: Photoshop, Illustrator, Fireworks, GIMP, lo que sea. Solo no intentes diseñar de tu propio código. Pasa un minuto lanzando un verdadero programa de gráficos y averigua cómo debería verse, luego ve al código y haz que suceda. Es posible que no seas un diseñador experto pero aún así obtendrás mejores resultados.

Iguala El Diseño, No Intentes Superarlo

Tu trabajo no es impresionar con lo único que es tu marca de verificación; tu trabajo es que coincida con el resto del diseño.

Aquellos sin mucha experiencia de diseño pueden fácilmente ser tentados a dejar tu marca en el proyecto con detalles aparentemente menores. Por favor, déjale eso a los diseñadores.

En lugar de preguntar “¿Mi marca de verificación se ve increíble?” Debes preguntarte, “¿Qué tanto mi marca de verificación coincide con el diseño?”

Tu enfoque debe estar siempre 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. Estarías tan sorprendido al saber cuánto tiempo los diseñadores gastan en él. Esto no es un esfuerzo de “recoge y listo”; requiere algo de tiempo y esfuerzo en serio.

Si terminas en una situación en la que realmente tienes que elegir la tipografía, debes pasar una cantidad decente de tiempo haciéndolo. Ve en línea e investiga buenos emparejamientos de fuentes. Pasar unas horas tratando esas fuentes y asegúrate de que terminen con la mejor tipografía para el proyecto.

Si estás trabajando con un diseño, asegúrate de seguir las opciones de tipografía del diseñador. Esto no sólo significa elegir la fuente. Presta atención al espaciado de línea, espaciado entre letras, etc. No hay que olvidar lo importante que es coincidir con la tipografía del diseño.

Además, asegúrate de utilizar las fuentes correctas en el lugar correcto. Si el diseñador utiliza Georgia sólo para los encabezados y Open Sans para el cuerpo, entonces no debería utilizar Georgia para el cuerpo y Open Sans para los encabezados. La tipografía puede hacer o romper la estética fácilmente. Pasa suficiente tiempo asegurándote que coincida con la tipografía de tu diseñador. Será tiempo bien invertido.

El Diseño De Front-End No Tolera La “Visión Túnel”

Es probable que estés haciendo pequeñas partes del diseño general.

Un ejemplo que he estado haciendo es señalizar la marca de un diseño que incluye casillas de verificación personalizadas, sin mostrarlas marcadas. Es importante recordar que las piezas que estás haciendo son pequeñas partes de un diseño general. Haz tus cheques tan importantes como una marca de verificación en una página de buscar, ni más ni menos. No obtengas visión de túnel sobre tu pequeña parte y haz 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 el diseño dentro de él, en el contexto en el que se utilizará. De esa manera, realmente verás cómo afecta a otros elementos de diseño en la página y si se ajusta a su función correctamente.

Relaciones Y Jerarquía

Presta especial atención a cómo funciona el diseño con jerarquía. ¿Qué tan cerca están los títulos del cuerpo del texto? ¿Cuán lejos están del texto sobre ellos? ¿Cómo parece que el diseñador está indicando qué elementos / títulos / cuerpos de texto están relacionados y cuáles no? Comúnmente harán estas cosas al encadenar contenido que se relaciona junto, usando espacio en blanco para indicar relaciones entre variables, usando colores similares o contrastantes para indicar contenido relacionado / no relacionado, y así sucesivamente.

Es tu trabajo asegurarte de que reconozcas las maneras en que el diseño cumple las relaciones y la jerarquía y también asegurarte de que esos conceptos se reflejan en el producto final (incluso para contenido que no fue diseñado específicamente y / o contenido dinámico). Esta es otra área (como la tipografía) donde vale la pena tomar tiempo extra para asegurarte de que estás haciendo un buen trabajo.

Se Exigente Sobre El Espacio En Blanco Y La Alineación

Esto es excelente para mejorar tus diseños y / o mejorar la ejecución de los diseños de otros: si el diseño parece utilizar espaciamientos de 20 unidades, 40 unidades, etc., después asegúrate de que cada espaciamiento sea un múltiplo de 20 unidades.

Esta es una forma sencilla para que alguien sin ojo para la estética haga una mejora significativa rápidamente. Asegúrate de que tus elementos están alineados hasta el píxel y que el espaciamiento alrededor de cada borde de cada elemento sea lo más uniforme posible. Donde no puedas hacer eso (como en lugares donde necesitas espacio adicional para indicar la jerarquía), haz que sean múltiplos exactos del espaciado que estás usando en otro lugar, por ejemplo dos veces tu predeterminado para crear una separación, tres veces para crear más , y así.

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

Haz lo mejor para entender cómo el diseñador utilizó el espacio en blanco y seguir esos conceptos en su estructura. Y sí, invierte mucho tiempo en esto. Una vez que pienses que tu trabajo está hecho, retrocede y mide el espaciamiento para asegurarte de que ha alineado y se ha espaciado todo lo posible, luego prueba el código con un montón de contenido variado para asegurarse de que es flexible.

Si No Sabes Lo Que Estás Haciendo, Haz Menos

No soy una de esas personas que piensan que cada proyecto debe usar diseño minimalista, pero si no estás seguro de tu diseño y tienes que añadir algo, entonces menos es más.

El diseñador se encargó de las cosas principales; tú solo necesitas encargarte de asuntos menores. Si no eres muy bueno en el diseño, entonces lo mejor es hacer la cantidad mínima que puedas para que ese elemento funcione. De esta manera, estás inyectando menos de tu propio diseño en el trabajo del diseñador y afectándolo lo menos posible.

Deja que el trabajo del diseñador tome el centro del escenario y deje tu trabajo tomar el asiento trasero.

El Tiempo Se Burla de Nosotros

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

Descartan mucho más de lo que nunca han visto. A menudo toma muchas revisiones y juguetean con un diseño para llegar hasta el punto en el que incluso han dejado que el tipo en el cubículo siguiente vea su trabajo, no importa el cliente real. Tu no vas generalmente de un lienzo en blanco al buen diseño en un paso; hay un montón de iteraciones en el medio. Las personas rara vez hacen un buen trabajo hasta que entienden esto lo permiten en su proceso.

Entonces, ¿cómo implementas esto? Un método importante es tomar tiempo entre versiones. Trabaja hasta que se vea como algo que te gusta y luego guardarlo. Dale unas cuantas horas (dejarlo en la noche es aún mejor), luego ábrelo de nuevo y echa un vistazo. Te sorprenderás de lo diferente que se ve con los ojos frescos. Rápidamente selecciona áreas para mejorar. Serán tan claras que te preguntarás cómo no las viste en primer lugar.

De hecho, uno de los mejores diseñadores que he conocido toma esta idea mucho más lejos. Comenzaría haciendo tres diseños diferentes. Luego, esperaría al menos 24 horas, los miraría de nuevo y los tiraría a todos y empezaría desde cero en un cuarto. A continuación, permitiría un día entre cada iteración a medida que fuera mejor y mejor. Sólo cuando lo abrió una mañana, y fue totalmente feliz, o al menos, tan cerca como un diseñador llega a ser totalmente feliz, lo enviaría al cliente. Este fue el proceso que utilizó para cada diseño que hizo y le sirvió muy bien.

No espero que lo lleves así de lejos, pero si destaca qué tan útil es 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 Pixeles Importan

Debes hacer todo lo que esté en tu poder para que coincida con el diseño original en tu programa terminado, hasta el último píxel.

En algunas áreas no puedes ser perfecto. Por ejemplo, tu control sobre el espaciado de las letras podría no ser tan preciso como el del diseñador, y una sombra CSS podría no coincidir exactamente con una de Photoshop, pero todavía debes tratar de acercarte lo más posible. Para muchos aspectos del diseño, realmente puedes obtener una precisión perfecta en píxeles. Hacerlo puede hacer una gran diferencia en el resultado final. Un píxel de aquí y de allá no parece mucho, pero se suma y afecta a la estética en general mucho más de lo que pensaría. Así que mantente alerta de esto.

Hay un número de herramientas que te ayudan a comparar los diseños originales con los resultados finales, o simplemente puedes tomar capturas de pantalla y pegarlas en el archivo de diseño para comparar cada elemento lo más cerca posible. Simplemente coloca la captura de pantalla sobre el diseño y haz que sea semi-transparente para que puedas ver las diferencias. Entonces sabrás cuánto ajuste tienes que hacer que luzca excelente.

Obtén Comentarios

Es difícil ganar un “ojo para el diseño”. Es aún más difícil hacerlo por tu cuenta. Debes buscar el punto de vista de otros para ver realmente cómo puedes hacer mejoras.

No estoy sugiriendo que le pidas consejos a tu vecino, quiero decir que debes consultar a los diseñadores de verdad y dejarles criticar tu trabajo y ofrecerles sugerencias.

uede sonar como que si quita mucho tiempo y que puede causar fricción entre tu y tus diseñadores, pero vale la pena. Los buenos desarrolladores Front-End se basan en valiosos aportes de los diseñadores, incluso cuando no es algo que les gusta escuchar.

Por lo tanto, es vital para construir y mantener una relación constructiva con tus diseñadores. Todos ustedes están en el mismo barco, así que para obtener los mejores resultados posibles deben de colaborar y comunicarse en cada paso del camino. La inversión en la construcción de bonos con tus diseñadores vale la pena, ya que ayudará a todos a hacer un mejor trabajo y ejecutar todo a tiempo.

Conclusión

Para resumir, he aquí una breve lista de consejos de diseño para los desarrolladores Front-End:

• Diseña en un programa de gráficos. No diseñes desde el código, ni siquiera las cosas pequeñas.
• Coincide con el diseño. Se consciente del diseño original y no trates de mejorarlo, solo igualarlo.
• La tipografía es enorme. El tiempo que pasas asegurándose de que es correcta debe reflejar su importancia.
• Evita la visión de túnel. Asegúrate de que sus adiciones se destacan como deberían. No son más importantes sólo porque los diseñaste.
• Relaciones y jerarquía: comprende cómo funcionan en el diseño para que puedas implementarlos correctamente.
• El espacio en blanco y la alineación son importantes. Hazlos precisos para el píxel y hacerlos de manera uniforme en todo lo que agregues.
• Si tu no está confiado en tus habilidades, después haz las adiciones tan mínimamente diseñadas como puedas.
• Tómate el tiempo entre las revisiones. Vuelve más tarde para ver tu trabajo de diseño con los ojos frescos.
• La implementación perfecta de píxeles es importante siempre que sea posible.
• Sé valiente. Busca a diseñadores experimentados para criticar tu trabajo.

No todos los desarrolladores Front-End van a ser un diseñador fantástico, pero cada desarrollador de Front-End debe ser al menos competitivo en términos de diseño.

Necesitas entender lo suficiente acerca de los conceptos de diseño para identificar lo que está pasando y para aplicar correctamente el diseño a tu producto final. A veces, puedes escapar con copias ciegas si tienes un diseñador completo (y si es lo suficientemente detallado como para copiarlo en píxel).

Sin embargo, con el fin de hacer brillar grandes proyectos a través de muchas variaciones de contenido, necesitas cierta comprensión de lo que está pasando por la cabeza del diseñador. No sólo necesitas ver cómo se ve el diseño, sino que debe saber por qué se ve así y de esa manera puedes estar atento a las limitaciones técnicas y estéticas que afectarán tu trabajo.

Así, incluso como desarrollador de Front-End, parte de tu auto-mejora regular debe incluir siempre aprender más sobre el diseño.

Artículo Vía Toptal