¿Cómo hacer un boceto de una página web?: ahorra tiempo y dinero con un wireframe

¿Cómo hacer un boceto de una página web?: ahorra tiempo y dinero con un wireframe

Última actualización 21 de Abril del 2021Tiempo de lectura: 7 min.

Yael Beltrán

Si recién comienzas en el diseño web o estás pensando en renovar tu página, plasmar tus ideas con anterioridad puede ahorrarte horas de trabajo. Aprende cómo hacer un boceto de una página web para que tu cliente sepa cuál será el resultado final, facilitar las idas y vueltas y prevenir inconvenientes. 

El trabajo previo de planificación también es importante si creas una web para ti ya que te permite detectar posibles problemas y evitar trabajos innecesarios.

Además, es beneficioso para tu usuario porque crear un boceto al diseñar una página web te permite definir la jerarquía de la información con anterioridad, lo que favorece su comprensión.

Como el proceso de diseño de una página web es largo y requiere de investigación exhaustiva, herramientas como los wireframe, que te permiten hacer el prototipado de un sitio web, se volvieron imprescindibles.

Comencemos, hay mucho más que debes saber para crear una página web exitosa. 😉

¿Qué es un wireframe y para qué sirve?

Un wireframe o prototipo es un boceto en escala de grises que representa visualmente, de forma muy sencilla y esquemática, cuál es la estructura de una página web o de una aplicación móvil.

Se usa en las primeras etapas del proceso de desarrollo con el objetivo de establecer el esquema de una página web antes de agregar el contenido y el diseño visual. Se puede crear con papel, directamente en HTML/CSS o con aplicaciones de software.

Los wireframes sirven para:

✅ Presentar la idea básica de la funcionalidad e interacción.

✅ Dibujar la estructura y elementos de la navegación de forma básica.

✅ Ofrecer una visión general de la interfaz de usuario.

Entonces, saber cómo hacer un wireframe te permitirá definir el contenido y la posición de los diversos bloques que conforman la página web: menús de navegación, links, bloques de contenidos, etc. 

como hacer un bocetoFuente: Unsplash

El diseño de un wireframe no lleva colores, tipografías ni ningún otro elemento gráfico para no sacar el foco de las prioridades que son la funcionalidad y la experiencia del usuario.

Para entender cómo hacer un buen boceto es esencial conocer las ventajas que ofrece un wireframe antes de comenzar a diseñar.

5 ventajas de hacer un wireframe

Cada fase del proceso de diseño de una página web se suele enviar al cliente para su aprobación. Uno de los beneficios de elaborar un wireframe es que te permite disminuir la cantidad de revisiones y cambios y evitar momentos, gastos y retrasos innecesarios.

Las ventajas más importantes de hacer un diseño de wireframe como paso previo a crear tu página web son:

1. Sirve como primer boceto

Al ser una representación simple puedes crear múltiples versiones del mismo proyecto de forma rápida hasta encontrar la adecuada y luego aplicar cambios o nuevas ideas.

2. Favorece el trabajo en equipo

Se pueden elaborar en papel y luego digitalizarlo para que todos tengan acceso al proyecto de la página web y lo tomen como referencia. Es una herramienta de comunicación y discusión entre arquitectos de la información, programadores, diseñadores y clientes.

3. Permite que el cliente comprenda el concepto

Al crear un wireframe se emplean figuras sencillas fácilmente reconocibles por todas las personas, rectángulos de diferentes tamaños representan los elementos. 

4. Es una inversión de tiempo y recursos

Crear un wireframe en papel es sencillo, rápido y no cuesta dinero. Luego, debes calcular el tiempo de pasar del boceto final al digital ya que debes trabajar las medidas exactas. Pero al final se traduce en ahorro de tiempo y dinero.

5. Detecta y corrige los problemas con anterioridad

Como son sencillos y rápidos de realizar es posible pedir feedback fácilmente y resolver problemas relacionados con su usabilidad y funcionales. 

como hacer un bocetoFuente: Pexels

Un buen diseño web te ayudará a reforzar tu marca en internet, para ello WordPress puede ser una gran herramienta. Aprende cómo crear una página web con el Curso online de WordPress: Diseña y desarrolla páginas web desde cero.

Elementos que conforman un wireframe

Lo esencial para aprender cómo hacer un boceto es entender que la página web que estás creando debe ser fácil de usar.

Por eso, antes de diseñar la interfaz (UI) debes planificar la experiencia del usuario (UX) con el fin de aumentar la lealtad y satisfacción del cliente. A estos dos aspectos súmale la arquitectura de la información (AI) de la página web y tienes el proceso de diseño del wireframe completo.

Diseño de información

Para una comunicación clara la información debe estar presentada de manera efectiva: pensar la estructura, el contenido y el estilo del diseño en función de los objetivos de la empresa.

La arquitectura de la información (AI) juega un papel fundamental en la estructura de una página web: ubica y prioriza la información con el fin de lograr la comprensión por parte de los usuarios. 

Los elementos de la arquitectura de la información son:

1. Estructuras y esquemas organizativos: clasificación y estructuración de la información

2. Sistemas de etiquetado: representación de la información

3. Sistemas de navegación: desplazamiento por la información

4. Sistemas de búsqueda: buscar y encontrar información

Crear el boceto de una página web es la mejor forma de obtener comentarios de los usuarios en las primeras etapas de diseño para así evitar rediseños costosos una vez que esté funcionando.

Diseño de navegación

Ya en el prototipo de una página web el diseño de navegación debe comunicar la relación entre los enlaces de la página web de forma que los usuarios entiendan las opciones para navegar en el sitio y desplazarse a través de las diferentes páginas.

