Herramientas para desarrollo web: 4 programas para diseño de interfaces

Para el desarrollo de una web, un diseñador front-end necesita para realizar su trabajo algunos recursos imprescindibles. Vamos a intentar desglosar esas necesidades en una serie de posts, en plan fascículos de una enciclopedia.

Empecemos la casa por los cimientos: en el caso del desarrollo web eso implica comenzar con la propuesta gráfica. Ésta se hace para que nuestro cliente pueda imaginar y decidir con nosotros cómo será su página.

Hasta el momento, Photoshop sigue siendo la herramienta que manda en esta fase del desarrollo, si bien tiene algunos inconvenientes:

  • Es un trabajo que ya era lento de por sí y que se ha visto complicado con el responsive. Ahora ya no basta con diseñar la versión para escritorio. Tenemos que hacer como mínimo tres vistas distintas: escritorio, tablet y móvil, además de las pantallas de distintos contenidos que va a tener la web.
  • No incluye un mapa de sitio con vínculos. Podemos mostrar pantallazos, pero no vincularlos simulando los enlaces que tendrá la futura web.
  • No disponemos por defecto de galerías de recursos con elementos propios de la interfaz gráfica.
  • No podemos abrir SVG, el formato de imagen estrella actualmente en diseño web.

Quizá por estas razones, el diseño de todo el prototipo de la web ha empezado a hacerse en herramientas más específicas. Estos programas facilitan el trabajo de bocetar los elementos interactivos sin el coste en tiempo que tiene hacerlo en Photoshop. Veamos las cuatro más conocidas y qué nos ofrecen.

1. Sketch

Sketch fue la primera herramienta de diseño UI (user interface). Tiene, por lo tanto, una experiencia que la ha convertido en una alternativa real a Photoshop. Con un conjunto de herramientas y recursos de fácil aplicación, se puede tejer un mapa de pantallas vinculadas entre sí para simular el comportamiento de una web o aplicación.

Lo peor: Es sólo para Mac y cuesta 99$.
Lo mejor: Lleva tiempo en el mercado y está bastante extendida entre los profesionales.

2. Atomic

El concepto de Sketch se mantiene en Atomic. Esto nos da cuatro características interesantes:

  • Galerías de recursos específicos de interfaces.
  • Podemos abrir un SVG.
  • Se pueden vincular partes de la interfaz para que funcionen en una presentación.
  • Incluso podemos aplicar animaciones sencillas que simulan comportamientos como menús desplegables.

Su valor añadido es que todo se hace desde la nube. Esto permite que un equipo de trabajo deslocalizado pueda compenetrarse perfectamente.

Lo peor: Es caro, una licencia para un sólo diseñador son 19$ al mes. Para un equipo de 10 son 39$.
Lo mejor: Todo se hace en la nube, es decir, compatible con todo.

3. Invision

Al igual que Atomic, esta herramienta es online y también tiene sus mismas funciones. Además de llevar más tiempo en el mercado, su factor diferencial quieren que sea un inspector de código (actualmente en fase beta) que permite al diseñador aportar al desarrollo algunas líneas. Si el diseñador de interfaces conoce suficiente CSS, esto le permitirá una mayor libertad para personalizar cómo quiera un botón, caja o elemento gráfico.

Además, te proporcionan un plugin que te permite sincronizar Photoshop con Invision. De esta manera, puedes combinar el diseño en formato PSD con el prototipo ya subido y compartido con el equipo de trabajo.

Lo peor: El precio parece excesivo; es difícil creer que cuando Adobe tenga la suya vayas a pagar 22$ al mes por esta herramienta pudiendo tener toda la Creative Suite casi por el mismo precio.
Lo mejor: Aporta código y sincronización con Photoshop.

4. Adobe XD

Tras un largo periodo en fase beta, la herramienta para prototipado de Adobe ya se ha incorporado a la Creative Cloud. De hecho, ya no es un programa que se pueda descargar de forma gratuita (salvo el periodo de prueba), sino que ya está integrado en la suite de Adobe.

Aportan todas las ventajas que hemos ido viendo, teniendo una versión de escritorio y la posibilidad de sincronizar el proyecto en la nube para compartirlo.

La cuestión es si el gigante de Adobe seguirá comiendo terreno al resto de herramientas. La razón que nos induce a pensar así es que, por un lado, el potente Sketch sigue teniendo la limitación de que sólo se puede utilizar en sistemas operativos Mac y, por otro lado, XD forma parte de un paquete de programas que permite abarcar más ámbitos del diseño (lo que puede facilitar a la empresa la inversión en las licencias).

La especialización en UX-UI parece garantizar el futuro (al menos inmediato) a Sketch, pero también Freehand fue en su momento el rey y acabó literalmente devorado por Illustrator.

En conclusión, como podemos ver en el gráfico de Froont, durante mucho tiempo la única herramienta para realizar una propuesta gráfica web fue Photoshop.

Sin embargo, con la llegada de los dispositivos móviles, el concepto de web y app se fusionan y son necesarias nuevas herramientas para diseñar prototipos.

Sketch, Atomic, Invision y Adobe XD han venido a agilizar la labor del equipo de diseño y desarrollo de interfaces.

1 comentario en “Herramientas para desarrollo web: 4 programas para diseño de interfaces”

Dinos lo que piensas

Tu email no se mostrará ;)