Home Blog/ Estilo de Vida/
Estilo de Vida

¬ŅC√≥mo hacer un boceto de una p√°gina web? ¬°Crea un wireframe y ahorra tiempo y dinero!

Alexandra Carranza - 03 Feb 22

Articulo

7 min.

Saber c√≥mo hacer un boceto de una p√°gina web es vital para que tu cliente sepa cu√°l ser√° el resultado final, facilitar las idas y vueltas y prevenir inconvenientes.¬†Si reci√©n comienzas en el dise√Īo web o est√°s pensando en renovar tu sitio online, plasmar tus ideas con anterioridad puede ahorrarte horas de trabajo.¬†

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, crear un boceto de una página web te permite definir la jerarquía de la información, lo que favorece su comprensión y usabilidad web.

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.¬†B√°sicamente,¬†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.

De hecho, el boceto de una p√°gina web se usa en las primeras etapas del proceso de desarrollo con el objetivo de establecer el esquema¬†antes de agregar el contenido y el dise√Īo visual. Se puede crear en¬†papel, usar una lista de etiquetas HTML y propiedades CSS o con aplicaciones para hacer bocetos de p√°ginas web.

Como nuestro objetivo es ayudarte a dise√Īar un sitio web en el que tus usuarios naveguen sin cesar y tengan una experiencia inolvidable, en este art√≠culo te ense√Īaremos c√≥mo hacer un boceto de una p√°gina web y cu√°l es su importancia. As√≠ que ¬°alista tus materiales y manos a la obra!

1. Investiga a tu usuario objetivo y el dise√Īo de UX

Antes de comenzar a elaborar el boceto de una p√°gina web, es necesario investigar a tu p√ļblico objetivo. Esto puede ayudarte a determinar qu√© funciones deben destacarse m√°s en tu sitio web para que los visitantes puedan encontrar lo que necesitan.

Las user personas pueden ser una herramienta de dise√Īo √ļtil para esta parte del proceso de c√≥mo hacer un boceto de una p√°gina web. Por lo tanto, define qui√©nes ser√°n tus grupos de usuarios potenciales, as√≠ tendr√°s una referencia a la que puedas volver durante todo el proceso de dise√Īo del wireframe. Es m√°s, las user personas tambi√©n pueden ayudarte a crear una estrategia de marketing m√°s adelante.

Tambi√©n es aconsejable¬†explorar algunas tendencias y mejores pr√°cticas de dise√Īo de UX. Esto puede proporcionar informaci√≥n sobre elementos, como dise√Īos de men√ļ, el posicionamiento de tu logotipo, dise√Īos de contenido y otros aspectos de marca importantes. A los usuarios les resulta m√°s f√°cil navegar por un sitio web que se actualiza en lo que respecta a estas funciones.

¬ŅNo sabes c√≥mo definir tu user persona? ¬°No te preocupes! Nicol√°s Chometowski, profesor de Crehana, te ayudar√° a elaborar a tu cliente potencial, de modo que el bosquejo de p√°gina web que dise√Īes sea exitoso.

2. Define el dise√Īo de tu p√°gina web

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 de 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 obtendr√°s el proceso de dise√Īo del wireframe o boceto completo.

Dise√Īo de informaci√≥n

Para una comunicaci√≥n clara la informaci√≥n debe estar presentada de manera efectiva, es decir,¬†pensar en 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 el boceto de la estructura de una página web, ya que ubica y prioriza la información con el fin de lograr la comprensión por parte de los usuarios. 

Elementos de la arquitectura de la información

  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: 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.

ejemplo de dise√Īo de informaci√≥n de una p√°gina webFuente: Unsplash

Dise√Īo de navegaci√≥n

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 secciones.

En este punto es importante hablar sobre el ‚Äúflujo de usuario‚ÄĚ. Este t√©rmino se refiere a la ruta que toma un visitante para completar un objetivo espec√≠fico en tu sitio web. Por ejemplo, si tienes una plataforma de comercio electr√≥nico, un flujo de usuario abarca desde la llegada a la p√°gina del producto hasta el final del proceso de pago.

