Análisis y aplicación del principio de "contraste" en diseño web.

El diseño web se compone de muchos elementos diferentes, y estos elementos tienen diferente importancia. Algunos elementos deben ser particularmente destacados, algunos elementos están relacionados entre sí y otros elementos no tienen ninguna correlación. Lo que es más difícil es cómo transmitir visualmente de forma eficaz la relación entre los elementos. Aquí es donde entra en juego el principio de contraste.

El contraste es la diferencia entre dos o más elementos. Por el contrario, los diseñadores pueden crear interés visual mientras dirigen la atención de los usuarios. Imagínese si todos los elementos de la página tuvieran el mismo aspecto, entonces el contenido se sentiría desorganizado, no habría "flujo (visual)", no habría una estructura clara y sería difícil de entender y aceptar. Por tanto, el contraste es una parte importante del diseño web.

En este artículo, veremos cómo diseñar mejores páginas web mediante los principios de contraste de color, tamaño y alineación.

contraste de color

Cuando la mayoría de la gente escucha la palabra "contraste", lo primero que piensa es en el color. Aunque el principio de contraste implica mucho más que solo color, el color puede ser de gran ayuda para ayudar a los usuarios a identificar diferentes elementos en una página.

Generalmente, las páginas incluyen un encabezado, un área de contenido y un pie de página. Entonces necesitamos distinguir claramente estas tres partes diferentes visualmente. Una buena forma de hacerlo es utilizar diferentes colores de fondo.

El sitio web de churchmedia es un buen ejemplo. Utilice un color de fondo más oscuro tanto para el encabezado como para el pie de página, y blanco para el área de contenido. A través de esta diferencia, se puede resaltar claramente el contenido y mostrar su importancia. Si miramos un poco más a fondo, también hay un contraste de color de fondo diferente en el área de contenido: se usa un azul claro para la sección "caso". Debido a que el contraste entre este y otras partes del contenido es muy pequeño, significa que las dos partes están relacionadas.

Portafolio de Phil Renaud Este sitio web utiliza un diseño único y una combinación de colores extremadamente hermosa. El sitio web está diseñado en color marrón en su totalidad y utiliza un amarillo dorado para aumentar el contraste entre el área de navegación vertical y otras áreas.

El color también se puede utilizar para crear contraste entre el texto. En Billy Tamplin se utilizan diferentes colores en el título, subtítulo y párrafos del artículo para distinguir razonablemente cada parte y establecer una estructura visual, lo que finalmente logra buenos resultados. Como interfaz de un blog, es importante establecer contraste entre el título del artículo y el contenido principal. De esta manera, cuando los usuarios se desplazan por la página, pueden ver claramente dónde comienza y termina el artículo.

comparación de tamaño

Otra forma de contrastar el diseño de la página es utilizar diferentes tamaños para diferentes elementos. En otras palabras, hacer que algunos contenidos sean más grandes que otros.

Cuando no se puede confiar en el color, resulta importante crear contraste a través del tamaño. Taxi viene en pocos colores y tiene muchas novedades en sus páginas. Por lo tanto, para establecer la estructura del diseño de tres columnas, los diseñadores utilizaron un ancho mucho mayor en la columna del medio: más del doble que las columnas izquierda y derecha. Permita que los usuarios vean de un vistazo que la columna del medio es la parte más importante de la página.

Así como los títulos pueden usar el color para crear contraste, también puede hacerlo el tamaño. Los títulos son una excelente manera de establecer una estructura visual en el contenido del sitio web. El sitio web de Imaginaria Creative utiliza titulares grandes para captar la atención de los usuarios y retenerlos para que lean más párrafos más pequeños a continuación.

Comparación de alineación

Una buena alineación juega un papel importante en el diseño web de alta calidad. Por lo general, las cosas se ven y se sienten mejor cuando están alineadas. Por lo tanto, creo que usar diferentes alineaciones para crear contraste es más difícil y debería usarse con más moderación. Pero puede resultar muy eficaz si se hace correctamente.

LegiStyles utiliza un gran espacio en blanco a la izquierda del bloque de contenido debajo del título. Junto con el gran tamaño del título, crea un bonito efecto de contraste. Si desea utilizar alineaciones diferentes, asegúrese de agrandar esta escala diferente; de ​​lo contrario, terminará pareciendo un mal error de diseño.

Los grandes bloques de texto centrados son un no-no tipográfico. Porque dificultará la lectura del texto. Sin embargo, intente mezclar párrafos de texto alineados a la izquierda con títulos alineados al centro. Esta es otra excelente manera de crear contraste utilizando diferentes alineaciones. Combinado con una bonita fuente serif, también puedes conseguir un bonito efecto.

Simon Collison utiliza títulos alineados al centro y texto alineado a la izquierda en cada bloque de contenido. Aunque el texto del título no es mucho más grande que el texto del párrafo, la diferencia ya puede verse.

Una lista aparte es otro gran ejemplo de encabezado centrado con párrafos alineados a la izquierda.

Hazlo

Aprender a crear un contraste adecuado en sus diseños es como aprender otros principios de diseño: requiere práctica. Dedique algún tiempo a estudiar el trabajo de grandes diseñadores y observe cómo utilizan el contraste. Recuerde, el contraste es "diferente". Si dos elementos son de naturaleza muy diferente, asegúrese de que sean visualmente distintos.

Texto original en inglés: El principio de contraste en el diseño web