diseño

Cómo se crea un Doodle

Sebastián Thüer · 02.02.2012 ·

Google decidió homenajear a Atahualpa Yupanqui con un doodle -una modificación alusiva del logotipo de Google- hace un par de días donde se podía ver una enorme guitarra que atravesaba las letras con el nombre del buscador, unas montañanas en el fondo, vaquitas y un sol: algunos de los elementos más iconónicos en la obra del folclorista argentino.

Lo interesante es que el blog de Google AdWords -realmente no sé qué tiene que ver este contenido aquí- ha entrevistado a Jennifer Hom, la diseñadora que lo creó donde habla sobre su trabajo en Google. Es sabido que Google tiene un extremo celo sobre el trabajo de sus empleados, así que no hay datos reveladores pero si algunas pistas y cuestiones bastantes curiosas.

Aquí van algunos de los puntos, a mi juicio, más interesantes de la entrevista:

Desde hace relataviamente poco tiempo existe un equipo exclusivo para diseñar los doodles.
No son más de 5 diseñadores los que crean los Doodles para todo el mundo.
Parce ser que todos los Doodles, de eventos internacionales y locales, se diseñan desde las oficinas de Google en Mountain View.
Los Doodles más complejos -como el de Gibson Les Paul’s o Freddie Mercury pueden llevar varios meses de trabajo en equipo.
Jennifer consiguió su trabajo en Google de una forma bastante clásica: cuando estaba terminando sus estudios de Bellas Artes mostró su portfolio y la llamaron a una entrevista.

5 recursos de diseño que ya pasaron de moda y cómo suplantarlos

Sebastián Thüer · 19.01.2012 ·

El diseño -ya sea web, gráfico, de modas o industrial- está alcanzado por tendencias o modas que marcan una cierta pauta de los recursos que se están utilizando. De algún modo, los usuarios o consumidores esperan manejarse en un contexto previsible que las aporte seguridad y, a la vez, reconocer rasgos distintivos que doten de personalidad al objeto.

En este sentido, es interesante el aporte que hace DesignShack a través de 5 Former Design Trends That Aren’t Cool Anymore (So Stop Using Them) donde recoge algunos de los principales clichés del diseño que han sido exprimidos hasta el hartazgo y ya no provocan ese toque sofisticado y moderno que tenían antaño.

1. Bevel & Emboss (biseles y relieve)

En algún momento pudo ser original, pero ahora parece un recurso de principiante con el Photoshop. Una imagen así hace que tu diseño automáticamente retroceda 10 años.

Hoy en día se tiende a minimizar el uso de estos recursos y darle a los objetos un aspecto más real sin sombras y brillos artificiosos. En lo personal creo que no hay que obsesionarse con estos efectos iluminación y mejor trabajar con sombras más situales. De todas formas, si la intención es dar sensación de relieve mejor trabajar con sombras y brillo más tenúes y progresivos. Un buen ejemplo es este trabajo de Matt Gentile.

2. Brillos «a la» Web 2.0

Sí, en un momento la web 2.0 se puso de moda y surgieron los colores brillantes y efectos de plástico brillante. Era un lindo momento donde decir redes sociales era estar a la vanguardia y todo el mundo ponía el rótulo de «beta» al lado de su logo.

Esa época ya pasó. Los degradados con efecto vidriado ya tuvieron su hora estelar y si bien son un recurso válido su abuso terminó por homogeneizar muchos sitios web. Hoy en día es preferible apostar por degradados más suaves, bordes ligeramente marcados para despegar el botón del fondo. Como lo hacen en la web de Firefox.

3. Textos en manuscrito

Por alguna razón la utilización de la tipografía manuscrita cada tanto resurge en el diseño. Se trata de un recurso que bien utilizado aporta un toque fresco y casual para quebrar la sucesión de tipografías formales. Pero normalmente se termina recurriendo a fuentes gratuitas que aparecen por todo el sitio con lo cual se pierde su intencionalidad original y el sitio en lugar de lucir «fresco» parece desorganizado y con problemas de legibilidad.

En su lugar, mejor apostar por tipos claros y simples para presentar el texto. Hoy en día, existe muchísimas tipografías con estilo y buena legibilidad. Mejor reservar el estilo manuscrito para lugares donde realmente tenga valor.

4. Promociones estrelladas

Ofertas, descuentos, 2×1 y demás reclamos promocionales solían estar siempre dentro una estrella de colores vibrantes. Un golpe de efecto al que ya le pasó su cuarto de hora y que actualmente se puede reemplazar por una gama mucho más amplia de recursos gráficos para destacar argumentos de venta.

En su lugar, podemos optar por lazos colocados en esquinas, vértices o centrados en la misma página. Otra alternativa son los distintivos o divisas que ayudan a destacar la información pero de un modo mucho más armónica e integrado con el resto de los elementos gráficos de la página

5. Sombras exageradas sobre el texto

Hubo un tiempo en que el descubrimiento de las sombras causó furor y se aplicaba a casi cualquier elementos. Como suele ocurrir con las cosas nuevas, se utilizó de una forma abundante y exagerada donde pasada la sorpresa inicial la sombra se convertía en un elementos distractivo. Como ocurre con el efecto «bevel & emboss», utilizar este recursos de la misma manera significa gritar a los 4 vientos que nuestro criterios estético se ha detenido en el tiempo.

¿Hay que dejar de usar sombras? Seguro que no, pero si emplearlas de un modo diferente. Apostar por la sutileza, los matices y degradados suaves que ayuden a reforzar la comprensión del texto. O líneas definidas que ayuden a marcar el relieve sin utilizar excesivos nivels de degradado.

Conclusión

Un sitio con aspecto anticuado y donde adentrarse en sus página implique un salto en el tiempo es algo que nadie quiere. Una cosa es utilizar la estética retro o vintage como recurso y con cierto sentido y otra cosa es abrir en el navegador un diseño al que simplemente le pasó el tiempo.

Las técnicas y recursos descriptos son propias de un modo dediseñar sitios web que ya está superado. No quiere decir que lo que se utiliza hoy sea mejor -aunque es cierto que ahora hay una mucho mayor preocupación por los pequeños detalles- pero sí que al menos aporta un toque actual al diseño. En definitiva, aggiornare a los tiempos que corren.

Cómo crear el favicon perfecto

Sebastián Thüer · 28.12.2011 ·

El icono que acompaña a nuestro sitio web suele ser una pequeña pieza a lo que se le presta gran valor. En parte, porque se minimiza su importancia y en parte por el gran desconocimiento que existe entre los diseñadores web sobre cómo crear buenos iconos que logren transmitir la identidad de la página.

Comencemos por el principio. El icono que acompaña a las páginas web fue introducido por Internet Explorer 5. Para ello bastaba con copiar en la raíz del sitio web un archivo «favicon.ico» que consistía una imagen de 16×16 píxeles. Hoy en día todos los navegadores modernos utilizan los iconos. Es más, algunos navegadores como Firefox suelen dejan un soso recuadro blanco si no hay imagen asociada para mostrar.

Jon Hicks acaba de editar The Icon Handbook, un libro que contiene un capítulo entero dedicado a los faviconos o iconos para páginas webs. En .netMagazine publican un extracto del capítulo con algunos interesantes consejos. Veamos:

El icono no es un logotipo. Cumple una función similar a la bandera, una firma o una señal de tráfico: sirve para identificar de manera rápida y fácilmente reconocible.
Hay que tener en cuenta el contexto donde el icono se va a reproducir. La imagen de 16×16 ya no es el único tamaño, los smartphone y tablets y nuevos navegadores utilizan sus propias resoluciones que llegan hasta las 195 pixeles en el caso de las ventanas iniciales de Opera.
Las imágenes de mayor tamaño pierden nitidez al redimensionarse a otro tamaño y crean pixeles intermedios que dificultan la interpretación del gráfico. Por eso, lo mejor es incluir varias versiones del mismo icono
El formato ICO y el PNG son los más adecuados. Ambos soportan transparencias y pueden ser reproducidos sin problemas por la mayor parte de dispositivos y navegadores.
Una vez que tenemos la imagen de base en formato vectorial, el diseño tiene que partir del tamaño más pequeño y es fundamental borrar los píxeles intermedios que crean automáticamente los editores de imágenes.
El formato ICO permite agregar múltiples resoluciones a un mismo archivo.
Hay que considerar el formato tamaño para los dispositivos táctiles de Apple que trabajan en resoluciones diferentes (72×72). Los dispositivos con Android también lo soportan.

