Sebastián Thüer

Comunicación, diseño y tecnología

Diseño Web

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

· ·

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

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.

Dando vueltas sobre el iPad

· ·

Como era de esperarse el reciente lanzamiento del iPad está siendo la noticia tecnológica de la semana con más de 300 mil ventas el mismo día de su lanzamiento. Si hay algo que en Apple hacer magistralmente es generar expectativa en los usuarios de productos tecnológicos y e instalar su producto como tema ineludible de blogs y medios especializados.

Por encima de la habitual reseña da cualquier hardware, lo interesante del iPad es la discusión que está generando acerca de su relación con la vida cotidiana de las personas. Más que hablar de prestaciones, rendimiento, conectividad y los analistas se hacen preguntas: ¿Qué es el el iPad en sí? ¿Sustituye a una netbook o al Kindle de Amazon? ¿Será un producto revolucionario como lo fue el iPhone para el segmento de smart phones?

Martín Varsavsky dice que el iPad es al hardware lo mismo que un convertible para los autos: un lujo bonito, sofisticado y sexy… pero poco práctico.  No sustituye a una laptop porque se hace bastante difícil trabajar con un dispositivo donde la interfaz física de salida y entrada de información es la misma.

Brial Lam de Gizmodo hace una interesante reseña del iPad donde cuenta en primera persona diversos casos de uso del dispositivo que van desde una visita al Museo Americano de Historia Natural, juega al Scrabble o lo utiliza para leer el diario mientras desayuna.

En ArsTechnica hacen un profundo análisis del iPad por categorías donde destacan que el tamaño de la pantalla y su característica multitouch hacen que tenga una experiencia de usuario completamente diferente a la que puede ofrecer un iPod touch.  La reseña incluye desde el unboxing hasta tareas específicas como leer, ver videos, escuchar música, navegar por Internet y una pregunta interesante: ¿Se puede usar el iPad para trabajar seriamente o se trata de un dispositivo recreativo?

Para completar el recorrido por lo que se ha dicho del iPad hay un informe imprescindible en The New York Times con la opinión expertos como Tim O’Reilly quien afirma que el lanzamiento del Ipad marca el fin de la era de las PC: la interfaz del mouse y las ventanas tiene los días contados. Emily Chang y Max Kiesler, consultores en diseño y experiencia de usuario coinciden: hay una evolución natural desde las computadoras de escritorio a las notebooks y de éstas a los smartphones.

¿Será realmente así? ¿Cambiará el iPad nuestra forma de interactuar con los dispositivos? Una cosa es cierta: cuando se lanza un nuevo hardware cada vez se presta más atención a la interfaz de usuario.

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

· ·

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

Modelos de comportamiento para el diseño interactivo

· ·

El Persuasive Technology Lab de la Universidad de Stanford ha elaborado una grilla para clasificar la conducta humana de acuerdo a su tipo y duración. El modelo fue creado por el profesor B.J. Fogg y asume que para el cambio de conducta deben converger tres elementos en un mismo momento: la motivación, la capacidad y un disparador.

La conducta del usuario es un elemento clave en la creación de diseños interactivos. A diferencia del mundo analógico, los soportes digitales muestran sistemas simbólicos que se modifican por la acción de las personas que interactúan con ellos. El diseño interactivo es fundamentalmente la creación de experiencias donde la intervención del usuario es central. Por ello, el aporte de Fogg es muy valioso en términos de entender cómo se comportan las personas cuando operan un dispositivo.

Fogg representa los tres elementos que determinan el cambio de conducta en un gráfico cartesiano:

Si se incrementa la motivación y la capacidad de los usuarios, más cerca estamos de lograr que realicen la acción deseada cuando se accione el elemento disparador. Como todo modelo, es una representacion simplificada de un proceso complejo que no hay que tomar de forma literal. Lo interesante de este modelo es la forma sencilla en que clasifica los cambios de conducta:

Grilla de comportamientos con ejemplos
Grilla de comportamientos con ejemplos

La grilla tiene 5 columnas verticales que identifican el tipo de comportamiento: el verde es un comportamiento nuevo y no familiar, el azul es realizar un comportamiento familiar, el morado es intensificar o extender un comportamiento que ya se realiza, el gris disminuir una acción en curso y, finalmente, el negro para detener una acción.

En las filas horizontales encontramos tres clasificacones de tiempo: dot, hacer una vez; span, hacer por un período de tiempo determinado; y path, hacer de ahora en más. A partir de esta combinación surge cada tipo ¿Querés dejar de fumar? Entonces es un BlackPath Behavior ¿Vas a comprar un libro online? Es un BlueDot Behavior.

El modelo sirve para matizar un poco aquello que en muchos manuales de marketing aparece como el «call to action», es decir, llamar al usuario a que realice una acción determinada. No es lo mismo invitar a probar un producto nuevo, pedirle que compre algo o solicitar la suscripción a un servicio. Cada cual requiere sus dosis justas de motivación, capacidad y el disparador adecuado.

Si te interesa este modelo el profesor ogg explica en su paper «The Behavior Grid: 35 Ways Behavior Can Change» (PDF) el modo en que construyó la grilla aunque luego fue simplificada.

No a las páginas web

· ·

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.