Diseño Principios de diseño
Principios de diseño
Los principios explican por qué una disposición funciona: hacia dónde mira el ojo, qué pesa más visualmente y cómo usar el espacio. Sirven para tomar decisiones en cualquier página.
Patrones de lectura
Patrón Z
En páginas con poco texto, el ojo recorre arriba de izquierda a derecha, baja en diagonal y vuelve a recorrer abajo. Pon el logo arriba a la izquierda y el botón de acción abajo a la derecha.
Patrón F
En páginas con mucho texto, se lee la primera línea completa, luego una parte de la segunda, y después solo el borde izquierdo.
Arriba a la izquierda
En idiomas que se leen de izquierda a derecha, la esquina superior izquierda es la primera que se mira.
Peso visual
Algunos elementos atraen más la mirada que otros. Toca cada propiedad para ver cuál "pesa" más:
Regla de tercios
Divide el área en una cuadrícula de 3 × 3. Los elementos importantes se ven mejor sobre las líneas o en sus cruces que en el centro exacto.
Espacio en blanco
El espacio vacío no es espacio perdido: separa grupos, da descanso y hace que lo importante destaque. Compara la misma tarjeta:
Café de origenNotas a chocolate y panela. Tostión media.
ComprarCafé de origenNotas a chocolate y panela. Tostión media.
ComprarA la izquierda, sin espacio. A la derecha, con márgenes múltiplos de 8 px.
Diseño responsive
Una disposición debe adaptarse a cualquier ancho. La regla práctica: diseña primero para celular (una columna) y agrega columnas cuando haya espacio.
Pensar en el usuario
- Define para quién es: un estudiante que entra desde el celular no busca lo mismo que un coordinador en su computador.
- Una acción principal por página: si todo es importante, nada lo es.
- Prueba con personas reales: pide a alguien que haga una tarea en tu página y observa dónde duda.
- Menos es más: quita lo que no ayude a la acción principal.