Sebastián Thüer

Comunicación, diseño y tecnología

diseño

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.

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.

Photoshop: 20 años que cambiaron el diseño y la imagen

· ·

Hace 20 años los hermanos Thomas y John Knoll unieron su pasión por el arte y la tecnología para crear Photoshop. Con una Apple Mac Plus Tom decidió resolver por sí mismo un problema para el que no encontraba solución: mostrar  una imágenes en escala de grises en un monitor monocromático. Así nació el programa que revolucionó el diseño y la producción de imágenes.

Un poco de historia

Thomas y John Knoll
Thomas Knoll (izquierda) y John Knoll (derecha), los hermanos creadores de Photoshop

En 1987 John trababaja para los legendarios estudios ILM de Lucas Film y Tom estudiaba procesamiento de imágenes en la Universidad de Michigan. Cuando hacía su trabajo de tesis Tom se dio cuenta que no podía mostrar imágenes en escala de gris en un monitor monocromático. Tenía un Apple Mac Plus y decidió escribir su propio código para convertir la imagen.

Su hermano vio los progresos y convenció a Tom de participar un proyecto mayor: Display. Tom comenzó a reescribir el código para que este programa pudiera trabajar con imágenes en colores pero pronto comenzó a agregarle más funciones: corrección del factor gama, abrir y guardar archivos en varios formatos y otras cosas más.

Uno de los avances más interesantes era un método innovador para seleccionar y modificar solamente una parte de la imagen y establecer un conjunto de rutinas que afectaran solamente esta selección. Esteconjunto de rutinas dieron lugar a lo que posteriormente fueron los plugins.

Los avances se fueron sucediendo. Agregaron funciones para ajustar los niveles de la imagen, controles para ajustar el balance, el tono y la saturación: Display se transformó en ImagePro. A pesar de la resistencia de Tom, su hermano comenzó a ver la posibilidad de vender el programa como una aplicación comercial para usuarios de Mac. Buscaron en el mercado un producto similar y no lo encontraron, por lo cual se convencieron de que el programa podría tener suerte.

El salto a Photoshop

Para poder dar un salto de escala con su proyecto necesitaban a inversores. En una de estas reuniones les sugirieron que cambiaran el nombre y así comenzaron a referirse al programa como Photoshop. Varias empresas estaban trabajando en desarrollos similares pero sólo una estaba abierta para la innovación de los hermanos Knoll: Adobe.

Russell Brown, director de arte de Adobe, quedó maravillado con la creación y convenció a su empresa que hiciera lugar a los hermanos para que siguieran desarrollando la aplicación. Los Knoll siguieron trabajando en Adobe para tener listo la primera versión oficial de Photoshop que finalmente salió a la luz en Febrero de 1990.

Thomas se encargó de desarrollar el código general de la aplicación, mientras que John se enfocaba en el desarrollo de los plugins de forma separada. Esta metodología sería luego replicada por múltiples programas y sigue vigente hoy en día.

Un dato interesante: Los hermanos Knoll nunca vendieron su programa a Adobe sino que lo licenciaron y distribuyeron a través de la empresa, con lo cual siguen recibiendo las regalías que produce el software.

El futuro de Photoshop

Los capítulos más recientes de las historia son más conocidos. Las sucesivas versiones de Photoshop fueron incorporando cada vez más funcionalidades. Si querés saber más sobre la historia de Photoshop en Computer Arts hay un muy buen artículo escrito hace 5 años que sigue vigente.

Yo comencé a trabajar con la versión 4 y creo que las horas que pasé aprendiendo Photoshop de forma autodidacta fueron divertidas y fundamentales para luego pasar al diseño web.

¿Que hay para el futuro? Photoshop CS5 probablemente llegue a mitad de este año con nuevas herramientas que permitirán pintar sobre una imagen de un modo mucho más realista, como se puede ver en este video:

Basta de páginas web, pensemos en carteles

· ·

web-poster

Primero fueron las páginas blancas llenas de texto. Luego llegaron iconos, botones e imágenes de fondo. Vino más tarde el tiempo de Flash y las webs de alto impacto. Alguien pensó que era mejor ordenar esta ensalada y entonces hicieron su entrada la arquitectura de la información y la usabilidad. El uso  de ajax explotó recientemente y se popularizaron los frameworsk como jQuery para usar javascript con un criterio claramente funcional.

¿Que se viene ahora?

