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

interface-diseño

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 Experience Design CC

Todavía está en su fase beta y se acaba de estrenar para Windows 10. Puedes descargarte y empezar a utilizar de forma gratuita la herramienta que Adobe ha creado después de recopilar todas las funciones de los programas que hemos ido describiendo.

Pronto la incluirán en el paquete de la marca, pero de momento están interesados en recabar ideas de los usuarios. 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 se comerá el resto de herramientas. La razón que nos induce a pensar que esto podría ocurrir es que los diseñadores y estudios necesitarán, además del programa para diseñar las interfaces, el resto de herramientas de diseño de las que no hay tanta oferta.

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 Experience Design han venido a agilizar la labor del equipo de diseño y desarrollo de interfaces.

Share this post

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *