Cuando desarrollas una aplicación o un sitio web, ¿cuánta importancia le da tu equipo al diseño? El éxito de herramientas como Bootstrap (a pesar de sus problemas) es que traen los elementos de la interfaz resueltos: los títulos, párrafos, botones, navegación, listas, etc. Así el equipo de desarrollo puede olvidarse del diseño, personalizar un poco algunas cosas sobre Bootstrap y ya está. En ciertos proyectos esta es una solución elegante y funciona muy bien porque evitamos diseños inconsistentes con poco esfuerzo. Sin embargo, tener un diseño que se parezca a todos no es la estrategia de marca más eficiente (en realidad es la peor). Cada marca posee un logotipo, colores, tipografía y otros estilos que la identifican y todo proyecto que lleve su nombre debe respetarlos. Por ejemplo, el sitio web de una joyería para damas tendrá un estilo muy diferente al de un un restaurante de comida mexicana o a una tienda online de ropa deportiva. Es entonces cuando frameworks o templates preconstruidos dejan de ser útiles y se requiere una guía de estilos (aka sistema de diseño) que es un conjunto de lineamientos y patrones de diseño que deben respetarse en todos los productos.
Una guía de estilos debe contener los siguientes elementos:
Colores y tipografía
Estos son los elementos básicos para construir una marca. Las técnicas para crear una paleta de color o escoger las tipografías adecuadas son muy amplias y escapan de este artículo. Pero ten presente que con los colores correctos y la tipografía adecuada ya tienes lo suficiente para que tu marca sea identificable.
Logotipo
El logotipo de la marca debe tener las variaciones necesarias y los líneamientos de uso. Por ejemplo, ¿cómo usarlo sobre fondo oscuro o sobre fondo claro? ¿Existirá versión monócroma o siempre se respetarán los colores? ¿El isotipo es separable del nombre, en qué casos?
Estos lineamientos ayudan no solo a tu equipo sino a personas externas, por ejemplo, cuando los organizadores de un evento pongan tu logo en afiches o publicidad.
Elementos básicos de UI
Debes empezar diseñando los elementos nativos de la interfaz. Por nativos me refiero a los que vienen en HTML, como tablas, formularios, listas, blockquote, parrafos, enlaces, etc.
Es importante que comiences con los elementos más pequeños y vayas escalando a elementos mayores. Por ejemplo, un párrafo es un elemento indivisible, pero una lista tiene padres e hijos. Una vez que tengas los estilos para los elementos básicos pasamos a los componentes.
Componentes de UI (cards, navegación, modales, etc.)
El siguiente nivel es crear los componentes, que son piezas de la interfaz compuestas por varios elementos y que tienen un uso particular. La principal característica de los componentes es que deben ser reutilizables en diferentes contextos, por lo tanto, no deben depender de su posición. Una tarjeta, por ejemplo, debe funcionar igual si está en un aside, section o footer.
1/* Bien: un componente */ 2.card { 3 /* estilos */ 4} 5 6/* Mal: componentes según posición, codigo repetido, 7estilos inconsistentes, dificil de mantener */ 8.header .card { 9 /* estilos */ 10} 11.footer .card { 12 /* estilos */ 13} 14.sidebar .card { 15 /* estilos */ 16} 17
También toca diseñar todas las variaciones posibles. Por ejemplo, si usas tarjetas para mostrar productos, puede haber una tarjeta normal, una variación para producto con descuento, otra variación para producto nuevo, otra variación para producto relacionado (que sería más pequeña), etc. Partiendo de una sola tarjeta debes diseñar solo las variaciones, no diseñar todo de nuevo para cada caso.
Así es como debes hacerlo:
1/* Código bien hecho, declaras los estilos que se 2repetirán en todas las variaciones y luego defines 3solo los cambios en cada variación */ 4 5.card { 6 /* estilos */ 7} 8 9/* Variación para descuento*/ 10.card--disccount { 11 /* estilos */ 12} 13 14/* Variación para producto relacionado*/ 15.card--related { 16 /* estilos */ 17} 18
Así es como no debes hacerlo:
1/* En este caso repites código y si cambias, 2por ejemplo, el tamaño de fuente en una tarjeta 3debes cambiarlo en la otra para evitar inconsistencias. */ 4 5.card-discount { 6 /* estilos */ 7} 8 9.card-related { 10 /* estilos */ 11} 12
Layout
El layout es cómo organizas todos los componentes en la pantalla. Cuáles van arriba, cuáles van a la derecha, a la izquierda, cuánto se separará uno del otro, etc. Piensa en un arquitecto que tiene un terreno de 200m x 100m y debe poner en él 5 habitaciones con baño, patio, piscina, cocina, sala y oficina. El arquitecto no solo debe hacer que todo encaje en el espacio disponible, sino darle prioridad a la experiencia: los pasillos no deben ser muy angostos, todas las habitaciones deben tener suficiente iluminación natural y ventilación (ventanas) la sala debe ser acogedora y espaciosa para todos, etc. Es lo mismo al diseñar una interfaz: tienes tus botones, tipografías, menus, tarjetas, etc., ahora el reto es que todo se acomode de manera funcional y consistente (en mi experiencia, es una de las partes más difíciles del diseño web, por eso escribí EDgrid para crear layouts consistentes).
Consistencia e identidad
La consistencia es uno de los aspectos más importantes de todo diseño y consiste en que el sistema se vea coherente. Por ejemplo, si en el homepage tienes un botón con colores brillantes y fondo degradado y en la página de productos tus botones tienen colores suaves y sólidos hay inconsistencia (parece que hubieran juntado partes de distintos sitios al azar). La identidad por otro lado implica ser reconocible (identificable). Si creas un nuevo producto, tu público debe identificar que es tuyo, aunque no le pongas tu logotipo. Estos dos conceptos son los que se aseguran construyendo una guía de estilos. Además ten en cuenta que una guía de estilos es un documento vivo que nunca termina de desarrollarse.
Ejemplos de guías de estilos:
También puedes revisar la guía de estilos de EDteam para tener más ejemplos. También puedes usar nuestra guía de estilos en tu proyecto.