Si has tomado la decisión de ingresar al mundo del diseño de interfaz, pero te encuentras un poco abrumado sobre qué tener en cuenta o cómo resolver ciertas situaciones, te recomiendo que leas el libro "Refactoring UI"
Este excelente libro te enseñará todo lo que debes saber sobre diseño de interfaces para identificar qué tener en cuenta a la hora de realizar un sistema de diseño desde cero, qué tipos de botones utilizar, cómo jerarquizar la información, cómo utilizar los colores, cómo alinear y muchísimos conceptos más a tener en cuenta.
“Refactoring UI” no solo es de fácil lectura, pues también brinda ejemplos en donde se pueden visualizar cómo se aplican los conceptos teóricos en la práctica. Seguramente te estarás preguntando “muy recomendado, pero… ¿qué aprendiste concretamente?” Bueno, te comentaré 10 tips de esta guía que te servirán como introducción al mundo de UI:
1- No empieces diseñando toda la interfaz. Diseña una funcionalidad y qué va a necesitar. Es decir, todos los detalles vienen después, sobre todo los nice-to-have.
2- Al momento de definir un sistema, utiliza una gama amplia de tamaños, sombras, tonalidades de un color y espaciados. Eso permitirá aumentar tus opciones al momento de decidir qué quedará mejor según tu diseño.
3- Sé consistente. Si por ejemplo usas radios redondeados de 16px, no mezcles 16px, otros de 24px y otros de 48px, utiliza todos del mismo tamaño.
4- Todas tus decisiones de diseño repercutirán en qué transmite la interfaz, el color, la tipografía, los radios de los botones, incluso el tono de voz. Todos esos elementos definirán la personalidad de la interfaz.
5- Jerarquiza la información. Es importante generar jerarquías visuales, eso permitirá guiar al usuario por la plataforma y evitar frustraciones por abrumación.
6- No bases tus diseños únicamente en grillas. Hay muchos elementos que pueden verse perjudicados por la utilización de grillas. Tómalas en cuenta, pero no las uses como religión.
7- Haz tus diseños accesibles. Genera contrastes con un ratio de mínimo 4.5:1 y utiliza plugins que te permitan comprender cómo ciertas disfunciones oculares distorsionan los colores. No te dejes llevar únicamente por el color, utiliza recursos que completen la información que quieres dar.
8- Debes escalar todo, hasta los íconos. Considera que no todos los íconos están pensados para todos los tamaños. Un ícono con mucho detalle, al hacerse pequeño se verá empastado. Así mismo, un ícono con poco detalle, si se vuelve muy grande disminuirá su comprensión.
9- Ten en cuenta todos los casos de uso para definir espacios y medidas. Si por ejemplo estás realizando una tarjeta, no dejes librado al azar el contenido de la misma. Determina y analiza situaciones en la que los títulos podrían ser más largos o más cortos, o descripciones más detalladas que otras.
10- Mejora los defaults. No siempre es necesario crear un gran diseño, simplemente basta con mejorar algunos detalles mínimos para marcar la diferencia. Por ejemplo, si utilizas viñetas, ¿por qué no modificar el típico símbolo, por tal vez un ícono que se relacione con el tema? O si estás citando un testimonio, ¿por qué no modificar las comillas en vez de dejar las típicas comillas que propone la tipografía?
Todos estos consejos y muchos más los aprenderás luego de leer “Refactoring UI”. Y te aseguro… se convertirá también en tu “biblia”.
