Herramientas de diseño para desarrolladores

Cuando empecé a trabajar como freelance desarrollando páginas web, prácticamente sólo existía una herramienta que utilizaban el 90% de diseñadores con los que colaboraba: Adobe Photoshop.… el resto lo hacía con Illustrator.

Para pasar de un diseño a HTML/CSS tenías que aprender lo básico de esa herramienta, y el único problema era poder pagarla o conseguir alguna versión para estudiantes o similar que fuera algo más asequible.

Con el tiempo empezaron a surgir aplicaciones más específicas para diseño web… Sketch, Adobe XD, Invision Studio, Figma, Affinity... ahora las opciones se han multiplicado y se han adaptado a las necesidades específicas de las interfaces digitales, con opciones para trabajar en línea, de forma colaborativa, e incluso exportar en formato CSS para facilitar la maquetación.

A menos que trabajes en una agencia o en equipo y ya te marquen cual debes utilizar, para un diseñador empieza a ser complicado tener que decidir, pero… ¿que pasa cuando estás al otro lado y no eres diseñador sino quien va a utilizar esos diseños después?

Si eres desarrollador no vas escoger tu la herramienta, vas a depender de la que utilice el diseñador con el que trabajes.

Cierto que muchos de nosotros también preparamos pequeños diseños, adaptaciones y prototipos y en ese caso podemos utilizar el software con el que nos guste más trabajar, pero en la mayoría de casos, si el diseño nos viene dado, vamos a tener que adaptarnos.

¿Debemos entonces disponer y saber trabajar con cualquier software de edición de diseño?

Sí y no… conocerlos nunca está de más, y en la mayoría de casos no es un problema porque son muy parecidos, y lo que solemos necesitar hacer para pasar ese diseño a web suelen ser tareas sencillas.

El problema es que muchas de esas herramientas son de pago, y tener acceso a todas «por si acaso» no suele ser muy rentable, por eso es importante saber las compatibilidades entre ellas, precios y características.

Adobe / Adobe XD

La suite de Adobe es un clásico, es fiable y universal… pero de pago, excepto Adobe XD que es gratuita (a menos que uses alguna característica extra para trabajar con la nube de Adobe, pero que no es necesaria)

Lo «bueno» de Adobe es que ahora funciona por suscripción, por lo que si en un momento determinado para un proyecto necesitas utilizarlos, siempre tienes la opción de contratarlo sólo durante el tiempo necesario a un precio razonable.

Es lo que hacía yo por ejemplo con Illustrator, que sólo lo pagaba en momentos puntuales en que lo necesitaba… hasta que salió la suite de Affinity.

Por otra parte, Adobe XD, es una herramienta sencilla, pero que funciona muy bien, y es la que utilizo yo actualmente si tengo que preparar algún diseño propio o algún tema de WordPress.

Affinity

La suite de Affinity sería lo más similar a Adobe, con Affinity Photo, Designer y Publisher como alternativas a Photoshop, Illustrator e Indesign.

Si has utilizado antes las versiones de Adobe, adaptarse es realmente sencillo porque trabajan de forma muy similar, y lo mejor es que son de pago único mucho más asequible que la competencia original.

Además, otra de sus grandes ventajas, es que los documentos son compatibles, es decir, podrás abrir archivos PSD, AI, etc… con Affinity, lo que es ideal para poder trabajar con diseñadores que utilizan tanto una opción como la otra.

Sketch

Fue la primera gran herramienta pensada específicamente para diseñar interfaces web y app y la gran alternativa a Photoshop durante un tiempo.

Tiene una licencia de precio único, aunque si quieres actualizaciones o utilizar Cloud, deberás renovar anualmente.

El único gran inconveniente de Sketch es que sólo está disponible para Mac, y a mi parecer, la razón de que hayan ido saliendo otras alternativas que le han ido cogiendo terreno, como Figma.

Figma

Sí un software de diseño para web está creciendo últimamente es éste, pero básicamente por dos razones: es multiplataforma, ya que funciona directamente en el navegador, no necesitas instalar nada, y es gratuita, los planes de pago son para equipos en caso de querer trabajar de forma colaborativa, otra de las características que lo ha hecho crecer.

Y por si eso no era suficiente, permite importar archivos de Sketch.

Aunque existen más alternativas que van surgiendo, como Invision Studio o Marvel, más enfocados para prototipos y alguna otra, el 99% de los diseñadores que conozco trabajan con una de estas 4 opciones.

Si eres desarrollador y trabajas con diferentes diseñadores, deberás ir adaptándote a las herramientas que utilizan.

Si tienes tiempo, te aconsejo que te acostumbres a utilizar, por ejemplo, Figma y Adobe XD, que son gratuitas, y si necesitas trabajar con archivos PSD, puedes suscribirte durante el tiempo necesario a Adobe (la suscripción permite contratar sólo un progama por meses, no es necesaria la suite completa) o si aprovechas alguna promoción de Affinity, que suelen hacer de vez en cuando, inviertas en Affinity Photo que tiene licencia lifetime y te permitirá abrir esos archivos.

¿Qué herramientas utilizas tú y cual es tu preferida?