El diseño web en 2011: Las principales tendencias del año que se va

Sebastián Thüer · 14.12.2011 ·

Con la llegada del final de año comienza la sistemática publicación de artículos que recogen lo mejor (o peor) de la temporada que se está yendo. Con el diseño web ocurre algo similar así que me gustaría hacer mi aporte personal al género “lo mejor de 2011” con una mirada un poco más general sobre aquellos puntos que han marcado el año en el diseño para la web.

HTML5 y CSS3

Los diseñadores tomaron la delantera y está utilizando CSS3 de manera cada vez más fluida para simplificar procesos que antes requerían de trucos y “hacks” para que funcionacen corramente. Bordes redondeados, sombras, incluso animaciones y menús interactivos: con CSS3 definitivamente la vida es más fácil.
HTML5 viene algo más demor ado. Muchos ya estamos utilizando las etiquetas semánticas específicas como <nav>, <footer>y similares. De todos modosno hay un uso masivo de las nuevos recursos que ofrece el lenguaje a nivel de programación, salvo como proyectos experimentales. La consolidación de la nueva generación de navegadores que ofrece soporte completo para HTML5 quizás ayude a un desarrollo más profundo para 2012.

Responsive web design

Todavía no encontré una traducción convincente así que utilizo la expresión inglesa para referirme a aquellos sitios que adaptan su diseño al tipo de pantalla que utiliza el usuario. En pocas palabras, el diseño flexible -o “fluido”- está de vuelta y considera al menos tres tipos de dipositivos: móvil, tablets y web.

Mediante CSS3 es relativamente sencillo determinar qué ancho de pantalla utiliza el usuario y ofrece un diseño adaptado a ello. Ya no hay que crear tres versiones del sitio web sino que mediante hojas de estilo se modifica la visualización en función del soporte utilizado. La rápida tasa de crecimiento de móviles y tablets hace que este aspecto sea cada vez más importante.

Grillas

Todavía queda algún lobo solitario capaz de crear su sitio en el bloc de notas de su sistema operativo pero en general se están estandarizando cada vez más las grillas (grids) o retículas para organizar la disposición de la información en pantalla.

Cada vez cobran más popularidad los diferentes frameworks como 960.gs que nos permiten organizar el contenido en columnas fácilmente y sin tener que crear un CSS desde cero. Algunos toman directamente un framework, otros los adaptan, algunos los mezclamos y los más osados crean el suyo propio.

Tipografía creativa

Hace bastante tiempo que la web dejó de ser el monopolio de Arial / Helvetica. Uno de los principales avances del nuevo CSS3 fue la posibilidad de incorporar nuevas tipografías a los diseños. Ello, sumado a un manejo más fino de tamaños, sombras, espacios, interlineado y márgenes ha dado como resultado una sorprendente creatividad en el uso del recurso tipográfico.

Una contribución esencial la dio Google Fonts con un catálgo en expansión de tipografías que pueden utilizarse libremente y una manera sencilla para incrustarlas en tu sitio web. A no tener miedo: Comic Sans no está disponible (todavía).

Lo retro sigue de moda

“Qué hay de nuevo, viejo”, decía Bugs Bunny. Las estéticas de época que apelan al grounge o vintage, las ilustraciones vectoriales simples, las texturas de piedra, cuero y papel que contribuyen a crear un efecto añejo siguen plenamente vigentes.

Es cierto, a veces hay una saturación en el uso del recurso y parece que todo buen diseñador tiene que tener un sitio retro en su portfolio. Sin embargo, en general contribuyen a dar calidez y cercanía al diseño.

El toque personal

Durante los últimos años se ha ido consolidando la tendencia “pixel perfect”. Diseños cuidados hasta en su más mínimos detalles, émulos de Apple que no dejan ni una línea de sombra librada al azar y un afán por lograr la perfección visual han dominado la escena. Sin embargo, esa perfección se está volviendo fría e impersonal por lo que entra en escena el toque personal.

