26 Nov

Herramientas que todo diseñador web debería conocer

Diana Hidalgo Marín
Hago, enseño y aprendo diseño.
Cabecera post Herramientas Diseño

Todos sabemos que las herramientas no son lo más importante. El valor de un buen profesional no reside en las herramientas que utiliza, sino en su buen hacer. La clave está en poner en práctica el conocimiento sea cual sea la herramienta. Pero aunque no sean irremplazables no podemos negarle a las herramientas la importancia que tienen. Y es que sí que pueden condicionar el desempeño de una tarea más allá de la pericia y experiencia del profesional.

A veces el desarrollo de la actividad puede verse afectado por una mala herramienta. Lo interesante es que también puede producir el efecto contrario: algunas herramientas pueden hacernos la vida más fácil permitiéndonos ser más eficientes y productivos, optimizando la comunicación o incluso mejorando el resultado final.

Soy una persona curiosa y autoexigente y como diseñadora no paro de formarme y probar cosas nuevas. Así puedo estar al día de las herramientas que nos facilitan un poco el día a día, que no son pocas, y compartirlas con vosotros.

Sketch / Figma / Adobe XD

Sketch es un software vectorial para macOS de diseño de interfaces con canvas infinito. Apareció en escena en 2010 al rescate cuando las herramientas clásicas se estaban quedando atrás. Photoshop e Illustrator habían dejado de ser óptimos para el diseño de interfaz digital (en realidad nunca lo fueron), así como Flash que tuvo su época dorada pero cayó en desgracia. Ni siquiera Dreamweaver (antes de Macromedia que de Adobe) daba ya la talla. Sketch por fin hablaba el mismo idioma que sus usuarios y estaba preparado para entenderse con el medio al que se dirigía. Supuso un cambio de paradigma que sigue en constante desarrollo.

Figma apareció un par de años después siguiendo la estela de Sketch, pero con un par de novedades: trabajo colaborativo simultáneo y principalmente web–based (mientras Sketch solo se puede instalar en Mac, Figma funciona en –casi– cualquier ordenador con Internet).

Por su parte, Adobe, que había dejado de ser el *rey* (tenía casi el monopolio desde que adquirió Macromedia), se apuntó al carro en 2016 con Adobe XD.

A día de hoy, los tres programas son muy similares. He tenido la oportunidad de probar los tres y actualmente sigo apostando por Sketch para el día a día, sobretodo por la trayectoria y el gran respaldo de plugins que tiene desde hace años. No obstante, aunque por el momento no hay nada que hagan las demás que no puedas hacer con Sketch, no hay que despistarse ☝️. Figma está haciendo grandes avances con nuevas funcionalidades muy atractivas especialmente entre las nuevas generaciones y, como es lógico, entre los usuarios de Windows. Adobe XD ha ganado también posiciones gracias a la posibilidad de gestionar sistemas de diseño complejos de manera agnóstica, no en vano tiene un gigante detrás.

Cualquiera de las tres herramientas resulta indispensable a día de hoy para diseño de interfaz digital, al menos para aquellos que no estamos dispuestos a quedarnos atrás y apreciamos nuestro tiempo ⏳.

Zeplin / Sympli / Avocode

Un diseño no se puede quedar en la herramienta donde fue concebido. Hay que transmitir al equipo de desarrollo todas las especificaciones y documentación necesarias para poder implementarlo.

Antaño dibujábamos «manualmente» y una por una cotas y anotaciones sobre el diseño en un proceso tedioso (que además resultaba redundante). 😰 Pero hoy en día existen herramientas que traducen nuestros diseños —casi— automáticamente para que se puedan maquetar con precisión.

Cualquiera de las tres herramientas anteriores (Sketch, Figma y Adobe XD) tienen opción de compartir el diseño con desarrollo, lo que habitualmente se llama hand–off. Pero existen herramientas creadas ex profeso para tal fin con alguna que otra ventaja, como por ejemplo la organización de proyectos, gestión de sistemas de diseño, control de versiones y alguna extensión que permite exportar directamente el código de nuestro diseño al lenguaje que más convenga.

