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

Concepto e inspiración: teoría de diseño para diseñadores web

by
Length:MediumLanguages:
This post is part of a series called Web Design Theory.
Understanding the Z-Layout in Web Design
Visual Direction in Web Design

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

El desarrollo de un concepto significativo es un paso crucial en cualquier proyecto de diseño… Sin embargo, es una habilidad que pocas personas se toman el tiempo para entender y apreciarlo realmente. Pero hoy, Ahmed (Gerente de la Interfaz de Usuarios en Link Development y Gerente de Grupo de Usuarios para Adobe en Egipto) nos conducirá a través de la creación de un concepto y un proceso de inspiración. Nos guiará a través del proceso por completo, paso a paso, hasta que lleguemos al exitoso concepto para empezar nuestro diseño web.

¿Por qué desarrollar un Concepto, es tan importante en Diseño Web?

En mi último artículo, El principio Gestalt: Teoría de diseño para los Diseñadores Web, establecimos la necesidad de empezar cualquier diseño con el diseño mismo del contenido en primer lugar antes de empezar con los detalles, ahora en esta parte estudiaremos la metodología que viene con el diseño de la cubierta.

Cualquier forma para encapsular un diseño deberá tener un concepto detrás, sin embargo, tristemente, muchos diseñadores se enfocan solamente en una forma que luzca bonita, aparentemente, pero que en realidad no tiene ningún significado que la respalde. Aún peor, diseñan un sitio web por completo pero basado en un marco que ya existe sin por lo menos reflexionar por un momento en cómo un diseño original podría traer más beneficios significativos al proyecto.

Realmente los diseños brillantes tienen un significado detrás de ellos —y no se trata solamente de formas bonitas, filtros y tipografía— Cada elemento debería, en verdad, comunicar algo sobre el proyecto subyacente.

Durante esta etapa, si sigues la metodología de los requerimientos creativos reunidos en el artículo anterior (¡Cómo conseguir los requerimiento creativos correctos de tus clientes!), entonces deberías tener suficientes juicios para aprovecharlos y elaborar la forma que tendrá el contenedor de tu diseño o el estilo de tu diseño que se ajustará al contenedor.

Empieza recolectando una biblioteca de imagenes de referencia

Una de las formas más fáciles y sencillas para encontrar ideas es tener que preguntarle a tu cliente que te de algunas palabras claves para describir cómo quiere él que las personas se sientan cuando visiten su sitio, es decir; enérgicas, serenas, jóvenes, fuertes, etc.…, eso, con sólo introducir estas palabras claves en cualquier buscador de imágenes tales como Google o Bing.

Al elegir entre estás imágenes la que más te gusta, facilmente te encontraras con una enorme biblioteca de lluvia de ideas para empezar a trabajar.

El diseño comienza con una lluvia de ideas.

De manera similar a cualquier ejercicio de lluvia de ideas, no descarte ninguna idea… De veras, incluso, por muy extraña que parezca, no la descarte. ¿Por qué? Porque siempre será más fácil bajar el tono que tiene un diseño que tratar de sentirte agradable con algo que no te gusta por completo. Así que siéntante frente a tu colección de ideas, consigue un lápiz y papel (las cuales son excelentes herramientas durante esta etapa :)) y empieza a elaborar bocetos de conceptos que vengan a tu mente mientras te encuentras buscando buscando en tu biblioteca de ideas, el ejercicio de hacer bocetos es sumamente importante porque las ideas tienden a desaparecer tan pronto como también vienen a nuestra mente :)

Por ejemplo, digamos que un clinte me pide un diseño “fresco”, bueno, sencillamente, escribiré “fresco” en la barra de búsqueda de Google, por ejemplo, (ok, esta bien, Google o cualquiera que sea tu motor de búsqueda que prefieras) y ahora echa un vistazo a los resultados de las imágenes.

Veamos a continuación un ejemplo de lo que se me ocurrió:

Web Design Planning and Concept

¿Cómo estás imágenes podrían inspirarme? ¿Qué es lo que me dicen acerca de la dirección del diseño?

Bueno, es sencillo, al conocer que mi cliente quiere un diseño fresco y usando éste método en el cual interpreto las imágenes que presente el buscador, conseguiré entender eso que mi cliente quiere, es decir:

  • Por sobre todo debería seleccionar cualquier elemento que parezca orgánico o que tenga forma con curvas.
  • Tonos de color “frescos” son los preferidos (veremos más acerca del color en un artículo posterior).
  • Predomina el uso de componentes semitransparentes o con un estilo de “cristal”.
  • Deberá haber bastante espacio en blanco y sin grandes empleos de componentes.

