AP3, EVIDENCIA No 7

BOCETO

Lionar Alexis García Pérez

Brahayan Antonio Santander

Ingrid Vanessa Bernal Suarez

Dolfy Roció Hernández

SENA
Septiembre 21 del 2021

Notas del Autor

Lionar Alexis García Pérez, Brahayan Antonio Santander, Ingrid Vanessa Bernal Suarez

Dolfy Roció Hernández Tecnología en Producción Multimedia, SENA.

AP3, EVIDENCIA No 7

Introducción

El presente boceto representa de manera esquemática la estructura de la página web la cual

queremos realizar donde se va a representar de manera sencilla la organización,
funcionalidad, jerarquía y contenidos que van aparecer en el sitio web asi como la interfaz
gráfica, teniendo en cuenta los principales elementos que compone el wireframe: Diseño,
Información, Navegación e Interfaz
AP3, EVIDENCIA No 7

 
QUE ES UN WIREFRAME:

Un wireframe es un boceto donde se representa visualmente un esquema de una página

web de manera sencilla. En este boceto se plasma tanto la organización del sitio web
como su interfaz gráfica.

Esta etapa de esquematización, organización y plasmación de ideas se realiza antes de

la fase de diseño web. Recomendamos la revisión de este boceto entre personas expertas
en diseño y usabilidad web.

Este esquema carece de estilo, color, imágenes, tipografía, etc. Su principal objetivo es
plasmar la funcionalidad, jerarquía y contenidos que van a aparecer en la tienda online.
Un wireframe se enfoca en tipos de información mostrada, las funciones disponibles, el
efecto en los distintos escenarios de pantalla, los tipos de información a mostrar, etc.

Es en el wireframe donde el concepto se vuelve tangible.

ELEMENTOS DE UN WIREFRAME

Un correcto desarrollo de nuestro wireframe necesita que prestemos atención especialmente

a la experiencia de usuario (UX). Esto significa que nuestro objetivo es lograr que la
percepción del usuario a la hora de navegar por nuestro sitio web sea en todo momento
positiva. De no ser así, el usuario no querrá regresar y no conseguiremos nuestros objetivos
de venta y visibilidad.

Un wireframe se divide en tres componentes: diseño de información, diseño de navegación

y diseño de interfaz.
AP3, EVIDENCIA No 7

Diseño de información

El diseño de información es el área del diseño gráfico que representa la información de

manera efectiva para una comunicación clara. Estos elementos informativos deben estar
ordenados de manera que reflejen los objetivos de la empresa (compra, registro,
descarga...).

Es muy importante realizar previamente un estudio exhaustivo de tu negocio para conseguir

desarrollar el wireframe perfecto que se adapte a tu empresa. Para ello debemos conocer
nuestro público objetivo, la finalidad de nuestro sitio web, etc.

Por ejemplo, si estás creando el wireframe de la portada de tu tienda online, es necesario

que realices una organización de la información que los usuarios podrán encontrar en ella,
como puede ser la disposición de textos o imágenes.

Diseño de navegación

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 de navegar en el sitio.

Este diseño da una vista de manera global, de la ubicación y desplazamiento a través de las
diferentes páginas de un sitio web.

Es decir, gracias al diseño de navegación creamos diferentes caminos que podremos

recorrer para llegar al contenido de nuestra web. Consideramos una web navegable aquella
donde el usuario al entrar pueda acceder de forma intuitiva, y sin usar el buscador, a la
información que esté buscando.

Diseño de interfaz

El diseño de la interfaz incluye seleccionar y ordenar los elementos de la interfaz para

permitir a los usuarios interactuar con la funcionalidad del sistema. El objetivo de este
diseño es facilitar la usabilidad del sitio online.

Este apartado es especialmente importante, ya que si los usuarios no se mueven por la

tienda online con comodidad y de forma fluida, tal vez terminen abandonando nuestro sitio
web y no regresen.

Algunos de los elementos del diseño de interfaces son: botones de acción, campos de texto,
cajas de verificación, botones radiales o menús desplegables.

