• 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

Diseñando para el Ipad

Sebastián Thüer · 19.04.2010 ·

El iPad ya está en la calle y algunos sitios web han comenzado el proceso de adaptar sus aplicaciones para que se vean bien en el nuevo gadget de Apple. Pero hay algunos que buscaron anticiparse y quisieron tener sus diseños compatibles apenas se lanzó el producto. Todo un desafío para los diseñadores.

Information Arquitecture ha publicado una interesantísima reseña donde cuentan el proceso de diseño para un dispositivo que en ese momento no existía ¿Cómo testear el diseño y saber si verá bien? ¿Tendrá la tipografía el tamaño suficiente legible o se verá demasiado grande?

La respuesta no está en ningún artilugio sofisticado sino en algo mucho más habitual: pruebas impresas. Así es, imprimieron cientos de pantallas para evaluar la resolución y determinar tamaños, contrastes y la disposición de los elementos.

Compararon las resoluciones y tamaños de la tipografía con otros dispositivos como pantallas de monitores LCD y el iPhone. Como la interfaz es táctil los elementos interactivos deben sobresalir claramente el 3D está recomendado para botones.

Pero como ya he comentado anteriormente, si bien la interfaz táctil es mucho más natural y habitual tiene el problema que la entrada y salida de la información se realiza sobre el mismo soporte. Por lo tanto, hay que minimizar la interacción del usuario tanto como sea posible y pedirle su decisión sólo cuando es imprescindible. Nada de clics obvios solo para aceptar una acción que de todas maneras se ejecutará.

Jeffrey Zeldman hace un buen resumen del texto de Information Arquitecture y nos da algunos elementos claves cuando pensamos en diseñar para el iPad:

  • Minimizar la entrada de datos, maximizar la salida.
  • El tamaño mínimo de un elemento a pulsar es el círculo del dedo índice. El espacio vale oro y no hay que gastarlo en opciones secundarias.
  • Es más fácil transformar una aplicación para el iPad en un sitio web que hacerlo al revés.

Adobe CS5, la nueva suite para el diseño web

Sebastián Thüer · 14.04.2010 ·

Como ocurre cada dos años Adobe lanzó su suite de diseño Adobe CS5 con nuevas versiones de sus principales programas. El lanzamiento mundial fue el 12 de abril y estuvo a cargo de John Loiacono, Vicepresidente Senior y Manager General de Adobe.

«Estamos tremendamente emocionados de presentar la nueva versión de Creative Suite, no porque está llena de nuevas herramientas de gran y características, sino porque estas características son complementadas por la capacidad para resolver problemas reales de flujo de trabajo de extremo a extremo», dijo Loiacono.

El flujo de trabajo, entendido como una línea que recorre al contenido desde su creación, entrega, visualización, testeo y optimización, es precisamente el gran protagonista en las novedades de Adobe CS5 que apunta a reducir el tiempo empleado para tareas que hasta ahora se hacían paso a paso.

Veamos un rápido repaso por las principales aplicaciones de la suite para el diseño web.

Photoshop CS5

Photoshop es una de los programas más antiguos de Adobe y uno de los que presenta las novedades más impactantes al permitir realizar tareas que llevaban bastante tiempo de forma muy rápida. La opción content aware es la estrella y permite eliminar objeto de un escenario sustituyéndolos por el fondo, como se ve en este video:

Puppet Warp es otra función muy interesante que descompone una figura en celdas donde se pueden insertar puntos de anclaje, al estilo de los programas vectoriales y algunos de 3D. De esta forma, es posible, mover y articular un objeto dentro de una fotografía con relativa facilidad.

Más novedades en Photoshop: selección de contornos mejorada para las máscaras, corrección de lentes para corregir distorsiones ópticas, edición avanzada de alto rango dinámico (HDR), corrección automática de la línea del horizonte y más.  En quesabesde.com hay una buena síntesis de las principales novedades de Photoshop CS5.

Dreamweaver CS5

