¿Cómo crear contraste en tus diseños?

El principio del contraste es una de las maneras más efectivas para llamar la atención de tus usuarios. El principio del contraste te indica que, si ciertos elementos no son los mismos, entonces debes de hacerlos lucir realmente diferentes con el fin de resaltar los elementos más importantes.

Existen 3 maneras principales con las cuales puedes crear contraste las cuales son: tamaño, color, y peso.

Tamaño

El contraste te ayuda a generar jerarquía visual en tu diseño, pero si todos tus elementos son del mismo tamaño, ¿Cómo podrías llevar los ojos de tus usuarios a los elementos más importantes?

Puedes escalar el tamaño de tus objetos y textos para crear por medio del tamaño contraste y jerarquía visual, puedes hacer aumentos al doble o cuádruple por ejemplo del tamaño original de algún elemento. 

Color

El color es la técnica más utilizada para crear contraste, lo puedes ver todo el tiempo en muchos lugares, ahora que estás consciente del contraste estoy seguro de que podrás verlo en muchos diseños. Para poder crear contraste con colores, puedes utilizar la una combinación de colores complementarios, aprende más sobre colores en ¿Cómo combinar colores con la rueda de colores?

Peso

El peso es otra forma popular de generar contraste, cuando trabajes en tipografía, asegúrate de que el tipo de fuente que selecciones para tu proyecto cuente con distintos pesos, los más populares son «Regular» y «Bold».

Toma en cuenta que el peso no solo lo puedes aplicar a tu fuente tipográfica, también lo puedes agregar a tus formas como en el siguiente ejemplo:

Ahora toma un segundo y mira este ejemplo donde las 3 formas principales de crear contraste son aplicadas en una sección de un sitio web.

He generado las 3 principales maneras de crear contraste, además he hecho uso del principio de proximidad, alineación y repetición:

• Tamaño: El título es evidentemente mucho más grande que cualquier otro texto, sin duda alguna primero miras la colorida imagen y luego miras el título. ¿Qué palabra del título llamo tu atención?
• Color: He tomado colores de la imagen, específicamente de la toronja para poder resaltar la palabra «saludable» en el título
• Peso: El texto del título tiene mayor peso, he utilizado estilo «Bold» para crear contraste, pero al mismo tiempo puedes ver la manera en la que he creado peso en los botones. El primer botón tiene peso, ya que está relleno con un color mientras que el segundo botón luce más ligero porque no he agregado ningún color de relleno

Estar consciente del contraste te permitirá diferenciarte de las personas que crean sitios con aquellas que saben no solo saben crear sitios web, sino que también saben diseñar y captar la atención de los usuarios. Son simples reglas o «trucos» del diseño que te ayudan a marcar una diferencia.

Recapitulando

El contraste que crees en tu sitio web permitirá captar la atención de tus usuarios, a los ojos les encanta ver contraste. Cuando diseñas debes de generar interés en tus usuarios y debes de organizar tu contenido para poder transmitir el mensaje correcto, el contraste te ayuda a cumplir con estos dos propósitos.

Puedes generar contraste combinando fuentes tipográficas, colores, las formas de tus botones, líneas gruesas, líneas delgadas y tamaños solo por mencionar las más principales.

Por último, debes de evitar que el contraste no sea notorio, por ejemplo, utilizando dos tipos de fuentes tipográficas similares, o colores muy similares. De esta manera hemos concluido con los principios del diseño, te invito a repasar rápidamente los 4 principios fundamentales del diseño. Con esto estás listo para ver temas un poco más avanzados como el color y tipografía.