Diseño de webs y apps

Vamos con la segunda parte de herramientas para trabajar a distancia (aquí tenéis la primera parte por si os la habéis perdido). Ahora vamos a ser un poco más específicos y nos vamos a ir al sector del desarrollo de webs y apps.

Para este tipo de trabajo hay herramientas que ayudan tanto en el trabajo a distancia como en la comunicación diseñador-programador. Hemos visto inVision, que en su plataforma online no ha parado de mejorar y crecer y ofrece todo lo que necesitas para crear tu web o app en equipo y sin que la distancia sea un problema.

Pero antes de que inVision se pusiese las pilas ya teníamos otras plataformas super interesantes que se comunican con los programas de diseño más habituales (Illustrator, Photoshop, Sketch) y que permiten hacer un UI-Kit sin invertir todo el tiempo que llevaría preparar el Kit con todo lo necesario para pasárselo al equipo de programación.

Yo solía hacer los UI-Kit a mano, así que estas plataformas me ahorran mucho tiempo y además evitan que el programador necesite instalar ninguno de estos programas que no necesita para nada más. Hoy os hablaré de Zeplin, Sketch y Avocode.

Zeplin

Zeplin es una plataforma online con una app para instalártela en el ordenador, aunque no es necesario tenerla instalada para usarla. Permite subir directamente desde el programa de diseño todas las pantallas de la app, con todos los iconos preparados para exportar en PNG en los tamaños que el diseñador especifique. También localiza todos los colores de la app para crear una paleta de color con sus códigos Hex, así el programador lo puede poner todo en su lugar y con el código de color correcto. Permite también hacer una “paleta de tipografías” en las que además de la fuente, muestra el tamaño, el tipo de letra y por supuesto el color. Además clicando en cada elemento puedes ver su tamaño en las unidades utilizadas en cada sistema operativo, ya sea iOS o Android.

Por si todo esto no fuera poco tienes una hoja de estilo que te va poniendo el código (CSS, SaSS, SCSS, Less o Sytluss) que para personas con pocos conocimientos de CSS pueden ser de mucha ayuda.

Zeplin ha sido todo un descubrimiento para mí y me ha abierto la posibilidad de trabajar con el programa Sketch (no confundir con el famoso SketchUp!!) sin que eso supusiese un gasto extra para el equipo de programación, ya que con esta herramienta no necesitan tener el programa.

Aprendí a utilizar Sketch gracias a la licencia que me regaló un amigo y a dos cursos: uno de Platzi englobado dentro de toda la carrera de diseño de Apps, y otro que me compré en Domestica que me gustó mucho porque es justo lo que necesitaba, una introducción desde cero al programa hasta terminar haciendo una app.

Sketch es una pasada. Es perfecto para hacer diseño de aplicaciones y web. He pasado de diseñar a tientas, sin saber exactamente cual sería el resultado en cuanto a tamaño de los elementos, a poder medirlo todo al milímetro y tener un control mayor sobre los elementos que estoy colocando en el diseño. Esto me ha ayudado a sentirme más libre para probar cosas nuevas, arriesgar, porque puedo ver de forma más clara el resultado final. Además el programa te permite hacer previsualizaciones en tu propio móvil de como va quedando tu app, para ver los cambios en tiempo real.

Como ya comenté, el desarrollador también lo nota porque por medio del plugin de Zeplin que se puede instalar en Sketch, a medida que voy haciendo los diseños, se van subiendo las pantallas y casi sin esfuerzo se crea un UI-Kit muy completo para que todo el equipo tenga lo que necesita para hacer su parte.

Avocode

Es una plataforma muy parecida a Zeplin pero las condiciones de pago son un poco diferentes. Quizá otra diferencia es que las pantallas subidas se previsualizan con toda la información de capas que forman el archivo. Se parece más a como se vería en Photoshop o en Sketch.

Herramientas de este tipo hay muchas y cada vez tendremos más porque la tecnología no para de avanzar. Internet y todo su potencial está cambiando muchos aspectos de nuestra vida, seguramente penséis en cosas negativas pero, bien utilizado, también nos aporta miles de cosas positivas. Tenemos montones de recursos al alcance de nuestra mano y la capacidad de desarrollar cosas inimaginables, antes de salir a por el pan.

Sinceramente creo que merece la pena invertir tiempo en conocer estos recursos y aprender a utilizarlos porque nos hacen mejores profesionales y nos capacitan para un mundo con muchas más posibilidades de las que podríamos imaginar.