Crear prototipos web: del árbol web a la interfaz de usuario

Crear prototipos web o mockups es una etapa crucial en el diseño de un sitio web. Las maquetas son necesarias para que la página web tenga un diseño profesional, pero también para que sea funcional y se adapte a la navegación de tus visitantes.

La elaboración de prototipos web pasa por varias etapas, desde el diseño funcional en blanco y negro hasta el diseño gráfico que integra tu identidad y colores. En este artículo, te daremos las claves para aprovechar al máximo este paso fundamental en todos los proyectos de creación web.

Crear prototipos web, un paso clave para crear una página web

Maquetas, prototipos, wireframe, mockup, interfaz gráfica…

A los profesionales web les gustan los términos creativos y los anglicismos. Hay casi una decena de términos para designar los prototipos web que creamos antes de diseñar el sitio web en lenguaje de programación. Gran parte de esta riqueza léxica se debe a que el prototipo web engloba dos aspectos bien diferenciados.

La maqueta funcional (wireframe o prototipo)

Consiste en esquematizar la disposición de la página web en blanco y negro: la organización de los distintos elementos, incluso los textos principales. Este tipo de maqueta se conoce como wireframe o prototipo. El término inglés mockup, también muy utilizado, hace referencia a una maqueta funcional de la página web a escala 1:1. La zonificación se refiere a una maqueta funcional formada por bloques y es la primera fase de la elaboración de prototipos.

El prototipo que mostramos como ejemplo se creó con el software Balsamiq.

Maqueta web visual (Photoshop)

A partir de la maqueta funcional, la maqueta visual integra los colores y la identidad corporativa. Es una representación bastante precisa de la futura página web, aunque los textos aún suelen ser mudos (lorem ipsum). En general, las maquetas visuales se crean con Adobe Photoshop o Illustrator.

¿Por qué es importante preparar bien las maquetas de tu página web?

Cambiar el diseño o la identidad visual de un sitio web a posteriori no es fácil. Aunque utilices un programa para crear páginas web, es un trabajo difícil de todos modos. Por ejemplo, con Wix, es necesario volver a crear el sitio web desde cero si decides cambiar de plantilla.

Por tanto, es importante disponer de prototipos web profesionales y eficaces desde el principio. Para eso, es importante tomarse el tiempo de elaborar maquetas web funcionales para todas las páginas web importantes del sitio web. Lo ideal es ir cambiando estas maquetas web funcionales: elaborar una primera versión, recabar distintos puntos de vista, rediseñar el prototipo, pedir más opiniones y así sucesivamente.

Este proceso se desarrollará de forma diferente según la manera en la que se desarrolle el sitio web.

• Si has contratado a un proveedor para crear un página web, tendrás que prever con la agencia web o el desarrollador una primera fase de elaboración de maquetas funcionales. Al contrario de lo que pudiera parecer, las agencias web pueden apresurarse en acelerar los proyectos para no trabajar sobre muchos sitios web de forma simultánea. Es bastante común que crear prototipos web sea una fase de trabajo rápida con un solo intercambio con el cliente.
• Si desarrollas el sitio web tú mismo/a, la dificultad consiste en forzarte a realizar (y evaluar) las maquetas funcionales antes de ponerte a elaborar la página con la ayuda de la interfaz de tu CMS (o de un notepad tradicional para los más puristas…). A menudo, tenemos la impresión de tener nuestras ideas suficientemente claras para pasar por alto el trabajo de crear prototipos web. Sin embargo, salvo que seas un diseñador de interfaces experto, los comentarios que puedes obtener con una maqueta funcional sencilla tienen un gran valor.

Elegir la mejor herramienta para crear prototipos web

Hoja en blanco, Visio, Powerpoint, Balsamiq o Photoshop: ¿qué herramienta elegir para elaborar los prototipos/maquetas de una página web?

Los métodos tradicionales

Para crear prototipos web, numerosas agencias web continúan utilizando métodos que se pueden considerar «tradicionales» en la época del software SaaS. El principal inconveniente de estos métodos es que no facilitan la gestión de las proporciones, lo que supone un inconveniente a la hora de prever la disposición para diferentes formatos y dispositivos.

• El papel: Aunque parezca paradójico en el mundo de los profesionales web, sigue habiendo muchos defensores convencidos de crear prototipos web en papel. El rápido, accesible, flexible… El papel tiene numerosas ventajas para la creación de esquemas.
• Microsoft Visio: Este programa integrado en Office Pro permite elaborar diagramas profesionales complejos. Algunas agencias web lo utilizan para realizar el árbol web de los sitios que crear y también las maquetas funcionales. Personalmente, no es nuestra opción preferida, ya que no está muy adaptado a este uso.
• Microsoft Powerpoint: El famoso programa de Office también puede servir para crear prototipos web funcionales, sobre todo porque dispone de bibliotecas de componentes adicionales pensados para la creación de esquemas; por ejemplo, PowerMockup. Aunque Powerpoint (o Keynote) no se diseñó para este objetivo, la flexibilidad y la simplicidad del programa, sobre todo para manipular formas simples, lo convierten en una herramienta adaptada para la creación de esquemas simples.

