Sebastián Thüer

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.

WordPress vs. Drupal

Sebastián Thüer · 22.12.2011 ·

Probablemente WordPress, Drupal y Joomla son los gestores de contenido (CMS) más utilizados por desarrolladores, diseñadores y administradores de sitios web. La versatilidad que ofrecen, junto con la experiencia de varios años y la robustes propia de las aplicaciones de software libre los han ubicado en un lugar destacado.
Personalmente, trabajo con WordPress y -algo menos- con Drupal y por eso me resulta interesante leer esta comparativa publicada en Smashing Magazine. Antes de ponerse a discutir «cuál es mejor» conviene detenerse en cuáles son sus principales fortalezas a la hora de tener que optar por uno.

WordPress posee una enorme comunidad de usuarios y es debería ser la primera opción cuando se trata de llegar a usuarios que no está muy familiarizados con el HTML. Para los diseñadores, la personalización resulta bastante más sencilla y para los expertos en SEO el manejo de las redirecciones y URL es tan sencillo como eficaz.

Drupal tiene su fortaleza en un completo sistema de manejo de permisos por usuarios con lo cual podemos crear un entorno donde existas múltiples roles y funciones. Puede gestionar mejor picos de mucho tráfico y posee un sólido manejador de base de datos.

¿WordPress o Drupal? La respuesta depende de para qué. La Casa Blanca, por ejemplo, gestiona bastante de sus sitio a través de Drupal por la solidez que le ofrece la herramienta. Por contrapartida, la curva de aprendizaje para un administrador es más lenta y no siempre resulta fácil introducir modificaciones a la estructura predeterinada.

Pero si lo que importa es un diseño creativo y la posibilidad de personalizar el sitio WordPress saca unos cuerpos de ventaja. Hay cientos de themes de muy buena calidad que permiten modificar radicalemente el aspecto del sitio sin necesidad de tocar el corazón del sistema.

Apple busca revolucionar la TV

Sebastián Thüer · 19.12.2011 ·

The Wall Street Journal publica hoy un artículo donde menciona que Apple ha tenido reuniones con varios ejecutivos de la industria de medios para darle forma a su propuesta de llegar a la televisión. Si tenemos en cuenta lo que hizo en el mercado telefónico, es de esperar que la empresa de Cupertino busque extender sus principios de facilidad de uso y diseño centrado en el usario a un sector donde la evolución tecnológica de los receptores de TV es lenta.

Básicamente, tenemos los mismos televisores de los años ’70 donde los principales saltos tecnológicos han sido el paso del blanco y negro al color y el uso del control remoto. Recién ahora el concepto de «Smart TV» está siendo impulsado por algunos fabricantes que entienden la necesidad de la convergencia y que no podemos seguir segmentando pantallas.

¿Qué es lo que se propone hacer Apple? Básicamente, seguir potenciando su ecosistema de dispositivos e integrar tecnología ya desarrollada pero que hasta ahora no está presente en los receptores de TV domésticos. Por ejemplo, la capacidad de transimsión de señales de alta definición por aire, la incorporación de software de reconocimiento de voz para simplificar la interacción y una fuerte sinergía con otros dispositivos: comenzar a ver una serie en TV y poder seguirla viendo en un iPad con sicronización a través de iCloud.

Lamentablemente no hay mayores precisiones como bien apuntan en Mashable sobre lo que sería la iTV. Como siempre pasa en Apple, los rumores se expanden sin que nadie afirme o desmienta lo que se dice. Pero si miramos lo que ya hizo el empresa en el mercado discográfico y telefónico, los cambios que planean no son menores.

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.