Algunos quieren matar a Photoshop o a los diseñadores que lo usan. No, esperen. Algunos quieren matar a los diseñadores y a los procesos de diseño. Esto es cierto y muy tímidamente comienzan a surgir términos como “la era post-PSD” e inclusive hay un “NoPSD movement”, really, donde comienzan a reverse las nuevas dinámicas de trabajo entre frontends y backends.
Estas nuevas tendencias en realidad lo que pretenden es proponer mejores flujos de trabajo entre diseñadores-developers-cliente y dar una solución práctica a la forma cómo enfrentamos desde la interactividad algunas tendencias como el diseño responsive en la web.
¿Deben cambiar los procesos de diseño?
Me gusta mucho ver cómo trabajan los equipos de developers. No debe haber gente más práctica en el mundo que una persona que sabe programar y trabajar con un equipo de desarrollo con un mismo fin.
Uno de los fundamentos de estas crecidas voces de devs que están en el área de diseño de software es que la diversidad tecnológica nos presenta un conflicto de diseño ante tantas resoluciones. Esto representa un gran problema de frente al cliente quien podría acabar con archivos con 100 tipos de diseños con diferentes vistas de un mockup.
Todo esto me hace pensar si realmente los diseñadores nos dimos cuenta de cuánto han avanzado en ciertas prácticas algunas áreas y si nosotros hemos hecho lo mismo con las nuestras.
Continuous design y la Era Post-PSD
La propuesta del “Continuous design” es la de diseñar con código la base mínima del producto en atención a las necesidades de programación que lleva detrás, para poder tener en poco tiempo un producto visible en la vida real, sin bocetos estáticos, y para ir generando el diseño con base en los requerimientos del cliente. Es un proceso de diseño ágil que desde el comienzo tiene en claro que el diseño va a ir creciendo y mutando sobre una misma idea. La idea al fondo de esta metodología es que, si hay que cambiar el diseño en el camino, que cambie y que no por eso el diseño base sea obsoleto.
:
Build the smallest thing you can as a base. Know you’ll change it. Build it out over time. Stop when you’ve done enough. Fuente.
Cuando trabajamos para la web generalmente este proceso es inverso. Si participamos en equipos grandes hay metodologías que ayudan a organizar las etapas del diseño y la arquitectura de contenido de un proyecto web o móvil; en estos se genera, con equipos interdisciplinarios, la base del iceberg del proyecto, mediante estudios de casos análogos, se establecen las partes de la arquitectura de usuario, se trabaja en el cardsorting y el mapa de contenidos, wireframes, etc. hasta llegar al diseño final que luego recibirá el equipo de desarrollo para volverlo realidad.
Darcy Vergara en su Curso de UX online nos dió un excelente punto de vista ante este panorama:
darcy :
Cuando se añaden elementos de experiencia de usuario al diseño estamos haciendo mucho más énfasis en la experiencia que en el producto. Diseñar con este enfoque hace la diferencia entre productos que la gente tolera y productos que la gente ama.
¿Por qué el debate se centra en una herramienta?
¿Las herramientas ayudan con los procesos creativos o están para sepultarnos en una cueva de archivos obsoletos?
Las herramientas, si están bien utilizadas, no deberían formar parte de la discusión, sobre todo en ambientes creativos en los que las ideas más rentables pueden estar escritas en una servilleta de papel a modo de wireframe.
Hay herramientas que ayudan, o que están tan incorporadas al trabajo del diseñador que colaboran a que el canal del proceso creativo no tenga interferencias. Podemos hacer lo mismo en Photoshop que en Gimp.
El movimiento anti-PSD, menos Photoshop y más Frontend
La crítica principal a la herramienta de Adobe es que los diseñadores entregamos una pintura en la pared en vez de un producto en el que se pueda ver la interactividad en los dispositivos y con el usuario; además, es mucho más endulzante para el cliente ver que en una primera instancia el producto está sobre rieles.
Según esta tendencia anti-PSD la meta es lograr que el diseñador se tire de cabeza a diseñar usando código, como una manera de hacerlo más partícipe en el proceso de desarrollo y así evitar entregar el trabajo en un archivo psd con simulación de interacciones escondidas en capas invisibles en photoshop.
:
Just like the NoSQL movement was about using alternative data stores to support better data-modelling, the NoPSD movement is about alternatives that better support the real movement: Continuous Design.
La propuesta es que el diseñador se vuelva cada vez más Frontend y adopte herramientas más simples e interactivas, que generen resultados más rápidos, y de alto impacto en una primera instancia de trabajo.
La tendencia está en la nube
La tendencia en el trabajo de diseño web está cada vez más inclinada a las herramientas móviles y en la nube. Adobe lo entendió muy bien y por eso su último producto se llama Creative Cloud, además de haber adquirido la plataforma Behance, en la que podemos subir nuestro diseño directamente desde Photoshop a nuestra propia galería en una de las redes sociales más importantes de la escena profesional de creativos.
¿Es esto suficiente? Adobe ha hecho un gran esfuerzo por no quedarse atrás en la carrera al estrellato online, pero todavía no ha logrado una herramienta exclusiva para utilizarla en procesos de diseño web. Fireworks era una de las herramientas más potables y la enterraron, y ahora Sketch le está ganando el terreno en el ámbito de los diseñadores de interfaces pero es de pago y para Mac por lo que todavía no ha tomado fuerza en los países de Latinoamérica.
La aparición de herramientas online tan fáciles de manipular, con las que podemos generar un template responsive de la nada, con frameworks integrados en javascript (hola layoutit.com) es hoy mucho más atractivo para las primeras instancias de diseño que las “pinturas” de una interfaz estática en Photoshop.
La fuerza de los frameworks se apodera del diseño
Los frameworks, que antes sólo eran terreno de los programadores, están ahora avanzando en el cielo de los diseñadores. Hoy contamos con herramientas para diseño como 960 Grid System, Foundation, Bootstrap, Holder.js, así como también podemos comenzar nuestros diseños a partir de prototipos already responsive y crear wireframes y mapas de contenido online con herramientas sencillas y gratuitas.
Abracémonos diseñadores y programadores
Volvámonos un poco más hippies y menos metaleros, y tratemos de no hacer una guerra anti-cosas, sino entendamos qué es lo mejor para poder trabajar en el jardín de la felicidad. No seamos reacios a adoptar nuevos caminos, procesos y tecnologías si eso va a mejorar nuestras experiencias de trabajo, pero tampoco seamos tan extremistas como para tirar por la borda tantos años de experiencias y productos exitosos que se han logrado solamente con tener una buena dinámica entre los equipos de diseñadores y programadores que han dejado a los clientes más que felices. Herramientas aparte, no debemos dejar de mirar el horizonte de lo que importa: generar productos multiplataforma, basados en usabilidad y contenido.
¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.
Por Saksotom el 08 de Mayo de 2014
Por matiasvj el 08 de Mayo de 2014
Por juan el 08 de Mayo de 2014
juan-blog :
Gracias Juan, sería super si nos contás como fue el proceso y qué herramientas usaron.
Equipos interdisiplinados siempre ayudan, en mi caso soy frontend y participo en el proceso de creacion/modificacion de interfaz; sin embargo, los bocetos al comienzo son PSD que luego van mutando acorde a los requerimientos y a lo ultimo se termina bocetando en codigo junto con el diseñador.
Por smailyn el 08 de Mayo de 2014
Por @cvstodia el 08 de Mayo de 2014
¿Me están diciendo que a estas alturas de mi vida tengo que empezar de nuevo?
Pues la verdad es que siento que tienen razón. Ahora, el reto es aprender la parte técnica y combinarla y enriquecerla con la parte gráfica. La educación se vuelve clave en este proceso.
Primero fue la muerte de Flash, ahora la muerte de Photoshop. Claro, tarde o temprano todo y todos moriremos.
Así que lo que muy claramente dice este artículo es que nada es para siempre, y todos los procesos de trabajo cambian dinámicamente, nunca son estáticos y nunca lo serán. Así que, quien crea que lo sabe todo, es el que en realidad no sabe nada. Constantemente hay que estar estudiando y aprendiendo nuevas forma de trabajar, en cualquier ámbito de la vida.
Por Alivan el 08 de Mayo de 2014
Veo útil Photoshop para lo que es, retoque de imágenes principalmente. Sin embargo, por muy bueno que sea, no lo llego a ver correcto en el flujo de creación de una web completa. Programas como Fireworks o Illustrator me parecen más convenientes para ello. La web se construye creando rectángulos dentro de rectángulos, cosa que se hace de forma muy sencilla en Fireworks o Illustrator. Photoshop en cambio se maneja por capas, más complicadas de manipular teniendo en cuenta el esquema de rectángulos dentro de rectángulos. Sin embargo, eso no quiere decir que haya que dejar de usar Photoshop.
Por mi parte, dejando antes claro que no soy diseñador, siempre he trabajado creando los diseños directamente en código. Con el tiempo empecé a hacer dibujos de cómo quedarían los elementos en la página(wireframes), pero no más que eso. Me he dado cuenta de que el diseño siempre acaba mutando con el tiempo, siempre hay aspectos que no gustan, que se mejoran, y al final, el resultado final es muy distinto del inicialmente planeado. Por eso mismo yo soy más fan de los wireframes.
Sin embargo también veo bien hacer un diseño siempre teniendo en cuenta que no va a ser final. Un diseño en el que no es necesario incluir todos los elementos, ni todos los elementos tienen que estar totalmente detallados. Algo así como un paso más allá del wireframe. Una metodología así me gusta bastante puesto que evita trabajar de más al enfocarse demasiado tiempo al hacer y modificar el diseño. O eso creo.
@cvstodia-blog :
¿Me están diciendo que a estas alturas de mi vida tengo que empezar de nuevo?
Buena parte del frontend no lleva programación, como es maquetar en HTML5 y CSS3. Con sólo esos lenguajes de maquetado podés comenzar a armar sitios web, sin tener que recurrir a la programación. Luego eso va a un dev.
Por André Mejia el 08 de Mayo de 2014
Por Jhon el 08 de Mayo de 2014
Yo creo que en Adobe vieron de forma diferente las cosas, dejaron fireworks y ahora esta Adobe Muse, que se puede hacer algo parecido a lo que hace Sketch, incluso puedes poner animaciones que has trabajado en Adobe Edge. Considero que un diseñador tiene que ir mejorando y entender que con el avance de las tecnologías el también debe ir cambiando, creo que en algun momento se tendra que aprender a usar un poco de codigo web, ya sea para hacer una web desde cero o para poder entender o corregir ciertos diseños creados en plataformas como adobe muse.
Por Alguien el 09 de Mayo de 2014
Por sebastian yabiku el 09 de Mayo de 2014
Por sergioDev el 09 de Mayo de 2014
Por TazaChoncha el 09 de Mayo de 2014
Por roncreative el 09 de Mayo de 2014
Aunque también es importante la estructura de un buen boceto en PSD, usando grids, paleta de colores entre otros estándares.
Esto es un poco la lucha épica entre el arquitecto y el ingeniero..
Para ampliar en el tema, comento como trabajamos en la agencia, cabe mencionar que tenemos dos tipos de diseñadores, el primero, es el diseñador de experiencia de usuario (UX Designer), que básicamente utiliza los recursos que resultan de los estudios de mercado, creación de personas, estudio de la competencia, card sorting, contenido existente, etc, para crear tanto la estructura de información, así como el flujo de la aplicación. El diseñador de experiencia de usuario hace los wireframes, pero no interviene (aunque puede sugerir) en el diseño visual.
El segundo es el disenador visual, es quien se encarga de tomar los wireframes y darles el tratamiento visual, o, como ultimamente lo estamos haciendo ya que hemos tenido que adaptarnos a estos cambios, es que el diseñador visual crea un documento llamado "Style tiles", en el cual se representa una colección de los elementos utilizados en el sitio o aplicación web, pero en forma de una galería, como en este ejemplo de Mailchimp: https://ux.mailchimp.com/patterns y así el comente obtiene lo que llamamos "Look & feel" de lo que seria el resultado final, sin utilizar diseños completos en Photoshop.
De esta forma, el front end developer tiene los estilos visuales bien definidos, pero estos no interfieren con el proceso de desarrollo, el cliente obtiene una idea del estilo visual, y rapidamente se crea una version en HTML/CSS que el cliente puede ver en el navegador directamente, con todos los detalles de rendering de fuentes, images, responsive, etc.
Por guitarleo el 09 de Mayo de 2014
Por Juan el 10 de Mayo de 2014
Por teskostudio el 11 de Mayo de 2014
Diseñar en el navegador es 'mejor' porque es allí donde finalmente se va a usar el producto, pero eso no quiere decir que hacer garabatos en una pizarra con un edit sea sufciente para sentar las bases de un un proyecto en lo que a diseño se refiere. En cierta forma ese tipo de metodología es lo que está llevando a la web a ser bastante aburrida visualmente, sobretodo entre pequeñas (y no tan pequeñas) empresas y start ups.
teskostudio :
Yo creo que lo que esta llevando a la web a ser aburrida visualmente es Twitter Bootstrap y similares, aparte obviamente de la flojera.
Por YoxD el 11 de Mayo de 2014
Por Iván Aguilar el 13 de Mayo de 2014
Por jordano_p el 13 de Mayo de 2014
La parte del diseño al igual que todo tiene sus [b]ventajas y desventajas, está claro que una de las desventajas más notorias es es la pérdida de tiempo en algo que aún no tiene interacción, Pero también tiene sus ventajas (O porque lo utilizan el curso FrontEnd de mejorandola), cuando tienes una aplicación web con muchas vistas y mensajes interactivo, no hay nada más cómodo para la persona que está maquetando que tener una vista de lo que tiene que hacer.
En fin, esto es cosa de cada uno, y cosa de cada proyecto. Yo pienso que no hay por qué dejarlo fuera totalmente, si no, saber cuándo y cómo utilizarlo.
Muy buen artículo @Mariux
Ramm :
Para ampliar en el tema, comento como trabajamos en la agencia, cabe mencionar que tenemos dos tipos de diseñadores, el primero, es el diseñador de experiencia de usuario (UX Designer), que básicamente utiliza los recursos que resultan de los estudios de mercado, creación de personas, estudio de la competencia, card sorting, contenido existente, etc, para crear tanto la estructura de información, así como el flujo de la aplicación. El diseñador de experiencia de usuario hace los wireframes, pero no interviene (aunque puede sugerir) en el diseño visual.
El segundo es el disenador visual, es quien se encarga de tomar los wireframes y darles el tratamiento visual, o, como ultimamente lo estamos haciendo ya que hemos tenido que adaptarnos a estos cambios, es que el diseñador visual crea un documento llamado "Style tiles", en el cual se representa una colección de los elementos utilizados en el sitio o aplicación web, pero en forma de una galería, como en este ejemplo de Mailchimp: https://ux.mailchimp.com/patterns y así el comente obtiene lo que llamamos "Look & feel" de lo que seria el resultado final, sin utilizar diseños completos en Photoshop.
De esta forma, el front end developer tiene los estilos visuales bien definidos, pero estos no interfieren con el proceso de desarrollo, el cliente obtiene una idea del estilo visual, y rapidamente se crea una version en HTML/CSS que el cliente puede ver en el navegador directamente, con todos los detalles de rendering de fuentes, images, responsive, etc.
gracias por comentar a todos, y a @ramm por supuesto. Yo me pregunto qué tan original puede salir un trabajo diseñado in browser. Quizás pueda ser práctico pero no veo que se pueda innovar mucho. igualmente esta manera de trabajar parece más práctica y rápida pero no dejo de preguntarme qué pasa con los procesos creativos y de trabajo de comunicación visual que se le debe hacer a un sitio.
saludos!
Por mickytriqui el 13 de Mayo de 2014
Por Federico Caivano el 31 de Mayo de 2014
Felicitaciones por el blog. Todo interesantísimo. Los sigo leyendo.
Cordial saludo.
Por FelixGarciaDAW el 14 de Agosto de 2014
Reconosco que cuando empece a aprender css me emocione tanto que aprendí a diseñar directamente en el código sin nada visual, solo el entorno de sublime text y apoyandome en emmet, pero debo confesarles que despues de un año en esas prácticas que me dio mucha experiencia, lo cierto es que mis Diseños lejos de gustarme del todo empezaron a ser muy similares no solo a boostrap que fue con el framework que comence sino que sentía que no tenían un toque personal.
Este año recomence mi experiencia, volvi a las bases, probe muse, no me gusto, mucho código inútil, probe edge animate, lo mismo nada mejor que aprender uno mismo css animations, me decante por Illustrator mi preferido por encima de photoshop y me sentí libre otra vez, estoy dando rienda suelta a todo lo que no había querido o podido imaginar con el código, volvi a diseñar iconos para tipografías con fontastic.me y icoomon, uso svg cuando puedo, hago bordes angulares y compongo juegos tipográficos para titulos o pequeños bloques de texto y con el uso de simbolos en illustrator, no necesito tantos psb como en photoshop.
Y de ahí luego maqueto, antes era muy facil sí, pero poco creativo ahora es un proceso más lento, la experiencia ayuda a ser rapido pero esta vez me reto a mi mismo a ver como algo que hice sabiendo que no era facil y trato de hacerlo, me gusta.
Solo quería contarles como he evolucionado mi trabajo, no mato photoshop aún lo uso para optimizar las imágenes para web y contruir los mock-up pero sin duda uso más illustator y mucho sublime text y codepen, aun no sé sí llamarme experto o maestro, pero cada vez siento que entre más sé como se desarrolla más libre soy a la hora de diseñar.
Y por ultimo más autopublicidad, estoy haciendo este sitio que aun no esta listo g3k.co no es 100% flat y me salí de muchos esquemas al volver a lo asimetrico y anguloso, pero bueno quería hacer algo completamente diferente, con retos que sea responsive y sin nada de javascript para ciertas interacciones.
En cuanto al seo o limpieza del html, si notan bien las decoraciones son solo seudoelementos ::after y ::before y sí las desactivan así las vera el google spider, un ejemplo de como se ve sin esos elementos: g3k.co/index-sin-seudoelementos.html.