Por lo general, prefiero hacer este ejercicio con otros 2 ó 3 diseñadores, debido a que esto me ayuda a cambiar diferentes idas entre uno y otro diseñador. Luego, le pediría a cada uno que busquen imágenes, cada uno por su cuenta, por unos 15 ó 20 minutos y, después me sentaría con ellos y empezaría por preguntar qué es lo que vieron en cada una de las imágenes y, créeme, quedarás sorprendido ver cómo otras personas ven algo totalmente diferente de lo que tú crees o viste y, por supuesto, esto podría darte unas ideas totalmente nuevas.

¡Es importante comunicarse durante está estapa en el proceso de diseño! Por ejemplo, la palabra “fresco”, significa diferentes cosas para diferentes personas —por lo tanto, no te atengas únicamente al resultado de imágenes de la búsqueda inicial y, mucho menos, de tu propia interpretación de las cosas como una ayuda definitiva para tu inspiración—.

No copies las ideas, más bien… ¡robatelas!

Los buenos artistas copian, pero los artistas brillantes las roban, - Pablo Picasso (1881 – 1973)

Mi interpretación para esta frase es: Copiar otra idea te hará un buen diseñador, sin embargo, “robar” una idea o concepto por completo de otro diseño y usándolo sabiamente (por supuesto, sin copiar descaradamente) te convertirá en un diseñador brillante.

Por otra parte, robar una idea es muy difícil —de hecho, es mucho más difícil que copiarla—. La razón es que necesitas entender verdaderamente el concepto para ponerlo desde un lugar hacia otro y incluirlo en tu propio diseño.

Caso de estudio: Robando las pirámides.

En un proyecto reciente, estaba trabajando con un equipo en un sitio para un portal de Turismo en Egipto. Sin embargo, ellos no querían directamente el estilo de diseño del sitio basado en “las pirámides, karnak o faraónico”, ya que ese sería el estilo que saltaría a la vista para la mayoría de las personas o más bien, de los diseñadores. Es más, ellos querían algo moderno, sin embargo, también querían conservar la identidad egipcia que literalmente dice “este sitio es de egipto”.

Fue un verdadero desafío, no obstante, pasando a través de la metodología anterior nos aparecimos con imágenes como estás:

De igual forma, el cliente no quería diseños cliché que mostrarán directamente jeroglíficos o imágenes de templos antiguos de Egipto y cosas parecidas, así que al revisar las imágenes empezamos a construir una idea que practicamente nos permitiría usar algunos elementos tales como las paredes inclinadas y los portales del antiguo Egipto y, lo mejor de todo, cómo se relacionaban tanto con el sitio hasta el punto de ser un portal para Egipto.

El problema es que el único estilo que es único para Egipto es el estilo de los Faraones. Si fueramos con el arte de Arabia, por ejemplo, entonces ya no sería único de Egitpo. Por otra parte, si mostrabamos buceo o playas exóticas… no era para nada único. Del mismo modo, si aparecieramos con otro estilo, tampoco sería único a Egipto y eso era un requerimiento muy estricto.

Al mismo tiempo, ya habíamos hablado con el cliente y había quedado claro que no usaríamos imágenes del antiguo Egipto o de los jeroglíficos para promover todo tipo de turismo en Egitpo y no solamente los templos y las pirámides. Eso fue un informe de diseño muy complicado, seguro que lo fue.

Al final entregamos un boceto como este:

¡Vuola! Cómo podrás apreciar, sencillamente, tomamos partes de los postes de la entrada al “portal” del templo Karnak, pero utilizando solamente las líneas inclinadas para identificar las paredes, el área en medio fue utilizada para animar diferentes imágenes de Egipto y usamos el área izquierda para ubicar el logotipo y la navegación, mientras que toda el espacio a la derecha se utilizó para colocar el contenido.

Fue un concepto sencillo, es verdad, pero cumplió con todos los requerimientos que demandó el cliente. Una idea así habría sido difícil que viniera a mi mente sin que hubiera visto las fotos y las imágenes que aparecieron después de hacer una simple búsqueda con la palabra clave “Egipto”.

Fuimos capaces de robar la idea que estaba detrás del templo Karnak y, también, de las pirámides, para luego usarlas en nuestro diseño.

Los buenos conceptos hablan por sí solos.

