Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Design Theory
Webdesign

Los principios Gestalt: teoría de diseño para los diseñadores web

by
Length:ShortLanguages:
This post is part of a series called Web Design Theory.
An Introduction to Color Theory for Web Designers
The Scaling Fallacy and Web Design

Spanish (Español) translation by Rodney Martinez (you can also view the original English article)

La forma en la cual las personas ven nuestros diseños, será la causa principal por lo cual ellos sencillamente dejen de verlos. ¿Qué hacen los Principios Gestalt? Analizan este fenómeno, y lo hacen en forma tal que; es uno de los principios fundamentales que todos y cada uno de los diseñadores web deberían de tomar en cuenta cuándo estén avanzando a través del proceso de diseño. Por supuesto, examinaremos cómo podemos entender este principio y ¡cómo implementarlo en para mejorar nuestro propio flujo de trabajo!

Teoría del Diseño y el Diseño Web

Intentar sobresalir con un diseño bueno y creativo puede parecer una tarea fácil para cualquiera que ha asistido a alguna escuela de diseño, pero… para el 90% de los diseñadores web ahí afuera quienes nunca han asistido a un curso de diseño o a una escuela de diseño, a menudo vienen, ya sea; desarrolladores o generalmente diseñadores sin el más mínimo conocimiento de cómo aplicar un fondo. Pero la pregunta aún continua… ¿Qué define, realmente, un buen diseño web? ¿Será qué se trata de talento? O, ¿algún tipo de persona que posee un ojo especial que sabe; qué es lo que funciona y qué es lo que no lo hace? O, simplemente hay algún método lógico y científico detrás de todo esto del diseño web, que de verdad puede guiar a los diseñadores, críticos, he incluso a los clientes acercarse a un buen diseño.

Este artículo es apenas una parte de una serie de artículos sobre la teoría de diseño que te guiara a través de los principios básicos de los procesos de diseño. Pero primero, enfocaremos nuestra atención en las ideas principales más importantes que pueden hacer la gran diferencia en el diseño final.

El Principio Gestalt

De hecho, ¿Qué significa Gestalt? Gestalt es una palabra de origen alemán cuyo significado es o podría ser: “la esencia de la forma completa de una entidad”, y esta sencilla definición puede ser una de las reglas más importantes de diseño.

Más a menudo de lo que quisiéramos, los diseñadores tienen la tendencia a centrarse en los detalles del diseño web en lugar del aspecto general que tendrá el sitio. Por ejemplo, se enfocan en los trazos, las sombras, los filtros, fuentes, etc. Y no es que este mal, sino qué; ¿Cómo podrán hacer alguna diferencia si al cliente no le gusta el diseño al primer vistazo? Lo que la mayoría de las personas no entienden es que el cerebro primero ve la forma general de cualquier diseño y, entonces, empieza a enfocarse en los detalles.

Miremos la siguiente imagen…

A primera vista, verás una pareja de cabezas de personas ancianas, pero al echar un vistazo, aún más de cerca, claro, empezarás a ver los detalles (que sin lugar a dudas, algunas personas simplemente no pudieron notarlos a la primera ocasión) que convierte estas imágenes y entonces empiezas a ver una imagen; totalmente diferente de la que, supuestamente, habías visto.

Sin embargo, intentemos ver algo de cómo los detalles, simplemente no importan, veamos los siguientes dos ejemplos:

Sinceramente, a primera vista, estas dos imágenes parecen ser idénticas… Sin embargo, aunque no lo creas hay, no sólo una sino, 5 diferencias sutiles en los detalles que tienen un pequeño impacto en el “diseño” completo.

¿No lo crees, verdad? Pues veamos la siguiente lista:

  1. El pájaro negro en la esquina superior izquierda esta viendo en la dirección opuesta
  2. El sombrero del hombre de la izquierda es diferente, por supuestos, al de la derecha.
  3. El palo para caminar del hombre de la derecha esta más volteado y es un poco más oscuro.
  4. Los ladrillos sobre el pavimento al fondo a la derecha, son más grandes en la segunda imagen.
  5. La mujer esta mirando en la dirección opuesta

Ninguno de estos cambios realmente tuvo algún impacto en el aspecto general de la imagen… entonces, veamos otro ejemplo muy común:

Hay dos versiones del Volkswagen Beetle; el modelo de 1937 y el del año 1973, y a pesar de que hay una mayor cantidad de cambios en los detalles del diseño por más de 4 décadas, el diseño aparentemente es el mismo. ¿Por qué? Esto mi amigo, es la manera como trabaja nuestro cerebro, vemos fotografías completas y definimos la forma entera mucho más rápido y más fácil de lo que vemos o notamos los cambios en los detalles.

