Este libro me ha cambiado como Frontend
Hace unas semanas me he leído Refactoring UI, un libro que se enfocado principalmente en desarrolladores que quieren mejorar sus habilidades en diseño.
Por lo general el diseño nunca ha sido mi punto fuerte, tampoco es como si quisiera dedicar a ser diseñador UX/UI, pero creo que para un frontend entender sobre diseño, es algo importante. Sobre todo si te gusta crear aplicaciones por tu cuenta como es mi caso.
Por eso hace unas semanas decidí leer Refactoring UI, un libro del que había oido maravillas, y efectivamente, lo que dice sobre el, es cierto. Es un libro que se lee realmente rápido, y se hace muy entretenido, puesto que los ejemplos son muy claros y típicos del día a día. Así que no me enrollo más y vamos con lo que saque en claro al leer este fantástico libro.
🚀 Empezando desde cero
Comienza con una característica, no con un diseño. Una aplicación consta de varias características. Antes de empezar a diseñar dónde irá cada una de estas características, necesitamos diseñar las características en sí.
Al principio, no te obsesiones con los detalles; enfócate en algo funcional. Más adelante, podrás encargarte de detalles como fuentes, sombras, íconos, etc.
Empieza creando un diseño en escala de grises. Una vez que hayas terminado, puedes introducir colores. De esta manera, te obligas a usar espaciado, contrastes y buenos tamaños para que el diseño se vea bien.
No diseñes demasiado; no necesitas diseñar cada característica antes de pasar a la implementación.
Trabaja en ciclos. Básicamente, cada vez que diseñes una característica, impleméntala en el código para ver cómo se comporta.
Sé consciente de la dificultad del desarrollo; no diseñes algo que no podrás desarrollar más tarde.
Elige una personalidad. Por ejemplo, un banco necesita transmitir seriedad, seguridad y profesionalismo.
La tipografía juega un papel muy importante en la determinación de cómo se siente un diseño.
Elige los colores basándote en lo que quieres que tu aplicación transmita.
El radio de los bordes hace que se sienta más juguetón y amigable.
Los textos juegan un papel importante en la personalidad de la aplicación.
Limita tus opciones: medidas, colores, fuentes, sombras... Esto hará que la toma de decisiones sea más fácil.
Necesitarás sistemas para cosas como: tamaño de fuente, grosor de fuente, altura de línea, color, margen, relleno, ancho, alto, sombras de caja, radio de borde, grosor de borde, opacidad...
👑 La jerarquía es todo
Cuando todo en una interfaz compite por la atención, se siente ruidoso y caótico.
El tamaño no lo es todo; para establecer una jerarquía, también debes confiar en el grosor de la fuente y el color.
Color oscuro para contenido principal, gris para contenido secundario y gris más claro para contenido terciario.
No uses texto gris en fondos de colores; en lugar de esto, elige un color con el mismo tono y ajusta la saturación y la luminosidad hasta que te parezca adecuado.
Enfatiza el elemento al que quieres llamar la atención des-enfatizando los otros elementos.
También puedes combinar etiquetas y valores en un texto para hacerlo más fácil de leer, por ejemplo, "Quedan 12 en stock" en lugar de "En stock: 12".
A veces las etiquetas son secundarias. Cuando este es el caso, des-enfatiza las etiquetas y enfatiza los datos.
Si estás diseñando una interfaz donde sabes que el usuario estará buscando la etiqueta, tienes que enfatizar la etiqueta.
No dejes que la semántica dicte tu diseño. h1 no significa que deba ser grande. A veces puedes ocultarlo visualmente y aún tenerlo en el DOM porque el contenido habla por sí mismo.
Cuando tengas múltiples acciones:
Las acciones principales deben ser obvias. Los colores de fondo sólidos y de alto contraste funcionan muy bien aquí.
Las acciones secundarias deben ser claras pero no prominentes. Los estilos de contorno o los colores de fondo de menor contraste son buenas opciones.
Las acciones terciarias deben ser descubribles pero no intrusivas. Estilizar estas acciones como enlaces suele ser la mejor opción.
🖼️ Diseño y Espaciado
Para un diseño más limpio, deja más espacio entre los elementos.
Empieza dando algo mucho espacio, luego quítalo hasta que estés satisfecho con el resultado.
Ten un sistema para fuentes y espaciados. 16px es un buen comienzo. 4, 8, 12, 16, 24, 32, 48, 64, 96, 128, etc.
Si solo necesitas 600px de pantalla, entonces usa solo 600px. Manténlo limpio.
Comienza diseñando para móvil. Luego llévalo a escritorio y ajusta.
Si quieres hacer mejor uso del espacio disponible, podrías dividir el texto de apoyo en una columna separada.
No todos los elementos tienen que ser escalables. Por ejemplo, en una interfaz con una barra de navegación y contenido principal, la barra de navegación no tiene que escalar en todos los tamaños de pantalla; puede tener un ancho máximo, permitiendo que el contenido principal escale más.
No todo debe ser de tamaño relativo, por ejemplo, texto y su encabezado, usando la unidad em para el encabezado. No seas dogmático al respecto y no hagas esto.
Los bordes pueden dejar claro cómo están agrupados los elementos. Si no, puedes usar espaciado, por ejemplo, la etiqueta y el campo de entrada más cerca entre sí como un grupo. Esto se aplica al espaciado vertical y horizontal.
💬 Diseño de Texto
No uses demasiados tamaños de fuente. Usa una escala y ten un sistema. Esto lleva a la consistencia y facilita el diseño.
Apegarse a unidades px o rem, es la única manera de garantizar que realmente te apegas al sistema.
Elegir una fuente es difícil; Helvetica es un buen punto de partida.
Como regla general, ignora las tipografías con menos de cinco grosores.
Evita usar tipografías condensadas con alturas de x cortas para tu texto principal de la interfaz de usuario.
Inspecciona algunos de tus sitios favoritos y ve qué tipografías están usando.
Para la mejor experiencia de lectura, haz tus párrafos lo suficientemente anchos para encajar entre 45 y 75 caracteres por línea. Un ancho de 20-35em te llevará a la zona adecuada.
La altura de línea y el ancho del párrafo deben ser proporcionales.
La altura de línea y el tamaño de fuente son inversamente proporcionales.
No todos los enlaces necesitan un color, puedes usar un mayor grosor de fuente o un color más oscuro en lugar de un color azul.
No centres texto de forma larga.
Debes confiar en el diseñador de la tipografía y dejar el espaciado entre letras como está.
🎨 Trabajando con Color
HSL es el mejor formato de color. Es fácil ajustar los colores y es fácil de entender. Representa los colores: tono, saturación, luminosidad.
No puedes construir nada con cinco códigos hexadecimales, necesitas un conjunto mucho más completo de colores para elegir.
Grises, para el texto, fondos, paneles y controles de formulario.
Colores primarios, para acciones primarias, elementos de navegación activos, etc.
Colores de acento, para comunicar diferentes cosas al usuario.
Define un conjunto fijo de sombras desde el principio que puedas elegir a medida que trabajas.
La sombra más oscura de un color suele reservarse para el texto, mientras que la sombra más clara podría usarse para teñir el fondo de un elemento.
Si quieres cambiar cómo se ven los colores claros, ajusta la luminosidad. Si quieres cambiar cuán colorido es, ajusta la saturación.
Para hacer un color más claro, rota el tono hacia el tono brillante más cercano.
Para hacer un color más oscuro, rota el tono hacia el tono oscuro más cercano.
No gires el tono más de 20-30° o parecerá un color totalmente diferente en lugar de simplemente más claro o más oscuro.
Saturando grises: se sienten fríos, saturarlos con azul. Cálidos, saturarlos con algo de amarillo o naranja.
Invertir el contraste: usar texto de color oscuro sobre un fondo de color claro.
No quieres que el texto principal y el texto secundario se vean igual, una forma de aumentar el contraste sin acercarse más al blanco es rotar el tono hacia un color más brillante, como cian, magenta o amarillo.
Siempre usa el color para respaldar algo que tu diseño ya está diciendo; nunca lo uses como el único medio de comunicación.
🕳️ Creando Profundidad
La luz viene de arriba. Para hacer que algo se sienta elevado, agrega una sombra en la parte inferior.
Para hacer que algo se sienta presionado, agrega una sombra en la parte superior. Puedes usar sombra de caja interna aquí, y otra sombra gris en la parte inferior.
Podrías usar una sombra más pequeña para algo como un botón, donde quieres que el usuario lo note.
Las sombras medianas son útiles para cosas como menús desplegables.
Las sombras grandes son excelentes para diálogos modales, donde realmente quieres captar la atención del usuario.
Combinar sombras las hace parecer más naturales.
Haz un elemento más claro que el color de fondo para que se sienta elevado de la página, o más oscuro que el color de fondo si quieres que se sienta hundido.
📃 Trabajando con Imágenes
Las fotos malas arruinarán un diseño, incluso si todo lo demás se ve genial.
Una forma de aumentar el contraste general del texto es agregar una superposición semitransparente a la imagen de fondo.
Los iconos dibujados a 16-24px nunca se verán muy profesionales cuando los agrandes a 3x o 4x su tamaño original. Si los iconos pequeños son todo lo que tienes, intenta encerrarlos dentro de otra forma y darle a la forma un color de fondo.
No reduzcas capturas de pantalla; si quieres incluir una captura de pantalla detallada en tu diseño, toma la captura de pantalla en un tamaño de pantalla más pequeño (como tal vez el diseño de tu tableta).
Si realmente necesitas ajustar una captura de pantalla de toda la aplicación en un espacio reducido, intenta dibujar una versión simplificada de la interfaz con detalles eliminados.
🏁 Toques Finales
Potencia los valores predeterminados: puntos de viñeta, casillas de verificación, botones de radio, etc.
Agrega color con bordes de acento.
Una forma de añadir algo de emoción a un fondo es simplemente cambiar el color.
Decora tus fondos con degradados, patrones, etc.
Si estás diseñando algo que depende de contenido generado por el usuario, el estado vacío debería ser una prioridad, no una idea de último momento.
No tiene sentido presentar un montón de acciones que no hacen nada hasta que el usuario haya creado algún contenido.
Recursos semanales:
Te permite visualizar los colores y fuentes que quieras utilizar en un sitio web, para así poder hacerte una idea de como quedarían.
Además que pulsando el espacio te genera nuevas paletas de colores, las cuales te pueden servir de inspiración o directamente las puedes utilizar para tu nueva app.
Puedes integrarlo con Figma y es totalmente gratuito, cosa que por cierto me llamo mucho la atención porque te dan 3 planes como cualquier membership, pero, todos gratis.
En esta web te podrás inspirar con miles de diseños.
Se llama refero.design está perfectamente organizada, puedes buscar por tipos de páginas, patrones ux, y elementos ui.
Y dentro de cada categoría podrás encontrar muchas otras subcategorías, como el caso de las páginas, podrás encontrar landings, dashboards, páginas de pago, y muchísimas más.
Si estás buscando inspiración para el diseño de tu próximo proyecto, definitivamente esta es tu página.
🪲 Sentry:
Que pasa si creas una aplicación, es utilizada por usuarios, y algún usuario utilizando la aplicación encuentra un error?
Probablemente te acabarías dando cuenta del error y lo acabarías solucionando, pero cuanto tardarías en darte cuenta?
Probablemente mucho, para eso existen herramientas de monitorización como Sentry, la cual te permite conocer todos los errores que ocurren en tu aplicación en tiempo real.
En cuanto el usuario se encuentre con un error, este será notificado a través de Sentry, y podrás verlo instantáneamente desde su interfaz, de esta forma podrás solventarlo lo antes posible.
Y hasta aquí la edición de El Rincón Del Dev de esta semana, espero que la hayas disfrutado, ¡Feliz semana!
Qué buen contenido compartes, gracias.