Inspiración para diseño web

por Natalia Ventre el 29/05/2013 ・ podés leerlo en 10 minutos ・
Los grandes artistas copian, los genios roban. — Pablo Picasso

Si para diseñar un sitio web buscás inspiración en galerías de CSS, Dribbble, etc. a propósito o de manera inconsciente vas a terminar creando sitios iguales o muy parecidos a otros. Con fuentes de inspiración “alternativas” podés crear un estilo propio.

Arquitectura

El blanco es limpio y hace que el contenido se destaque, pero no tiene por qué ser necesariamente #FFF, en arquitectura, y sobre todo en diseño de interiores, hay muchos ejemplos de colores casi blancos y grises claros cálidos.

Colores casi blancos
Ejemplos de colores casi blancos encontrados en diseño de interiores.

Los arquitectos tienen a su disposición distintos materiales: acero, concreto, madera, vidrio, etc. Como diseñador web tenés un único material de contrucción que son los píxeles, pero podés usar texturas visuales sutiles para destacar elementos y agregar personalidad e inspirarte en la arquitectura para combinarlas.

Texturas visuales inspiradas en materiales de construcción
Arquitectura y patrones de Subtle Patterns

La arquitectura es una profesión mucho más antigua que la del diseñador web y podés aprender sobre la relación profesional – cliente y el rol del “creativo” en el equipo de trabajo.

Cine y Televisión

Te podés inspirar en el cine para el tratamiento de imágenes. Por ej. para una galería de imágenes, en vez de simplemente cambiar el tamaño y/o recortar las imágenes para generar miniaturas podés además aplicarles algún filtro, como por ej. blanco y negro como Sin City, o una tonalidad de color como en Matrix. Para las transiciones de los carouseles de fotos, te podés inspirar en las iconicas transiciones de La guerra de las galaxias de George Lucas.

Algunas películas visualmente atractivas: 300, 2001, La celda, Drive, Matrix recargada, Sin City, La guerra de las galaxias.

Si no tenés tiempo de mirar una película entera, podés inspirarte en las secuencias de créditos. ¿No creés que se pueden tomar elementos de una secuencia de créditos y trasladarlos al diseño web? Mirá la secuencia inicial de The Man With The Golden Arm y el tema Vertigo para Tumblr y después me contás.

Diseño web inspirado en el cine
Tema para Tumblr e iconografía inspirados en secuencias de créditos

Las leyendas de imágenes no tienen por qué ser #FFF sobre rgba(0, 0, 0, 0.75), en cualquier noticiero podés encontrar opciones más creativas.

Leyendas de imágenes en Bootstrap y Deutsche Welle
Bootstrap vs Deutsche Welle.

En la tele1 hay algunos realities sobre diseño por ej.: Candice Tells All, Project Runway, Secrets From a Stylist, etc. donde podés ver el proceso creativo de otros diseñadores, cómo aplican los principios del diseño y cómo toman decisiones.

Juegos

En RWD (diseño web adaptable) se hace mucho incapié en las grillas fluidas, las media queries, etc. pero también es importante pensar en interacciones más allá del mouse y cuáles son las posibilidades y desafíos de una pantalla táctil. En ese sentido, la industria de los videojuegos está mucho más madura ya que tienen experiencia en variados dispositivos.

Captura de pantalla de Angry Birds Rio
¿Cómo implemento la navegación? ¿De qué tamaño tienem que ser las zonas accionables? ¿Qué gestos táctiles uso para sustituir los eventos del mouse? Encontrá respuestas a estas y otras dudas, ¡jugando Angry Birds!

La gamificación consiste en aplicar las mecánicas de juego en otros contextos para aumentar la participación de los usuarios. En diseño web se aplica en la creación de tutoriales interactivos (al estilo por ej. de Tomb Raider que tiene un nivel cuya única función es explicar cómo se juega) y en las badges o insignias u otro tipo de premios por realizar acciones deseables.

Literatura

El cielo sobre el puerto tenía el color de una pantalla de televisor sintonizado en un canal muerto. — William Gibson (Neuromante)

Me encanta leer y no juzgo a un libro por la tapa, pero sí por sus primeras oraciones y Neuromante de William Gibson me atrapó instantáneamente. Para mí, el cielo sobre el puerto es gris, pero si sos de otra generación te podés imaginar que el cielo es azul o negro. La literatura, la radio, los medios no-visuales en general, tienen esa capacidad, de que al no decirte todo, al contrario de una foto o una película, tenés que imaginarte lo que falta y sirven como ejercicio para fomentar la creatividad.

En teoría de la comunicación, los ejemplos de metáfora, metonimia y otros tropos suelen ser literarios, pero también son recursos que funcionan visualmente para explicar o persuadir (publicidad).

Moda / Estilo de vida

La inspiración en la moda puede traducirse literalmente en colores y texturas, pero más allá de eso, también es importante los motivos por los cuales la gente se viste así.

