Universidad de Palermo Facultad de Diseo y Comunicacin Comunicacin Interactiva IV Material de Ctedra

THE DRIBBBLISATION OF DESIGN

Artculo original en: http://insideintercom.io/the-dribbblisation-of-design/
Traduccin: Juan Ignacio Belbis

PAUL ADAMS
Tiene un Mster en Medios Interactivos y es Diseador. Es Director de Diseo de Productos en Intercom, fue Jefe Global de Diseo de Marca en Facebook y previamente dirigi el rea de investigaciones sociales de Google, donde desarroll la lgica de crculos de Google+. En 2011 public su libro Grouped.

Universidad de Palermo Facultad de Diseo y Comunicacin Comunicacin Interactiva IV Material de Ctedra

SLO UNA DE ESTAS APLICACIONES DEL CLIMA PRETENDE RESOLVER EL PROBLEMA REAL .
Hay hechos divergentes sucediendo en la comunidad de diseo de interaccin y de productos. Por 1 2 un lado tenemos grandes piezas de escritura como las de Ryan Singer o Julie Zhuo , llevando al diseo hacia adelante. Por el otro tenemos un creciente nmero de personas publicando y 3 discutiendo su trabajo en Dribbble , cuyos resultados generales llevan al diseo hacia atrs. Esta publicacin no es sobre Dribbble en s misma, es sobre que valora la comunidad que all se rene. Usar el trmino diseo de producto de aqu en adelante, pero la usabilidad y el diseo de interaccin estn incluidos en l.

SE VE BRBARO! SOBRE CMO LA COMUNIDAD DE DRIBBBLE PREMIA EL TRABAJO

SUPERFICIAL En el ltimo ao he revisado un montn de diseos de productos de personas buscando un trabajo tanto en Facebook como en Intercom, y he encontrado un patrn preocupante. Demasiados diseadores estn produciendo piezas para impresionar a sus pares en vez de ocuparse de resolver problemas reales de la industria. Esto ha sido un problema recurrente entre los creativos publicitarios (donde las agencias pretenden ganar premios en vez de cumplir con los objetivos organizacionales de sus clientes), y se est volviendo cada ms evidente en el diseo de interaccin y productos.
1 2

http://feltpresence.com/ https://medium.com/the-year-of-the-looking-glass 3 http://dribbble.com/

Universidad de Palermo Facultad de Diseo y Comunicacin Comunicacin Interactiva IV Material de Ctedra Gran parte de los trabajos de diseo de estos solicitantes de empleo que he visto han sido superficiales, creados con un ojo puesto en Dribbble. Piezas que lucen muy bien pero no funcionan tan bien. Combinaciones perfectas de pixeles en diseo plano, pero que no se proponen resolver problemas reales de las personas o de las empresas, o que no consideran el ecosistema donde debe ser aplicadas. Dribbble en s mismo moldea la conversacin en gran parte, el medio le da forma al mensaje, destacando las paletas de colores u otros detalles superficiales prominentes en su propia interfaz de usuario. La gente ve y copia. Una gran mayora de los diseos de producto en Dribbble se ven iguales. Ya sean de software social, software de contabilidad, un sitio de marketing o una aplicacin de clima, los estilos aplicados son los mismos. Entrecerremos los ojos y tratemos de encontrar las diferencias.

EL DISEO DE PRODUCTO MS IMPORTANTE ES GENERALMENTE EL MS FEO

Por el contrario, los mejores candidatos que he visto son los que presentan el proceso de pensamiento. Sketches. Diagramas. Pros y contras. Problemas reales. Compensaciones y soluciones. Prototipos que muestran la interaccin y su animacin. Cosas que se mueven, cambian y animan. Objetos que utilizan datos reales. Los peores candidatos envan PNGs planos. PDFs llenos de wireframes. Sin articular con la resolucin del problema, o las limitantes tcnicas o de la industria. Sin contexto. Estos PNGs perfectos en pixeles, listos para la retina, puede verse muy bien en Dribbble, pero su valor decrece al verlo como una herramienta de diseo en un entorno de producto real. Es por esto que los rediseos sobre los trabajos de otras personas son pura necedad. Por ejemplo: el nuevo logo de Yahoo, el iOS7, los cambios de Facebook, el nuevo Nuevo Twitter, la nueva marca de American Airlines. La gente no considera el contexto en el proceso de toma de decisiones en estos proyectos, ningn conocimiento de los requerimientos, las restricciones o las polticas organizacionales.

Universidad de Palermo Facultad de Diseo y Comunicacin Comunicacin Interactiva IV Material de Ctedra Si el diseo del producto se trata de resolver los problemas de las personas dentro de las limitaciones de un negocio especfico, entonces muchos de los que se hacen llamar diseadores de producto o UX se dedican en realidad a la prctica del arte digital. Son artistas. Estilistas. Desarrollando cosas bellas, lo que es una gran habilidad, pero no ejecutando diseo realmente.

EL DISEO DE PRODUCTO ES SOBRE UNA MISIN, UNA VISIN Y UNA ARQUITECTURA