El programa de diseño web por excelencia finalmente ofrece soporte para los principales CMS como WordPress, Joomla! o Drupal. Una tarea cada vez más frecuentes para los diseñadores es desarrollar plantillas para alguno de estos sistemas que hasta ahora se debía hacer en la vista de código y sin poder obtener una previsualización de los resultados.

Otro paso hacia donde avanza Dreamweaver es permitirnos ver cómo queda nuestras creaciones cuando son accedidas con diferentes navegadores. La comprobación de código puede funcionar bien, pero no hay nada mejor que ver en la realidad cómo luce la web cargada en un navegador con un sistema operativo concreto. Por eso Dreamweaver CS5 se integra con Adobe BroweserLab que permite generar capturas de pantalla de una web como si se viera con distintos navegadores y sistemas.

Otra novedad interesante es la inspección de CSS al estilo Firebug: al seleccionar un elementos se puede ver todas las clases que tiene aplicadas. Algo muy útil cuando hay que hacer ajustes finos o trabajar con muchos estilos y clases anidadas.

Este video muestra otra función interesante: el «pegado inteligente» de vectores y otros archivos directamente en Dreamweaver.

Flash CS5

La guerra entre Flash y HTML5 destapada a raíz de la falta de soporte de Flash en el iPad tiene un nuevo capítulo en Flash CS5 que convertirá las animaciones generadas con este programa en HTML5. Se trata de una jugada arriesgada pero brillante ya que permitirá a los diseñadores recuperar sus trabajos anteriores y hacerlos compatibles en aquellos dispositivos que no admitan el plugin de Flash.

Otra mejora de Flash tiene que ver con aquellos que escriben código ya que tiene un editor mejorado con la posibilidad de autocompletar clases personalizadas. Para los diseñadores, Flash CS 5 trae Text Layout Framework con lo cual la inserción de elementos gráficos dentro de un texto (emoticons, gráficos, dibujos, etc.) se hace mucho más sencilla. Eso sí, requiere tener el plugin Flash 10 instalado.

Debajo está el video de una presentación de Flash CS5 en Flash On The Beach:

El resto de Adobe CS5

Recorriendo brevemente los programas que componen la suite está claro que refuerzan su apuesta por la integración de los productos para poder llevar elementos de un lado a otro de manera rápida, clara y organizada. El pegado inteligente de Dreamweaver es un ejemplo de ello.

Para Illustrator CS5 hay novedades interesantes como la facilidad para trabajar el dibujo en perspsectiva, la capacidad de modificar el grosor de un trazo en puntos independientes y crear objetos con precisión de pixeles, algo que se agradece para el diseño web.

En el caso de Fireworks Cs5 ahora el programa se integra con Adobe Device Central con lo cual es posible producir diseños para varios dispositivos móviles. También agrega plantillas de diseño  y ofrece un mejor flujo de trabajo con Flash.

¿Hay algo que te guste especialmente de la nueva suite? ¿Esperás que cambie realmente tu modo de trabajo? ¿Qué cosas importantes se han dejado de lado? Me gustaría conocer la opinión de los lectores.

Más información

  • Sitio oficial de Creative Suite
  • Cs5.org: Mucha información sobre los productos de la suite
  • Análisis de Illustrator CS5 en GenBeta
  • Análisis de Flash CS5 en Cristalab
  • Análisis de Photoshop CS5 en QueSabesDe.com
  • Análisis de Dreamweaver CS5 en PC Magazine (inglés)

Lanzamiento y precio

Se espera que la suite Adobe CS5 esté disponible el público en mayo pero podés inscribirte para que te avisen cuando se lance al mercado. El precio de Adobe Creative Suite 5 Design Premium es de 599 dólares para las actualizaciones y 1800 dólares por la versión completa. Si hacés tu reserva hasta el 29 de abril el envío de la versión box es gratuito.

Twitter: un cambio de diseño para una nueva filosofía

Sebastián Thüer · 31.03.2010 ·

Mañana Twitter lanza un nuevo rediseño para su página principal donde intentará seducir a los nuevos usuarios a través de tweets seleccionados por algoritmos que mide su relevancia. Pero más allá de que busquen atraer los newbies como afirman en Cnet, lo más interesante es la filosofía que hay detrás del cambio.