VENTAJAS

En un primer momento tal vez puedas pensar que realizar un boceto es una pérdida de
tiempo. Puede ser que tengas las ideas tan claras que pienses que no lo necesitas, pero a
AP3, EVIDENCIA No 7

continuación te mostramos una serie de ventajas que te demostrarán que a parte de ser útil,
te ahorrará tiempo y dinero:

 Rápidos de crear: Puedes realizar los wireframes tú mismo, con diferentes

herramientas que te ahorran mucho tiempo. Más adelante te mostraremos
herramientas con las que podrás hacerlo en cuestión de minutos.
 Baratos: Un boceto web tiene un coste muy bajo si tienes los objetivos y las ideas
que quieres transmitir bien fijadas. Además, esto te permite realizar varias versiones
hasta encontrar la mejor para tu tienda online.
 Detectar y corregir los problemas antes del diseño web, lo que ahorra mucho
tiempo y costes. Estos problemas pueden ser de usabilidad o funcionalidades.
 Mejorar la usabilidad web: Cuanto mejor sea la usabilidad de tu web, mejor será
la experiencia de usuario. Puedes hacer test A/B con amigos o conocidos para ver
cómo reaccionan ante el diseño propuesto para tu tienda online. Para ello,
simplemente tienes que realizar 2 versiones diferentes de una misma página y
mostrar a la mitad de tus amigos y conocidos una opción, y a la otra mitad la otra
opción para comprobar cuál de las dos versiones ha funcionado mejor.
 Ahorro de tiempo y dinero: Aunque a priori pueda parecer que con la realización
de un wireframe se está perdiendo tiempo, a la larga es todo lo contrario. Si no
realizas correctamente tu boceto, verás que no obtienes los resultados que necesitas,
por lo que deberás estudiar la estructura de tu web y mejorarla con posterioridad,
con los correspondientes gastos que esto puede conllevar.
 AP3, EVIDENCIA No 7

BOCETO - WIREFRAME
La caja de búsqueda es donde los clientes van
Logo que representa la empresa MULTI
a escribir las palabras que quieren buscar
ARTE

Son pequeños símbolos de

1
> redes sociales que cuando
un usuario hace clic en ellos,
acceden automáticamente a
un mensaje listo para

2> Observamos las

notificaciones, mis favoritos
y el carrito de compras de
todos los productos que se
escogen.
 AP3, EVIDENCIA No 7

3 Botones de: Productos,

donde se muestra la
diversidad de artesanías.

Conclusión
Con el anterior esquema se pretende crear un interesante concepto para aplicar en elImagen
diseño
sobre productos
4
del sitio web requerido ´por el cliente, nos dará una visión mucho más clara de cómo debe
nuevos o que cambiaron su
funcionar la herramienta web que se va aplicar, puesto que muestra el flujo completo y los
imagen.

diferentes caminos que puede tomar el usuario, esto con el fin de mejorar la usabilidad y
facilitar al cliente el entendimiento de la estructura desarrollada para la creación de lay texto de los
Imágenes
5
página web, lo cual también le ayudara a reducir costos de desarrollo del proyecto web. Seque se están
productos
ofreciendo en promoción,
utilizará en la elaboración del proyecto multimedia, un catálogo virtual donde se actualizará
con sus respectivas
constantemente los nuevos productos que se encontraran a la venta en la página web. características y precio.

Se muestra las imágenes de

6
los productos más vendidos
y con mejor calificación por
los clientes.

Espacio para los comentarios de los Logo de los medios de

clientes sobre los productos. pago aceptados.

Bibliografia
7 9
8
Se muestran videos de las Se indican las La caja de chat donde los
https://www.palbin.com/es/blog/p1027-como-crear-un-boceto-web-o-wireframe.html
clientes se pueden comunicar
artesanías que generen recomendaciones que una
impacto sobre los clientes. persona debe seguir el de manera más rápida y en
cuidado de las artesanías. línea, para responder a sus
inquietudes.