Los software de mockups / esquemas

Los programas de mockups, diagramas o esquemas son generalmente herramientas SaaS que se pueden utilizar desde un navegador web y están diseñadas para elaborar maquetas funcionales de páginas web. En la mayoría de los casos, permiten gestionar la escala de la representación y las proporciones entre los distintos componentes, y lo mejor de todo es que suelen ser programas colaborativos donde todos los miembros del equipo pueden realizar sus aportaciones.

Existen numerosos programas de mockups en el mercado: más sencillo y más completos, gratuitos y de pago… En este artículo no vamos a entrar en detalle en todos. Vamos a presentarte en pocas palabras una muestra de 10 software diferentes que permiten trabajar con enfoques diversos, sobre todo en lo que respecta el nivel de detalle.

Tabla comparativa: 10 programas para crear prototipos web

Nombre	Presentación	Tarifas
Cacoo	Cacoo es un programa SaaS con un enfoque claramente colaborativo, cuya versión gratuita es suficiente para un uso sencillo. Es muy sencillo de utilizar y permite elaborar todo tipo de prototipos y esquemas.	Dispone de versión gratuita Versión pro: 5 $ /mois
Balsamiq	Balsamiq es un programa disponible en versión de escritorio o versión web que se ha convertido en una referencia para la creación de páginas web. Es simple y eficaz al mismo tiempo, y permite que cualquier persona cree maquetas web funcionales bastante complejas.	Por 2 proyectos: 9 $/mes Por 20 proyectos: 49 $/mes Por 200 proyectos: 199 $/mes
Axure RP	Axure RP es posiblemente el programa más completo y potente del mercado en el prototipado y la realización de esquemas de interfaces web. En general, lo utilizan las agencias o los diseñadores freelance de un cierto nivel.	Versión Pro: 25 $/mes por usuario Versión Team: 42 $/mes por usuario Version Entreprise con funcionalidades más avanzadas con presupuesto a medida
Wireframe.cc	Esta herramienta es particularmente intuitiva y fácil de usar. Resulta ideal para crear sitios web simples. El wireframe que ofrece este programa se puede usar de forma completamente intuitiva, sin conocimientos técnicos previos. Puedes crear una maqueta básica sin ninguna dificultad.	Dispone de versión gratuita Versión premium: 16 $/mes
Figma	Con Figma, podrás crear una maqueta de sitio web en la nube. Te ofrece la posibilidad de crear varios diseños para un mismo proyecto. Esta herramienta es fácil de manejar y muy intuitiva.	Versión Starter gratuita para 2 usuarios y 3 proyectos Versión Professional: 12 $/mes por usuario Versión Professional: 45 $/mes por usuario
Pencil Project	Esta herramienta de prototipado gratuita posee todas las funcionalidades básicas para crear esquemas de páginas web a partir de modelos predefinidos. También puedes descargar bibliotecas de formas de internet si necesitas personalizar a fondo tus maquetas.	Completamente gratuito
NinjaMock	NinjaMock es una herramienta eficaz para para crear prototipos web en equipo. La interfaz es fácil de manejar y la navegación es fluida. Se puede usar en distintos soportes (iOS, Android, Windows…).	Dispone de versión gratuita para 1 proyecto Versión Pro: 5 $/mes por usuario
Pidoco	Pidoco está disponible en línea y ofrece varias plantillas para facilitar para crear prototipos web. Esta herramienta permite crear con rapidez maquetas listas para usar.	Dispone de versión gratuita para la edición de un solo proyecto. Versión Basic: 9,99 $/mes por usuario (19 $ sin oferta) Versión Pro: 29 $/mes por usuario Versión Unlimited: 199 $/mes por usuario
MockFlow	MockFlow está disponible en línea y dispone de numerosas plantillas personalizables. Esta herramienta es colaborativa y se puede aprender rápidamente usarla.	Dispone de versión gratuita Versiones avanzadas a partir de 14 $/mes por usuario
FluidUI	FluidUI se puede usar en varias plataformas, como Android o iOS. Esta herramienta posee numerosos elementos que permiten crear maquetas web personalizadas.	Dispone de versión gratuita limitada para 1 proyecto Versión Pro: 19 $/mes Versión Team: 41 $/mes

Los programas de diseño gráfico

Una vez que se han elaboran las maquetas funcionales y se han puesto a prueba, es hora de pasar a la fase de maquetación gráfica. Así como los programas de prototipado tienen un manejo muy fácil, no podemos decir lo mismo de los programas de diseño gráfico, sobre todo de los de la marca Adobe.

Basta con abrir Adobe Photoshop para hacerse una idea de la complejidad del trabajo de diseñador web. Este programa es la principal referencia para la creación de maquetas gráficas: potente, flexible y adaptado a la fase de descomposición necesaria para la integración de HTML/CSS. Entre las alternativas, podemos mencionar Gimp (de código abierto) o Paint Shop Pro, pero las prestaciones son menores.

