# data[].attributes.attachment_link.provider_name
EnfoqueGaussiano el blog de diseño de la escuela La Gauss

# data[].attributes.attachment_link.readable_text
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.

Te puede interesar

# data[].attributes.attachment_link.title
Herramientas para desarrollo web: 4 programas para diseño de interfaces

# data[].attributes.attachment_link.description
Para el desarrollo de una web, un diseñador front-end necesita para realizar su trabajo algunos recursos imprescindibles. Vamos a intentar

# data[].attributes.attachment_link.title
Herramientas Gratis para Diseño de Interfaz!

# data[].attributes.body
Sketch fue la primera herramienta de diseño de interfaz. Su punto fuerte no solo es que está creada por diseñadores para diseñadores, sino que cuenta con una comunidad de usuarios y desarrolladores de plugins o extensiones que complementan sus funcionalidades perfectamente. Además, sus desarrolladores realizan actualizaciones periódicamente con nuevas funcionalidades y correcciones de errores, por lo que están mejorando el programa constantemente.

# data[].attributes.body
Framer X es la evolución mejorada de Framer Studio. En este software de diseño de interfaces han añadido un editor gráfico más potente que permite crear ilustraciones en formato SVG y exportarlas.

Si eres un diseñador UI experimentado y deseas ir más allá con tus herramientas, este puede ser el software para crear interfaces ideal para ti.

Lo que la diferencia de otras herramientas de diseño de interfaces es la posibilidad de interactuar con el código y crear componentes muy avanzados gracias a React.js.

# data[].attributes.body
Adobe XD es un software usado para crear y compartir interfaces, tanto para páginas web como para aplicaciones, aunque originalmente este software de diseño de interfaces fue lanzado al mercado con el nombre de Project Comet en 2015. Hasta ese momento no existía en Adobe ningún software específico para diseñar la experiencia de usuario.

Es una buena opción si ya eres usuario de la suite de programas de Adobe. Esta herramienta de diseño de interfaz posibilita el trabajo en línea, guarda el historial de cambios y permite editar en vivo.

# data[].attributes.body
Este software para diseño de interfaces apareció a finales de 2015 y se posicionó rápidamente al ser el primero en tener colaboración en tiempo real.

Funciona en línea, por lo que permite la colaboración en vivo de todos los miembros del equipo. Incluye herramientas vectoriales para ilustrar, crear prototipos y la generación de código para el traspaso (hand-off).

La ventaja de aprender a utilizar Figma es que tienes todas las herramientas para crear un prototipo de interfaz de usuario alineados con las necesidades de tus usuarios en una sola aplicación.

# data[].attributes.body
Esta es una de las herramientas de diseño de interfaces más populares y completas, ya que cuenta con una gran biblioteca, herramientas de colaboración y plantillas para crear un prototipo de interfaz.

Su interfaz es muy amigable y está diseñada en función del usuario, por lo que es cómoda para visualizar procesos de planificación, y construir o probar interacciones de manera muy sencilla.

# data[].attributes.body
Es una herramienta gratuita de Microsoft integrada en MS Silverlight que está pensada para crear maquetas de páginas web y software.

La versión gratuita presenta algunas limitaciones en la cantidad de elementos disponibles, sin embargo, tiene todo lo que necesitas para hacer el prototipo de la interfaz de usuario, desde componentes para iOS o Android hasta buscadores y aplicaciones de escritorio.

# data[].attributes.body
Es una plataforma para diseñar, desarrollar y presentar un nuevo proyecto digital. Esta herramienta está orientada a cualquier persona o equipo que desee empezar un proyecto de forma colaborativa. Todo con una plataforma visual, sin necesidad de escribir ni una sola línea de código.

La herramienta puede satisfacer las necesidades tanto de los estudiantes como de los equipos profesionales dedicados al diseño web y de aplicaciones para móviles.

# data[].attributes.body
La prototyping tool Mockingbird es también una aplicación y no requiere la instalación local. Se trata de un programa ideal con el que incluso los usuarios con menos experiencia pueden crear mockups.
En general, la herramienta ofrece una selección de 90 módulos y componentes diferentes, pero algunos de los aspectos más llamativos de Mockingbird es su estructurapráctica y la posibilidad de llevar a cabo una categorización lógica, amén de ofrecer, asimismo, una práctica función de búsqueda. Con todo ello, el usuario puede administrar varias páginas, aunque no es posible vincularlas o conectarlas entre sí.

# data[].attributes.body
Una de las mejores herramientas para crear prototipos, bocetos o wireframes es Balsamiq Mockups. Este programa tiene varias ventajas:

Es un programa de escritorio, es decir, solo tienes que registrarte para poder empezar a utilizarlo sin ningún tipo de descarga.

Programado en Flex y AIR por lo que crea muy rápido Wireframes.

Interfaz fácil de usar: como se ha creado con AIR es instalable tanto en Windows como Linux y Mac OS X.

Te permite escoger entre un montón de objetos prediseñados como: barras de estado, menús, barras de progreso, etc. Además, te permite exportar el diseño que realices en PNG, PDF e incluso al portapapeles.

Permite incrustar tus diseños en tu página web o en informes de errores. Puedes compartir tus diseños a través de un sistema muy parecido a Dropbox. Balsamiq funciona como cualquier aplicación normal, te permite arrastrar, soltar, guardar mockups en un archivo, copiar y pegar, deshacer, etc.