• Saltar a la navegación principal
  • Saltar al contenido principal

Sebastián Thüer

Comunicación, diseño y tecnología

  • Acerca
  • Blog
  • Contacto
  • Show Search
Hide Search

Diseño Web

Cómo crear el favicon perfecto

Sebastián Thüer · 28.12.2011 ·

Favicons, iconos para sitios web

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

HTML5: He visto el futuro y está en mi navegador

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

Diseño web de respuesta

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

Diseño web con 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

Tipografía creativa en diseño web

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

Diseño web con estilo retro

“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

Dibujo a mano alzada en diseño web

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

Diseño web 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.

Vuelve BundleHunt con un pack de recursos para diseñadores

Sebastián Thüer · 03.12.2011 ·

BundleHunt, el un paquete de recursos para diseñadores, está de vuelta. Si en el comercio generalista reinan los sitios con cupones de descuento, en el ámbito del diseño estos packs llenos de programas, pantillas, libros, iconos y otros recursos se están consolidando como un modo de ofrecer productos a precio promocional.

Por casi 50 dólares tenés programas de diseño, libros de Smashing Magazine, varios themes para WordPress, colecciones de vectores e iconos. Como en la anterior oferta, la mayoría del software corre sólo sobre Mac. La oferta termina el 16 de diciembre.

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.

Por qué los usuarios dejan tu sitio web [infografía]

Sebastián Thüer · 11.11.2011 ·

Una buena campaña de marketing no sirve para nada si no podés retener los usuarios dentro de tu sitio web. Sea cual sea el sector, no hay nada peor que un usuario frustrado que abandona una página sin llegar a cumplir su objetivo: buscar información, descargar algo, buscar un dato de contacto o utilizar un servicio online.

Hay varias razones por las cuales un usuario puede abandonar tu sitio: una estructura de navegación deficiente, saturación de publicidad, mala organización de la información, audio o video intrusivo, necesidad de registro, contenido o diseño aburrido, mala legibilidad de los textos o falta de actualización.

Esta infografía resume las principales causas de abondono de un sitio y propone mejoras para evitarlo.

Infografía: Por qué los usuario abandonan un sitio web

Vía KissMetrics

  • « Ir a la página anterior
  • Página 1
  • Páginas intermedias omitidas …
  • Página 8
  • Página 9
  • Página 10
  • Página 11
  • Página 12
  • Páginas intermedias omitidas …
  • Página 38
  • Ir a la página siguiente »

Sebastián Thüer

Creative Commons Atribución 4.0 Internacional © 2025 · Less Is More · Acceder