Desde la conceptualizacin general hasta el ms mnimo pixel, los diseadores deberan siempre estar pensando en la misin y la visin de la organizacin, y la arquitectura del producto. Cada cosa que hagan debe pasar por este prisma.

Misin: Porqu existimos, ms all de ganar dinero.

Visin: Qu creemos del futuro. Cmo llegamos hasta ah.

El proceso de diseo comienza en la punta de la pirmide de la organizacin con su misin. Luego se le suma la visin. Es muy difcil hacer diseos que importen en una organizacin que no tenga una misin y visin claras y aplicables. No subestimen la importancia de esto. Si tu organizacin no tiene una misin definida, considera como parte de tu trabajo facilitar el proceso de definicin de ella. Luego se suma la arquitectura del producto. No desde el punto de vista tcnico, sino los componentes que son parte de la misma, sus relaciones entre s y con el resto de la organizacin. El sistema. En la primera maana de trabajo en Facebook, Chris Cox (Vicepresidente de Productos) da una 4 charla introductoria increble . Con una audiencia diversa integrada por personas con roles
4

http://www.youtube.com/watch?v=R2kkaDMAJmA

Universidad de Palermo Facultad de Diseo y Comunicacin Comunicacin Interactiva IV Material de Ctedra completamente distintos en la compaa, y cuando podra hablar de cualquier cosa, se enfoca en explicar la arquitectura del producto y como se vincula con la misin de la compaa. Para Facebook, esa arquitectura significa un directorio de personas, sus amigos, y sus intereses; un directorio de negocios, desde marcas globales hasta la pequea tienda de la esquina. Y sobre todo ese directorio hay un mapa, mostrando relaciones entre todas esas cosas. Es una formulacin muy clara del producto, directamente relacionada con la misin de la empresa. En mi experiencia es muy difcil lograr buenos diseos en una organizacin que no tenga definida de forma clara la arquitectura de sus productos. Y en muchos casos, as como en la misin, es parte del trabajo del diseador hacer aportes concretos para que se defina y clarifique esa arquitectura. Cuando me ha tocado describir Facebook a proveedores o asociados, dibujaba un diagrama como el siguiente:

La arquitectura de un producto no es slo su arquitectura de la informacin. No es un conjunto de pginas y como se vinculan, o algo que muestre mdulos y describa que hacen los botones. Un prototipo siempre cumplir mejor con ese propsito. Es un nivel ms profundo que eso. Es la estructura. Las partes de la construccin. Debe mostrar los objetos del sistema, y las relaciones entre ellos. En Intercom tambin pensamos en el diseo en el contexto de la arquitectura del producto:

Universidad de Palermo Facultad de Diseo y Comunicacin Comunicacin Interactiva IV Material de Ctedra

No puedo recordar haber visto siquiera una descripcin de arquitectura de producto en Dribbble. Todava es difcil ver a un diseador hablando sobre como su trabajo cumple con una misin, sobre cmo impulsa una visin, o como se ubica dentro de la arquitectura del producto, con el nfasis que estas cosas se merecen. Esto debera ser la regla, no la excepcin. Una vez que tienes clara la misin, la visin y la arquitectura del producto, puedes comenzar a pensar en el resto de los detalles. Los objetivos de las personas, eso que las hacen felices, completas, exitosas. Las tareas que tu producto hace por ellos, donde funciona y donde no. Los bocetos feos y desprolijos, los garabatos que describen objetos y sus funciones son altamente ms importantes que el PNG que termina en Dribbble. En el proceso que va desde la concepcin hasta el producto entregado y funcionando, los archivos de Photoshop o los PNG son el aspecto menos interesante e importante. Mucho ms importante es la discusin donde se negocian las caractersticas. Donde los puntos a favor y en contra son contrastados. Donde las personas le aportan ideas a la visin de la compaa, o construyen objetos que calzan dentro de la arquitectura del producto. Los esquemas de pizarrn, dibujos a mano alzada, y problemas resueltos en la parte de atrs de una servilleta son lo que los diseadores deberan estar 5 publicando en Dribbble. Muestren esas cosas. Hasta una descripcin en palabras sobre cmo debera ser un producto es ms importante que un PNG o un PDF.

https://twitter.com/JZ/status/364882720914026496

Universidad de Palermo Facultad de Diseo y Comunicacin Comunicacin Interactiva IV Material de Ctedra

PIENSA EN LAS CUATRO CAPAS DEL DISEO

El diseo es un proceso de mltiples capas. En mi experiencia, hay un orden ptimo para moverse a travs de ellas. La versin ms simple es pensar esto en cuatro capas:

Resultado Esperado

Se debe comenzar pensando en el resultado esperado. Qu problema resuelve lo que ests diseando? La mayora de los productos que no tienen esto claro no terminan bien.

Sistema

Ahora hay que disear el sistema. Esquematizar cules son los componentes necesarios para cumplir el objetivo, y las relaciones entre ellos.

Interaccin