All of our recent changes embrace the notion that Twitter is not just for status updates anymore. It’s a network where information is exchanged and consumed at a rapid clip every second of the day.

Si seguimos viendo a Twitter solo como un servicio de actualización de estado, ciertamente estamos perdiendo la enorme riqueza que hay detrás de un sistema distribuido en tiempo real donde el valor reside en la calidad de las conexiones. Más que enterar de «qué está haciendo fulanito» -para lo cual me parece natural usar Facebook- Twitter permite tomarle al pulso a la información y seleccionar los nodos que actuarán como filtros sociales. Por eso las cuentas donde se siguen a miles de usuarios son un sinsentido.

La nueva home de Twitter seleccionará los temás más destacados y mostrará lo que se escribe sobre ellos como una manera de anticipar el tipo de experiencia que pueden tener los usuarios. Una estrategia para dar el salto de los early adopters (adoptadores iniciales) a la early majority (mayoría temprana), según la clásica curva de adopciónde innovaciones de Everett Rogers.

Curva de adopción de innovaciones de Roggers
Curva de adopción de innovaciones de E. Roggers

5 errores frecuentes al optimizar un sitio web

Sebastián Thüer · 15.03.2010 ·

La optimización de sitios web es un tema apasionante. Al menos a mí me entusiasma el proceso de analizar una web, revisar las analíticas, ver dónde mejorar de acuerdo a las metas que se planteen y trazarse objetivos. Sin embargo, muchas veces un rediseño se ve solamente como un lavado de cara y se pierde una oportunidad enorme para encarar pequeñas reformas que pueden producir grandes resultados.

En Conversion Rates Experts hicieron una lista de errores frecuentes al cambiar una web pero yo quité algunas cosas y agregué otras para armar mi propio listado. Ahí va:

1. Lanzar un rediseño sin medir las conversiones

Foto Iamwahid - SXC

Las métricas son esenciales para conocer lo que pasa en nuestra página web. Dentro de ellas, el dato más interesante a la hora de lanzar un rediseño son las conversiones, es decir, contar qué porcentaje de usuarios pueden llegar al objetivo que nos trazamos. Puede ser rellenar un formulario de contacto, hacer una compra o descargar un archivo. Si el nuevo diseño es mejor, tendríamos que verlo reflejado en una mayor tasa de conversiones.

2. No direccionar el esfuerzo a páginas determinadas

Foto de Kevin Luu - SXC

Los grandes proyectos de rediseño suelen tener objetivos amplios y ambiciosos. Está bien se hay un gran presupuesto para respaldarlo, pero si los recursos son limitados es mejor concentrarse en los aspectos específicos que no están funcionando. ¿Llegan muchos usuarios a la página registro y no lo completan? Entonces por qué no probar con una nueva página de registro más simple en lugar de cambiar todo.

3. Asumir que se puede testear indefinidamente

Foto de Timi az en vaok - SXC

Me encantan los test y muchas veces son claves para elegir entre dos alternativas. Sin embargo, testear lleva tiempo y más si tu sitio no llega a un mínimo de 1000 visitas diarias. Herramientas como Google Website Optimizer son excelentes pero hay que estar dispuestos a tener paciencia hasta tanto se tengan los datos precisos para actuarl.  Y tiempo implica dinero.

4. Diseñar con objetivos indefinidos

Foto de Arjun Kartha - SXC

Todo buen proceso de diseño o rediseño web tiene un objetivo en mente. Y un objetivo para ser válido tiene que ser cuantificable. Cuando una empresa entre un brief a alguna agencia de diseño  suelen aparece cosas como «modernizar la imagen», «añadir servicios» o «potenciar la interactividad». Todas intensiones muy loables que pueden marcar un horizonte pero dejan en blanco el camino a recorrer.  Mejor pensar en algo más concreto y plausible como por ejemplo «Incrementar en un 30% el tiempo de permanencia de los usuarios en las páginas en los próximos 6 meses». Esto nos permite pensar nuevas secciones, optimizar la estructura de contenidos y hasta pensar en determinados formatos publicitarios sobre otros.

