8+1 herramientas para tu proyecto de diseño web responsive

El diseño para medios digitales ha abierto un nuevo campo de posibilidades y necesidades. Por ello, los diseñadores también tenemos que adaptar nuestras herramientas.

De nuevo en la historia de la humanidad, el soporte de la comunicación está cambiando. Primero fue de la piedra al pergamino, luego del pergamino al papel y de éste a la pantalla. Todos estos soportes tienen en común una cosa: son estáticos, es decir, pueden variar en tamaño (escala) pero no en sus proporciones cuando el producto está terminado.

Ahora, el cambio va mucho más allá: no cambia el medio, sino que se multiplica.

Tenemos la necesidad de diseñar una misma pieza para todos los dispositivos posibles: ordenadores de mesa, portátiles, tablets, iPads, phablets, móviles grandes, móviles pequeños, smartwatches… Se trata de un diseño dinámico y fluido, cogiendo como eje central el diseño para móvil (mobile first).

ui8-wireframekit

Entonces, si ha cambiado tanto el tipo de trabajo, ¿debemos seguir utilizando las mismas herramientas? ¿Dibujamos con lápices de grafito en las pantallas de los ordenadores? La respuesta es lógica… La necesidad del diseño online ha invadido la red de recursos y nuevos softwares para diseñadores y queremos presentaros algunos que esperamos os ayuden a la hora de afrontar nuevos proyectos:

WIREFRAMING

El wireframing es el proceso en el que se boceta la estructura de la web o App (la libreta de bocetos de toda la vida) y en el que se define la experiencia del usuario. El soporte sobre el que diseñamos es digital y modular, por lo que una cuadrícula nos sería de gran utilidad. La gente de Marvel nos pone algunas a nuestra disposición.

También tenemos estas cuadrículas en formato libreta:

img2_ux-sketchbook

utensilios con algunos de los iconos más utilizados o reglas para medir en píxeles:

PIXEL PERFECT

Una vez tenemos el esquema y la idea de la interfaz, necesitamos darle la base gráfica. Para ello aparecen nuevos softwares más específicos que los eternos Photoshop e Illustrator del pack Adobe.

SKETCH 3.0
Sketch es lo más parecido a Illustrator que podemos encontrar, pero enfocado al diseño web. Gracias a ello se ha hecho un hueco ya en el sector con infinidad de usuarios y de recursos. Algunos de sus puntos fuertes son: muchas facilidades a la hora de exportar assets y estilos, reglas de medición muy útiles y su sistema de mesas de trabajo donde los valores no son dinA3 o dinA4, sino iPhone 5 o iPhone 6. Su debilidad: solo funciona para Apple, y no tienen intención de lanzar una versión Windows.

img3_sketch-3

MACAW
Macaw es un programa de diseño para web bastante intuitivo, muy inspirado en la interfaz de Adobe. Aunque la gran característica de este software es que nos permite diseñar en múltiples formatos a la vez, modificando nuestra mesa de trabajo, el contenido que hay en ella también se mueve a nuestra voluntad a través de un sistema de columnas. Además, diseñamos mediante un inspector que nos traduce el diseño a lenguaje CSS/HTML.

img4_macaw

UX Pin
UX Pin parte de un software para wireframes sencillos que ha evolucionado y desarrollado también un sistema de diseño, incluso para montar prototipos bastante complejos. A diferencia de los demás, es un software online, por lo que es indiferente el ordenador que utilicemos.

Algo muy útil y particular de este programa es su sistema de templates (módulos de contenido muy comunes, como mapas, calendarios…) los cuales podemos arrastrar a nuestro lienzo y adaptar a nuestro diseño. También es muy interesante la colección de ebooks gratis que nos ofrecen en su blog.

img5_uxpin

Aunque puedes utilizar siempre el mismo software, cada uno funciona a pleno rendimiento según el tipo de proyecto. Con este gráfico podéis analizar cuál es el más conveniente para vosotros:

cuadro_softwares_new

PROTOTYPING

Por último, cuando ya tenemos nuestro diseño terminado, queda comprobar cómo funciona todo junto: la estructura que decidimos al principio junto al diseño gráfico que hemos aplicado. Macaw y Pixate ya tienen un sistema propio de prototipado, pero si venimos de Sketch (o de Photoshop o Illustrator), tenemos algunas soluciones para esta función.

INVISION
InVision nos permite crear prototipos con una experiencia de uso prácticamente igual a la que tenemos en mente para nuestro proyecto. Podemos enlazar los botones entre screenshots (incluso con animaciones), tener prototipos multiplataforma, compartir los proyectos con el equipo y apuntar feedbacks sobre éste, sincronizar los archivos subidos para que si los modificamos se actualicen solos, y descargar nuestro diseño en forma de App en cualquier móvil o simplemente a través de un enlace. Una apuesta segura para enseñar tu diseño tal y como lo has pensado.

img6_invision

MARVELAPP
Marvelapp es prácticamente igual que InVision, pero con algunas limitaciones técnicas. Eso sí, tiene una ventaja muy grande: mientras que en InVision tan sólo puedes tener 3 prototipos en su versión gratis, el número en Marvelapp es ILIMITADO.

PIXATE (Native Apps)
Pixate tiene la misma filosofía de trabajo que los dos programas anteriores. La diferencia es que es un software  de descarga y totalmente gratuito. Su gran ventaja es que instalamos una App en nuestro móvil y podemos ver los cambios en los prototipos a tiempo real, no hace falta ir descargando versiones y versiones. Tiene un sistema de transiciones y animaciones que nos permite montar prototipos hasta el último detalle, incluso añadiendo vídeos a nuestros diseños (hay que decir que se han unido a Google y por algo será…).

img5_pixate

ALL-IN-ONE

Después de todas estas alternativas, y de ver cómo Adobe abandonaba Fireworks en su última actualización de software, todo el mundo se olía que estaban con algún proyecto grande… y así ha resultado. Todavía no sabemos todo, pero parece ser que Adobe tiene listo un software muy avanzado para el diseño online: Adobe Comet. Mesas de trabajo inteligentes, buscadores de imágenes integrados en la interfaz… Os dejamos con este link, ¡y esperando como vosotros la herramienta definitiva!

 

Artículos recién salidos del horno

Suscríbete a nuestro blog y recibe en tu email nuestras noticias.

Al inscribirte a nuestra newsletter, aceptas la política de privacidad