A las ya citadas texturas, los diseñadores también apelan ilustraciones vectoriales, dibujos a mano alzada y una pequeña dosis de “desorden” que nos recuerdan que existe un ser humano detrás del diseño.

Diseño con profundidad

Sombras, degradados, texturas y luces. Los sitios web van ganando en profundidad con el uso de numerosos recursos visuales que intentan romper la bidimensionalida de la pantalla. Personalmente, creo que en esto han contribuido mucho las interfaces “touch screen” que trabajan con objetos para ser manipulados al tacto y buscan despegarse del fondo.

Cintas, stickers, ribetes y demás elementos contribuyen también a acercar más la web a la tercera dimensión.

Conclusión

Se sigue consolidando la tendencia de utilizar el espacio de la web balanceando creatividad, atractivo visual y funcionalidad. Las limitaciones que presentaba el medio en sus inicios van quedando atrás y cada vez hay más recursos y posibilidades gracias a la evolución de las tecnologías.

Uno de los cambios más imporantes que estoy observando en el trabajo de los diseñadores web es el auge de los sistemas de suscripción que ofrecen diferentes recursos para el diseñador: no solo plantillas o iconos sino elementos muy concretos como sombras, cortes de página, texturas y gradientes. Como siempre, hay de muchas calidades pero tengo la impresión que estoy también ha ayudado a elevar el estándar del diseño.

Por eso, comienza a ser cada vez más importante el concepto del diseñador como «curador», es decir, aquel que de acuerdo con los objetivos del sitio y su filosofía es capaz de seleccionar los recursos y elementos que permitan construir el concepto o la metáfora que da origen al diseño.

Por qué amamos los bordes curvos

Sebastián Thüer · 16.11.2011 ·

Según cuenta la biografía, un ingeniero le mostraba entusiasmado a Steve Jobs un nuevo método para generar figuras geométricas en pantalla cuando este lo interrumpió para preguntarle si se podían crear rectángulos con bordes curvos. Ante la respuesta negativa, Jobs despachó al ingeniero y le dijo que solo volviera con una solución que los considerara.

La anécdota pretenece al proceso de desarrollo la primera Macintosh y muestra la obsesión de Jobs por esos pequeños detalles que la mayoría pasaba por alto. Sin embargo, el instinto de Jobs estaba en lo cierto: las figuras de bordes curvos son más fáciles de procesar e interpretar para las personas.

Un estudio del Barrow Neurological Institute (PDF aquí) sugiere que la percepción de las esquinas varía según sea su angulación. Los bordes rectos generan tensión porque suponen cambios bruscos en el recorrido visual. Por el contrario, las esquina curvas ayudan a focalizar la atención hacia el interior de los recuadros. El ojo prefiere las transiciones suaves y los cambios de sentido graduales -como lo sugieren las curvas- a los cortes abruptos que presenta un ángulo recto.

Mirando el siguiente gráfico, ¿cuál diagrama es más fácil de seguir?

El primero casi que invita a recorrer el sentido de las flechas, mientras que el segundo nos obliga a tomar una decisión y casi que miramos el final antes de saber por qué lado seguir.

Otro artículo (PDF) que analiza el fracaso en el rediseño del logo de GAP, señala que las líneas curvas están presentes en los niños cuando comienzan a dibujar. Trazar ángulos rectos requiere de un aprendizaje y tendemos a evitarl bordes afilados porque en la realidad representan una amenaza.

Keith Lang tiene un interesante post sobre el tema donde plantea que entre un cuadrado y un círculo del mismo tamaño nos resulta más fácil de comprender este último.

El cuadrado de bordes curvos se situa, entonces, en un punto intermedio. Las guías de estilo de Apple alientan su uso porque representan una metáfora más cercana para la interfa de usuario: en el mundo real, los botones para tocar suelen ser curvos. Inclusive si vemos el hardware de Apple podemos reconocer bordes curvos en casi todos sus productos.

En tu caso, ¿utilizás bordes curvos en tus diseños? ¿Por qué? Tus comentarios son bienvenidos.