En Vital Innova utilizamos Zeplin, pero puedes probar también Sympli o Avocode.

Zeroheight

Esta herramienta también entra en el momento de documentar todo el diseño realizado hasta el momento para poder implementarlo. Genera —casi— automáticamente, a partir de un diseño realizado en Sketch (o Figma o Adobe XD) debidamente estructurado, una organizada y bonita guía de estilo con toda la documentación del sistema de diseño bien segmentada por componentes. También genera los tokens que posteriormente nos permitirá iterar el diseño sin causar mayor trastorno y actualizar el código en desarrollo prácticamente de un plumazo.

Invision / Marvel / Axure / Proto.io

Las herramientas de prototipado también son fundamentales hoy en día. Invision y Marvel fueron pioneras y sirven para realizar prototipos navegables de baja–media fidelidad que proporcionan un gran servicio en una primera fase de pruebas. Para este tipo de prototipos utilizo directamente la herramienta del propio Sketch y así no tengo que salir del entorno en el que trabajo la mayoría del tiempo.

Si lo que queremos es un prototipo de alta fidelidad con animaciones y microinteracciones, así como variables y condicionales, echaremos mano de Axure o Proto.io cuyo resultado puede llegar a ser espectacular.

Sublime Text / Visual Studio Code / Prepros

Para aquellos diseñadores que le perdimos el miedo al código hace tiempo 🤓, es necesario también un editor de código. Sublime Text puede ser más que suficiente para cosas pequeñas o incluso Brackets si queremos visualizar en tiempo real los cambios, pero si lo que queremos es crear un proyecto completo lo mejor sería utilizar Visual Studio. En realidad lo cierto es que se trata de algo muy personal y cada uno deberá elegir el que mejor le funcione.

Además, yo utilizo Prepros para emular un servidor en local, compilar código y encontrar inconsistencias en el mismo, lo que para diseñadores no expertos en programación puede resultar muy cómodo.

DiffMerge

Para comparar documentos de código, encontrar discrepancias y fusionar en caso necesario. Sin más.

Adobe Photoshop

El clásico. Aunque no se utiliza para diseño de interfaz, si soy sincera prácticamente lo tengo que abrir todos los días. Es indispensable para retoque fotográfico. Y alguna vez para crear o editar gif animado (como antaño con Image Ready, ¿os acordáis? jejeje).

Adobe Illustrator

Dado que Sketch es también una herramienta vectorial, ya casi no utilizo Illustrator nunca, pero hay veces que es necesario para poder abrir algún archivo incompatible o editar efectos (sombras, degradados) que se pierden al importar–exportar.

Adobe Animate / Premiere Rush / Giphy Capture

Adobe Animate es el sucesor de Flash. De vez en cuando me resulta útil utilizarlo para crear animaciones con interpolaciones 🎥. Permite exportar en HTML5, que puede ser interesante puntualmente y también en un amplio rango de formatos (yo utilizo vídeo y gif animado).

Premiere Rush me hace también servicio cuando me dispongo a realizar creatividades de vídeo no muy complejas para redes sociales sin tener que complicarme con su potente padre casi abuelo Premiere Pro.

Giphy Capture es súper útil para generar gifs animados capturando el movimiento en pantalla, tiene las opciones de configuración y exportación justas para conseguir un buen resultado en poco tiempo. Gracias, Asier 🧑 .

Notion

Se ha convertido en la herramienta de lo que clasificarían como «productividad» por excelencia gracias a su extraordinaria versatilidad. La utilizo tanto para notas, como para tareas, para compilar documentación y llevar un seguimiento del roadmap, calendario, etc. Tiene muchísimas opciones y combinaciones con la virtud de que mantiene su sencillez y sin abrumar. Útil tanto para vida personal como para profesional 🤘 .

Jira

Parece que a los diseñadores nunca nos ha gustado mucho Jira. Siendo una herramienta tan compleja, con sus constantes cambios en la interfaz e inconsistencias en la experiencia de usuario hace que sea un poco pesado utilizarla. Pero hay que reconocer que presta un servicio a la empresa de gran valor. Por lo que podríamos decir que casi es «un mal necesario» 😅 .

