REGIONAL SANTANDER

CENTRO AGROTURISTICO
TECNOGIAS DE LA INFORMACION

AP3-AA7-EV7
ELABORACIÓN DE
BOCETOS DE INTERFAZ PROYECTO

Eduardo Enciso
Tecnólogo virtual
Producción Multimedia
Ficha 2282353
2021
 *TENTATIVOS
PALETA
INTRODUCCION PRINCIPAL*
En este trabajo haremos la bocetación de la interfaz de
nuestro producto multimedia teniendo en cuenta las
ideas que recogimos con nuestra anterior investigación PALETA
de referencias y moodboard mediante herramientas
digitales que nos faciliten el desarrollo de las mismas.
SECUNDARIA*
Para empezar a construir esta página web debemos
tener en cuenta los elementos que desarrollan la
marca, como pilares (Historia, Tradición Y Familia)
público objetivo y el objetivo de esta página web, que
es la conversión de clientes y venta del producto de la
marca.

Con esto en cuenta construiremos una bocetación de

interfaz que mantenga los elementos que evoquen los
pilares tanto en paleta de colores, distribución de
elementos y diseño, manteniendo un sistema de
navegación y arquitectura simple para que sea
amigable con el usuario conduciéndolo a una
experiencia que desemboque en la venta del producto.

Paleta de colores Paleta de colores Paleta de colores Paleta de colores

Claros* Apagados* Intensos* Oscuros*
 Página
*REALIZADO NUESTRO MAPA
Web
DE NAVEGACIÓN ES MÁS
SENCILLO EMPEZAR A
CONSTRUIR Y BOCETAR
Home NUESTRA PÁGINA WEB TANTO
Inicio
Nuestra EN PAPEL Y LÁPIZ COMO EN
Bienvenida Historia WIREFRAME
Enganche/ Quiero
propuesta de
valor Generar Empatia Probar
Conexión y Galería
Diferenciación Confianza Señalar Puntos
Pequeña Presentación de dolor Enlace a Redes
reseña Nuestra
Biografía ¿Porque Foto galería
Captación de Refuerzo de comprar aqui? Villa
Video galeria
subcritores propuesta de Ofrecer solución
Testimonios
Pop-up / valor Ecommerce Enlazar otros Contacto
newsletter Misión Productos proyectos
Curiosidades Promociones
Testimonios
Misión
Contacto y Blog
Testimonios Socios vinculos de
call to action enlace
Productores Expandir la
Subscribe/ asociados Redes experiencia
newsletter Sociales
Enlaces de venta Enlace a
Cupón de Whatsapp redes
descuento Correos Blog escrito
Enlace directo institucionales
Podcast
Subscripción
directa Interactivos
Testimonios
BOCETOS DE LA
INTEFAZ DEL
PROYECTO
(PANTALLAS)

Esta es la primera vista en

wireframe del diseño de la
página web del cliente (EL
NECTAR De la Villa)
basándonos en mapa de
navegación se esbozó este
primer acercamiento al
diseño de páginas, sub
páginas y elementos que
tendrá el proyecto.
 ¡TEN ENCUENTA!

como es la primera aproximación del

desarrollo del proyecto tener en cuenta que
los rectángulos vacíos representan texto, los
bonotes y formas con una X indican
audiovisual (imagen/video) aparte de los
títulos y los botones específicos
 Home
Inicio

Se diseña así para agrupar cada

subpágina y facilitar la navegabilidad de
todo el contenido encontrando en primer
lugar los botones de las 6 subpáginas
principales de información y acción
específica, seguido de una galería/tablero
de anuncios, donde a medida que se
desciende se encuentren apartados de
historia destacados, reseñas, ubicación,
galería, enlace a un blog finalizando con
nuestra información de contacto
 Nuestra
Historia
Esta subpágina se enfocará
en información del cliente un
video institucional sobre la
historia del cliente,
especificando con texto e
imagen a medida que se baja,
junto a material que apoye
este apartado
Nuestra
Villa
Esta subpágina se enfocará
en el desarrollo y
visualización del lugar de
origen del emprendimiento
con una galería y reseña de
lugares de interés, productos
locales que complementen el
producto del cliente (alianzas)
Quiero
Probar

Esta subpágina se enfocará

en venta de producto, aquí se
verán los productos
descripción y solicitud de
venta para que se ingresen al
carrito de compras.

Linkeada con las redes sociales de la marca se busca

Galería tener un espacio de arte digital fotos videos y demás en
una galería de fácil acceso que se despliegue a la
selección.
 Blog

Esta subpágina se enfocará

en el vínculo con un blog de
autor del cliente para generar
contenido que se linkee con
la página web en busca de
transito.

Contacto

Aquí especificamos ubicación

y contacto como información
general/administrativa.
Conclusión
Ya con una hoja de ruta se
optimizara el proceso de
desarrollo de la pagina web y se
podra evaluar tempranamente lo
amigable y atractivo que pueda
llegar a ser, un proceso que nos
facilita y nos lleva un paso mas
cerca a su creacion, ya que desde
un wireframe se puede dejar la
platilla para el desarrollo de al
app o pagina web.
Bibliografía
SENA. (2021). MATERIAL DE FORMACIÓN: SISTEMAS DE
NAVEGACIÓN MULTIMEDIA
https://sena.territorio.la/content/index.php/institucion/Titulada/in
stitution/SENA/Tecnologia/228101/Contenido/OVA/AP3/Sistemas
_navegacion_multimedia/docs/material-formacion-sistemas-de-
navegacion.pdf
SENA (2021). MATERIAL COMPLEMENTARIO
https://webdesdecero.com/wp-
content/uploads/2015/03/Mockflow.png
COMO DISEÑAR UNA PAGINA WEB - ADOBE XD|PASO A PASO
(2019)
https://www.youtube.com/watch?v=ZopuGotHk7k&t=304s