Cuando se utilizan correctamente, las maquetas de sitios web desempeñan un papel vital para llevar tu diseño de una fase a la siguiente.
Comunican la identidad de marca, definen la jerarquía visual y te permiten obtener la aprobación de las partes interesadas, todo ello antes de invertir tiempo en la creación de prototipos o, lo que es peor, de empezar a programar.
Pero antes de sumergirnos en el mundo de las maquetas, primero debemos entender qué son y qué no son.
¿Qué son las maquetas de sitios web y qué papel desempeñan en el diseño web?
El proceso de diseño de nuevas interfaces web puede dividirse en tres fases: esquemas (wireframes), maquetas y prototipos. Aunque puede haber variaciones en cada fase (como esquemas de alta fidelidad o prototipos de baja fidelidad), generalmente siguen este orden.
- Los esquemas (wireframes) son los planos de tu página web. Son representaciones de baja fidelidad del contenido, la estructura y la jerarquía de la información. Las herramientas de esquematización te permiten realizar revisiones al principio del proceso de diseño, antes de añadir los elementos de diseño gráfico.
- Las maquetas (mockups) son representaciones visuales de fidelidad media a alta de tu sitio web. Combinan la estructura del esquema con gráficos, tipografía, elementos de diseño de interfaz y marca. Dado que las maquetas ofrecen una representación casi final del aspecto del sitio, esta es una buena etapa para obtener la aprobación de las partes interesadas sin acumular deuda técnica (de lo cual hablaremos en un momento).
- Los prototipos demuestran la funcionalidad y usabilidad de tu sitio. Son representaciones interactivas de alta calidad del diseño de tu sitio que permiten realizar pruebas con usuarios y obtener comentarios. Ayudan a responder preguntas vitales sobre la experiencia del usuario, como: "¿pueden mis usuarios usar realmente mi sitio?" y "¿realizan las tareas y objetivos con facilidad y satisfacción, o con dificultad y frustración?"
Por qué crear una maqueta de sitio web
Las maquetas de sitios web te permiten iterar y recopilar comentarios sobre tu diseño sin generar una gran deuda técnica, definida por Outsystems como "una deuda que las empresas terminan pagando con tiempo, dinero y recursos, generalmente por elegir la velocidad sobre la calidad".
Y la deuda técnica no solo está relacionada con el código. Puedes acumular deuda técnica al saltarte la fase de maquetación y pasar directamente de los esquemas a los prototipos interactivos. La creación de prototipos implica diseñar múltiples pantallas, interacciones e incluso animaciones, todo ello vinculado entre sí. Un pequeño cambio en la interfaz puede requerir horas de trabajo extra para actualizarse en un prototipo. Al crear maquetas primero, tienes más libertad para iterar, recopilar comentarios de las partes interesadas y obtener la aprobación del aspecto visual de tu sitio web sin sacrificar el tiempo y el esfuerzo que conlleva actualizar los prototipos.
Qué buscar en una herramienta de maquetación web
Usar la herramienta de maquetación adecuada puede ahorrarte mucho tiempo y frustraciones al diseñar tu sitio web. Al buscar herramientas de maquetación, es importante elegir aquellas que sean:
- Escalables. Las mejores herramientas de maquetación pueden acompañarte desde la etapa de esquema hasta la fase de prototipado. Una vez que el diseño y la interfaz se aprueban en la fase de maquetación, puedes pasar sin problemas a la creación de prototipos sin necesidad de recrear el diseño en una herramienta nueva.
- Fáciles para colaborar. La capacidad de recopilar comentarios de otros miembros del equipo, clientes, partes interesadas e incluso usuarios directamente en tu herramienta de diseño agiliza la comunicación y facilita mucho la creación de iteraciones. Esto es aún más importante si consideramos lo esencial que se ha vuelto la colaboración en el trabajo remoto para los equipos de todo el mundo en los últimos años.
- Compatibles con kits de interfaz y bibliotecas de componentes. Puedes ahorrar mucho tiempo creando maquetas si utilizas kits de interfaz que incluyan componentes básicos del sitio, como botones, iconos, campos de formulario, etc. Esto es especialmente útil si sabes que el sitio se construirá utilizando un sistema de diseño específico como Bootstrap o el Lightning Design System de Salesforce. Muchas herramientas de maquetación incluyen estos kits de interfaz o permiten importar kits de bibliotecas de terceros.
- Fáciles de exportar para desarrolladores. Atrás quedaron los días en que los desarrolladores tenían que programar basándose en un archivo de maqueta estático. Muchas herramientas de maquetación ofrecen ahora opciones de exportación para desarrolladores que les permiten obtener HTML, CSS y otros elementos de diseño directamente de tu maqueta.
Ebook gratuito: Introducción al diseño web
Domina los conceptos fundamentales del diseño web, como la tipografía, la teoría del color, el diseño visual y mucho más.
Las mejores herramientas de maquetación web
A continuación, presento algunas de mis herramientas favoritas para crear maquetas de sitios web escalables.
Adobe XD
Adobe XD es mi herramienta favorita para el diseño de sitios web y experiencia de usuario. XD es escalable: puedes usarlo durante todo el proceso de diseño, desde los wireframes hasta la entrega a los desarrolladores. Está disponible para Mac y PC, y cuenta con un montón de funciones para ayudar a los diseñadores a trabajar con agilidad.
En XD, puedes crear componentes y estados de componentes (al pasar el ratón, al hacer clic, etc.) y usar cuadrículas de repetición para duplicar contenido más rápido. También puedes acceder a una biblioteca de recursos de diseño de terceros para cosas como iconos, imágenes de stock, generación de contenido real y más. Además, el redimensionamiento adaptativo facilita la creación de sitios web que se ven de maravilla tanto en escritorio como en dispositivos móviles.
XD incluye bastantes tipos de uso compartido preconfigurados, como revisión de diseño, entrega para desarrollo y pruebas de usuario. Cada opción exporta un enlace compartible con herramientas específicas para cada audiencia. Los usuarios y clientes pueden añadir comentarios y sugerencias, y los desarrolladores pueden acceder a herramientas para extraer código y recursos del prototipo.
Precio: 9,99 $/mes – Prueba gratuita de 7 días
Figma
Figma es una potente herramienta de diseño basada en la web. Solo necesitas un navegador y una dirección de correo electrónico para empezar. Puede acompañar tu proyecto de diseño desde el wireframe hasta el prototipo final. Todo está en la nube, lo que permite el guardado automático y la edición colaborativa en tiempo real con otros diseñadores en el mismo archivo. La comunidad de Figma también está repleta de recursos de terceros, como ilustraciones, kits de diseño y plantillas para que empieces con buen pie.
Puedes crear una biblioteca de recursos de equipo para compartir elementos como componentes y estilos entre archivos y proyectos. El diseño automático (Auto Layout) permite que tus componentes de diseño crezcan o se encojan según cambie el contenido; piensa en botones con etiquetas de texto variables o tarjetas con contenido dinámico. Esto es especialmente útil al crear diseños adaptativos.
La pestaña de inspección permite a los usuarios obtener código y estilos directamente de tu prototipo, haciendo que la entrega a los equipos de desarrollo sea pan comido.
Precio: Gratis (hasta 3 archivos) – 12 $ por editor/mes para archivos ilimitados
Lectura relacionada: De Figma a Webflow: convierte tus diseños estáticos en sitios web interactivos
Justinmind
Al igual que con las otras opciones, puedes crear wireframes, prototipos y maquetas en un solo lugar con la plataforma Justinmind. También puedes recopilar comentarios de los usuarios, editar junto a otros diseñadores y exportar para desarrolladores.
Esta herramienta de prototipado web te permite crear tus propias bibliotecas de componentes, definir estilos globales e incluso incluir elementos de entrada totalmente funcionales en tu diseño. También hay muchas herramientas de diseño adaptativo, como porcentajes de ancho y alto, diseños fluidos y eventos de puntos de interrupción (breakpoints).
El único inconveniente es que algunas de estas funciones solo están disponibles en los planes de mayor precio, como las plantillas y elementos maestros, la edición colaborativa y la exportación a HTML. Y si quieres eliminar la marca de Justinmind, tendrás que adquirir al menos la suscripción Estándar.
Precios: Tres modelos – Gratis, Estándar (9 $/mes) y Profesional (19 $/mes)
Sketch
Sketch es otra herramienta de diseño de interfaces que puede cubrir cada fase de tu proceso de diseño. (¿Notas una tendencia aquí?) Sin embargo, a diferencia de las otras, Sketch solo está disponible para usuarios de Mac. Ofrecen una aplicación web, disponible en todos los dispositivos, que puede usarse para colaborar y exportar recursos, pero no para diseñar ni editar.
La interfaz de Sketch es intuitiva y fácil de usar desde el primer momento. Puedes crear sistemas de diseño que incluyan colores, estilos y símbolos (componentes que se pueden reutilizar y actualizar en todas sus instancias). Esto hace que gestionar las actualizaciones de estilo sea muy sencillo. Un detalle a tener en cuenta: Sketch no incluye componentes integrados, como kits de interfaz o iconos, pero existe una gran comunidad en línea con kits de diseño que puedes descargar.
Precio: 12 $ por editor/mes – Prueba gratuita de 30 días
Quizás notes que no incluí Photoshop, que solía ser el estándar de oro para los prototipos web. Pero si buscas escalabilidad, esta no es tu herramienta. Photoshop es genial para crear diseños estáticos como archivos PSD, pero si necesitas convertir tu prototipo en algo interactivo, tendrás que usar otra herramienta.
No te saltes el prototipo del sitio web
Al igual que no te pondrías a pintar las paredes sin probar antes varias muestras de color, tampoco deberías empezar a crear prototipos de tu sitio web sin antes diseñar una maqueta. Las maquetas te permiten definir la identidad de tu marca, probar gráficos y elementos visuales, obtener opiniones y el visto bueno de los interesados, además de hacer cambios rápidos sin el esfuerzo y el tiempo que supone actualizar prototipos.
Recuerda que, al buscar herramientas de maquetación, debes elegir aquellas que sean escalables, faciliten la colaboración, incluyan (o permitan importar) kits de interfaz de usuario y ofrezcan opciones de exportación para desarrolladores.
Aunque hay muchas herramientas de maquetación donde elegir, estas son mis favoritas. ¡Cuéntame en los comentarios si me he dejado alguna de tus imprescindibles!
