Concepto e inspiración Teoría del diseño para diseñadores web

¿Desarrollar un concepto significativo es un paso crucial en cualquier proyecto de diseño? pero es una habilidad que pocas personas realmente se toman el tiempo de entender y apreciar. Hoy, Ahmed (UI Manager en Link Development y Adobe User Group Manager en Egipto) nos guiará a través de la creación de un concepto y un proceso de inspiración. Pasaremos por el proceso paso a paso, hasta llegar a un concepto exitoso para comenzar nuestro diseño web.


Por qué es importante desarrollar un concepto en 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 cáscara contenedora antes de entrar en los detalles. En esta parte, discutiremos la metodología de crear un diseño de la cáscara..

Cualquier forma contenida debe tener un concepto detrás, pero, lamentablemente, muchos diseñadores se centran solo en una forma atractiva que realmente no tiene ningún significado detrás de ella. O, lo que es peor, diseñan un sitio web completo basado en marcos preexistentes sin siquiera pensar un momento en cómo un diseño original podría aportar algo real.sentido al proyecto.

Realmente tiene un gran diseño sentido detrás de él, no son solo formas bonitas, filtros o tipografía, cada elemento debería decir algo sobre el proyecto subyacente.

En esta etapa, si siguió la metodología de recopilación de requisitos de creatividad (Cómo obtener los requisitos de creatividad correctos de su cliente), debería tener suficiente información para desarrollar y determinar qué forma o estilo de contenedor encajará su diseño..

Comience por recopilar una biblioteca de imágenes de referencia

Una de las maneras más fáciles y sencillas de encontrar ideas es pedirle a su cliente que le dé algunas palabras clave para describir cómo quiere que la gente se sienta acerca de su sitio. Enérgico, fresco, joven, sólido. etc., simplemente ingresando estas palabras clave en cualquier búsqueda de imagen como Google o Bing.

Eligiendo de estas imágenes las que te gustan, te encontrarás fácilmente con una gran biblioteca de ideas de ideas para comenzar..


El diseño comienza con una lluvia de ideas

Similar a cualquier ejercicio de lluvia de ideas, ¿no descarta ninguna idea? Por muy extraños que sean. ¿Siempre es más fácil atenuar un diseño que intentar darle un toque especial? Siéntate frente a tu biblioteca de ideas, consigue un lápiz y papel (que son excelentes herramientas en esta etapa) y comience a esbozar los conceptos que le vienen a la mente al mirar su biblioteca, los bocetos ayudan porque las ideas tienden a desaparecer tan rápido como aparecen en su mente :)

Por ejemplo, si un cliente me pide un ?Fresco? diseño, simplemente entraré ?Fresco? en Google por ejemplo (o su motor de búsqueda preferido) y verifique los resultados de la imagen.

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 nuevo y al usar este método para interpretar las imágenes, lo entendería:

  • En su mayoría debería ir por formas orgánicas o curvas.
  • ¿Luz? ¿Fresca? Se prefieren los tonos de color (más sobre el color en un artículo posterior)
  • Uso de? Cristal? Estilo y componentes semitransparentes..
  • Tiene mucho espacio en blanco y no hay demasiados componentes

Por lo general, prefiero hacer este ejercicio con otros 2 o 3 diseñadores juntos, ya que ayuda a intercambiar ideas diferentes. Les pido a cada uno que busque imágenes solo durante 15 o 20 minutos, luego se sientan juntos y comienzan a decir lo que vemos en En cada imagen, te sorprenderás de cómo otras personas pueden ver algo totalmente diferente de lo que piensas o ves, y esto puede abrir una idea totalmente nueva para ti..

¡Es importante hablar durante esta etapa en el proceso de diseño! La palabra "fresco" significa diferentes cosas para diferentes personas, así que no confíe únicamente en la búsqueda inicial de los resultados de imagen o en su propia interpretación para ser la fuente definitiva de inspiración..


No copiar ideas, robarlas!

Buenos artistas copian grandes artistas roban,
- Pablo Picasso (1881 - 1973)

Mi interpretación para esta cita es la siguiente: copiar otra idea te hará un buen diseñador, sin embargo, ?robando? una idea o concepto desde otro diseño y su uso inteligente (sin copiar de forma evidente) lo convertirá en un gran diseñador.

Robar una idea es difícil - mucho más difícil que copiar - necesitas entender realmente el concepto para levantarlo de un lugar y moverlo a tu diseño.


Estudio de caso: Robando las pirámides

En un proyecto reciente, estaba trabajando con un equipo en un sitio para un portal de turismo egipcio. ¿No querían un sencillo? ¿Pirámides, Karnak, Pharaonic? sitio de estilo que la mayoría de la gente iría por? Querían algo moderno, pero querían mantener una identidad egipcia que literalmente diría: este sitio es de Egipto.?.

