Una revisión de diseños consistentes en la Web

El lenguaje visual de un sitio web impresiona a un visitante mucho más allá de su primer vistazo.

De hecho, al observar los mejores sitios web, observa que los pequeños detalles le hablan subconscientemente y que la coherencia mejora su experiencia en el sitio web y, como resultado, le hace más probable que regrese.

En este artículo exploraremos qué hace que un diseño sea consistente , y mostraremos algunos de los diseños de sitios web más consistentes que existen.

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é queremos decir con consistencia en el diseño? De acuerdo a esta definición , la consistencia se puede definir como: "Una uniformidad o acuerdo armonioso entre cosas o partes".

Tu objetivo como diseñador es crear orden para que los usuarios encuentren fácilmente la información que están buscando. La consistencia puede ayudarte a lograr ese objetivo.

Lista de verificación de detalles

Primero, definamos los criterios por los cuales determinaremos si los sitios web que revisamos aquí son consistentes. Establecer criterios para usted también beneficiaría su propio trabajo de diseño diario. Como me gusta decir, se crea un buen diseño con buena observación . Aquí están nuestros criterios:

Consistencia tipográfica:

¿Hay un ritmo vertical constante?
¿Es consistente la alineación tipográfica?
¿Las elecciones de tipografía son consistentes?
¿La navegación tipográfica es predecible en todas las páginas?

Consistencia gráfica:

¿Las imágenes del sitio web transmiten un estado de ánimo constante?
¿Los colores en las imágenes coinciden?
¿Son consistentes las texturas de las imágenes?
¿Los tamaños de las imágenes son consistentes con la estructura general del sitio web y entre ellos?

Consistencia del color:

¿Los colores se usan de manera consistente en todas las páginas?

Consistencia de icono y botón:

¿Los iconos de la página web son de la misma familia?
¿Los iconos coinciden en tamaño?

Un sitio web no tiene que cumplir estos criterios al punto, pero la lista es un buen punto de partida para ayudar a que sus propios diseños sean consistentes y armoniosos.

De acuerdo, ahora tenemos una pequeña y agradable lista de verificación para jugar. ¡Revisemos nuestros sitios web, aprendamos de ellos e inspiremos!

52 semanas de UX

¿Cuáles son algunos de los aspectos más destacados de este sitio web?

El espacio en blanco en el encabezado está dividido por igual.
La tipografía está constantemente alineada, al ras izquierda con un derecho desigual.
La navegación paginada persistente en la parte superior es inteligente y familiar.
Las imágenes para las publicaciones son siempre en blanco y negro.

Ahora, debido a que este artículo trata sobre detalles, quiero señalar dos pequeños problemas 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 los otros elementos del sitio web no lo hacen (compare, por ejemplo, el botón RSS en la parte superior).

En segundo lugar, observe que el espacio entre los títulos y el texto es mucho más estricto en el pie de página en comparación con el resto del sitio web.

Cintas de rojo

Primero, el elemento más destacado del sitio web: ¡el rojo! Bella y consistentemente usado desde el logo hasta los encabezados de los enlaces a los botones.
A continuación, la textura de los gráficos de los botones es la misma que se usa para el logotipo.
Además, observe que los botones son visualmente todos de la misma familia, incluso los íconos sociales en la parte inferior.
El tipo de pantalla es una buena serif de losa de nuevo, que se usa consistentemente desde el logotipo hasta los encabezados y los botones.
Finalmente, los elementos de texto en todo el sitio web están alineados de manera consistente, alineados a la izquierda y deshilachados a la derecha.

Yaron Schoen

Lo primero que llama la atención es cómo la ilustración en el encabezado juega con la profundidad. Incluso los cuatro elementos gráficos a continuación salen de sus contenedores y juegan con la profundidad de la misma manera.
La tipografía está perfectamente alineada en una grilla.
El tipo de letra está bien elegido y ejecutado. La página de inicio y otras páginas muestran continuidad también.
Los colores también son muy consistentes, jugando muy bien con el azul oscuro hasta el verde azulado, desde el encabezado hasta el pie de página.

Fuzzco

Mire la textura en la navegación superior; también se usa para las imágenes cerca de la parte inferior.
Echa un vistazo al tipo en el encabezado en las páginas; muy bien hecho con Flash personalizado, dándole una sensación creativa.
El serif es consistente en toda la página de inicio, pero se rompe un poco en las páginas internas.
Los colores en la navegación superior coinciden con el pie de página, armonizando y enmarcando el contenido.

Styleboost

El tamaño definitivamente hace que este sitio web sea consistente: grande . Botones grandes, imágenes grandes (todos consistentes en tamaño), tipo grande, espacio en blanco grande.
El color se mantiene al mínimo y se usa 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 son ligeramente redondeadas, que coinciden con el cuadro de búsqueda.
La estructura de la grilla es simple y te dice lo que vendrá después. Incluso el pie de página está en proporción, lo que parece estar cerca de la proporción áurea.

Delicioso monstruo

Este sitio web no es nuevo, pero es hermoso en la forma en que se ha mantenido constante en los últimos años y no ha envejecido un poco. La atención al detalle ha ayudado.

Fíjate en las texturas. El sitio web está enmarcado por un estante de madera, que se relaciona con el tema del software que ofrece la empresa.
Los elementos gráficos como hierba y 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.

Richard Meier & Partners Architects.

Fue diseñado por Massimo Vignelli , que es conocido por haber dominado la grilla y producir diseños modernos, consistentes y lógicos.

Observe la alineación de los elementos gráficos. El tipo alineado a la izquierda en el menú se alinea con las imágenes a continuación.
La regla horizontal debajo de la navegación secundaria es persistente, lo que ayuda a los usuarios a orientarse en el sitio web.
El espacio entre la navegación y el contenido del cuerpo es consistente, dando a la vista un camino claro a seguir.
Y la tipografía es simple, al ras izquierda y sin serifa, cayendo constantemente en la cuadrícula.

El equipo detrás Arquitectos de información también ha dominado la simplicidad, el diseño de la 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 están uniformemente alineados. Observe cómo el espacio entre las reglas horizontales es consistente en la página.

Wilson Miner

Las fechas y el contenido meta están alineados en la primera columna, seguidos por el contenido del cuerpo.
Observe cómo la navegación en la parte superior cae en la cuadrícula, alineándose con el contenido a continuación.
La tipografía es un simple blanco y negro: blanco para los títulos de las secciones, negro para la copia del cuerpo.

Tapbots

Lo primero que llama la atención es el excelente uso del espacio en blanco, particularmente el espacio 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 del pie de página, también es consistente.
Los colores coinciden en la página: el negro en la parte superior coincide con el pie de página; 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 gris en el pie de página.

Terminando

El diseño consistente requiere muchas herramientas y puede ser difícil de lograr.

Un consejo que puedo ofrecer es comenzar con una buena cuadrícula y luego construir una estructura metálica sobre ella. Esto le dará una vista de pájaro de los elementos gráficos y cómo se relacionan entre sí.

Los ejemplos anteriores le darán algo para pensar en la 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 en Brooklyn, Nueva York. Seguir a Noam en Twitter , o visite su sitio web hellonoam.com .

¿Conoce otros sitios web consistentes para compartir con nosotros? Por favor, publícalos en los comentarios!

diseño diseño web consistencia