Determinar las tareas clave que los usuarios deber√°n completar en tu sitio puede ayudarte a crear un boceto de una p√°gina web m√°s directo para cada objetivo potencial. Esto ayudar√° a maximizar la UX al hacer que tu sitio web sea f√°cil de navegar.

dise√Īo de navegaci√≥n webFuente: iOnos

Dise√Īo de interfaz

A la hora de aprender c√≥mo hacer un boceto de una p√°gina web se debe realizar el dise√Īo de la interfaz de usuario (UI). Esto implica la selecci√≥n y el 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.¬†Por lo tanto, es necesario hacer bocetos de interfaz gr√°fica que pueda ayudarte a generar el nivel de satisfacci√≥n que siente un internauta cuando visite tu sitio web por primera vez.

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 o boceto debes recordar que la experiencia de¬†usuario es el factor principal,¬†y esto debe plasmarse en el dise√Īo de interfaces web.

 

3. Elabora un esquema de tu p√°gina web

Una vez ya definida la experiencia de usuario de tu página web, es momento de realizar el wireframe con tu objetivo principal en mente y teniendo en cuenta de qué forma interactuará el usuario con la interfaz.

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. Para elaborar el bosquejo de una página web con éxito, debes conocer los tipos de wireframes. Y si necesitas un poco de inspiración, también te dejamos algunos ejemplos de bocetos de páginas web de grandes empresas.

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, así que 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 de una página web que cumpla su objetivo se reduce en mostrar de forma clara la estructura que estás creando para que tu cliente se haga la idea de cómo será el producto final.

wireframe de LucidChartFuente: lucidchart

Ejemplos de bocetos de p√°ginas web

Pues bien, ya has aprendido cómo hacer un boceto de una página web y los tipos de wireframe que puedes elegir. Si lo que necesitas ahora es inspiración, aquí te dejamos algunos buenos modelos de wireframe o boceto para que tomes de referencia:

1. YouTube

wireframe de YouTubeFuente: Webdesdecero

2. CNN

wireframe de CNNFuente: Webdesign

3. LinkedIn

wireframe de LinkedIn
Fuente: Lucidchart

4. The New York Times

wireframe de The New York TimesFuente: Capturly

5. Google

wireframe de Google
Fuente: Lucidchart

4. Traslada tu wireframe en papel a un boceto digital

Como pudiste ver, el primer paso para comprender cómo hacer un boceto de una página web es crear el wireframe en papel, pues es la forma de experimentar y validar la idea inicial. 

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 hacer bocetos de p√°ginas web¬†el que m√°s se¬†adec√ļe a tus necesidades y a las del proyecto.

P√°ginas para hacer bocetos de p√°ginas web

1. Wireframe.cc

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

2. HotGloo

Se trata de un creador de bocetos que permite a todo el equipo colaborar desde sus dispositivos 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 de una página web 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.

Programas para hacer bocetos de p√°ginas web

1. Axure

Este programa para hacer bocetos de páginas web 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.

2. Adobe XD

Es un software especializado en la creación de wireframes o bocetos de páginas web, aunque también puedes utilizar Photoshop o Illustrator. Una gran solución si ya tienes contratado el paquete completo de Adobe.

3. MockPlus

Es la herramienta para crear wireframes o bocetos de p√°ginas web 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.

wireframe de una página web en móvilFuente: Freepik

5. Haz un testing del boceto de tu p√°gina web

Una vez que hayas completado tu boceto de una p√°gina web inicial, deber√°s realizar algunas pruebas de usabilidad, tambi√©n conocidas¬†como ‚Äútesting‚ÄĚ. Esto te ayudar√° a determinar si has logrado tu objetivo de mapear los flujos de usuario y UX m√°s simples y naturales para tu sitio web. Hay varias maneras de hacer esto.

