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 con├│cen 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.

todo de colores para un dise├▒o

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.

tipografia para un dise├▒o

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.

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.

contraste y 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 ustedes, ┬┐hacen uso del contraste para potenciar sus dise├▒os?. ┬┐Tienen alg├║n truco imprescindible que quieran compartir?. Y esperamos que haya sido ├║til este art├şculo!


Avatar

Claudio Briones Ogalde

CEO | Dise├▒ador Gr├ífico & Web | Director Creativo Rufino | Dibujante T├ęcnico | Nada m├ís gratificante que estampar tu propio Ego en una creaci├│n.

0 commentarios

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

┬┐Hablemos?
message
whatsapp