El contraste es uno de los principios básicos del diseño. Dos elementos que se oponen dentro de un mismo espacio, y la tensión que se produce entre esa diferencia. De hecho, a nuestros ojos les gusta el contraste. El poder hacer una diferenciación entre elementos, la rotura de la monotonía, siempre es algo que atrae. Y, evidentemente, tanto el diseño gráfico como el diseño web hacen uso del contraste a su favor. Y hoy queremos explorar como podemos mejorar el uso de esta herramienta en nuestros diseños.
Cuando lo usamos de forma correcta, creamos un punto focal que atrae la atención de todo el que mira. Con la importancia que esto tiene. Porque de nada nos sirve crear un diseño atractivo visualmente si la persona que lo mira, o que navega por él, se distrae con elementos superfluos y no llega donde queremos que llegue. El contraste nos permite realizar jerarquías visuales que siempre jueguen a nuestro favor, y que guíen de forma eficiente y sutil hacia donde queremos.
En este artículo nos queremos centrar en algunos de los tipos de contraste más evidente, pero no por ello conocidos por todo el mundo, que nos van a permitir potenciar nuestros proyectos, y dar uso de esta herramientas en unas vías diferentes. Seguro que muchos ya conocíais algunas de ellas, pero nunca está mal revisarlas y, quizás descubrir nuevas.
Contraste y Color
Empezamos con el uso que podemos hacer del color para mejorar el contraste en nuestros diseños. Lo primero que nos va a llegar a la mente es lo más evidente, que es el contraste entre el blanco y el negro. O los tonos claros y oscuros. Pero no tenemos solo porque focalizarnos en este uso del contraste, ya que estaremos limitando nuestras propias herramientas.
Uno de los usos más básicos es el contraste que se producen entre colores cálidos, fríos y neutros. Entre los colores cálidos tenemos los amarillos, naranjas y rojos. Para los fríos, azules, morados y verdes. Y en los neutros, blanco, negros, grises y marrones. Haciendo combinaciones entre estos grupos, crearemos un contraste entre los elementos de nuestro diseño lo suficientemente eficaces como para diferenciarlos entre ellos.
También mencionar el uso que podemos hacer entre tonos saturados y desaturados. Esta estrategia es muy buena cuando queremos que nuestro diseño haga uso de un solo color y que, a pesar de esto, queramos poner en valor ciertas partes. Por ejemplo, usar los elementos del fondo o con poca importancia con colores muy desaturados, para que la vista se centre en los colores saturados.
Contraste y Forma
El contraste no es más que una forma de poder diferenciar de forma simple elementos. Y si nos fijamos en la naturaleza, en toda su extensión, uno de los contraste más evidente que encontramos esta entre las formas geométricas y las formas orgánicas. Con formas geométricas nos referimos a rectángulos, círculos, triángulos, etc. Estas formas nos permiten tener un mejor orden en nuestro diseño, o apilar y crear estructuras con mayos facilidad.
Las formas orgánicas se inspirar en las naturaleza, y nos dan una impresión de fluidez y cercanía. Puedes usarlas en ilustraciones si los elementos de tu web tienen formas orgánicas, ya que proporcionan cierto dinamismo, y te ayudarán a diferencias la parte ilustrativas de la que contiene información.
Contraste y Tamaño
Si quieres hacer un elemento que llame la atención, tu primer pensamiento será hacerlo más grande. Y es que es evidente que, cuanto más grande, mayor importancia visual le queremos dar. De nada nos sirve trabajar en el elemento importante de nuestro diseño, y que en último lugar queremos que sea un captador de atención, si lo situamos junto a otro de gran tamaño que va a capturar todo el interés.
Contraste y Tipografía
Y hablando de tamaños, es algo que podemos extrapolar a las tipografías y textos. Es evidente que hay que diferenciar mediante su tamaño los títulos, subtítulos y cuerpos de texto. Si todas nuestras tipografías son del mismo tamaño, el lector no puede saber con claridad donde empieza y acaba un texto, o los títulos intermedios que separan las diferentes partes de un texto.
Además, el uso de diferentes tipografías serif o sans-serif según sea título o cuerpo de texto nos ayuda a remarcar este contraste. Este tipo de combinaciones es uno de los aspectos básicos que siempre tienen en cuenta los diseñadores cuando eligen tipografías. Y en Silo también hemos hablado de nuestras combinaciones tipográficas favoritas, que podrás usar en tus proyectos personales.
Contraste y Espacio en blanco
El contraste que se produce entre el contenido y los espacios en blanco (que no tienen que ser, literalmente, de color blanco) tienen funciones a varios niveles. En primer lugar, dejamos que nuestro diseño respire, y que la persona que observa no se encuentre con una gran cantidad de información en un espacio muy reducido. Esto puede provocar desde cierta fatiga visual y cansancio, lo cual es contraproducente con nuestra finalidad. De esto hablamos en nuestro artículo sobre el espacio en blanco.
Por otro lado, nos ayuda a organizar y jerarquizar los diferentes elementos de nuestra web, permitiendo saber que zonas son más importantes y cuales lo son menos. En una tienda online, por ejemplo, nos ayuda a tener un cierto orden y control para diferenciar de un solo golpe de vista donde está la información general de nuestra web, la información del producto, y el botón para comprar.
Contraste y Alineación
Si usas diferentes tipos de alineaciones en tu diseño, hay una norma básica: nuestros ojos siempre se van a dirigir a aquellos elementos situados en el centro de la pantalla. Y ahí es donde debes colocar la información de interés o que quieres que vean primero tus visitantes. Por supuesto, se va a crear una diferenciación clara entre esta pieza central, y otras organizas en columnas, o alineadas en los laterales. Y en el diseño web, la alineación gracias a herramientas como Flexbox, hace que alinear elementos sea más sencilla que nunca
Como hemos podido ver, son muchas las formas en las que podemos usar el contraste a nuestro favor, y que sea un aliado fiable cuando estemos diseñando. Teniendo estas pautas en mente, podemos incluso hacer combinaciones entre ellas para potenciarlas aún más, y que obtengamos resultados increíbles. Jugar con tamaños, y colores, o con formas y alineaciones. Ya está en vuestra mano descubrir cuales encajan mejor con vuestra forma de diseñar.
Y vosotros, ¿hacéis uso del contraste para potenciar vuestros diseños?. ¿Tenéis algún truco imprescindible que queráis compartir?. Como siempre, tenéis abiertos los comentarios, donde podéis escribir vuestras sugerencias, dudas y aporte.! Y esperamos que os haya sido útil este artículo!
Muy interesante.
Post muy interesante ya que los colores son algo que muchas veces sin darnos cuenta no le damos la importancia que se merece. Yo hace poco tuve que reconducir todo el diseño de la web a causa de esto, ahora la web ha quedado mucho más visual y legible.
Interesante a tenerlo en cuenta