Fue un verdadero desafío, pero siguiendo la metodología anterior, creamos imágenes como las siguientes:

Ahora el cliente no quería cliché? diseños que muestran jeroglíficos directos o imágenes de templos egipcios antiguos y cosas por el estilo, pero al mirar las imágenes comenzamos a construir con la idea de que podemos usar algunos elementos como las paredes inclinadas y los portales del antiguo Egipto y cómo se relacionarían con ellos. el sitio es un portal a Egipto.

El problema es que el único estilo que es exclusivo de Egipto es el estilo faraón. Si optáramos por el arte árabe, por ejemplo, no sería exclusivo de Egipto. Si mostramos buceo o playas, no es único. Si optamos por otro estilo, no será exclusivo de Egipto y ese fue un requisito estricto..

Al mismo tiempo, se nos dijo que no usaran imágenes o jeroglíficos egipcios antiguos, ya que el cliente quería promover todo tipo de turismo egipcio, no solo templos o pirámides. Un breve resumen de diseño, para estar seguro.

Al final se nos ocurrió un boceto como este:

Simplemente tomamos parte de la entrada? Portal? torres en el 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 de la izquierda para el logotipo y la navegación, mientras que el área de la derecha se usó para el contenido.

Era un concepto muy simple, pero cumplía con 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 un simple? Egipto? consulta de busqueda.

Pudimos 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 esto puede parecer extraño, pero los conceptos no necesitan ser entendidos. ¿Desde el primer vistazo a un diseño? ni tienen que ser visualmente claros en absoluto, esto no es una obligación. Esto se puede entender fácilmente mirando los logotipos, tome el logotipo de Mercedes, por ejemplo:

A primera vista para la mayoría de las personas, es solo una estrella de 3 puntas. Sin embargo, el concepto detrás de esta estrella es que representa su dominio de la tierra, el mar y el aire: el brazo superior representa el aire y los 2 brazos inferiores representan la tierra y el mar..

Quien sabe? ¿Muy pocas personas fuera de la empresa? Pero ese no es el punto, ¿verdad? Un buen concepto habla por sí mismo: incluso si las personas no entienden de inmediato lo que significa, las formas e ideas intencionales subyacentes siempre cobrarán vida propia. ¿Los diseños sin concepto no tienen ese tipo de vida? simplemente se sientan allí.


Encontrando 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 sitios de inspiración de diseño, que contienen los mejores diseños diarios. Si bien este es un buen ejercicio en otras fases (como la recopilación de requisitos y en los detalles de los componentes), es probable que no ayude mucho cuando intente crear su propio concepto central..

A menudo es mejor mirar otras fuentes fuera de la pantalla: carteles, revistas, carteles y comerciales de televisión son muy buenas fuentes si tiene tiempo, especialmente porque las reglas que rigen el diseño web difieren mucho del diseño impreso o de los anuncios de televisión. Una perspectiva que le ayude a llegar con ideas muy originales que puede incorporar a su concepto de diseño..

Los diseños arquitectónicos también pueden ser buenas y únicas fuentes de inspiración:

Dependiendo de su cliente y sus objetivos, cada uno de los edificios anteriores le puede dar nuevos conceptos e ideas para usar en su sitio web? ¿Shell de contenedor? Diseño como en los siguientes ejemplos (en el mismo orden):


Observe cómo cada una de las fotos arquitectónicas de arriba se puede convertir fácilmente en diseños viables de shell de sitios web.

El truco es mantener siempre los ojos abiertos y usar todo como su fuente de inspiración, no reduzca sus opciones al observar solo otros diseños web o intentar crear algo por su cuenta..


Conclusión

El ver viene antes que las palabras. El niño mira y reconoce antes de poder hablar..
- John Berger, formas de ver

Si no te has encontrado con John Berger, Ways of Seeing, vale la pena encontrar una copia en rústica (o al menos una versión de libro electrónico). No profundizaré en los detalles, pero es un libro que explora las formas en que las personas ven el mundo que los 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 un significado especial de esta verdad. Debemos tener cuidado de diseñar 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 del deslizador de imagen llamativa que hemos estado trabajando tan arduamente para codificar, la gente ve el shell, el concepto, que crea la impresión general del sitio. Los detalles son importantes, no me malinterpretes, pero realmente no puedes clavar los detalles hasta que tengas un diseño significativo para ponerlos en.

Lea más excelentes artículos de "teoría" en nuestra sesión de Teoría del diseño web!

Un agradecimiento especial a Ahmed, quien entregó este artículo en medio del caos que está ocurriendo en Egipto..