La web está evolucionando hacia un medio donde por fin podemos diseñar con más libertad. La principal tarea del diseñador web siempre ha sido luchar contra las limitaciones del medio: colores limitados, tipografías limitadas, posicionamiento de elementos limitados, multimedia limitado. Los diseñadores web fueron muchas veces recopiladores de trucos y recetas para hacer que la web no ignorara la larga tradición de la humanidad en diseñar objetos agradables.

La popularización del CSS y la adpoción de estándares resolvieron muchos problemas. Pero no todos. La extrema preocupación por recrear un ambiente familiar al usuario hizo que muchas páginas web fuesen diferentes variaciones del hiperclásico esquema cabecera-menu-contenido-pie de página. Pero la dirección está cambiando.

Hace unos días el reconocido diseñador Paul Boag escribió Stop designing websites, start designing posters. En pocas palabras, Boag nos dice que el excesivo apego por las convenciones nos llevó a diseñar páginas web con un mismo molde que sea fáciles de comprender para el usuario. Sí, puede que sean fáciles pero resultan terriblemente aburridas.

La metáfora propuesta para renovar el diseño web es no pensar en páginas. Merjo, pensar en carteles. Atractivo visual, fáciles de ojear y con más información para el lector interesado. En un contexto de saturación y sobrepoblación de sitios y páginas la premisa básica del cartel vuelve a tener sentido. Ya no se trata de llenar la página de información para que el usaurio pueda «verlo todo», hay que escoger una o dos ideas sencillas, jerarquizarlas y presentarlas para salir a la captura de un usuario sobre saturado de mensajes.

Atractivo

Aun conservando los elementos estructurales básicos de una página es posible ser creativos y llamar la atención del usuario. En lugar de un listado interminable de características MailChimp optó por gráficos, colores y texto en gran tamaño para decirnos claramente que…

2010trends-mailchimp
MailChimp, gráficos y colores para crear un contraste atractivo
  1. Son un servicio para hacer marketing por e-mail
  2. Hay dos acciones destacadas: registrarnos o ver una demo de 2 minutos
  3. Una persona de un medio muy importante lo probó y habla bien de él.
  4. Nos dicen que incluye la versión gratuita y podemos ver la tabla de precios.
  5. Información extra: Principales características, una nueva funcionalidad destacada, clientes importantes que poseen y un pie de página con acciones, opciones y datos secundarios.

Usable

La creatividad no está reñida con la usabilidad. Diseñamos para que se entienda el mensaje y la web -salvo páginas artísticas/experimentales- no es la excepción. Podemos ser tremendamente innovadores en la gráfica, emplear una disposición transgresora de los elementos en el plano, o definir la comunicación con el usuario desde un enfoque novedoso pero siempre tenemos el mismo objetivo: hacer comprensible nuestro mensaje fácilmente.

Este es el eje de la usabilidad: crear objetos con los cuales resulte fácil y agradable interactuar. En pocos palabras, el usuario debe saber donde está, donde tiene que hacer clic y cómo moverse a lo largo del sitio.

2010trends-pixelcraft
PixelCraft, un diseño simple, atractvo y de fácil comprensión.

En Pixelcraft hay un buen ejemplo con un interesante uso del blanco.

  1. Al abrir la página centramos la atención en este apartado donde vemos algunos elementos clave que quiere promocionar el sitio. Luego de unos segundos la imagen cambia y completada la serie se reinicia. Un recurso sencillo, efectivo y fácilmente comprensible por el usuario.
  2. Luego de fijar la atención si bajamos encontramos vemos dos elementos que son centrales en una empresa del rubro: mostrarnos el portfolio de trabajos y decirnos qué áreas cubren. Un listado que recuerda a los planes de hosting comunica en poco espacio mucha información.
  3. Si no hacemos scroll tenemos el tercer elementos en importancia dentro de la página: el logotipo y la barra de navegación. Al saber que la mayoría de los usuarios conoce la ubicación de estos elementos no hay un énfasis innecesario en estos elementos que son claramente visibles y accesibles a lo largo de todo el sitio.
  4. Una vez obtenida la información básica (quienes son, qué hacen, qué los diferencia) bajamos para encontrarnos con texto que refuerza y amplia la información anterior. La información detallada está detrás de los enlaces.

En síntesis, un diseño claro, sencillo y elegante.

De un vistazo