Si est√°s trabajando con un equipo, tu primera ronda de pruebas probablemente se llevar√° a cabo internamente. Cada miembro del equipo debe pasar alg√ļn tiempo con el esquema para ver si tiene sentido. Haz que todos trabajen de forma independiente para no influirse unos a otros y tomar notas sobre cualquier problema con el que se encuentren.

Sin embargo, tambi√©n hay herramientas que pueden proporcionar pruebas de usabilidad m√°s objetivas para tu wireframe o boceto. Estas pruebas est√°n destinadas a imitar a los usuarios reales, lo que puede ser particularmente √ļtil. El hecho de que tu equipo de dise√Īadores web encuentre tu esquema l√≥gico no significa que el usuario promedio del sitio web lo haga.

 

Importancia de hacer un wireframe

Para entender c√≥mo hacer un¬†boceto de una p√°gina web¬†es esencial conocer las ventajas que ofrece un wireframe antes de comenzar a dise√Īar.¬†Recuerda que el objetivo de esta herramienta es mostrar la facilidad con la que un usuario puede navegar, interactuar o explorar hasta el √ļltimo rinc√≥n de una p√°gina, ya sea a trav√©s de un dispositivo m√≥vil o una computadora.

Seg√ļn Forbes M√©xico, actualmente, la reputaci√≥n de cualquier empresa est√° expuesta a entrar en una zona de riesgo cuando su aplicaci√≥n o p√°gina web no funciona de manera adecuada o la experiencia de usuario no es del todo positiva, a√ļn¬†cuando la experiencia f√≠sica offline marche bien.

Dicho esto, veamos cu√°les son los beneficios de implementar un wireframe o boceto dentro de tu proceso de dise√Īo web.

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 boceto de dise√Īo web 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.

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.¬†

Eso s√≠, 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 de usuario.

2. Favorece el trabajo en equipo

Los bocetos de p√°ginas web se pueden elaborar en papel y, luego, digitalizarlos 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 o boceto de una p√°gina web se emplean figuras sencillas f√°cilmente reconocibles por todas las personas, rect√°ngulos de diferentes tama√Īos representan los elementos.¬†

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.

4. Es un ahorro 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 de una p√°gina web 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 los bocetos de p√°ginas web son sencillos y r√°pidos de realizar es posible pedir feedback f√°cilmente y resolver problemas relacionados con su usabilidad.¬†Un buen dise√Īo web te ayudar√° a reforzar tu marca en Internet, para ello WordPress puede ser una gran herramienta.¬†

persona dise√Īando un boceto de p√°gina webFuente: Pexels

Ahora bien, ya tienes todo lo que necesitas para hacer tu boceto¬†de una p√°gina web. Profesionaliza tu proceso de dise√Īo y comprueba t√ļ mismo los beneficios de incluir un wireframe como primer paso en tus proyectos,¬†pero sobre todo, para que tus usuarios siempre tengan presente la experiencia que les brindas en l√≠nea.

Recuerda que si un sitio web cuenta con una buena navegación y facilita la exploración de los usuarios por él, es probable que lo recuerden de una manera positiva y, claramente, regresarán a él un sinfín de veces. ¡Ahí es donde aprender cómo crear un boceto de una página web es indispensable!

Como menciona Marina Rodrigo, dise√Īadora web y profesora del curso online de WordPress: dise√Īa y desarrolla p√°ginas web desde cero, ‚Äúsaber los tipos de estructuras de p√°ginas web y c√≥mo crear secciones que cumplan una finalidad, har√° que tu web tenga una estructura atractiva y sencilla de comprender‚ÄĚ.

¬ŅSab√≠as que tambi√©n puedes crear un boceto de una p√°gina web en los mejores programas de dise√Īo gr√°fico? ¬°As√≠ es! Con nuestros cursos online de dise√Īo gr√°fico, no solo aprender√°s a usar el paquete de Adobe, sino que, adem√°s, desarrollar√°s habilidades indispensables para construir una propuesta creativa ganadora.¬†

¬°Nos vemos!