Crear una página web: estimación de precio personalizada
Webolto ha desarrollado una plantilla que te permite obtener de forma gratuita una estimación de precio detallada y una selección de programas adaptados a tus necesidades para la creación de tu página web. Puedes consultar más información en nuestro artículo ¿Cuánto cuesta crear una página web?.

Del árbol web a las maquetas en Photoshop del sitio web

Para ayudarte de organizar el proceso de elaboración de las maquetas, vamos a analizar sus principales etapas. Naturalmente, esta organización debe adaptarse a las necesidades y limitaciones de cada proyecto concreto.

Etapa 1: Árbol web

Antes de pensar en la disposición de las páginas web, hay que tener una visión de conjunto del sitio web. Es muy importante para identificar las «plantillas» de página, es decir, las maquetas que son comunes a varias páginas.

Por ejemplo, la maqueta de artículo de blog o ficha de producto de una tienda online. Con el árbol web, podrás identificar con mayor facilidad cuáles son las páginas más importantes que debes maquetar en primer lugar. Además de realizar prototipos, el árbol web es muy útil para concebir recorridos de navegación del cliente eficaces y preparar los enlaces internos entre las páginas que contribuirán al posicionamiento natural.
La creación del árbol web suele ser un buen momento para que todos los miembros del equipo intercambien sus puntos de vista e identifiquen los puntos clave del proyecto web.

Etapa 2: Prototipos de las páginas web principales

Para comenzar, te recomendamos crear los prototipos web o maquetas de las páginas web principales únicamente, por dos razones. En primer lugar, te permitirá identificar los elementos gráficos que podrás reutilizar en la páginas secundarias. La experiencia nos dice que es frecuente modificar el árbol web inicial cuando elaboramos las maquetas de las páginas principales. Por eso, es bastante recomendable trabajar en los prototipos de manera iterativa, incorporando mejoras sucesivas.

En la práctica, esto se traduciría en elaborar un diseño rápido de las 3 páginas clave del recorrido del cliente, recabar opiniones, rediseñar esas 3 páginas —con un poco más de detalle— y empezar con otras 3 nuevas, volver a recabar opiniones, y así sucesivamente. Puede parecer un método de trabajo lento y molesto, pero un proceso así en fases, basado en la metodología agile, puede ser muy eficaz y a menudo sirve para abrir la mente.

Etapa 3: Definición de los componentes y los prototipos detallados

Una vez que los prototipos de las páginas principales están validados, te recomendamos ojear el conjunto de las páginas para identificar los elementos gráficos comunes entre ellas. Por «elemento» nos referimos a los bloques, tablas o pestañas, todos los elementos gráficos que se pueden reutilizar. Este trabajo sirve para optimizar el desarrollo web reutilizando el mayor número posible de elementos. Además de reducir (un poco) el tiempo de trabajo, es indispensable para crear una experiencia de navegación sólida y armoniosa, con una gran coherencia visual entre todas las páginas.

Ahora es el momento de profundizar en el detalle y trabajar en los modelos de las páginas más secundarias. El nivel de detalle de la maqueta (texto, alineación, márgenes, etc.) es un debate amplio y dependerá del diseñador web con quien trabajes. Si le planteas esta cuestión en el primer intercambio, será difícil obtener ya una respuesta explícita, pero podrás hacerte una idea del perfil profesional del diseñador y el nivel de libertad con el que desea trabajar.

Etapa 4: Maquetas gráficas

Es la etapa más satisfactoria para el cliente que lleva el seguimiento de su proyecto web. En esta etapa, es donde ver por primera vez plasmada la identidad visual que ha imaginado en su cabeza, sobre todo si es el primer sitio web que crea. La fase de maquetación funcional es más «técnica»: el prototipado se basa en el análisis del comportamiento del público objetivo, por lo que el ejecutor del proyecto, que conoce bien el sector y la clientela, debe participar de forma activa.

En cambio, la maquetación gráfica es un proceso más creativo, con más libertad para el diseñador web. El cliente debe facilitar inspiraciones gráficas que le satisfacen y sobre todo explicar bien el posicionamiento de la marca, pero no suele ser buena idea limitar la libertad creativa del diseñador web con instrucciones demasiado específicas. Si se han definido maquetas funcionales y una identidad visual corporativa precisa, ya no serás un cliente cualquiera y tu diseñador tendrá todas las cartas sobre la mesa, ¡además de una gran motivación para ofrecerte unas maquetas gráficas magníficas!

Conclusión: crear prototipos web dará sus frutos

En conclusión, con este artículo esperamos haberte ayudado a valorar la importancia de dedicar tiempo a la planificación de un sitio web antes de poner a construirlo, tanto si lo creas tú mismo/a como si lo haces con una agencia web o un/a profesional. Crear prototipos web es una inversión de tiempo y esfuerzo, pero se traducirá en un sitio web más agradable y eficaz.

Además, para que tu sitio web esté realmente adaptado a su público objetivo, insistimos en la importancia de mostrar tus prototipos o maquetas a personas externas al proyecto web. El trabajo de User Experience Designer, consistente en crear una experiencia de usuario sólida y solvente, es un trabajo que se basa sobre todo en la escucha activa y la determinación por mejorar el trabajo de forma constante.