5. No interactuar con los usuarios

Foto de Henning Buchholz - SXC

Si el sito cuenta con una comunidad de usuarios hay que hacerlos parte del proceso de rediseño, tanto para conocer los aspectos que se deberían mejorar como evaluar el nuevo diseño se ajuste a sus necesidades. Muchas veces se ve el cambio como un simple «lavado de cara» y no hay una idea clara de lo que se quiere lograr con el sitio. Herramientas como 4Q Survey permiten conocer la opinión de los usuarios y saber cuáles son sus demandas.

¿Qué otro error agreguarías a esta lista? ¿Qué cosas tenés en cuenta antes de comenzar un rediseño?

No a las páginas web

Sebastián Thüer · 26.02.2010 ·

Uno de los textos más interesantes que leído en lo que va del año sobe el diseño web es Embrace Your Page Rage, escrito por Kate Rutter para el newsletter de Adaptative Path. No habla de HTML5, CSS 3 ni Ajax. Tampoco son consejos, trucos o una lista de recomendaciones. No, el texto de Rutter va mucho más allá y reflexiona sobre el insumo básico de los diseñadores: las metáforas.

La metáfora es la idea clave que une a todas las disciplinas y áreas vinculadas con el diseño de experiencias digitales. La usabilidad, la experiencia de usuario (UX) y la arquitectura de la información no pueden entenderse si no es a partir de las metáforas. Ellas tienen la capacidad de ordenar nuestras representaciones del mundo para enfrentarnos a lo desconocido.

El mundo digital está plagado de metáforas. Son parte del vocabulario cotidiano. Decimos que navegamos por la web, no que la corremos, la volamos o la transitamos. Y acordamos acordamos que la unidad mínima de información disponible en web es una página.

Dice Rutter:

«He pasado los últimos 15 años o el diseño de experiencias digitales para la web, de modo que hay un montón de páginas web en mi pasado. He crecido detestando el término Web Page.¿Por qué? Es descaradamente engañoso».
Una página es un objeto, más precisamente de papel. Las páginas se agrupan con otras de similar tamaño y forma. Son secuenciales, lineales y con un solo punto de entrada. Tienen un espacio limitado y habitualmente el contenido que las domina son las palabras: lo visual solo actúa como soporte. Además, implican lectura y atención focalizada

¿En qué se parecen, entones, de las páginas de papel a las páginas web? ¿No sería mejor hablar de interfaces, pantallas, paneles, ventanas, capas, estructuras o exhibidores? Quizás sea tiempo de explorar nuevas metáforas y asociar el contenido de la web con otras ideas.

La web tiene múltiples puntos de entrada. El contenido fluye no solo delante de los ojos sino por detrás con APIs, comunicación de datos asincrónica y datos que se actualizan en tiempo real. La web es multimedia, interconectable y temporal aunque no en un sentido lineal. La web es para usuarios multitarea y multifacéticos.

Buscando nuevas metáforas

Dice la Real Academia Española en una de sus acepciones sobre el término metáfora:

Aplicación de una palabra o de una expresión a un objeto o a un concepto, al cual no denota literalmente, con el fin de sugerir una comparación (con otro objeto o concepto) y facilitar su comprensión.

¿Con qué objeto o concepto podemos comparar la web? Rutter propone algunos: una película, una representación, una pieza de arte o un edificio.

  • Una película contiene escenas, secuencias, y se desarrolla dentro de un pantalla.
  • Una representación supone una puesta en escena, un montaje y un escenario.
  • La pieza de arte tiene un aspecto, una composición, un rostro y un sustento.
  • Un edificio se conforma de bloques, paneles, fragmentos, de un plan y una base.

No son metáforas perfectas, pero bastante mejores que la de página.

  • « Ir a la página anterior
  • Página 1
  • Páginas intermedias omitidas …
  • Página 21
  • Página 22
  • Página 23
  • Página 24
  • Página 25
  • 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