En inglés scannable es la capacidad de un texto para ser recorrido fácilmente con la vista. Podría traducirse como «escudriñeable» pero no es una palabra que refleje el carácter apropiado. Cada vez más los usuarios se acostumbran a recorrer las pantalla buscando títulos y gráficos que permitan tener una idea del contenido en pocos segundos sin necesidad de detenerse a leer.

Esta es la tendencia y nada indica que se vaya a revertir. Un buen sitio nos tiene que transmitir rápidamente qué podemos esperar de él. Si hasta las citas personales se reducen a pocos minutos no hay razón para otorgarle más de unos segundos a una web.

2010trends-firefox
La web de Firefox, en pocos segundo descubrimos qué hay por hacer.

La webde Firefox es un excelente ejemplo ¿Por qué atormentarnos con datos si la principal razón por la cual llegan los usuarios es hacer clic en el botón de descarga? Es el primer elemento donde ponemos nuestros ojos y rápidamente podemos saber lo que obtendremos: la última versión de Firefox. Hacia la derecha tenemos un menú con opciones muy fáciles de entender para entrar en detalles.

Si no estamos desesperados por saber algo podemos bajar un poco y nos encontramos con el principal argumento por el cual debemos actualizar Firefox: es más rápido. Además vemos otro menú con las principales características del nuevo navegador.

Recién más abajo encontramos la información complementaria como la visita guiada, los premios o consejos para usar el programa. Y en un espacio totalmente marginal están los enlaces información que casi nadie lee: la política de privacidad.

Información claramente jerarquizada

Cuando hay mucha información hay que jerarquizar, escoger qué es importante y qué secundario. El cartel lleva este principio del diseño a su máxima expresión y generalmente está domininado por una única idea expresada a través de un título, una fotografía, una ilustración o una mezcla de todo.

2010trends-kanchi
Kanchi, unidades de información claramente diferenciadas.

No es necesario llegar a este punto en la web, pero un buen diseño nos debería permitir diferenciar lo importante de lo accesorio. Kanchi.org es un buen ejemplo. Desde la página inicial podemos ver que hay una clara jerarquía donde un titular que es una declaración de principios de esta organización domina la página. Un buen modo de identificar a qué se dedica esta organización sin necesidad de ir a la página de «Sobre nosotros».

Más abajo un video acompañado de un pequeño texto captar nuestra atención por el contraste de la imagen sobre el fondo negro. Y luego aparecen tres recuadros de idéntico tamaño con más información. Parece bastante claro por donde comenzar a navegar el sitio.

Conclusión

Con las limitaciones que tenían los primeros diseñadores web algunos hacían auténticas maravillas para acercarnos una web original, agradable y bonita. En ese entusiasmo inicial algunos se pasaron de la raya y terminaron por crear sitios intendentibles con las nuevas tecnologías que iban apareciendo.

Hoy, con la usabilidad como una disciplina indispensable para pensar la web y la progresiva asimilación de la web como un medio por parte de los usuarios asistimos a un escenario donde el diseño gráfico recobra su valor: tipografía, planos, fotografías, luces, colores… desde un minimalismo extremo hasta la ornamentación barroca el abanico de posibilidades es mucho mayor.

La metáfora de la web como un cartel nos permite salir del molde con el cual se crean muchas páginas y proyectar algo diferente. Sin caer en propuestas estrambóticas, el diseño web es hoy mucho más que acomodar un encabezado, menú y pie de página para que rodeen el contenido.

Construyendo el mapa del futuro

· ·

Predecir el futuro no es un juego ¿O sí? El Instituto para el Futuro (IFTF) de Palo Alto lanzó hace un año Superstruct, un juego de rol multijugador  donde se esboza el futuro para el año 2019  con ideas de cientos de colaboradores.  El resultado de la primera etapa fueron 7 ideas claves:

  • Optimismo amplificado
  • Escalas extremas
  • Emociones adaptadas
  • Simulación como juego
  • Habilidad de evolucionar (Evolvability)
  • Crisis inversa

La gente de Density Desing ha analizado estas ideas y sus conexiones para producir un impresionante mapa del futuro donde podemos recorrer de izquierda a derecha cinco categorías –política, infraestructura, medio ambiente, economía y sociedad- los cambios que sobrevendrán en ellas bajo la estética de los ’50. Es interesante leer el ‘making off’ del proceso en «We will be here – Map of the future» donde cuentan como llegaron a la elaboración de gráfico final. Para apreciar con detalle cada parte se puede ver la imagen original en Flickr.