Bocetos de diseño web: qué son y cómo hacer uno paso a paso

Los bocetos de diseño web son dibujos simples, en papel o en pantalla, que muestran qué secciones tendrá una página, en qué orden y cuánto espacio ocupa cada una, antes de elegir colores o escribir código. Se hacen con cajas, líneas y textos aproximados, y sirven para que el dueño del negocio, el diseñador y quien programa se pongan de acuerdo rápido.

Abajo explico qué es un boceto y cómo se hace, en qué se diferencia de un wireframe, un mockup y un prototipo, cómo hacer uno en papel y otro en Figma sin pagar, y qué secciones no pueden faltar en la página de un negocio local. Al final hay un ejemplo completo para una taquería de Guadalajara.

¿Qué es un boceto y cómo se hace?

Un boceto es un dibujo rápido y sin detalle que sirve para probar una idea antes de ejecutarla. Lo usan pintores, arquitectos, diseñadores de producto y diseñadores web. La palabra viene del italiano bozzetto, y el Diccionario de la lengua española lo define como «proyecto o apunte general previo a la ejecución de una obra artística».

Para hacerlo, primero se decide qué se quiere comunicar, luego se dibujan las formas principales sin detalle y al final se revisa con otra persona para corregir. En diseño web eso se traduce en rectángulos que representan secciones, líneas que representan texto y una X dentro de un recuadro para marcar dónde va una imagen.

Boceto, wireframe, mockup y prototipo: diferencias

Son etapas del mismo proceso, y cada una tiene más detalle que la anterior. Mucha gente usa boceto y wireframe como sinónimos; la diferencia real está en el nivel de acabado.

Para el sitio de un negocio local con cinco o seis páginas, casi siempre bastan el boceto, el wireframe y el mockup. El prototipo vale la pena cuando hay flujos con varios pasos, como una reservación en línea o el pago de una tienda.

¿Para qué sirve hacer un boceto antes de diseñar?

Sirve para equivocarse barato. Mover una sección en papel toma un minuto; moverla en un sitio ya programado puede tomar una tarde completa. Además tiene otras ventajas:

• Obliga a decidir qué es lo más importante de la página antes de pensar en colores.
• Permite que el dueño del negocio opine sobre la estructura sin distraerse con la tipografía.
• Revela huecos de contenido: si dibujas una sección de reseñas y todavía no tienes reseñas, ya sabes qué conseguir primero.
• Ayuda al SEO, porque cada sección del boceto puede responder una búsqueda o una pregunta real de tus clientes.

Cómo hacer un boceto de diseño web en papel

1. Junta el material. Hojas blancas o cuadriculadas, un lápiz, una pluma negra y un marcador gris. Un rectángulo de 6 por 12 cm funciona como silueta de celular.
2. Empieza por el celular. Google indexa la versión móvil de los sitios, y quien busca un negocio cercano suele hacerlo desde el teléfono. Dibuja primero esa versión, de arriba abajo.
3. Escribe la lista de secciones en el margen antes de dibujar: encabezado, servicios, reseñas, mapa, preguntas, pie.
4. Dibuja cajas, no detalles. Un rectángulo con una X es una foto, las líneas horizontales son texto y un rectángulo relleno es un botón.
5. Escribe los títulos reales. «Tortas ahogadas en Analco» comunica mucho más que «Título aquí», y te dice si el texto cabe.
6. Haz dos o tres versiones rápidas con distinto orden y quédate con la que se entienda mejor.
7. Pruébalo con otra persona. Enséñale el boceto cinco segundos y pregúntale qué vende el negocio y cómo lo contactaría. Si duda, corrige.
8. Toma una foto del boceto y guárdala con tus notas. Es la base del wireframe.

Cómo hacer un boceto en Figma gratis

Figma tiene un plan gratuito que alcanza para bocetar y hacer los wireframes de un sitio pequeño, y funciona en el navegador sin instalar nada. Penpot es una alternativa gratuita y de código abierto con un flujo muy parecido; para trazos a mano alzada también sirve Excalidraw.

1. Crea una cuenta en figma.com y abre un archivo de diseño nuevo.
2. Presiona F para crear un marco (frame) y elige en el panel derecho un tamaño de celular.
3. Dibuja las secciones con la herramienta de rectángulo (R) en tonos de gris y usa la herramienta de texto (T) para escribir los títulos reales.
4. Agrupa cada sección en su propio marco y ponle nombre, como «Encabezado», «Servicios» o «Reseñas», para ubicarte en el panel de capas.
5. Aplica auto layout (Shift + A) para que las secciones se acomoden solas cuando muevas o agregues elementos.
6. Duplica el marco y arma la versión de escritorio, de 1280 o 1440 px de ancho.
7. Comparte el enlace con permiso para comentar, así el cliente deja sus notas directo sobre el boceto.

