7 tips extraídos de Refactoring UI por Adam Wathan y Steve Schoger

Hoy he tenido un hueco para leerme un libro muy interesante que habíamos adquirido y del que todavía no había podido ponerme a leer con detenimiento.

Hace tiempo que decidí convertirme en fullstack y para ello necesitaba ir cogiendo cada vez mas experiencia frontend y conseguir conocimiento en áreas desconocidas para mí. Las que más me preocupan son la maquetación y el diseño de interfaces, porque creo firmemente que un buen desarrollador debe tener una nociones básicas de diseño.

Así que este libro encajaba perfectamente con mis necesidades y no me ha defraudado. Es un libro claro, con muchas imágenes y que engancha. Además muy bien estructurado para poder volver a él cuantas veces sean necesarias durante un desarrollo.

Los tips con los que me he quedado tras la primera lectura son los siguientes:

1.- Comenzar a diseñar la aplicación en blanco y negro para luego ir añadiendo colores, con especial cuidado en esta tarea, ya que los colores tienen una personalidad determinada.

2.- Crear un set de opciones: los distintos tamaños de letra que vamos usar, las distintas tonalidades de colores y manejarnos con ellos. Es importante además establecer que color se va a usar para resaltar información o cuales van a ir asociados con advertencias, errores, etc.

3.- Introducir una jerarquía en los diseños para atraer la atención, por ejemplo los botones secundarios serán menos llamativos que los primarios con un color de fondo menos atrayente.

4.- No hace falta que el diseño ocupe siempre toda la pantalla, incluso cuando se trata de textos lo idóneo es tener párrafos con líneas de 45–75 caracteres.

5.- La altura del interlineado y el tamaño de la fuente son inversas, cuanto menor la fuente mayor interlineado será necesario.

6.- Pensar siempre en la accesibilidad, los colores no deberían aportar información para no privar de ella a las personas que no puedan distinguirlos.

7.- El uso adecuado de sombras, da profundidad y dinamismo a nuestra aplicación.

Espero que esta publicación te haya sido útil. Si es así, por favor, dale un voto positivo y compártelo en tus redes sociales. Si lo deseas, puedes encontrarme en Twitter y en Linkedin

Software Developer at Sngular. PhD on Immunology, always learning and trying to share knowledge. Microsoft Most Value Professional on Developer Technologies.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store