En este episodio de Coder-Box les vamos a mostrar la segunda parte del proceso de diseño de nuestra web app, esta vez enfocado en el desarrollo UI.

Antes de arrancar, repasemos hasta dónde llegamos en el vivo anterior. En el primer episodio sobre diseño hablamos en profundidad sobre todo lo referido al proceso de UX. Hicimos un breve pantallazo por el research de usuarios, el briefing inicial del proyecto y la definición de los objetivos y funcionalidades. También mostramos los wireframes que le dieron la estructura básica a Coder-Box y terminamos revisando todos los detalles relacionados con la experiencia que los usuarios tienen al navegar dentro del sitio.

Ahora nos vamos a enfocar en pulir pixeles, es decir, vamos a hilar fino en el diseño de cada pantalla con sus correspondientes estilos y componentes.

¿Cómo empezar con el proceso de UI?

Cómo en todos los aspectos de la vida, no hay una única respuesta a esta pregunta, pero armamos una serie de pasos en base a la experiencia de Coder-Box, para que puedan tener una guía de las distintas decisiones que se toman al pensar el diseño UI desde cero. Pueden expandir o modificar este proceso a gusto según las necesidades del proyecto que estén desarrollando.

Paso 1: Crear un Moodboard

El primer paso es buscar referencias visuales que nos puedan ayudar a concretar el estilo que estamos queriendo construir. Como siempre decimos, nadie diseña nada desde cero, y tener una herramienta que nos permita organizar las referencias que encontramos puede agilizar todo el proceso.

Los moodboard son tableros visuales donde volcamos los resultados de nuestra búsqueda. Son muy útiles porque:

• Nos permiten ver todas las referencias de un pantallazo.
• Son muy fáciles de armar (pueden usar Figma para esto).
• Podemos escribir sobre ellos todos los comentarios que necesitemos para analizar qué es exactamente lo que nos parece relevante de cada referencia.
• Siempre podemos volver a verlos si al momento de definir los estilos, no estamos convencidos de algún elemento y necesitamos más inspiración.

Algunos lugares donde pueden buscar referencias de buena calidad son:

• Pinterest: el lugar por excelencia para hacer scroll infinito contiene cientos de estilos visuales e incluso almacenarlos.
• Behance: una de las comunidades más grandes donde los diseñadores suben sus trabajos.
• Dribbble: la otra comunidad de diseño, mucho más enfocada en UI pero a la vez tiene menos data que Behance.
• Awwwards: un sitio que premia y da visibilidad a las mejores páginas web del momento, marca mucho el estilo que se viene.

Paso 2: Definir estilos

Ahora que tenemos un moodboard y ya sabemos para dónde vamos con nuestro estilo UI, podemos tomar algunas decisiones clave con respecto a los elementos que componen dicho estilo. Algunas de las cosas que necesitamos definir en esta etapa son:

• Tipografías
• Paleta de color
• Grillas

Veamos en detalle sobre cada uno de los elementos para que nos quede súper claro el objetivo de esta etapa.

Elemento de estilo 1: Tipografías

Podríamos estar años hablando de tipografías porque es un tema súper interesante y muy amplio. Pero para que este artículo no sea un choclo, les paso 3 tips rápidos para elegir tipografías:

👉 Legibilidad antes que estilo. Lo más importante es garantizar que el usuario pueda leer toda la información que estamos cargando en nuestra web. Cuando elijan fuentes busquen aquellas que sean legibles y que preferentemente estén optimizadas para la web. Aquí pueden encontrar una lista con algunas fuentes destacadas de Google Fonts.

👉 Conviene trabajar con 2 tipografías. Una la usamos para los títulos y subtítulos y la otra para el resto del contenido. (En la web de Google Fonts pueden encontrar las mejores fuentes open source y, además, si eligen una en particular, pueden ver 4 o 5 fuentes más que combinan espectacularmente bien)

👉 El tamaño mínimo sugerido es 16px. Esta es una medida que funciona bien tanto para mobile como para desktop. Eventualmente se pueden usar textos en 14px pero solo para aclaraciones o info que debe ir muy pequeña como los legales.

Pueden encontrar mucha más info sobre tipografías en este artículo de tips de flor.

Elemento de estilo 2: Paleta de color

Otro gran tema que está buenísimo para profundizar a pleno. Les prometo que lo vamos a retomar en varios Tips de Flor, pero en el mientras, acá van los 3 consejos para elegir el color de sus interfaces:

👉 Conviene usar paletas simples. No hace falta tener muchos colores, lo ideal es tener un color general, un color de destaque (que vamos a usar donde queramos llamar la atención del usuario) y muchos tonos de colores neutros (grises claros u oscuros según necesitemos generar una interfaz light mode o dark mode).

👉 El color se usa para reforzar la funcionalidad. Siempre que apliquemos el color debemos hacerlo con una intención y de manera consistente. Por ejemplo podemos aplicar un color que destaque para todos los botones de acción o call to action de la interfaz. Este código de color que establecemos debe ser coherente en todas las pantallas.

👉 El color debe garantizar la usabilidad. Debemos chequear que los colores que elegimos cumplan con los estándares de contraste necesario para que pueda leerse toda la información. Para eso podemos usar una herramienta de evaluación de contraste como esta.

Algunos lugares copados para conseguir paletas de colores:

• Coolors: Para mi uno de los lugares más completos. Me encanta el sistema que proponen ya que te permite visualizar y generar tus propias combinaciones.
• Adobe Color: Me encanta porque tiene una herramienta super completa para generar paletas y degradados, pero también tiene una sección para explorar las tendencias con los colores que más se están usando en este momento.
• Color hunt: de las mejores para buscar paletas ya preparadas.

Elemento de estilo 3: Grillas

En este vivo exploramos un poco la importancia de las grillas para ayudarnos a organizar los elementos dentro de la interfaz y también para mejorar su adaptación de modo responsive.

Para el diseño de Coder-Box usamos un sistema de doble grilla. Una grilla de 8px que aplica en todas las versiones, y distintas grillas de columnas que aplican según el tamaño de pantalla con el que estemos trabajando.

En general, a las pantallas mobile se les aplica una grilla de 4 columnas, a las versiones para tablet una grilla de 8 columnas y a las versiones para desktop una grilla de 12 columnas. Pueden explorar más sobre este tema en la documentación oficial de material design (el sistema de diseño de Google) donde explican las razones y buenas prácticas para el uso de grillas.

La grilla de 8px se utiliza porque la mayoría de las pantallas que nos rodean tienen dimensiones que son múltiplos de 8px. Usar una grilla base de estas características nos permite ajustar cada elemento al tamaño más óptimo, ya que luego podremos hacer progresiones de medidas para cada uno de los dispositivos, pero sin alterar las proporciones de los componentes.

Además, les recomiendo chequear esta página que les muestra los principales tamaños de pantalla que existen, y los distribuye según la cantidad de usuarios que utilizan dichos dispositivos. Esto puede ser muy útil para plantear los puntos de quiebre del responsive, en base a los tamaños más utilizados.

Paso 3: Crear componentes (Atomic Design)

Si de este artículo pueden quedarse con un solo concepto que sea este!!! Entender que la web moderna está basada en componentes, y que existe un vínculo muy importante entre las formas de diseñar las interfaces y su desarrollo en código, es un paso enorme que les puede servir para entender y analizar en detalle aquellos sitios que diseñen o codeen.

Diseñar interfaces es un proceso largo y por momentos tedioso. Un trabajo que parece no tener tantas dificultades, puede transformarse fácilmente en una pesadilla compuesta de muchísimas pantallas con estilos inconsistentes y patrones que no tienen sentido.

Hace unos años, allá por el 2013, un diseñador / desarrollador web llamado Brad Frost, tuvo la brillante idea de generar una metodología para optimizar el proceso de diseño de interfaces.

Él planteó que la mejor forma de diseñar una web es partiendo de los elementos más pequeños, que a su vez pueden combinarse para crear elementos más complejos. Algo así como generar “bloques” que pueden recombinarse para crear toda la interfaz. A esta metodología la nombró Atomic Design, porque está inspirada en los átomos que son la mínima expresión de todo aquello que nos rodea.

Este es un esquema simple donde se muestra cada uno tipo de elementos según los principios del Atomic Design, y cómo se vinculan entre ellos para generar elementos cada vez más complejos

Dicho de este modo parece lo más intuitivo del mundo, pero realmente fue una idea revolucionaria. Incluso es probable que, para ustedes queridxs Devs, la idea de dividir una web en componentes sea una noción súper habitual y conocida, ya que todos los frameworks y librerías modernos de JavaScript funcionan en base a este principio.

Sin ir más lejos, todo el desarrollo en código de Coder-Box estará organizado en componentes, los mismos componentes que definimos durante el proceso de diseño UI.

