Tips de UI para no diseñadores | CourseIt Blog
logo courseit

Tips de UI para no diseñadores

30

Es un escenario muy común. Aprendemos a desarrollar frontend, pero a la hora de compartir nuestro portfolio todos los proyectos parecen salidos de la era early 2000s de la web.

Si bien para dedicarse al desarrollo frontend no hace falta saber diseñar, es innegable que la primera impresión puede entrar por los ojos y hacer la diferencia en un proceso de selección. Al margen de eso, es lindo sentirse orgulloso del trabajo propio y evitar esa necesidad de arrancarnos los ojos cada vez que vemos nuestros proyectos terminados.

No importa cual sea el caso, lo importante es que como todo en la vida el diseño gráfico sigue ciertas reglas, y con estos tips simples podemos plantear interfaces más armónicas y visualmente agradables.

Utilizar una grilla

Una de las reglas fundamentales de una UI funcional es que el diseño siga algún tipo de patrón para ordenarse. Lo mejor es elegir una cantidad de columnas y organizar nuestro contenido en base a esa guía.

enter image description here

Si analizamos los sitios que consumimos, empezamos a notar que todos siguen algún patrón de ordenamiento más o menos evidente. Incluso cuando un diseño se ve asimétrico y distinto, es probable que esté utilizando una grilla.

El uso de columnas no implica necesariamente que tengamos que ocupar todo el espacio, pero si son una guía sobre dónde colocar los elementos.

enter image description here

Podemos tomarnos la libertad de que algún elemento no siga la grilla para darle mayor énfasis, pero para que esto funcione es importante respetarlo en todos los demás lugares, sino el posicionamiento se torna caótico y perdemos el control del foco de atención.

Existen distintos sistemas de grillas, pero si querés hacer algo fácil y rápido podés plantear cuatro columnas (o seis) con igual margen entre ellas y el borde del viewport. Ya con ese detalle tus diseños se verán mucho más profesionales.

Jerarquía

Otro punto importante a la hora de generar UIs armónicas es mantener un buen balance entre jerarquías. Más allá de verse bonita, una interfaz de usuario debe ser… funcional al usuario, y eso implica que debemos indicar claramente al lector cuales son los elementos más importantes.

Para lograrlo podemos utilizar recursos como relación entre tamaños, diferentes pesos en la tipografía y uso del color para poner énfasis en aquellas cosas que son verdaderamente importantes.

enter image description here

Por ejemplo, si la página tiene un header es una buena idea que el estilo del elemento H1 sea bold y con un tamaño de texto más grande que el cuerpo del texto.

Colores

El uso de color es uno de los protagonistas indiscutidos de cualquier diseño, y también uno de los más difíciles de dominar. Por suerte existe la teoría del color y cientos de herramientas que nos ayudan a generar paletas armónicas utilizando sus reglas.

La color wheel de Canva nos permite generar paletas basadas en la teoría del color utilizando reglas como colores complementarios, triadas, análogos y más: https://www.canva.com/colors/color-wheel/

Otra herramienta excelente para crear paletas es Coolors, que siempre nos devuelve paletas bellísimas y armónicas, y además tiene otras funcionalidades como generar gradientes o crear paletas desde una foto: https://coolors.co/.

Como regla general al diseñar UI es importante mantener una paleta de colores reducida. Es recomendable utilizar no más de cuatro o cinco colores y siempre cuidando los contrastes para que la información sea legible.

Tipografías

La tipografía va mucho más allá que una cuestión de gustos personales. Cada tipo de letra confiere un significado y una serie de conceptos que se transmiten en nuestras interfaces. Sumado a esto, una mala elección de tipografía puede arruinar completamente la experiencia de usuario.

Si no tenés mucha experiencia con estas cosas te recomiendo que elijas para los cuerpos de texto informativos una fuente sans serif que resulte fácil de leer (y no bajes los cuerpos de texto a menos de 16px).

Para grandes cuerpos de información es importante evitar las fuentes fantasía o con muchos adornos porque suelen ser complicadas de leer al no tener buen interlineado y espaciado entre letras.

Podes darte más libertad creativa en textos cortos, como títulos o mensajes para llamar la atención. Como regla general, está bueno limitar las tipografías de un proyecto a dos, una para cuerpos de texto y otra para títulos o acentos.

Google fonts, además de ser una excelente fuente de tipografías tiene una sección de pairing donde nos sugiere con qué otras tipografías podemos combinar la que queremos utilizar: https://fonts.google.com/specimen/Roboto#pairings

Formas (coherencia y cohesión)

Para que un sistema de diseño sea armónico debe leerse como un todo, por eso es importante que haya coherencia entre las distintas partes que lo componen. Un ejemplo de este principio es por ejemplo si tenemos botones con bordes redondeados, que todos mantengan siempre el mismo borde (5px por decir algo). Si empezamos a mezclar estilos entre bordes redondeados y cuadrados se pierde la cohesión del diseño, las partes se sienten desconectadas y dejan de funcionar visualmente.

enter image description here

Lo mismo pasa cuando estamos indicando que ciertos elementos son clickeables, si en un proyecto decidimos que todos los elementos interactivos tienen una sombra, deberíamos mantener todas las sombras iguales. La excepción a la regla es si queremos marcar algún tipo de jerarquía entre elementos.

Interacciones

Como desarrolladores frontend es una buena idea darle vida a nuestros proyectos a través de animaciones y feedback visual, después de todo no estamos diseñando un póster sino una experiencia interactiva.

Un recurso especialmente poderoso son las animaciones y transiciones en css. Al igual que con las formas y los colores, es importante mantener la coherencia y darle a elementos que cumplen una función similar animaciones similares.

Si agregamos muchas animaciones diferentes con efectos muy distintos vamos a generar una gran confusión en el usuario.

enter image description here

Espacio en blanco

Último pero no menos importante, el espacio en blanco es uno de los mejores amigos de un buen diseño. El uso de padding y margin para separar los elementos del diseño es sumamente necesario para mejorar la legibilidad de nuestro contenido, pero además, ser coherente en su uso refuerza el valor de la grilla y eleva la calidad visual de cualquier proyecto.

Espero que estos tips hagan menos aterradora la tarea de empezar nuevos proyectos web. Si tenés dudas puntuales o querés feedback no dudes en contactarme.

Bel Rey

@doomling