Existen algunas personas que opinaron que este concepto podría no ser muy claro cuando las personas visitaran el sitio y, aunque parezcca extraño, pero los conceptos no necesitan que se “entiendan” a primara vista… ni tampoco necesitan ser visualmente claros, en lo absoluto, de hecho, esto no es un deber. Este puede ser facilmente entendido cuando vemos los logos, por ejemplo, veamos el logotipo de Mercedes:

A primera vista para la mayoría de las personas, solamente se trata de una estrella con tres picos. Sin embargo, el concepto detrás de esta estrella es que representan su dominación en la tierra, el oceano y el aire, teniendo el brazo superior que representa el aire y los dos brazos inferiores que representan la tierra y el mar.

¿Quiénes lo sabían? Muy pocas personas fuera de la compañía… sin embargo ese no es el punto, o… ¿ese es el punto? El hecho es que los buenos conceptos hablan por sí solos. Incluso si la personas no entienden de inmediato exactamente lo que significa, o que intenciones oculta la forma y las ideas por debajo siempre toman vida propia. Los conceptos de diseño de menor envergadura no tienen ese tipo de vida… apenas se quedan ahí quietos.

Encontrando inspiración para los conceptos.

Otro brillante recurso de inspiración es intentar y, por lo menos, alejarte de tu computadora. Muchos diseñadores se sienten tentados a visitar lo que ellos llaman, sitios de la inspiración para diseño, los cuales contienen los mejores diseños a diario. Aunque esto suele ser un buen ejercicio en otras fases (tales como la recopilación de requisitos y la composición de los detalles), pero por lo general este ejercicio probablemente no ayudará mucho cuando tengas que intentar y aparecerte con tus propios conceptos.

Por esa razón es mucho mejor ver otros recursos que, no necesariamente tienen que estar en pantalla, tales como: los Billboards, revistas, carteles y comerciales de televisión, por ejemplo, son muy buenos recursos, pero sí tienes tiempo. Para hacer esto, especialmente porque las reglas que gobiernan el mundo del diseño web difieren enormemente al diseño de impresión o los anuncios para la televisión, es decir; ellos te dan una perspectiva única que te ayudará con lo que tengas que hacer, lo cual puede y tiene que ser ideas muy originales con las que tienes que trabajar en tus conceptos de diseño.

Los diseños arquitectónicos también pueden ser buenos y únicos recursos de inspiración:

Dependiendo de tu cliente y de sus objetivos, todos y cada uno de los bocetos de los edificios que acabas de ver arriba pueden ofrecerte nuevos conceptos e idas para usarlas en tus propios sitios web y en los diseños de los “contenedores de contenido” tal y como mostrare en los siguientes ejemplos:

Observe como cada una de las fotos de arquitecturas que mostre arriba pueden con facilidad convertirse en las formas que contendrán el contenido de nuestros propios sitios.

El truco es sencillo: manten los ojos abiertos siempre y usa todo lo que ves como recurso de inspiración, no límites tus opciones apegándonte a ver solamente los diseños web de otros diseñadores o intentes aparecerte con algo sin hacer una sola búsqueda, que es lo mismo que decir; por tu propia cuenta.

Conclusión

Viendo venir antes las palabras. El niño se ve y se reconoce antes de que pueda hablar. - John Berger, Formas de Mirar

Si aún no te has encontrado con el libro de John Berger, titulado: Formas de Mirar, te diré que “vale la pena encontrarse con una copia rustica (o almenos una versión del libro en línea). Sin embargo, tampoco vamos a profundizar demasiado en los detalles, pero es un libro que analiza la forma en cómo las personas ven en el mundo que los rodea. El mensaje relevante es que “mirar” es un instinto vital y primordial para nosotros los humanos —vemos antes de leer, antes de hablar, y claro, antes de caminar—.

Por lo tanto, nosotros, como diseñadores web podemos tomar algún significado especial de esta verdad. Debemos ser cuidadosos al elaborar los conceptos detrás de nuestros diseños porque son las primeras cosas que las personas “ven”. Antes que las palabras sobre la página o el control deslizable de imágenes llamativas en el qué hemos trabajando arduamente en código, pero las personas verán la cubierta; el concepto, que crea la impresión general del sitio. Es cierto, los detalles son importantes, no me tomen a mal, pero en realidad no se pueden clavar los detalles hasta que haya logrado un diseño significativo para proponerlos.

¡Si deseas leer más artículos estupendos sobre “teoría”, entonces echa un vistazo a nuestra sesión Teoría de Diseño Web!

Quisiera agradecer de manera muy especial a Ahmed, quién creó este artículo en medio del caos que está pasando Egipto.

¡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.