Giovanni Domenico Tiepolo

Sr. Pixel Perfect.

El Caballo de Troya entre diseño y desarrollo.

Como diseñador de producto que estudia y piensa cada pixel que conforma el diseño final de un proyecto siempre busco la perfección, dando prioridad máxima a todo el proceso, pero con una sensibilidad especial en la parte que une diseño con desarrollo. Considero que un proyecto con potencial, pero ejecutado sin el cariño adecuado, hará que pierda valor para el usuario final.

Pero… ¿Qué es esto del Pixel Perfect?

No me andaré por las ramas, para mi el concepto Pixel Perfect define la ejecución exacta entre el trabajo de los desarrolladores y el del equipo de diseño, solo y exclusivamente por una razón, cada pixel en la pantalla tiene su significado en la composición final del diseño, y esto puede parecer irrelevante, pero en realidad es importantísimo.

“Un diseño bien ejecutado hace que la composición final tenga sentido, lo que genera orden y armonía”

Por supuesto, esto no va solo de medidas, para mi un diseñador de producto es el encargado de componer en su cabeza el producto global, ejecutarlo de forma sobresaliente y dar el soporte necesario para llevar la idea a buen puerto, para así facilitar el trabajo de implementación de los desarrolladores. Hablo de idea, concepto, wireframes… pero también de animaciones, fuentes, tamaños, colores, teniendo estos últimos todo el protagonismo dentro del proceso de Pixel Perfect.

El papel del diseñador

Voy a obviar todo el proceso previo de conceptualización, wireframes y validación de la idea, quiero centrarme en el momento exacto del proceso en el que nos sumergimos en Sketch para empezar a mover los primeros píxeles y en el denominado Handoff, momento en el que hacemos llegar a los desarrolladores todo el proyecto.

Como diseñadores, tenemos la misión de dar los pasos previos adecuados y armarnos del material suficiente antes de empezar a pintar y dar cariño a nuestro producto.

Una guía de estilos, acompañada de un trabajado sistema de diseño harán que seamos mucho más fuertes y rápidos diseñando, consiguiendo así productos más consistentes, además de ganar en argumentos para defender nuestro diseño ante cualquier situación.

En una ocasión, un profesor me dijo “Solo cuando te sientas capaz de imprimir tu diseño y colgarlo en la pared de tu dormitorio, donde lo verás todos los días, sabrás que realmente has terminado”.

Si estamos seguros de cumplir con todas las pautas marcadas, que hemos atacado todas las casuísticas dentro del flujo y está todo revisado, es el momento de iniciar el Handoff.

¿Cómo lo hago?

Cada vez hay más herramientas para llevar a cabo este paso. Avocode, Sympli, Sketchode son algunas de ellas, pero personalmente me decanto por Zeplin ya que da muy buenos resultados y el equipo de desarrollo tiene todo el material disponible de forma muy accesible para llevar a cabo el trabajo. Además me gusta hacerles llegar una preview de todo el flujo, un documento en donde se detallan las especificaciones técnicas que hay que tener en cuenta y la interacción completa en Marvel o Flinto para que vean su funcionamiento de forma real.

Proceso de Pixel Perfect anterior a Zeplin. Año 2014

Los desarrolladores, la pieza clave

Ellos hacen la magia, son los que hacen posible que lo que un día fue una idea se transforme en realidad en un dispositivo.

He trabajado y trabajo con excelentes desarrolladores y mi conclusión es clara: cuanto más cerca estoy de ellos, más crezco como profesional. La comunión entre ambos perfiles tiene que ser total, diseñador y desarrollador tienen que mirar el producto con los mismos ojos. A día de hoy no concibo la construcción de producto de otra manera.

Pero nunca olvidemos una cosa, ellos son desarrolladores y su ojo no está tan entrenado como el de los diseñadores para afinar y pulir ciertos detalles, es por ello por lo que apuesto por una comunicación amplia y cercana. Es aquí donde el diseñador debe de actuar de punto de apoyo y colaborar de forma activa en cada momento que sea necesario.

El momento de ajustar cuentas

Al igual que los diseñadores sabemos cuando un proyecto está listo para entregar al equipo de desarrollo, ellos saben cuando han completado la última línea de código y su parte del trabajo ha finalizado. Es el momento en el que muchas horas de esfuerzo y trabajo llegan de vuelta al diseñador en una versión muy cercana a la que el usuario final recibirá.

“Aquí se produce el punto álgido de la relación, es el momento de hacer que el diamante brille”

Para mi este es el momento de la verdad, desconozco como lo hacen otros diseñadores, pero yo puedo garantizar una cosa, nunca he conseguido mejores resultados en este proceso que cuando me he sentado con los desarrolladores y juntos hemos revisado mano a mano todo el flujo, captura a captura, tomando anotaciones de cada elemento que no está en el sitio correcto, revisando los tiempos de animaciones y cuadrando todo para que el resultado final sea el deseado.

He probado otras formas, como rellenar y compartir documentos escritos para afinar todo lo posible, y sí, se consiguen resultados, pero el desgaste es mayor y el resultado no es tan exitoso.

De forma personal puedo decir que me siento más seguro con la primera opción, ya que sientes de forma global y cercana el estado en el que se encuentra el producto y el tiempo invertido por parte de ambos equipo es mucho menor, evitando así la sensación de frustración, lo que me parece muy importante después de duras semanas de trabajo.

Funcionalidad vs Estética

Dos conceptos de los que escribiré de forma más extensa en otra ocasión, merece la pena dedicarle una entrada aparte, pero no quería dejar pasar la oportunidad de hacer una breve mención.

“Un producto debe cumplir su función y brillar a partes iguales, pero no siempre se valoran de la misma forma”

En muchas ocasiones, en más de las que debería, he tenido que justificar de diferentes maneras que un buen producto no está acabado hasta que no cumple con todas las especificaciones que estaban previamente definidas en diseño, siento que está más valorado que un producto que cumple su función está listo para ser publicado aunque pase por encima de algunas líneas rojas marcadas en diseño, solo por eso, porque funciona.

Es un tema que me encantaría poder debatir, vaya por delante que soy fiel al buen diseño y pongo todo mi empeño porque así sea en cada proyecto, por pequeño que sea, pero también soy consciente de que los tiempos de ejecución no son siempre los deseados y los clientes o compañías tienen que hacer frente a ciertos compromisos, teniendo que, como diseñadores, ser coherentes y tener mano izquierda para cumplir con ese objetivo.

Conclusión

  • He tenido la suerte de poder trabajar con profesionales que sentían y sienten la necesidad de incluir el Pixel Perfect dentro de la hoja de ruta de construcción de un producto. He disfrutado al ver como compañeros desarrolladores han evolucionado en este proceso y su fijación por el detalle cada ver era mayor, hasta el punto de entregar a diseño productos casi perfectos.
  • En la construcción de producto entran muchos factores en juego, pero casi siempre el que más daño hace en el resultado final son las prisas.
  • Lanzar un producto con buena definición, dando por sentado el cariño por el detalle y lanzarlo sin este punto de personalización, puede marcar la diferencia entre algo bueno y algo brillante.

Gracias a todos por leerme y en especial a Danny Prol por sus consejos y tiempo invertido en ayudarme a mejorar esta publicación.

No dudes en dejar tu comentario o escribirme a través de Twitter .

Por favor, pulsa en “︎ ❤” y ayúdame a moverlo entre la comunidad.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.