Si prefieres partir de algo hecho, en la sección Community de Figma hay kits de wireframes gratuitos; busca «wireframe kit».

Qué secciones debe tener el boceto de un negocio local

En las auditorías que hacemos a negocios locales vemos seguido el mismo problema. A la página le falta información que el cliente necesita para decidir. Estas son las secciones que conviene dibujar desde el primer boceto:

• Encabezado con propuesta clara: qué haces, para quién y en qué zona, en una línea. Debajo, el botón de WhatsApp y el de llamar o cómo llegar.
• Botón de WhatsApp fijo, visible en todo momento en el celular.
• Servicios o productos: una tarjeta por servicio, con una frase y, si aplica, precio de referencia.
• Prueba social: reseñas de Google, fotos de trabajos terminados, años en la zona, certificaciones. Si te faltan reseñas, revisa cómo conseguir reseñas en Google.
• Ubicación y mapa: dirección, mapa, horario y referencias para llegar. Debe coincidir con tu ficha; lo explicamos en cómo poner tu negocio en Google Maps.
• Preguntas frecuentes con las dudas reales de tus clientes, que además te ayudan a aparecer en Google y en las respuestas de las IAs.
• Pie con datos de contacto, escritos igual que en tu Perfil de Negocio de Google.

1, Encabezado

Birria de res en Santa Tere

Pedir por WhatsAppCómo llegar

2, Foto del platillo

3, Menú

4, Reseñas de Google

5, Mapa y horario

6, Preguntas frecuentes

7, Pie con datos

Ejemplo: boceto para una taquería en Guadalajara

Pongamos una taquería de birria en Santa Tere. Quiere recibir pedidos para llevar por WhatsApp y que la gente que la encuentra en Google Maps llegue al local. El boceto móvil de arriba quedaría así:

1. Encabezado: «Birria de res en Santa Tere», debajo el horario de atención y dos botones, «Pedir por WhatsApp» y «Cómo llegar».
2. Una foto grande del platillo, tomada en el local y ligera para que cargue rápido.
3. Menú corto con tacos, consomé y venta por kilo, cada uno con su precio.
4. Reseñas de Google con estrellas, nombre y fecha.
5. Mapa con la dirección, una referencia fácil de ubicar en la colonia y dónde estacionarse.
6. Preguntas frecuentes: si hacen pedidos para eventos, si aceptan tarjeta, a qué hora se acaba la birria los domingos.
7. Pie con nombre, dirección y teléfono idénticos a la ficha de Google.

Para un consultorio en Zapopan el esqueleto es casi el mismo. Cambian el botón principal, que pasa a ser «Agendar cita», la cédula profesional del médico junto a su foto, las especialidades en lugar del menú y preguntas sobre seguros, estacionamiento y primera consulta.

Con un boceto así arrancamos cada proyecto de diseño de páginas web en Guadalajara: primero acordamos la estructura con el dueño, luego escribimos los textos y al final diseñamos.

Cómo hacer un boceto de un proyecto

El mismo método sirve para cualquier proyecto, sea un cartel, un producto o la remodelación de un local:

1. Escribe el objetivo del proyecto en una frase.
2. Junta referencias: fotos, ejemplos, medidas.
3. Dibuja varias ideas rápidas, sin detalle.
4. Elige una y agrégale medidas, notas y materiales.
5. Revísala con quien va a aprobar o ejecutar el proyecto.
6. Pásala en limpio, en papel o en digital, como base de la versión final.

Errores comunes al bocetar una página web

• Empezar por los colores o el logo antes de tener la estructura.
• Dibujar solo la versión de escritorio.
• Usar «Lorem ipsum» en lugar de textos reales: el boceto parece terminado, pero no sabes si el mensaje cabe.
• Poner el contacto únicamente al final de la página.
• Copiar el sitio de un competidor sin saber si a ese competidor le funciona.

Si quieres entender el proceso completo, del boceto al sitio publicado, lee nuestra guía de qué es el diseño web. Y si tu negocio está en la zona metropolitana de Guadalajara, en la página de diseño web en Guadalajara verás cómo trabajamos con negocios de Guadalajara, Zapopan y Tlaquepaque.

Preguntas frecuentes sobre bocetos