Si vemos en la imagen de arriba, la cual, a pesar de que es un Dálmata oliendo el piso que esta bajo la sombra de los arboles. El perro no lo reconocemos mediante identificar primero sus partes (pies, orejas, nariz, etc) sino que deducimos que es un perro a través de los puntos de referencia que nos permita identificarlo y luego reconocerlo (sus partes). De hecho, el perro es percibido como un todo de la imagen, en lo absoluto.

Los mismo pasa a cada diseño de sitio web que creamos, el diseño nunca es percibido por identificar sus partes (Encabezado, Navegación, Contenido, botones, etiquetas… etc.), el diseño es percibido cómo un todo al primer vistazo.

Cuando estaba en la universidad, uno de mis profesores resumió todo esto en una simple oración, él dijo: “si ven un diseño, y les gusta, entonces decidan trabajar y ajustar los detalles, después de eso sabes que es un buen diseño, sin embargo, si empiezas primero ajustando para hacer que te guste… entonces sabrás que es un mal diseño… no desperdicies tu tiempo en tratar de arreglarlo… en lugar de eso, cámbialo completamente”, este profesor comprendió que la clave mágica en cualquier diseño es qué; vemos las cosas como un todo y no como la suma de sus partes.

Pregúntale a cualquier persona que haya subido al Big Ben, o a la Torre Eiffel o a las Pirámides de Giza… todos ellos estarán de acuerdo en que la forma general fue lo más destacado de cada uno de ellos, eso fue porque pudieron ver estos puntos de otra manera de cómo lo habíamos visto anteriormente (visitando, en fotos, en una película, en un folleto de viajes) todos vimos la misma definición de la forma.

Aplicando los principios Gestalt al flujo de trabajo de Diseño Web

Debajo podrás ver algunos pocos ejemplos y a la par, sus respectivos diseños de siluetas. ¿Cuál es la diferencia? La vista de la silueta es lo que el cerebro identifica cómo la forma de la página (justo cómo lo hicimos anteriormente en el ejemplo del perro Dálmata, identificando su nariz, patas, etc., pero después que lo habíamos reconocido como un todo). Intenta cambiar cualquier cosa de la forma del contenido y resultará más o menos en el mismo diseño… y regresaras nuevamente dónde tu cliente con el mismo diseño después de que te hayan solicitado cambios harás sentir al cliente que no se ha hecho nada en lo absoluto.

“…el diseño lucirá igual hasta que hayas cambiado la estructura Gestalt, o sea, TODO”

Estarás sorprendido de cómo muchos diseñadores cometen este error y después se sorprenden de por qué el cliente aún odia ese diseño o siente que nada ha sido modificado o cambiado, incluso después de haber trabajado extenuantemente o mejorando los elementos individuales.

De acuerdo, tomemos algunos diseños y sus siluetas para comprender lo explicado:

Normalmente, el diseño como cuadrado (como en los últimos 4 diseños de los ejemplos de arriba) generalmente terminarán siendo solamente otro diseño ordinario, nada creativo. Siempre intenta experimentar con el “caparazón del contenido” de tu diseño. Intenta rotando las cajas algunos ángulos o cortándolas y cambiándoles una de sus esquinas… todo esto le añade a tu diseño creatividad y exclusividad.

“Siempre deberías empezar por el contenido, o la estructura general de la cubierta (el todo) de un diseño; olvida los detalles y los componentes individuales por ahora”.

Cuando eso este hecho y tú y tu cliente estén satisfechos con la estructura, agarra la estructura y entonces empieza a trabajar con los detalles. Te sorprenderás de cómo en muchas ocasiones un diseño empieza por terminar como una estructura coloreada cuando empiezas desde el interior hacia afuera. He visto a cientos de diseñadores empezando por el encabezado y la navegación al principio, y luego van diseñando los componentes y desde antes sabes que tienes una página empaquetada, coloreada correctamente, llena de contenido lo cual es útil desde una perspectiva de ubicar correctamente los elementos, sin embargo, desde una perspectiva de diseño nunca será creativa.

Piensa en tus diseños como en unos manís cubiertos de chocolate; si empiezas con el maní, desde el interior hacia afuera, la capa externa la cual todos verán (la capa de chocolate), siempre dependerá de la forma del maní y tendrás un poquito más de control.

Por otro lado, si trabajas tus diseños como un huevo de chocolate, trabajando sobre la capa exterior primeramente, y formándolo como tu lo deseas (ajustando los contenidos internos para que se ajusten a la cubierta, entonces ya no importa con qué lo rellenes, ¿por qué? Porque el diseño siempre será la forma del huevo que creaste desde el principio.

¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.