Por ej. en wikiHow hay una serie de pautas sobre cómo ser un hipster que van desde usar chupines a ser vegetariano y hay muchos elementos que se pueden usar (y de hecho se usan) en diseño web. Usar porque sí elementos de una estética ajena no tiene demasiado sentido, pero si pensás que los conceptos de frugalidad y respeto al pasado de los hipster se traducen al diseño web en layouts minimalistas y fuentes vintage, podrías usar un proceso similar a partir de la misión de la empresa (o cualquier texto que tengan en la página “acerca”) de la empresa para la cual estás diseñando y traducirlos visualmente.

Estilo hipster en moda y web
Estilo hipster en diseño web y moda

Música

Escuchar música mientras trabajás puede ser motivador y darte energía. Si en vez de escuchar tu música preferida, escuchás música acorde al público objetivo para el cual estás diseñando puede ayudarte a entener mejor a la audencia. Si esta técnica te falla, y la música no te evoca ninguna idea visual, en última instancia podés recurrir a videoclips, tapas de discos y otras manifestasiones visuales, ya que muchos géneros musicales tienen una estética asociada, por ej. la estética del punk.

El ritmo es uno de los principios básicos del diseño, siempre que repetís un patrón, generás ritmo, pero el concepto es más fácil de entender si lo asociás a la música.

Ritmo en una galería de imágenes
Ej. de ritmo aplicado a una galería de imágenes

Por último, de la música me parece inspirador que a veces los videoclips cuentan una historia que no tiene absolutamente nada que ver con la letra de la canción y sin embargo, funciona (por ej.: Sonne de Rammstein). En el caso de un sitio web, no necesariamente tenés que usar elementos visuales pertenencientes al rubro de la empresa para que quede bien.

Naturaleza

La inspiración en la naturaleza puede traducirse literalmente en texturas, formas y colores.

En vez de buscar directamente paletas de colores en sitios como COLOURlovers o Kuler, podés crear una paleta basada en la naturaleza a partir de una foto representativa del ambiente que estás buscando.

Creación de una paleta de colores con ColorSchemer Studio
Creación de una paleta de colores a partir de una foto con ColorSchemer Studio.

En vez de usar estilos pre-definidos o buscar freebies para descargar, a partir de por ej. los colores del cielo podés crear degradés, fondos desenfocados, etc.

La sección áurea y la secuencia de Fibonacci son relaciones matemáticas que se encuentran en la naturaleza2 y que históricamente se han usado en arquitectura y arte. Aunque no hay estudios científicos que lo demuestren, se dice que los objetos creados en base a dichos números son estéticamente agradables. Podés aplicar la sección áurea en diseño web en las proporciones por ej. de la sección principal y la barra lateral.

Calculadora online de la sección áurea
Golden Ratio Calculator es una herramienta online que calcula anchos de columnas a partir de la sección áurea. Por ej. si el ancho total es 100%, la sección principal debería medir 61,8% y la secundaria 38,2%.

Podés aplicar la secuencia de Fibonacci a las jerarquías de tamaño de texto (párrafos, títulos, etc.).

Calculadora online de la serie de Fibonacci
Typograph es una herramienta online para componer una escala tipográfica derivada de la serie de Fibonacci u otras escalas tipográficas tradicionales.

Períodos históricos

Saber elegir cuál estilo visual es apropiado para cada proyecto y ejecutarlo correctamente no es tarea menor, pero en vez de tomar como referencia tendencias actuales del diseño web, podés inspirarte en el arte3, diseño de interior, moda, etc. de épocas pasadas. Al fin y al cabo “Metro” está inspirado en el estilo tipográfico internacional (o escuela suiza), así que nada te impide tomar elementos visuales característicos de una era y actualizarlos.

Conclusiones

Mirar sitios web de la competencia es parte de la etapa de investigación y buscar en Dribbble, Pattern Tap, etc. elementos muy puntuales, como por ej. formularios de búsqueda, etiquetas, etc. es totalmente válido, pero para crear el look & feel (aspecto y comportamiento o identidad visual) de un sitio web es mejor que te inspires en básicamente cualquier cosa excepto otro sitio web. Pinterest es ideal para encontrar rápidamente inspiración online, porque hay imágenes interesantes organizadas en categorías como Arquitectura, Ciencia y naturaleza, Moda, etc. y buscando encontré imágenes más relevantes que en Flickr o sitios similares.

En este artículo traté de poner ejemplos lo más concreto posibles, porque creo que cuando buscás inspiración, de alguna manera es porque te trancaste y no sabés cómo seguir. La “inspiración” no es sustituto de tener conocimientos de fundamentos del diseño y aplicarlos, pero tiene su lugar en el proceso, porque el diseño no es un examen multiple opción con una única respuesta correcta.


  1. En Uruguay (y supongo toda Latinoamérica) el programa de Candice lo dan en H&H, Project Runway en E! y Glitz y Secrets from a Stylist en Fox Life.

  2. Plutón no es un planeta y los ejemplos clásicos de la sección aúrea en la naturaleza (el caracol nautilos) actualmente son disputados.

  3. If Famous Graphic Artists Were Web Designers… es un artículo publicado en Smashing Magazine sobre la influencia del arte en el diseño.