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 web. 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, con la web, el cambio va mucho más allá: no cambia el medio, sino que se multiplica.
La web nos da 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).
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 web ha invadido la red de herramientas y nuevos softwares para diseñadores y queremos presentaros algunos que esperamos os ayuden a la hora de afrontar nuevos proyectos web, desde el sketching hasta el código:
Nota (actualizado en 2026): este artículo es de 2016 y el sector del diseño de producto ha cambiado por completo desde entonces. Hoy Figma es el estándar de la industria —diseño de interfaz, prototipado y entrega a desarrollo en una sola herramienta colaborativa en el navegador— y su irrupción se llevó por delante a varias de las herramientas que recomendábamos: InVision cerró en 2024, Macaw y Pixate desaparecieron y Adobe XD quedó descontinuado. Mantenemos la estructura original y señalamos qué fue de cada una.
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 o UX. El soporte sobre el que diseñamos web es digital y modular, por lo que una cuadrícula nos sería de gran utilidad. La gente de Marvel nos pone algunas herramientas a nuestra disposición.
También tenemos estas cuadrículas en formato libreta:
Y 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 web, necesitamos darle la interfaz gráfica o UI. Para ello aparecen softwares y herramientas mucho más especializadas que los eternos Photoshop e Illustrator del pack Adobe.
FIGMA
Figma es hoy el estándar del diseño de interfaces. Funciona 100% en el navegador (también con app de escritorio), es multiplataforma y, sobre todo, colaborativo en tiempo real: varias personas pueden diseñar sobre el mismo archivo a la vez, como en un Google Docs del diseño. Reúne en una sola herramienta el diseño de UI, el prototipado y la entrega a desarrollo, e incorpora cada vez más funciones de IA. Su irrupción reordenó por completo el sector; si hoy empiezas un proyecto de diseño web, es el punto de partida natural.
SKETCH
Sketch fue uno de los pioneros del diseño enfocado a la web, lo más parecido a Illustrator pero pensado para interfaces. Sigue muy vivo: su sistema de mesas de trabajo con medidas web o de dispositivos, sus reglas de medición y su comodidad para exportar assets y estilos siguen siendo un referente. Históricamente era solo para Apple; hoy mantiene su editor nativo de Mac pero añade colaboración y visualización vía navegador, con un modelo de licencia única o suscripción.
UX Pin
UX Pin partió de un software para wireframes sencillos y ha evolucionado hacia un sistema de diseño y prototipado complejo sin necesidad de código, con un enfoque actual hacia componentes reales (React) e IA. Es una herramienta online, por lo que es indiferente el ordenador que utilicemos. Hoy funciona por suscripción (con prueba gratuita) y mantiene una interesante colección de ebooks gratis en su blog.
En 2016 recomendábamos también Macaw, un editor que traducía el diseño a HTML/CSS. InVision lo adquirió y lo discontinuó (su soporte terminó en 2018), así que ya no está disponible.
PROTOTYPING
Por último, cuando ya tenemos nuestro diseño web terminado, queda comprobar cómo funciona todo junto: la estructura que decidimos al principio junto al diseño gráfico que hemos aplicado. Hoy buena parte de este trabajo se hace dentro de la propia herramienta de diseño —Figma prototipa de forma nativa, enlazando pantallas con transiciones y animaciones sin salir del archivo—, pero también hay opciones especializadas.
MARVEL
Marvel es una opción sencilla y muy cómoda para prototipar y compartir. Permite enlazar pantallas entre ellas (incluso con animaciones), probar el resultado directamente en el móvil, compartir los proyectos con el equipo y recoger feedback. Eso sí, su plan gratuito, que en su día era de proyectos ilimitados, hoy está limitado a un único proyecto.
En 2016 aquí destacaban dos nombres que ya no existen: InVision, durante años el rey del prototipado y la colaboración, cerró sus servicios a finales de 2024 (víctima directa del auge de Figma); y Pixate, que permitía ver los cambios en el móvil en tiempo real, fue comprada por Google y se apagó en 2016.
ALL-IN-ONE
En 2016 Adobe, tras abandonar Fireworks, preparaba un proyecto con nombre en clave “Comet” que acabó lanzándose como Adobe XD. La historia, sin embargo, no terminó bien para Adobe: tras el intento fallido de comprar Figma (la operación se canceló en 2023), Adobe dejó XD en modo mantenimiento y dejó de venderlo a nuevos usuarios.
Así que la “herramienta todo en uno” que se intuía en 2016 existe hoy, pero no es de Adobe: es Figma, que reúne diseño, prototipado y entrega a desarrollo en un mismo lugar y de forma colaborativa.