como hacer un bocetoFuente: Palbin

Diseño de interfaz

A la hora de construir la estructura de una página web se debe realizar el diseño de la interfaz de usuario (UI): implica la selección y ordenamiento de los elementos que permiten a los usuarios interactuar con la funcionalidad del sistema. 

Como el objetivo del diseño de la interfaz es facilitar la usabilidad del sitio, sus elementos más comunes son: botones de acción, campos de texto, casillas de verificación, menús desplegables y botones de selección.

👉 En pocos segundos debes llamar la atención de quien visita tu sitio web. Si no está a gusto o no encuentra la información que vino a buscar, es probable que no regrese. Por eso, al crear un wireframe debes recordar que la experiencia del usuario lo es todo. 

Tipos de wireframes

Como ya sabes, puedes crear un wireframe con una hoja y un lápiz o usar alguna herramienta digital. Combinar los recursos te asegurará un buen resultado: haz un esquema rápido en un papel y luego lo digitalizas. 

De acuerdo a su complejidad se clasifican en tres tipos de wireframe principales:

📌 Baja Fidelidad: es el más simple. Se realiza manualmente, sin colores y tiene pocos detalles.

📌 Anotado: presenta los elementos visuales en orden simulando una página, también puedes colocar anotaciones o subtítulos.

📌 Alta fidelidad: es el más próximo de una versión final. Puedes realizarlo con algún software que permita interacciones como hacer clic en los botones.

En pocas palabras, saber cómo hacer un boceto que cumpla su objetivo se reduce en mostrar de forma clara la estructura de la página web que estás creando para que tu cliente se haga la idea de cómo será el producto final.

¿Cómo hacer un boceto o wireframe de una página web?

Ahora que conoces qué es un wireframe, te mostraremos paso a paso cómo hacer un boceto que incluya todos los elementos necesarios en una página web.

4 pasos para crear un wireframe sencillo

1. Realiza el diseño de tu página web con tu objetivo principal en mente y teniendo en cuenta de qué forma interactuará el usuario con la interfaz.

2. Haz un esquema simple de tu página web dividida en tres partes: encabezado (lo que incluirás en la parte superior), el cuerpo del sitio y el pie de página.

3. Piensa en cómo navegará el usuario en tu página web: incluye botones y enlaces hacia las secciones principales de tu sitio web.

4. Realiza anotaciones en tu wireframe para que sea más claro. 

como hacer un boceto

Fuente: lucidchart

¡Así de simple es! Ya sabes cómo hacer un boceto de tu proyecto y puedes compartir el wireframe con tu equipo de trabajo y/o el cliente antes de realizarlo en un software.

Para simplificar aún más la creación de tu página web te compartimos este Template de diseño web gratuito.

como hacer un boceto

6 herramientas para crear wireframe de una página web

Como vimos recién, el primer paso para comprender cómo hacer un boceto es crear el wireframe en papel, es la forma de experimentar y validar la idea incial. 

Luego, es necesario trasladarlo a un software antes de hacer el diseño web final. Para ello, puedes elegir entre las páginas o programas para crear wireframes el que más de adecue a tus necesidades y a las del proyecto:

Páginas para crear wireframes

1. Wireframe.cc

Intuitiva y fácil de usar. Consiste en una hoja en blanco en la que puedes crear formas geométricas, insertar textos, listas, anotaciones, etc. Ideal para principiantes.

2. HotGloo

Permite a todo el equipo colaborar desde sus dipositivos móviles y exportar los wireframes en HTML. 

Es una buena opción para diseñadores y desarrolladores que buscan una herramienta para crear wireframes con elementos e iconos de interfaz de usuario integrados.

3. Lucidchart

Para quien no tiene muy claro todavía cómo hacer un boceto o wireframe esta es una herramienta ideal ya que la puede utilizar un ingeniero o un principiante.

Permite crear una demostración interactiva de una página web en minutos y alojarla en la nube.

Softwares de wireframes

4. Axure

Este programa para crear wireframes dispone de diversas funcionalidades y te permite verificar la navegación de tu sitio antes de escribir o implementar cualquier código.

También te da la opción de incluir flujos condicionales, animaciones, contenido dinámico y otras herramientas cuando finalizas tu wireframe.

5. Adobe XD

Es un software especializado en la creación de wireframes, aunque también puedes utilizar Photoshop o Ilustrator.

Una gran solución si ya tienes contratado el paque completo de Adobe.

6. MockPlus

Es la herramienta para crear wireframes más rápida del mercado.

Incluye un editor WYSIWYG, componentes prediseñados, componentes de marcado, documentos maestros, códigos QR para pruebas de dispositivos y mucho más.

5 ejemplos de bocetos de páginas web

Ya has aprendido cómo hacer un boceto y cuentas con una lista de herramientas entre las cuales puedes elegir. 

Si lo que necesitas ahora es inspiración, aquí te dejamos algunos buenos modelos de wireframe para que tomes de referencia:

1. YouTube

como hacer un bocetoFuente: Webdesdecero

2. CNN

como hacer un bocetoFuente: Webdesign

3. LinkedIn

como hacer un boceto
Fuente: Lucidchart

4. The New York Times

como hacer un boceto

Fuente: Capturly

5. Google

como hacer un boceto
Fuente: Lucidchart


Todo lo que necesitas para hacer tu boceto o wireframe lo tienes aquí. Profesionaliza tu proceso de diseño y comprueba tú mismo los beneficios de incluir un wireframe como primer paso en tus proyectos. 🙌

También podría interesarte

Subcategorías

Softwares