25 Reglas de diseño web que agradecerás haber leído

En el diseño web, los pequeños detalles marcan la diferencia entre un sitio que simplemente se ve bien y uno que ofrece una experiencia excepcional al usuario. En nuestra agencia, siempre estamos buscando las mejores prácticas que ayuden a nuestros clientes a destacar. Por eso, hemos reunido estas 25 reglas de diseño visual que puedes seguir con seguridad en cualquier proyecto. Estas reglas no son absolutas; siempre hay espacio para la creatividad y la experimentación. Sin embargo, al tener estas pautas en mente, te asegurarás de que tu diseño se mantenga coherente y atractivo.

1. Usa casi negro y casi blanco en lugar de negro y blanco puros

El negro puro a menudo tiene un contraste incómodamente alto con otros colores, y el blanco puro es demasiado brillante. En su lugar, usa tonos cercanos al negro y al blanco.

2. Satura tus neutros

Un neutro es generalmente un negro, blanco o gris. Si usas color en tu interfaz, añade un poco de ese color a tus neutros para hacer que la paleta de colores se sienta más coherente. Si usas el sistema de color HSB, una saturación de menos del 5% debería ser suficiente.

3. Usa alto contraste para elementos importantes

Los elementos importantes son botones, contenido o cualquier cosa que el usuario necesite notar. Un mayor contraste significa que el elemento captará la atención. Los elementos que el usuario no necesita notar, como elementos estructurales o sombras, pueden usar el menor contraste posible.

4. Todo en tu diseño debe ser deliberado

Debes ser intencional con cada aspecto de tu diseño: espacio en blanco, alineación, tamaño, espaciado, color, sombras. Si alguien señala una parte aleatoria de tu diseño, deberías tener una explicación de por qué se ve de esa manera.

5. La alineación óptica es mejor que la matemática

Tu software de diseño puede alinear cosas matemáticamente, pero algunas formas no se adaptan a este tipo de alineación. Alinea las cosas a ojo para que se vean bien.

6. Ajusta el espaciado entre letras y la altura de línea con el tamaño del texto

Cuanto más grande es el texto, menos espacio necesitas entre cada letra y cada línea. Lo contrario también es cierto.

7. Los bordes de los contenedores deben contrastar con el contenedor y el fondo

Si tienes un borde de 1px en un fondo oscuro, debe ser más claro que ambos para que el borde se vea nítido.

8. Todo debería estar alineado con algo más

La alineación ayuda a que los elementos parezcan relacionados. Si algo no está alineado con nada, parece que no pertenece al diseño.

9. Los colores en una paleta deben tener valores de brillo distintos

Los colores con diferentes valores de brillo se sienten más distintivos, lo que mejora la paleta de colores.

10. Saturación de neutros: usa colores cálidos o fríos, no ambos

Usar ambos cálidos y fríos para saturar neutros hará que la paleta se sienta incoherente.

11. Las medidas deben estar relacionadas matemáticamente

El espaciado y el tamaño de los elementos deben seguir una escala para que el diseño se vea coherente.

12. Los elementos deben ir en orden de peso visual

Organiza elementos de mayor a menor peso visual para que se vean más satisfactorios.

13. Usa una cuadrícula horizontal de 12 columnas

Una cuadrícula de 12 columnas proporciona flexibilidad al dividir el diseño en secciones.

14. El espaciado debe ir entre puntos de alto contraste

Los ojos encuentran los bordes de los elementos basándose en el contraste, por lo que el espaciado debe correr entre estos puntos.

15. Los elementos más cercanos deben ser más claros

A medida que los elementos se acercan al usuario, deben volverse más claros.

16. Haz que los valores de desenfoque de la sombra sean el doble de los valores de distancia

Si la sombra se extiende 4px en el eje Y, usa un valor de desenfoque de 8px.

17. Pon simple sobre complejo o complejo sobre simple

Un fondo complejo funciona mejor si el primer plano es simple, y viceversa.

18. Mantén los colores de los contenedores dentro de los límites de brillo

La diferencia de brillo entre el fondo y el contenedor debe estar dentro del 12% para interfaces oscuras y del 7% para claras.

19. Haz que el relleno exterior sea igual o mayor que el relleno interior

El espacio entre los elementos y el borde del contenedor debe ser igual o mayor que el espacio entre los elementos.

20. Mantén el texto del cuerpo en 16px o más

El tamaño de texto de 16px es el estándar en la mayoría de los navegadores. Usar un tamaño menor puede dificultar la lectura.

21. Usa una longitud de línea de alrededor de 70 caracteres

Mantén la longitud de línea entre 60 y 80 caracteres para una mejor legibilidad.

22. Haz que el relleno horizontal sea el doble del relleno vertical en botones

El patrón estándar de botones es más ancho que alto, y este relleno ayuda a que el elemento sea reconocible como botón.

23. Usa dos tipografías como máximo

Una segunda tipografía puede reforzar el concepto detrás de un diseño, pero usar más de dos puede causar confusión visual.

24. Anida esquinas correctamente

Si tienes esquinas redondeadas anidadas, ajusta el radio interior para que se vea proporcional al exterior.

25. No pongas dos divisores duros juntos

No coloques transiciones de fondo, bordes de contenedores o líneas divisorias muy juntas para evitar desorden visual.

Conclusión

El diseño web es un proceso en constante evolución, y aunque estas reglas son un excelente punto de partida, no dudes en ajustarlas según las necesidades de tu proyecto. En nuestra agencia, entendemos que cada sitio web es único, y por eso combinamos estas prácticas con nuestra experiencia para lograr resultados que realmente resalten. ¿Listo para implementar estas reglas en tu próximo proyecto? Estamos aquí para ayudarte a llevar tu diseño al siguiente nivel.

Fuente: Anthony Hobday - Saferules