Un boceto web o «wireframe» es un esquema que muestra cómo será la web antes de diseñarla. En el boceto se muestran los distintos elementos que componen la web (slides, videos, textos, imágenes, botones, formularios…) y el orden que van a llevar. Crear un boceto previo te ayudará a diseñar más rápido tu web porque ya sabes dónde va cada elemento. Si eres diseñador web y el boceto es para un cliente te ayudará a dejar las cosas claras antes de comenzar el trabajo.
A continuación te hablamos deque te harán la vida más fácil a la hora de diseña una página concreta o un sitio web completo.
¿Qué es un wireframe?
Un wireframe es un boceto donde se muestra de forma visual un esquema o resumen de los distintos elementos que compondrán una web.
En el wireframe se incluye tanto la arquitectura (organización) del sitio web, como los distintos elementos que conformarán la web.
El wireframe se realiza en la etapa previa al diseño y desarrollo web. En este boceto se plasman las ideas antes de ponerse manos a la obra. Como comentábamos al inicio de este post, bocetar lo que quieres hacer antes de hacerlo te hará trabajar más rápido en tu proyecto web.
Puedes hacerlo súper sencillo, un cuadrado con una X para las imágenes y slides, y un cuadrado con rayitas para las secciones de texto, por ejemplo.
Los estilos, colores, imágenes, tipografías, etc. no son necesarios dentro de un wireframe, a no ser que a ti te guste más o tu cliente así te lo pida.
¿Qué hay que tener en cuenta a la hora de bocetar una web?
A la hora de bocetar una web hay que tener en cuenta:
- La información principal que contendrá la web. (Generalmente suele ser una página de inicio, quiénes somos, servicios, tarifas, blog y contacto)
- La estructura de la web. Cómo se organizarán los contenidos dentro de la web. (Imágenes, slides, textos…) Debe tener una estructura coherente y no repetirse.
- La experiencia de usuario. Es muy importante que se tenga en cuenta la usabilidad de la web, es decir, cuidar todos aquellos elementos que permiten interactuar con una página de una forma sencilla y rápida (que tenga botones, llamadas a la acción, títulos, subtítulos, negritas…)
- La arquitectura web. Es decir, tener en cuenta cómo se organizan los contenidos en las distintas páginas y los menús y submenús que se utilizarán, así como el linkeado que habrá entre ellos.
¿Qué ventajas tiene hacer un boceto web?
- Te ayuda a organizar tus ideas, saber qué es exactamente lo que tu proyecto web necesita
- De cara a trabajar con clientes, te ayuda a explicar y delimitar exactamente los elementos que contendrá la futura web.
- Se trabaja más rápido. Cuando tienes un boceto previo, la fase de diseño se acorta.
- Permite detectar problemas antes de ponerse a diseñar.
- Puede ayudarte también a saber qué diseño gusta más si por ejemplo realizas dos bocetos y das a elegir a tu cliente.
TOP 5 herramientas para crear un boceto web o wireframe
1. Free Online Photoshop
Se trata de una herramienta que ofrece funciones similares a Adobe Photoshop pero de forma gratuita y online. Solo tienes que abrir la herramienta en tu navegador web, hacer clic en «nuevo proyecto» y elegir el tamaño de tu wireframe o boceto web.
Con esta herramienta puedes trabajar en distintas capas e ir añadiendo textos, imágenes, elementos como cuadrados, círculos, etc.
Después, en archivo – exportar podrás guardar el documento en PNG o en PDF.
2. MockFlow
Es una herramienta completísima para el diseño de bocetos o wireframes en los distintos formatos, escritorio, móvil y tablet.
Sus funciones principales son:
- Cientos de elementos para añadir a tu boceto y prediseños para dibujar cualquier interfaz de usuario
- Su editor permite arrastrar y pegar los distintos elementos de forma muy intuitiva y rápida.
- Cuenta con modo vista previa para poder ver y revisar el boceto
- Si trabajas con Adobe Photoshop, cuentan con MockFlow para Adobe Photoshop para conectar y trabajar a la vez con ambas plataformas.
Su versión básica es gratuita.
3. JustMind
Es una gran herramienta para diseñar y crear bocetos y prototipos para aplicaciones web y móviles.
Esta herramienta también es gratuita en su versión más básica.
Sus principales funciones son:
- Permite crear prototipos totalmente interactivos: desde prototipos en los que se puede hacer clic hasta simulaciones completamente funcionales.
- Ofrece una gama completa de interacciones web, animaciones y transiciones. Puedes crear cualquier cosa, desde enlaces simples hasta interacciones avanzadas.
- Diseño visual: Puedes diseñar el estilo, el tamaño y la distribución del diseño de cualquier elemento de la interfaz de usuario para que se adapte a las distintas pantallas.
- Gestos móviles: podrás elegir entre una gran cantidad de gestos que permiten rotar, tocar, deslizar, desplazarse y pellizcar a través de su prototipo de aplicación móvil.
4. Canva
Canva es una herramienta maravillosa para los diseñadores gráficos y ahora también para los diseñadores web. Actualmente, Canva ha lanzado «Diseño Web beta», para poder bocetar tu website desde esta herramienta. Es cierto que quizá no sea tan indicada como las dos anteriores (mockFlow y JustMind) pero si lo que quieres es algo sencillo Canva puede resultarte muy útil.
Canva cuenta con una versión gratuita. En su versión de pago encontrarás más funciones y elementos PRO sólo utilizables en la versión de pago.
Sus funciones para bocetar son:
- Ofrece plantillas por temáticas
- Puedes añadir de todo: fotos, textos, imágenes, animaciones, todo tipo de elementos y gráficos, colores, fuentes tipográficas…
- Permite visualizar el boceto web a pantalla completa.
- Permite compartir el boceto copiando y pegando el link que puedes enviar a tus clientes o compañeros de trabajo para que te vayan dando feedback de tu diseño.
5. Figma
Es una de las herramientas para bocetar webs que más se están poniendo de moda en este momento. Está pensada para bocetar en equipo y es una de las herramientas más completas del mercado.
Entre sus principales funciones sirve para:
- Prototipación interactiva: Podrás crear prototipos que se vean como una experiencia interactiva, sin necesidad de codificación.
- Construcción intuitiva: simplemente conecta los elementos de la interfaz de usuario y elija sus interacciones y animaciones.
- Interacciones: define interacciones sutiles, como al hacer clic, mientras se desplaza, mientras presiona un botón, y más.
- Optimizado para dispositivos móviles: detalles como marcos de dispositivos y desplazamiento de impulso hacen que los bocetos y prototipos se muestren como una experiencia real.
- Trabajo en equipo. Está especialmente pensada para trabajar en equipo y que varias personas puedan editar un mismo boceto web o wireframe a la vez.
Esperamos que te haya gustado esta selección de herramientas. ¿Conoces o utilizas alguna otra? Déjanos un comentario.
También te puede interesar…
- Nuevo hosting para WordPress de Interdominios ¡Más rápido, seguro y con todo instalado!
- Cómo crear un sistema de captación automático gratis con Gmail
- Los 3 mejores plugins de WordPress para limpiar la base de datos
- Cómo instalar y analizar una web con Google Lighthouse [2021]
- ¿Has optimizado tu web? Llegan las Core Web Vitals de Google | 2021
Muchas gracias Selena! Nos alegramos!
que buena pagina, me funciono mucho
Gracias Guillermo por el aporte.
Muy interesante tu comentario.
Saludos!
Sería bueno que junto a las aplicaciones propuestas viniera su tipo de licencia. Por otro lado al estilo Photoshop está The Gimp que es totalmente libre, multiplataforma y gratuito. Existe también la herramienta de bocetos web llamada Pencil de evolus.vn, que es software libre y gratuito.