El lenguaje visual de un sitio web impresiona a un visitante mucho más allá de su primera mirada.
De hecho, al observar los mejores sitios, notas que los pequeños detalles también te hablan inconscientemente. consistencia mejora su experiencia en el sitio y, como resultado, hace que sea más probable que regrese.
En este artículo exploraremos lo que hace un diseño consistentey presentaremos algunos de los diseños de sitios web más consistentes.
Comente al final del artículo sobre la consistencia de estos sitios web y siéntase libre de agregar enlaces a otros que sigan este principio.
¿Qué entendemos por consistencia en el diseño? Conforme esta definiciónLa consistencia se puede definir como: «Una uniformidad armoniosa o acuerdo entre cosas o partes».
Su objetivo como diseñador es crear orden, para que sea más fácil para los usuarios encontrar la información que buscan. La consistencia puede ayudarte a lograr este objetivo.
Lista de verificación de detalles
Primero, definamos los criterios por los cuales determinaremos si los sitios web que estamos revisando aquí son consistentes. Establecer los criterios por sí mismo también beneficiaría su propio trabajo de diseño diario. Como me gusta decir, un buen diseño se crea primero con una buena observación. Estos son nuestros criterios:
Consistencia tipográfica:
- ¿Hay un ritmo vertical consistente?
- ¿La alineación tipográfica es consistente?
- ¿Son consistentes las elecciones de patrones?
- ¿La navegación tipográfica es predecible entre páginas?
Consistencia gráfica:
- ¿Las imágenes del sitio web transmiten un estado de ánimo consistente?
- ¿Los colores de las imágenes coinciden?
- ¿Las texturas de la imagen son consistentes?
- ¿Son consistentes los tamaños de las imágenes con la estructura general del sitio y entre sí?
Consistencia de color:
- ¿Se usan los colores de manera consistente en todas las páginas?
Consistencia de iconos y botones:
- ¿Los iconos del sitio pertenecen a la misma familia?
- ¿Los iconos coinciden en tamaño?
Un sitio web no tiene que cumplir con estos criterios al pie de la letra, pero la lista es un buen punto de partida para ayudarlo a hacer que sus propios diseños sean consistentes y armoniosos.
Bien, ahora tenemos una pequeña lista de verificación con la que jugar. ¡Revisemos nuestros sitios web, aprendamos de ellos e inspirémonos!
52 Semanas de experiencia de usuario
Cuáles son algunos de los atractivos de este sitio web:
- El espacio en blanco en el encabezado se divide por igual.
- La tipografía está alineada consistentemente, a la izquierda con una derecha irregular.
- La navegación paginada persistente en la parte superior es inteligente y familiar.
- Las imágenes de las publicaciones son siempre en blanco y negro.
Ahora, dado que este artículo es sobre detalles, quiero señalar dos problemas menores con este sitio web, ambos en el pie de página: Primero, observe cómo «el botón de búsqueda Ir» tiene un reflejo, mientras que otros elementos en el sitio no lo tienen (compárelo, por ejemplo, con RSS botón en la parte superior).
En segundo lugar, observe que el espacio entre los encabezados y el texto es mucho más estrecho en el pie de página en comparación con el resto del sitio.
Cintas rojas
- Primero, el elemento más destacado del sitio: ¡rojo! Se usa de manera hermosa y consistente desde el logotipo hasta los encabezados, los enlaces y los botones.
- A continuación, la textura gráfica del botón es la misma que la utilizada para el logotipo.
- También observe que los botones están visualmente todos en la misma familia, incluso los íconos sociales en la parte inferior.
- El tipo de pantalla es una serifa agradable, nuevamente, se usa de manera consistente desde el logotipo hasta los encabezados y los botones.
- Finalmente, los elementos de texto en todo el sitio están alineados de manera consistente, irregulares a la izquierda y a la derecha.
Yaron Schön
- Lo primero que llama la atención es cómo la ilustración del encabezado juega con la profundidad. Incluso los cuatro gráficos a continuación salen de contenedores y juegan con la profundidad de la misma manera.
- La tipografía está perfectamente alineada en una cuadrícula.
- La fuente está bien elegida y ejecutada. La página principal y otras páginas también muestran continuidad.
- Los colores también son muy consistentes, jugando muy bien con azules oscuros y verdes azulados desde el encabezado hasta el pie de página.
Fuzzco
- Mire la textura en la navegación superior; también se utiliza para las imágenes inferiores.
- Verifique el tipo de encabezado en las páginas; bellamente elaborado con Flash personalizado, lo que le da un toque creativo.
- El serif es consistente en la página principal, pero se rompe un poco en las páginas internas.
- Los colores en la parte superior de la navegación coinciden con el pie de página, armonizando y enmarcando el contenido.
Impulso de estilo
- El tamaño definitivamente hace que este sitio web sea consistente: grande. Botones grandes, imágenes grandes (todas del mismo tamaño), letras grandes, espacios en blanco grandes.
- El color se mantiene al mínimo y se utiliza bien. El azul claro mantiene la armonía y el gris secundario juega con la profundidad y la jerarquía.
- Los botones son todos grandes y uniformes. También están ligeramente redondeados para coincidir con el cuadro de búsqueda.
- La estructura de cuadrícula es simple y le dice qué sigue. Incluso el pie de página es proporcional, lo que parece estar cerca de la proporción áurea.
Delicioso monstruo
Este sitio no es nuevo, pero es bueno porque se ha mantenido constante a lo largo de los años y no ha envejecido en absoluto. La atención al detalle ayudó.
- Fíjate en las texturas. El sitio está enmarcado por un estante de madera, que se vincula con el tema del software de la empresa.
- Los elementos gráficos como el césped y las plantas mantienen la armonía.
- Cada sección tiene esquinas redondeadas, incluso los botones de presentación de diapositivas.
- El amarillo verdoso domina la página, invitándote a entrar en este mundo imaginativo y memorable.
ricardo meier & Arquitectos socios.
Fue diseñado por Massimo Vignelliquien es conocido por dominar la cuadrícula y producir diseños modernos, consistentes y lógicos.
- Observe la alineación de los gráficos. El chico de la izquierda en el menú se alinea con las imágenes de abajo.
- La regla horizontal debajo de la navegación secundaria es persistente y ayuda a los usuarios a navegar por el sitio.
- El espacio entre la navegación y el contenido del cuerpo es consistente, lo que le da al ojo un camino claro a seguir.
- Y la tipografía es simple, alineada a la izquierda y sans-serif, cayendo constantemente en la cuadrícula.
El equipo de atrás Arquitectos de información también dominó la simplicidad, el diseño de cuadrícula y la consistencia.
- Observe cómo la navegación en la parte superior está alineada con el contenido del cuerpo a continuación.
- La paleta de colores es simple y consistente: rojo, blanco y negro.
- Los elementos textuales se alinean uniformemente. Observe cómo el espacio entre las reglas horizontales es consistente en toda la página.
minero wilson
- Los datos y el metacontenido están alineados en la primera columna, seguidos del contenido del cuerpo.
- Observe cómo la navegación superior encaja en la cuadrícula, alineándose con el contenido a continuación.
- La tipografía es simple en blanco y negro: blanco para los títulos de las secciones, negro para el cuerpo del texto.
Tapbots
- Lo primero que me llama la atención es el excelente uso de los espacios en blanco, especialmente el espaciado uniforme entre el logotipo y la navegación, tanto arriba como abajo.
- Todos los íconos parecen provenir de la misma familia, creando armonía.
- El uso de la profundidad, desde el gráfico superior hasta las ilustraciones de pie de página, también es consistente.
- Los colores coinciden en toda la página: el negro superior coincide con el inferior; el botón rojo en la parte superior coincide con el botón de búsqueda a continuación; y la navegación gris coincide con la barra de pie de página gris.
conclusión
El diseño consistente requiere muchas herramientas y puede ser difícil de lograr.
Un consejo que puedo dar es comenzar con una buena cuadrícula y luego construir un marco de alambre encima. Esto le dará una vista panorámica de los gráficos y cómo se relacionan entre sí.
Los ejemplos anteriores deberían darle algo que pensar en términos de ejecución de su diseño.La consistencia se compone de muchas partes, todas las cuales son ingredientes esenciales en el proceso.
Escrito exclusivamente para Webdesigner Depot por Noam Almosnino, un diseñador web de Brooklyn, Nueva York. Sigue a Noam en Twittero visita su web holanoam.com.
¿Conoce otros sitios web sólidos para compartir con nosotros? ¡Por favor publícalos en los comentarios!
