El uso de marcas hace que el diseño de página sea fácil
Un diseño puede tener impacto. Puede tener estilo. Pero tener esto no es suficiente.
Para funcionar bien, un diseño debe tener elementos que jueguen con las fortalezas de cada uno. Afortunadamente, cada parte del contenido tiene pautas inherentes.
El diseño, o la disposición del contenido en una página web, es fundamental para el éxito de un diseño. Entre otras cosas, el diseño prioriza el contenido para guiar a las personas de un elemento al siguiente.
Si se hace bien, las personas estarán tan interesadas en el contenido que no notarán nada más.
Siga leyendo para obtener más detalles y sugerencias para crear diseños que funcionen en sus diseños.
Con el ejemplo a continuación, la mayoría de las personas notarán primero la foto o el título, luego el texto y finalmente los enlaces.
Es posible que no se den cuenta de que el título, el texto y la cara del modelo tienen un tercio y dos tercios en la página respectivamente (respetando la regla de los tercios) o que el título y los enlaces están escritos en colores muestreados de los labios de la modelo o que la curva de su hombro guía el ojo hacia las llamadas a la acción.
Texto, foto y título componen una composición. Si uno cae fuera de lugar, la pieza falla.
Arreglo basado en el respeto mutuo
¿Dónde ponemos las cosas? Déjalos que nos cuenten. Las peculiaridades de los gráficos, las fotos y los trozos de texto se hacen aparentes cuando se encuentran en una página. Algunos trabajan juntos mejor que otros, y algunos funcionan solo cuando se colocan de cierta manera. Por ejemplo, nuestro diseño funciona técnicamente de dos maneras:
La Figura 1 muestra el diseño utilizado en nuestro ejemplo anterior. Los bloques grises representan el título, la foto y el texto.
La Figura 2 muestra cómo se aplicarían los mismos principios a su inversión: un elemento grande equilibrado por dos elementos más pequeños. Sin embargo, esta foto en particular se ve mejor a la derecha.
Nuestro modelo está mirando hacia la izquierda. En la figura 1, ella está mirando el texto. En la figura 2, ella está mirando hacia otro lado del texto. Eso podría haber funcionado si ella estaba mirando a la cámara, pero debido a que está mirando hacia otro lado, pierde algo de impacto. No mucho, pero suficiente para importar.
El modelo muestra alternativamente interés en el texto y, cuando está invertido, lo ignora. La disposición de los elementos establece una actitud positiva o negativa.
Alineación basada en hitos
A veces, lo que hace que los elementos funcionen de cierta manera también proporciona pistas sobre el espacio y la alineación. Observamos cómo los ojos de la modelo apuntan hacia la izquierda, pero la foto y el texto contienen otras señales visuales.
Las líneas implícitas entre puntos de referencia en la tipografía y la imagen abundan en esta composición:
- El ojo, los labios y el borde de la nariz de la modelo se encuentran con el borde de la columna de texto de la derecha.
- La columna de texto de la izquierda se encuentra con el borde izquierdo del título. Casi llega al borde del cabello de la modelo, pero no llega a ser consistente con la columna de la derecha.
- La cara de la modelo (particularmente los ojos y la boca) define el espacio vertical del título.
- La parte inferior de la foto marca el tercio inferior de la composición (en la regla de los terceros).
- Los ojos de la modelo están a un tercio de la parte superior de la composición.
- El centro de la cara de la modelo y el borde derecho del titular se encuentran en los puntos de un tercio y dos tercios del ancho de la composición.
Algunos hitos tienen más poder que otros. Los diseñadores y fotógrafos podrían debatir, por ejemplo, si los ojos de la modelo son más influyentes que su silueta. Pero un diseño basado en cualquier punto de referencia es mejor que un diseño que los ignora.
Usar funciones para crear armonía
Los no diseñadores que intentan hacer diseños a veces organizan elementos basados en cómo encajan en la página. El espacio debe ser respetado, pero no siempre conduce al mejor diseño.
La Figura 5 alinea los elementos con el espacio de la página y basa todo en los límites del lienzo.
La figura 6 , sin embargo, basa su diseño en los puntos focales de la foto. El resultado es una apariencia más aerodinámica.
La figura 5 es ineficiente porque los espectadores rebotan entre los puntos focales: al título, a la cara, hasta el texto. La línea más simple es recta. Por lo tanto, la figura 6 guía la mirada del espectador fácilmente de izquierda a derecha, de un elemento al siguiente. El quid del segundo diseño es una banda estrecha que se extiende a lo largo de la alineación de encabezado-cara-texto.
En estas imágenes, los lectores se sienten atraídos por la cara del modelo, el título y el texto, por lo general en ese orden. Esas son tres áreas diferentes para mirar. Alinearlos da el enfoque de diseño.
La respuesta correcta
Los tres diseños a continuación usan los mismos elementos de título, foto y texto:
El primer diseño tiene el mayor "espacio para respirar". El segundo respeta el texto. El tercer diseño usa el espacio negativo para lograr el equilibrio. Los tres usan puntos de referencia pero de diferentes maneras. ¿Es uno el mejor?
Buscar una respuesta puede cegarnos a lo obvio: que las soluciones múltiples pueden ser igualmente válidas cuando los elementos funcionan juntos. Los puntos de referencia visuales son oportunidades, no reglas. Eche otro vistazo al primer diseño.
Cuanto más se ajusten los elementos a las líneas implícitas, más se destacará un elemento no conforme. Aquí, el diseñador rompe la palabra "Señales" de la alineación vertical del otro texto, enfatizando así la palabra clave.
No hay duda de lo que está promoviendo la página. El éxito no se mide por cuán estrictamente los elementos se ajustan a los principios del diseño, sino por cuán bien la página comunica su mensaje.
Escrito exclusivamente para Webdesigner Depot por Ben Gremillion. Ben es un escritor y diseñador independiente quien resuelve los problemas de comunicación con un mejor diseño.
¿Cómo sigues los puntos de referencia en tus diseños? ¿Qué funciona mejor para usted y qué no?