Luego del resultado esperado y el sistema, hay que disear los detalles de las interacciones. Cules son las microacciones, las secuencias de eventos y comportamientos. Los componentes de la Interfaz de Usuario y como la gente interacturar con ellos. Como se mueven, cambian o animan los objetos. Reconsiderar el sistema para que las interacciones lo hagan funcionar. Seguir iterando.

Visual

Habiendo avanzado en los tres pasos anteriores, idealmente con prototipos funcionales, debemos dedicarnos a los detalles visuales. Lograr que el producto sea bello y disfrutable. El momento para los colores, las grillas, tipografas e conos.

Veo a montones de diseadores enfocados en la cuarta capa, sin considerar siquiera las otras. Trabajando desde abajo hacia arriba, en vez de al revs. La grilla, las fuentes, los colores y la esttica son irrelevantes si no resolvimos los problemas de las tres capas anteriores. Muchos diseadores dicen que hacen esto, pero no recorren el camino, porque suele ser ms divertido dibujar lindas imgenes y sumergirse en los pxeles que lidiar con complejas decisiones de negocios y las opiniones de la gente. Est bien, no hay problema en quedarse en la ltima capa, pero eso es arte, no diseo. Si haces eso eres un artista, no un diseador.

DISEAR SISTEMAS SER CADA VEZ MS IMPORTANTE A MEDIDA QUE LA WEB SE MEZCLE
CON TODO La invencin de la web dar lugar a los mayores cambios sociales luego de la Revolucin Industrial. La web est impregnando todo. Est en nuestra casa, en la oficina, al lado de nuestra cama cuando dormimos y en nuestro bolsillo mientras nos movemos. La web est con nosotros todo el tiempo. Est avanzando sobre nuestros autos, nuestra ropa, nuestros objetos, hasta para monitorear

Universidad de Palermo Facultad de Diseo y Comunicacin Comunicacin Interactiva IV Material de Ctedra nuestra salud. Para el 2020, si no antes, todos los negocios tendrn su pata en la web. Como deca 6 Charles Eames : Eventualmente todo se conecta. El diseo de pginas estticas es una profesin que est muriendo. La increble masificacin de las tecnologas mviles, las APIs, los SDKs, y las sociedades abiertas entre plataformas y productos proponen un cuadro futuro donde todos tendremos que disear sistemas. Los PDFs llenos de wireframes estn destinados a la muerte. Photoshop ya no podr ser ms una herramienta de diseo. Los diseadores deberemos llevar a nuestra disciplina a travs de diagramas, pizarrones y herramientas de prototipado (Quartz Composer, After Effects, Keynote, CSS/HTML). Esta es una de las razones por la que se dice que los diseadores deberan saber programar. Ms all de que compartamos eso o no, los diseadores definitivamente debemos abordar problemas y soluciones no con pixeles, sino con descripciones de que pasara con los componentes de los sistemas. Luego construir prototipos, programarlos, y ajustar detalle por detalle contrastando cada modificacin con datos reales que nos permitan ver cosas que no tenamos en cuenta al comenzar el proceso. Trabajar con interacciones que nos brinden datos nos permitir entender cmo funcionan las cosas.

DISEANDO TAREAS
En Intercom estamos trabajando con el Framework de Tareas de Clay Christensen para desarrollo de productos. Enfocamos cada problema de diseo como una Tarea, haciendo hincapi en los disparadores de eventos o situaciones, las motivaciones y los objetivos, y el resultado esperado: Cuando ______, yo quiero ______, as puedo ______ . Por ejemplo: Cuando un nuevo cliente se registra, yo quiero ser notificado, as puedo comenzar una conversacin con l. Esto nos aporta claridad. Podemos ubicar esta Tarea dentro de la misin, y priorizarla de forma adecuada. Eso asegura que podamos pensar constantemente en las cuatro capas del diseo. Podemos ver que componentes del sistema son parte de la Tarea y las relaciones e interacciones necesarias para facilitarla. Podemos disear desde arriba hacia abajo, movindonos a travs el resultado esperado, los sistemas y las interacciones antes de llegar al diseo visual. A la par de utilizar el mtodo de Tareas, estamos construyendo una librera de diseos para reflejar la naturaleza de nuestro diseo orientado en sistemas. Diseamos cada vez ms utilizando los cdigos de la librera en vez de usar Photoshop. No es un proceso perfecto. Pero iteramos constantemente sobre l.
6 7

http://af-design.com/blog/wp-content/uploads/2011/09/eventually_everything_connects-507x640.jpg http://www.youtube.com/watch?v=f84LymEs67Y

Universidad de Palermo Facultad de Diseo y Comunicacin Comunicacin Interactiva IV Material de Ctedra

NOTA DEL AUTOR

Algunas personas en las redes sociales han sugerido que estoy confundiendo diseo visual con UX (usabilidad). No comparto. En mi opinin no puedes considerar el diseo visual de un producto interactivo sin el diseo de interaccin o del sistema. No estamos hablando de diseo grfico. No estamos diseando posters, o seales de ruta.