La metodología del Atomic Design es el punto de encuentro entre el diseño y el desarrollo frontend, por eso hacemos hincapié en este tema. Y es probable que en sus entornos de laburo utilicen este sistema, así que vale la pena darle una mirada y tenerlo presente. Pueden aprender más sobre Atomic Design en este video.

Paso 4: Aplicar estilos (UI kit)

Ahora que ya sabemos de qué se trata la metodología del Atomic Design, podemos pasar al siguiente elemento clave de este capítulo: los UI kits.

Cuando diseñamos tenemos como prioridad lograr que las interfaces sean lo más consistentes y lógicas posibles, ya que cualquier falla en la comunicación del funcionamiento o modo de navegación de un sitio, puede provocar una mala experiencia en los usuarios.

Cuando navegamos una página o utilizamos una app, lo peor que nos puede pasar es no entender cómo usarla a simple vista. Se suele decir que una buena interfaz es como un buen chiste, no hace falta que te lo expliquen, sabés como funciona de modo intuitivo. Este efecto se logra cuando:

• Aprovechamos los patrones de navegación que nuestros usuarios conocen (elementos y funcionalidades que se repiten en muchísimos sitios por eso estamos acostumbrados a usarlos).
• Cuando logramos que cada elemento de nuestro diseño sea consistente.

Este último punto se logra teniendo un buen control y una correcta definición de cada componente que forma parte de nuestro diseño. La documentación que generamos al dividir una interfaz utilizando los principios del Atomic Design y sumarle los estilos que ya definimos en el paso 2, se transforma en un UI kit.

Al generar un UI kit no solo definimos cada elemento que compone nuestra interfaz sino también todos sus estados. Pensemos un botón, no solo se define la forma general de ese botón, su color y el tamaño de su tipografía; sino también qué pasa cuando alguien se posiciona encima de ese botón con el cursor del mouse (hover) o cuando dicho botón no está disponible o está inactivo.

Cuando tenemos todos los componentes con su correspondiente estilo podemos terminar de diseñar las pantallas. Aunque parezca un laburazo, gracias a que Figma nos permite sacarle jugo a nuestro UI kit, al final el trabajo se agiliza. Ya que si necesitamos modificar un componente, este ajuste se replica en todas las pantallas de la interfaz.

En el caso de Coder-Box, estamos generando nuestro propio UI kit, el cual aún está en proceso y sigue evolucionando a medida que ajustamos detalles del proyecto. Les compartiremos el archivo de Figma donde pueden chusmear su estado actual, y seguir los avances que vayamos haciendo en las próximas semanas.

Podríamos estar horas charlando sobre cada uno de estos componentes, porque hay muchas cosas para aprender, pero me parece que puede ser más interesante que sepan que existen muchos sistemas de diseño y UI kits open source que pueden utilizar para desarrollar sus propios proyectos.

Si tenemos el diseño de los componentes bien definido vamos a poder generar interfaces sólidas que se vean bien y que funcionen bien para los usuarios. Como siempre decimos, no es necesario inventar la rueda y crear todo desde cero, podemos apoyarnos en la inmensa cantidad de recursos que tenemos disponibles que nos agilizan mucho el trabajo.

Les dejamos un listado de Sistemas de diseño y UI kits que pueden chusmear si están estancados con el diseño UI de sus proyectos. Y ojo que muchos de estos sistemas tienen hasta sus propias librerías de componentes (con todo el código listo!!! OMG) que pueden sumar directamente a sus proyectos:

• Material Design: el sistema de diseño de Google
• Carbon Design: el sistema de diseño de IBM
• Primer: el sistema de diseño de GitHub
• Liquid: supuestamente el sistema de diseño más científico de todos. Ideal para proyectos relacionados con el mundo de la salud o científico en general.
• Fluent: el sistema de diseño de Microsoft
• Clarity: muy lindo con un estilo de ilustraciones ideal para proyectos de startups
• Ant design: Otro de los sistemas de diseño open source más utilizado

En esta página pueden encontrar muchos más (por las dudas revisen las licencias antes de usarlos para sus proyectos ya que pueden variar)

Escenas del próximo capítulo:

Ahora que ya tenemos el diseño avanzado y muchos de los componentes definidos, durante los próximos episodios nos vamos a enfocar en codear la landing page Coder-Box. En el episodio 6 vamos a enfocarnos en codear el Header y también les vamos a contar cómo pueden sumarse y colaborar con el desarrollo del proyecto.

¡Gracias por leer!

¡Nos vemos la próxima!