Personalmente, le he cogido gusto al panel personal, donde puedo ver todas las tareas que tengo asignadas, la información relevante de cada una de ellas, la estimación de tiempo y la evolución de las mismas en el kanban.

Google Docs / Sheets

Como en Vital Innova todo el equipo tenemos cuenta profesional de Google, resulta mucho más cómodo utilizar Google Docs que Microsoft Word, por ejemplo. Sobretodo por disponer de todo el material en la nube y por la opciones de compartir y colaborar de manera simultánea.

Además está Google Sheets que sería el equivalente a Microsoft Excel para hojas de cálculo. Como diseñadora me resulta útil especialmente para dos tareas concretas: estimaciones y control de calidad. En esta última hacemos un listado con la descripción, prioridad, estado y responsable de cada incidencia. Sirve para llevar un seguimiento de las posibles discrepancias entre el diseño UX y el desarrollo definitivo.

Responsive Website Test

Para llevar a cabo esas pruebas, es indispensable testear el comportamiento de la web en responsive, por lo que esta herramienta de Pastel es bastante recomendable.

No sustituye las pruebas directamente en cada uno de los dispositivos afectados, pero resulta reveladora para un primer vistazo y para poder comparar los viewport más significativos al unísono.

Markup.io

Markup es una maravilla para llevar a cabo el testing de la maquetación de un diseño, similar a Pastel. Permite probar distintos tamaños de pantalla, identificar incidencias in situ y comentarlas, así como llevar un seguimiento de las mismas en constante comunicación con desarrollo.

Whimsical

Perfecta para las fases iniciales de un proyecto, permite crear mapas mentales, notas (como post-its virtuales con más opciones y más ecológico), diagramas de flujo y wireframes, pudiendo saltar de un modo a otro según convenga en un mismo espacio de trabajo. Tiene una interfaz amable y cuidada muy intuitiva y fácil de usar. También permite organizar según proyecto y/o equipo con el que se colabore.

Optimal Workshop

Herramientas de investigación para diseño de experiencia de usuario. Puedes crear diferentes pruebas de usuario para recabar información para tu proyecto: card sorting, cuestionarios, tree test, prueba del primer click, etc.

Calculadora Áurea

En su sencillez radica su eficacia (muy a pesar de los anuncios, jejej). Un campo donde indroduces el dato numérico y sin más te devuelve varias combinaciones con proporción áurea (si das a enter se refresca la página, ganan impresiones para los anuncios… ¡mala praxis! 👎  y tú tienes que teclear de nuevo, pero sabiéndolo no hay fallo).

Tiny PNG

El mejor optimizador de imágenes que he probado (mejor que imageoptim). No solo optimiza PNG, también JPG.

Ezgif

El conversor más versátil y optimizador de gifs animados más eficaz de los que he probado 💪, que no son pocos. Puedes convertir video en gif, gif en vídeo, rotar, redimensionar, invertir, acortar, recortar, modificar la velocidad, mutear… ¡mil cosas! Y también puedes optimizar con bastante control gifs animados, que ya sabemos que pesan más de lo que nos gustaría.

Pantone Color Finder

Todo diseñador que se precie ha recibido alguna vez los colores para una web en PANTONE 🤣 . Y en muchos casos la marca no dispone de un manual de identidad completo que especifique los códigos de color para medios digitales. Para sorpresa de algunos, no basta con ponerlo en Illustrator y mirar el equivalente que devuelve el inspector de color (sería una chapuza). Pero afortunadamente PANTONE ya ha hecho ese trabajo por nosotros y existe este conversor oficial que nos dice con precisión cuál es el color que más se parece a un PANTONE concreto en el lenguaje que nosotros queramos (hexadecimal, RGB, CMYK…). ¡Probadlo y trabajad por fin con la conciencia tranquila! 🤪

 

Espero que te haya gustado el recopilatorio. Cuéntanos si te ha resultado útil, si ya las conocías todas o si conoces alguna más 💬 .