() translation by (you can also view the original English article)
El desarrollo de un concepto significativo es un paso crucial en cualquier proyecto de diseño... pero es una habilidad que pocas personas se toman el tiempo de entender y apreciar. Hoy, Ahmed (Gerente de IU en Link Development y Gerente del Grupo de Usuarios de Adobe en Egipto) nos va a guiar a través de la creación de un concepto y el proceso de la inspiración. Vamos a ir a través del proceso paso a paso, hasta que lleguemos a un concepto exitoso para iniciar nuestro diseño web.
Por qué el desarrollo de un concepto es importante en el diseño web...
En mi último artículo, El principio de Gestalt: Teoría del diseño para diseñadores Web, establecimos la necesidad de comenzar cualquier diseño con el diseño de la cubierta que lo contiene primero antes de entrar en los detalles, en esta parte discutiremos la metodología para llegar a un diseño de la cubierta.
Cualquier forma de contención debería tener un concepto detrás de ella, pero lamentablemente, muchos diseñadores se centran solo en una forma de aspecto agradable que realmente no tiene ningún significado. O peor aún, diseñan un sitio web completo basado en frameworks preexistentes sin pensar ni siquiera un momento en cómo un diseño original podría aportar algún significado real al proyecto.
Un diseño realmente bueno tiene un significado detrás de él, no son solo las formas bonitas, los filtros o la tipografía, cada elemento debería decir algo sobre el proyecto subyacente.
En esta etapa, si has seguido la metodología de recopilación de requisitos creativos (Cómo obtener los requisitos creativos correctos de tu cliente), deberías tener suficiente información para construir y trabajar sobre la forma o el estilo del contenedor en el que encajará tu diseño.
Comienza por reunir una biblioteca de imágenes de referencia
Una de las maneras más fáciles y sencillas de encontrar ideas es pedirle a tu cliente que te dé algunas palabras clave para describir cómo quiere que la gente se sienta acerca de su sitio.... energético, fresco, joven, sólido... etc. E introduciendo esas palabras clave en cualquier buscador de imágenes como Google o Bing.
Al escoger las imágenes que te gustan, te encontrarás fácilmente con una gran biblioteca de ideas para empezar.
El diseño comienza con una lluvia de ideas
Como en cualquier ejercicio de lluvia de ideas, no descartes ninguna idea... por muy extraña que sea. Siempre es más fácil bajar el tono de un diseño que tratar de darle sabor... sentándote frente a tu biblioteca de ideas, toma un lápiz y un papel (que son excelentes herramientas en esta etapa) y empieza a bosquejar los conceptos que te vienen a la mente mirando tu biblioteca, bosquejar ayuda porque las ideas tienden a desvanecerse tan rápido como aparecen en tu mente :)
Por ejemplo, si un cliente me pide un diseño "fresco", simplemente escribiré "fresco" en Google, por ejemplo (o en tu motor de búsqueda preferido) y revisaré los resultados de las imágenes.
Aquí hay una muestra de lo que se me ocurrió:
¿Cómo me inspirarían estas imágenes? ¿Qué me dirían sobre la dirección del diseño?
Bueno, simplemente sabiendo que mi cliente quiere un diseño fresco y usando este método en la interpretación de las imágenes lo entendería:
- Debería optar por formas orgánicas o curvas.
- Se prefieren los tonos de color "frescos" (más sobre el color en un artículo posterior)
- Uso del estilo "cristal" y componentes semitransparentes.
- Tienen mucho espacio en blanco y no hay exceso de componentes
Normalmente prefiero hacer este ejercicio con otros 2 o 3 diseñadores juntos, ya que ayuda a rebotar diferentes ideas, le pediría a cada uno que busque imágenes durante 15 o 20 minutos, luego nos sentaríamos juntos y comenzaríamos a decir lo que vemos en cada imagen, te sorprenderías de cómo otras personas pueden ver algo totalmente diferente de lo que imaginas o ves, y eso podría abrirte paso a una idea totalmente nueva.
¡Es importante hablar durante esta etapa del proceso de diseño! La palabra "fresco" significa cosas diferentes para personas diferentes, así que no confíes únicamente en la búsqueda inicial de los resultados de la imagen o en tu propia interpretación como la fuente de inspiración definitiva.
¡No copies las ideas, róbalas!
Los buenos artistas copian, los grandes artistas roban,
- Pablo Picasso (1881 - 1973)
Mi interpretación de esta cita es la siguiente: Copiar otra idea te hará un buen diseñador, sin embargo, "robar" una idea o concepto de dentro de otro diseño y usarlo sabiamente (sin copiarlo descaradamente) te hará un gran diseñador.
Robar una idea es difícil, mucho más difícil que copiar, necesitas entender realmente el concepto para sacarlo de un lugar y trasladarlo a tu diseño.
Estudio de caso: Robar las pirámides
En un proyecto reciente, trabajé con un equipo en un sitio para un portal de turismo egipcio. No querían un sitio sencillo del estilo "Pirámides, Karnak, Faraón" que la mayoría de la gente buscaría... Querían algo moderno, pero querían mantener una identidad egipcia que dijera literalmente "este sitio es de Egipto".
Fue un verdadero desafío, pero al repasar la metodología anterior llegamos a imágenes como estas:
Ahora el cliente no quería diseños clichés que mostraran jeroglíficos sencillos o imágenes de antiguos templos egipcios y cosas así, pero al ver las imágenes empezamos a construir sobre la idea de que podemos usar algunos elementos como las paredes inclinadas y los antiguos portales egipcios y cómo se relacionarían con el sitio siendo un portal a Egipto.
El problema es que el único estilo que es único en Egipto es el estilo faraónico. Si fuéramos a usar el arte árabe, por ejemplo, no sería único de Egipto. Si mostramos el buceo o las playas, no es único. Si usamos cualquier otro estilo, no será único para Egipto y eso era un requisito estricto.
Al mismo tiempo, se nos dijo que no usáramos imágenes o jeroglíficos claros del Antiguo Egipto, ya que el cliente quería promover todo tipo de turismo egipcio, no solo los templos o las pirámides. Un diseño difícil de resumir, para estar seguros.
Al final se nos ocurrió un boceto como este:
Simplemente tomamos parte de los pilones del "portal" de entrada del templo de Karnak, usando solo las líneas inclinadas para identificar las paredes, el área del medio se usó para animar diferentes imágenes de Egipto y usamos el área izquierda para el logo y la navegación mientras que toda el área derecha se usó para el contenido.
Era un concepto muy simple, pero cumplía todos los requisitos. Tal idea habría sido difícil de recordar si no hubiéramos visto las fotos e imágenes que surgieron de una simple consulta de búsqueda de "Egipto".
Fuimos capaces de robar las ideas detrás del Templo de Karnak y las Pirámides, y luego usarlas en nuestro diseño.
Los buenos conceptos hablan por sí mismos
Algunas personas argumentaron que este concepto puede no ser muy claro cuando la gente mira el sitio, y eso puede parecer extraño, pero los conceptos no necesitan ser "entendidos" desde el primer vistazo a un diseño... ni deben ser visualmente claros en absoluto, no es obligatorio. Esto se puede entender fácilmente mirando los logotipos, tomemos el de Mercedes por ejemplo:
A primera vista para la mayoría de la gente, es solo una estrella de 3 puntas. Sin embargo, el concepto detrás de esta estrella es que representa su dominación de la tierra, el mar y el aire, con el brazo superior que representa el aire y los 2 brazos inferiores que representan la tierra y el mar.
¿Quién lo sabía? Muy poca gente fuera de la compañía... pero ese no es el punto, ¿verdad? Un buen concepto habla por sí mismo, aunque la gente no entienda inmediatamente lo que significa exactamente, las formas e ideas intencionales que están detrás siempre tomarán vida propia. Los diseños sin concepto no tienen ese tipo de vida... simplemente se quedan ahí.
Encontrar inspiración para los conceptos
Otra gran fuente de inspiración es tratar de mantenerse alejado de la pantalla. Muchos diseñadores tienden a visitar los sitios de inspiración de diseño, que contienen los mejores diseños del día. Aunque este es un buen ejercicio en otras fases (como la recopilación de requisitos y en los detalles de los componentes), probablemente no ayude mucho cuando intentas crear tu propio concepto básico.
A menudo es mejor buscar otras fuentes fuera de la pantalla, las vallas publicitarias, revistas, carteles y anuncios de televisión son muy buenas fuentes si tienes tiempo, especialmente porque las normas que rigen el diseño web difieren en gran medida del diseño impreso o de los anuncios de televisión, te dan una perspectiva única que te ayuda a llegar a ideas muy originales que puedes trabajar en tu concepto de diseño.
Los diseños arquitectónicos también pueden ser buenas y únicas fuentes de inspiración:
Dependiendo de tu cliente y de sus objetivos, cada uno de los edificios mencionados anteriormente puede darle nuevos conceptos e ideas para utilizarlos en el diseño del "cubierta contenedora" de tu sitio web como en los siguientes ejemplos (en el mismo orden):
Observa cómo cada una de las fotos arquitectónicas de arriba puede ser fácilmente convertida en diseños viables de cubiertas de sitios web.
El truco está en mantener siempre los ojos abiertos y utilizar todo como fuente de inspiración, no reducir las opciones limitándote a mirar solo a otros diseños web o tratando de idear algo por tu cuenta.
Conclusión
La vista llega antes que las palabras. El niño mira e identifica antes de hablar.
- John Berger, Modos de ver (Ways of Seeing)
Si no te has encontrado con los "Modos de ver" de John Berger, vale la pena encontrar una copia rústica (¡o al menos una versión de e-book!). No profundizaré en los detalles, pero es un libro que explora las formas en que la gente ve el mundo que les rodea. El mensaje subyacente es que ver es un instinto vital y primordial para nosotros los humanos, "vemos" antes de leer, antes de hablar y antes de caminar.
Como tal, nosotros como diseñadores web podemos tomar algún significado especial de esta verdad. Debemos tener cuidado de elaborar los conceptos detrás de nuestros diseños porque son lo primero que la gente "ve". Antes de las palabras en la página o el deslizador de imágenes llamativas que hemos estado trabajando tan duro en codificar, la gente ve la cubierta, el concepto, que crea la impresión general del sitio. Los detalles son importantes, no me malinterpretes, pero no puedes "clavar" los detalles hasta que tengas un diseño significativo en el que ponerlos.
¡Lee más artículos de "teoría" en nuestra sesión de teoría de diseño web!
Un agradecimiento especial a Ahmed, que entregó este artículo en medio del caos que se vive en Egipto.
