Cómo hacer el boceto de una página web (y ejemplos)

Diseñar el boceto de una página web es un paso importante en el proceso de desarrollo, ya que te permite planificar la estructura y el diseño antes de comenzar a codificar.

Aquí te muestro los aspectos básicos de este tipo de proyectos al crear una página web, desde su definición, el paso a paso y algunos ejemplos útiles.

Qué es el boceto de una página web

El boceto de una página web es el primer paso de un proyecto de diseño web, donde se crean ideas para la interfaz del usuario. Con este recurso, es posible ver las partes que deberán conformar el sitio; los diagramas de usabilidad se emplean para mejorar su estructura.

Hoy en día, existen muchos programas de bocetaje o wireframing que hacen esta tarea más sencilla. A continuación, te mostraré el proceso general que debes seguir, aunque deberás acoplar el procedimiento conforme con la plataforma que elijas.

1. Establece el propósito de tu web

Antes de comenzar a diseñar, debes tener claro el propósito de tu sitio web y a quién está dirigido. Esto te ayudará a tomar decisiones de diseño más efectivas. Estas son algunas preguntas útiles:

• ¿Qué es lo que quiero lograr con este sitio web (compras, suscripciones, visitas al contenido...)?
• ¿Cuál es el tipo de usuarios que deben visitarlo?
• ¿Cuáles acciones quiero que realicen (rellenar un formulario, crear un carrito de compras, realizar una adquisición)?
• ¿Cuál es la información más relevante que se debe compartir?

Investiga otros sitios web en tu nicho o industria para obtener inspiración y comprender las tendencias actuales de diseño.

2. Haz un mapa del sitio

Ahora, crea un esquema de la estructura de tu web, mejor conocida como mapa del sitio o sitemap. Esto incluye identificar las páginas principales y cómo se relacionan entre sí, como lo puedes ver en la imagen que sigue:

Asimismo, decide qué funciones necesitará tu sitio web, como los formularios de contacto, carritos de compra, galerías de imágenes, etc., conforme con lo que estableciste en el punto anterior.

3. Escoge una plataforma

Decide si construirás tu sitio web desde cero con HTML, CSS y JavaScript, o si utilizarás una plataforma CMS (de gestión de contenidos).

Utiliza herramientas de diseño como Adobe XD, Sketch, Figma o incluso papel y lápiz para crear wireframes.

Estos es un boceto detallado que muestra la estructura y la ubicación de los elementos clave en una página:

Imagen de M Faizan Tahir en Behance

4. Comienza el diseño de la interfaz de usuario (UI)

Desarrolla la interfaz de usuario con colores, tipografía y elementos visuales. Añade detalles como imágenes, iconos y botones. Asegúrate de que el diseño sea coherente con la identidad de la marca.

Haz pruebas de usabilidad con amigos, colegas o usuarios beta para obtener retroalimentación sobre la navegación y la experiencia del usuario.

5. Emplea los prototipos interactivos

Si es posible, crea prototipos interactivos utilizando herramientas de diseño como Figma o prototipado de HTML/CSS. Esto te permitirá probar la funcionalidad y la experiencia del usuario antes de la implementación real.

Mira, por ejemplo, el proceso de prototipado en Figma:

Video de uxrcristopher en YouTube

6. Mejora el diseño con base en la retroalimentación y compártelo

Basándote en la retroalimentación y las pruebas, ajusta y mejora tu diseño hasta que el resultado sea óptimo.

Por último, documenta tu diseño final y compártelo con el equipo de desarrollo para que puedan comenzar a construir la página web de acuerdo con tus especificaciones.

3 ejemplos de bocetos de una página web

Ahora, te presento algunos ejemplos que pueden inspirarte a comenzar tus propios proyectos.

1. Ejemplo de boceto de una página web comercial

Este ejemplo de Maria Skryabina, diseñadora gráfica y de producto, muestra la distribución de las páginas web para un negocio de ropa al menudeo, dedicado a la moda infantil. En su trabajo, creó la versión para equipos de escritorio y también la de tabletas y smartphones.

En su caso, utilizó Adobe Illustrator para este proceso.

2. Ejemplo de boceto de una página web educativa

Nisreen Jarada, diseñadora UX/UI, comparte su proyecto para un sitio web de educación, el cual tiene disponibles diversos cursos por una suscripción mensual.

Su enfoque permite que los usuarios visualicen fácilmente los videos de cada programa de estudios, se suscriban y gestionen sus preferencias de aprendizaje.

3. Ejemplo de boceto de una página web a mano

¿Recuerdas que te comenté que puedes bocetar de forma manual? Esta práctica es común en las primeras etapas de diseño y, por lo regular, se complementa con un wireframe digital.

El ejemplo que ves aquí es del desarrollador y diseñador George Bartz; está enfocado en un servicio de organización y remodelación de cocinas.

Este ha sido el proceso para crear tu boceto y algunos ejemplos. Si quieres diseñar una página web exitosa, recuerda pensar en tu usuario y en su experiencia.