Curso de Diseño de Interacción (día 3)

El tercer día fue intenso. Estuvo a cargo de Eduardo Moratinos (@esmuz), también de DesignIt Madrid (aka unos cracks), que nos habló del diseño visual en el diseño de interfaces.

Efectivamente, el día había llegado: Eduardo es diseñador gráfico (y de los buenos) y mis compañeros (diseñadores todos) iban a estar como peces en el agua, mientras yo trataría de asimilar y deglutir con la mayor rapidez posible, siendo consciente de mis limitaciones.

Introducción

Objetivo: ser lo menos malos posibles, mediante práctica, práctica y más práctica. Me gusta la idea, es una forma humilde, a la vez que motivadora, de crecer en cualquier trabajo artesano. Se traslada fácilmente al desarrollo de software.

¿Por qué hablamos de Diseño Visual? ¿Qué pasa con el Diseño Gráfico? No está muy claro, pero como comentó Eduardo, digamos que el diseño visual consiste en aplicar una capa de diseño gráfico a un boceto/wireframe para:

  • Ayudar al usuario a consumir.
  • Dignificar y poner en valor una funcionalidad.
  • Generar una experiencia placentera (o no, chapó ryanair).

Todo ello, teniendo respetando valores de marca, marketing, branding, etc.

Hablamos de píxeles y puntos y aquí los diseñadores demostraron sus conocimientos e interés por el mundo de las pulgadas, las resoluciones de pantalla.

En el mundo móvil las cosas están cambiando, se está empezando hablar de centímetros / pulgadas. Medidas físicas. Los píxeles ya no dicen todo (de hecho, nunca lo han dicho 🙂

¿Dónde encaja el diseñador visual dentro del proceso?

 El método

El método planteado constaba de seis fases, que vamos a ver a continuación:

  1. Análisis del contexto, donde se investiga sobre:
    1. el usuario de la aplicación: cuál es su edad, si nivel tecnológico, momento de uso, qué dispositivo utiliza, etc.
    2. el cliente, para saber si estamos ante un diseño o un rediseño, por qué quiere cambiarlo, qué quiere conseguir, por qué, etc. Para el diseñador visual es muy importante saber cómo es el cliente a nivel gráfico: logo, imagen de marca, guía de estilo, materiales, fotos, tipografías, paleta de colores, iconografía, etc.
  2. Análisis funcional, en el que se analizan los wireframes para saber el tipo de layout, el nº de pantallas, etc. Éstos pueden tener distintos niveles de detalle según el tipo.
  3. Toma de decisiones, donde hemos de comenzar a decidir qué estilo le vamos a dar (dirección de arte), qué vamos a necesitar, qué tipografías utilizaremos, qué paleta de color, qué resolución y layout, qué restricciones tecnológicas tenemos, etc.
  4. Ejecución inicial. Aquí comienza un proceso iterativo con el cliente. Lo que haremos será diseñar unas pocas pantallas cuyos elementos sean representativos de un alto porcentaje del total. Algunos trucos y recomendacionesmuy interesantes:
    1. Inspirarse y copiar, si procede.
    2. Repetir hasta la saciedad. Cuánto más iteres, mayor calidad tendrá el resultado. Diseñar hasta la perfección 🙂
    3. Revisar los wireframes cuando hayas terminado el diseño, ¿aporta valor el diseño?.
    4. Repasar el entregable hasta la saciedad en busca de fallos, opiniones diversas, erratas.
  5. Validación (con el cliente). Este punto y el anterior forman un proceso iterativo donde el diseño se va refinando mediante la colaboración entre diseñador y cliente. Algunas recomendaciones:
    1. Construye un discurso. Prepara la presentación, cómo vas a enseñarlo. No dejes cosas a la suerte.
    2. Arma un prototipo que dignifique tu diseño. Si puedes mostrar algún tipo de interacción, mejor.
    3. Escucha al cliente y trata de entender lo que quiere. Si algo no le gusta, habrá un buen motivo (normalmente). Pregúntale todo lo que puedas, obtén el mayor feedback posible. Si puedes llevar varias alternativas, mejor.
  6. Ejecución final. Una vez el cliente ha validado el diseño, hay que diseñar todas las pantallas. Pueden surgir cosas que no encajen. Puede ser interesante testear tu diseño antes de entregarlo al cliente. Mantener un repositorio de elementos comunes en tu herramienta puede ayudar mucho.

Técnica

En cuanto al flujo de trabajo (lo que hacen los diseñadores serios):

  • Preparar el PSD. Dedicarle tiempo suficiente.
  • Usar la resolución y retícula adecuadas.
  • Utilizar una baseline además de la retícula.
  • Preparar las paletas de color.
  • Organizar las capas (poner nombres, dividir en secciones).
  • Tipografías.
  • Usar estilos de capa.
  • Organizar los archivos.
  • Leer los textos.
  • Comparar con el wireframe.
  • Si puedes… pixel perfect.

Práctica

La tarde estuvo dedicada a realizar un ejercicio práctico utilizando Photoshop, aunque yo utilicé Fireworks, porque:

  • Está más orientado al diseño de pantallas.
  • No necesito toda la potencia de retoque fotográfico de Photoshop.
  • Puedes trabajar tanto con bitmaps como con vectores.
  • Los diseñadores que nos están dando el curso usan mayoritariamente Fireworks (Eduardo es la excepción 🙂 lo que me hace pensar que es probable que sea más adecuado para este trabajo.
  • No tenía experiencia con ninguno de los dos, así que podía elegir libremente.

El ejercicio consistió en rediseñar la web corporativa de Repsol a partir de una versión antigua y un wireframe. Se nos proporcionaron diversos recursos gráficos como si nos los hubiera dado el cliente.

Trabajé bastante duro para hacerme con la herramienta y sacar adelante algo que pudiera resultar aceptable. Además, tanto Eduardo como mi compañera Noemí, me ayudaron en varios momentos de la práctica 🙂 Por ejemplo, el uso de los Twitter Bootstrap 1.4 Assets para Fireworks, me permitió hacer el botón de iniciar sesión, el combo de idiomas y la caja de búsqueda, de forma muy fácil.

El resultado lo podéis en el siguiente tweet 🙂

Puedo decir que esta fue una clase muy especial, me demostré a mí mismo que puedo hacer diseño visual aceptable con un poco de práctica (necesito mejorar bastantes cosas). Todo gracias a este curso y a Eduardo, claro 🙂

 

¿Opiniones, comentarios, críticas? :)