Seis principios de diseño web (jerarquía, espacio en blanco, contraste, alineación, proximidad y áreas táctiles), cada uno con un antes y después en vivo que puedes alternar, junto con el CSS que lo soluciona.
Un buen diseño web sale sobre todo de seis hábitos: ordenar el contenido con una jerarquía visual clara, dejar suficiente espacio en blanco, mantener el contraste del texto en 4.5:1 o más, alinear los elementos a bordes comunes, agrupar los elementos relacionados cerca unos de otros y hacer que las áreas táctiles midan al menos 24 píxeles por lado. Alterna cada demo de abajo entre antes y después para ver la diferencia.
Los seis principios y el CSS que suele solucionarlos
Los artículos sobre principios de diseño los describen con palabras y fotos de stock. Aquí cada principio es una pequeña tarjeta de producto o un formulario dibujado dos veces, roto y arreglado, para que puedas alternar entre ambos y ver exactamente qué cambió.
Los que más importan en el día a día son la jerarquía, el espacio en blanco, el contraste, la alineación, la proximidad y unas áreas táctiles cómodas. La coherencia los une: el mismo espaciado, los mismos tamaños de letra y los mismos colores repetidos en todas las páginas.
La jerarquía visual es el orden en que las personas perciben los elementos de una página. Los diseñadores la controlan con el tamaño, el peso, el color, la posición y el espacio, de modo que el titular se ve primero, los detalles de apoyo después y la acción principal es fácil de encontrar.
El criterio de conformidad 1.4.3 de WCAG 2.2, nivel AA, pide al menos 4.5:1 para el texto normal y 3:1 para el texto grande, que define como al menos 18 puntos, o 14 puntos en negrita.
Describe cómo suelen recorrer las personas las páginas con mucho texto: a lo ancho por arriba, otra vez a lo ancho un poco más abajo y luego hacia abajo por el lado izquierdo. La lección práctica es poner las palabras clave al inicio de los títulos y las líneas, y no enterrar los puntos importantes en medio de un párrafo.
El criterio 2.5.8 de WCAG 2.2 en el nivel AA fija un mínimo de 24 por 24 píxeles CSS para los objetivos de puntero, con algunas excepciones como los enlaces dentro de una frase. Muchos equipos de diseño van más allá en los botones principales para que sean fáciles de pulsar.
Tres escalones tipográficos ordenan el contenido, el espaciado sale de una escala de 8px y el texto atenuado sigue siendo lo bastante oscuro para superar 4.5:1 sobre blanco.
El título, el precio y el botón comparten tamaño y peso, así que la vista no tiene dónde posarse.
El tamaño, el peso y el color ordenan el contenido: primero el título, después el precio y en tercer lugar la acción.
Todo está apretado de borde a borde, lo que se percibe recargado y difícil de recorrer.
Un padding y unos espacios generosos separan los grupos y dan aire a cada elemento.
El texto gris claro sobre blanco queda muy por debajo del mínimo de WCAG para texto normal.
El texto oscuro sobre blanco supera 4.5:1, el mínimo de WCAG 2.2 nivel AA para texto de tamaño normal.
Mezclar líneas centradas y alineadas a la izquierda crea bordes irregulares que la vista tiene que perseguir.
Un único borde izquierdo común convierte líneas sueltas en un solo bloque legible.
Las etiquetas están igual de lejos de todos los campos, así que no queda claro qué etiqueta va con cuál.
Cada etiqueta se pega a su propio campo y los pares se separan entre sí, así que la agrupación es evidente.
Los enlaces diminutos se amontonan y es fácil fallarlos con el dedo.
Las áreas miden al menos 24 por 24 píxeles CSS, el mínimo de WCAG 2.2 nivel AA, con espacio entre ellas.
Principio
Versión
Antes
Después
Antes: {text}
Después: {text}
Pan de masa madre
$9, horneado a diario
Pedir ahora
Horario de apertura
Lun a vie, 7am a 6pm
Sáb, 8am a 2pm
Repartimos en un radio de 5 km de la tienda, cada mañana antes de las 9.
Color de texto {hex} sobre blanco
Catering
Bandejas para 10 a 100 personas.
Pide con dos días de antelación.
Nombre
Teléfono
Menú
Horario
Pedir
Empieza gratis · Sin tarjeta de crédito