Modulo 3:

Interfaz Web

a. Módulo: 3
b. Asignatura: Interfaz Web
c. RA: Analiza la estructura de
Wireframes y sus herramientas
de uso, señalando su
importancia y ventajas para el
desarrollo de proyectos, en
diferentes plataformas
digitales. .
d. Docente Online: MARCELO ALFREDO SOLÍS
RODRÍGUEZ
e. Fecha de entrega: 29-09-2022
f. Integrantes
Carla Formantel Lincoman
Nicole Vera Villagrán

1
Ítem 1: En base a la información de contexto, debe discriminar las ventajas y desventajas de los
distintos tipos de Wireframes. Para ello, debe desarrollar las siguientes acciones:

1. Identifique los errores aplicados en el Wireframe de baja fidelidad en base a la información

proporcionada en el contexto. Justifique su respuesta en un mínimo de 200 palabras e
incorpore imágenes cuando corresponda.

En el Wireframe de baja fidelidad podemos observar que el error más notorio sería en la
franja de arriba, específicamente el logo, menú y las aplicaciones que aparecen, como se
puede demostrar en la siguiente imagen:

No se puede usar imágenes ni tipografías personalizadas, lo que se quiere conseguir con el

Wireframe de baja fidelidad es que sea lo más neutral posible y es por esto que se debe
evitar el uso de imágenes, iconos y cualquier elemento visual.
2. Debe establecer y discriminar las ventajas y desventajas en el wireframe de baja fidelidad
en el Wireframe aplicado en el contexto. Justifique su respuesta en un mínimo de 200
palabras e incorpore imágenes cuando corresponda

Ventajas de Wireframes de baja fidelidad.

▪ Costos de desarrollo muy bajos, normalmente este tipo de Wireframe no tiene costos, ya
que se puede hacer en una hoja de papel de forma muy facil.
▪ De rápida creación, este Wireframe tiene la cualidad de una creación rápida, su
estructura se compone con lo necesario para entender el wireframe.
Desventajas de Wireframes de baja fidelidad.
▪ Poco detalle, se concentra más en la estructura general, en el wireframe de baja
fidelidad se puede observar el poco desarrollo que se logra con esta interfaz.
▪ No se pueden testear, al ser un Wireframe de baja fidelidad y al no contar con suficiente
información esta no se puede probar.

2
 3. Debe Identificar los errores aplicados en el Wireframe de alta fidelidad en base a la
información proporcionada en el contexto. Justifique su respuesta en un mínimo de 200
palabras e incorpore imágenes cuando corresponda.

Los Wireframes de alta fidelidad se caracterizan por ser más detallados y la representación que hace
siempre estará cerca del producto final. En este Wireframe de alta fidelidad el error que podemos
apreciar a primera vista es que, la representación gráfica, ya es un diseño final. Podemos ver que ya
tiene imágenes, logo, títulos, tipografías y colores.

4. Debe establecer las ventajas y desventajas en el Wireframe de alta fidelidad en el Wireframe

aplicado en el contexto. Justifique su respuesta en un mínimo de 200 palabras e incorpore imágenes
cuando corresponda.

Ventajas de Wireframes de alta fidelidad.

▪ Se pueden utilizar para demostraciones y como herramienta de venta, el Wireframe de alta

fidelidad que está bien logrado se puede usar para demostraciones o como ventas.

▪ Se pueden utilizar para testeos, este Wireframe de alta fidelidad se puede probar gracias a que
tiene la suficiente información para testearlo.

Desventajas de Wireframes de alta fidelidad.

▪ Altos costos de desarrollo, al ser un Wireframe de alta fidelidad, este tiene más desarrollo y utiliza
una aplicación especializada para hacer este tipo de Wireframe.

▪ Se necesita mucho más tiempo en implementación, este Wireframe al ser de alta fidelidad,
necesita más funciones y tiempo para realizarlo, dificulta mayormente el hacer cambios.

Ítem 2: En base a la información de contexto, debe desarrollar y ordenar las distintas etapas en el
uso de Wireframes, para ello, ejecute las siguientes acciones:

1. Desarrolle la etapa de Inventario de contenido en base a la información proporcionada en

el contexto, ordenándola con respecto a las distintas etapas en el uso de Wireframes.
Justifique su respuesta en un mínimo de 200 palabras e incorpore imágenes cuando
corresponda.

3
Se realiza el inventario de contenidos basándonos en el contenida de la página Muevle.cl

4
2. Desarrolle la etapa de Jerarquía visual en base a la información proporcionada en el
contexto, ordenándola con respecto a las distintas etapas en el uso de Wireframes.
Justifique su respuesta en un mínimo de 200 palabras e incorpore imágenes cuando
corresponda.

Menus Tabs

Muebles/decoracion/Infantil/
cocina/ Muebles 2x

Link buscador
Llamada de accion
link Carrito
atencion Whatsapp
Login

productos a precio Link Colaboracion

Ofertas del dia Ofertasx2
normal Spotify

Footer

La jerarquía de la página se maneja de forma horizontal y sencilla, el presenta un menú Tabs

donde se ve en toda instancia de navegación el menú con las clasificaciones y etiquetado de los
productos que la empresa vende, al hacer clic en cualquiera de las opciones nos muestra las
mismas promociones que se ven en un nivel más bajo de la jerarquía, donde se ordenan de
izquierda a derecha según prioridad de visualización.

También podemos ver los links del buscador, el carrito y el acceso a la conversación por
WhatsApp en un nivel más alto que las promociones puesto que están disponibles de igual
manera en todo momento para que el usuario pueda acceder y que le es útil en todo el proceso
de navegación.

Finalmente podemos ver en la última escala y ligado con todos los procesos anteriores el Footer
que nos da accesos directos a las políticas de la empresa, información muy resumida de la
empresa y las redes sociales, está ligado a todo lo anterior pues es lo ultimo que ve el cliente y
esta presente en todas las etapas del sitio web.

5
3. Desarrolle la etapa de Wireframe de contenidos en base a la información proporcionada en
el contexto, ordenándola con respecto a las distintas etapas en el uso de Wireframes.
Justifique su respuesta en un mínimo de 200 palabras e incorpore imágenes cuando
corresponda.

6
Se entrega wireframe con contenido que la pagina web debe llevar ordenada jerárquicamente , al
inicio de nuestro wireframe podemos visualizar logo, carro de compras y opción de creación o inicio
de sesión, siguiente el menú tabs con las secciones o categorizaciones disponibles en la pagina.

Se proporciona una zona para los breadcrubms y que el usuario de la pagina pueda identificarla
navegación que ha realizado por el sitio web.

Luego el sitio se divide en los tipos de ofertas que podemos ver, las primeras son las inmediatas y
de duración limitada, lo que determinamos en el wireframe como Ofertas Diarias!.

Las siguientes secciones son las 2x ( ofertas de dos productos al precio de uno), un banner donde se
pueden deslizar más fotos de productos pero pensados en ver el productos ambientados en un
sector de la casa.

De la misma manera tenemos los productos que se encuentran a precio normal y un link a una
colaboración de playlist con Spotify.

Finalmente disponemos de un Footer que entrega resumen de la información de localización física

y virtual de la empresa y acceso directo a sus políticas.

7
4. Desarrolle la etapa de Wireframe de estructura (desktop y mobile) en base a la información
proporcionada en el contexto, ordenándola con respecto a las distintas etapas en el uso de
Wireframes. Justifique su respuesta en un mínimo de 200 palabras e incorpore imágenes
cuando corresponda.

8
En la imagen uno podemos ver un wireframe desktop que señaliza en verde los ítem a interactuar o
que llevaran a otra pantalla principalmente.

El primero que indica logo se verá el logo de la empresa, pero al hacer clic sin importar en que parte
de la navegación se encuentre el usuario le permitirá volver a la pagina principal.

También nos encontramos con un menú de hamburguesa, que nos resumen el menú Tab que vemos
en la versión desktop.

Y hacia abajo vemos las ofertas jerarquizadas según la importancia en que se desea que el cliente
las vea.

9
Item 3: En base a la información de contexto, analice el desarrollo de Wireframes de la respuesta
anterior, su estructura y herramientas de uso, señalando su importancia y ventajas para el
desarrollo de proyectos, cumpliendo las siguientes acciones:

1. Desarrolle Wireframes en baja y alta fidelidad para 3 pantallas del sitio web en versión desktop
y mobile. Justifique su respuesta analizando sus propuestas y estructura en un mínimo de 200
palabras e incorpore imágenes cuando corresponda.

3 pantallas Desktop:

10
11
Wireframes Mobile

12
13
En los wireframes expuestos encontramos la siguiente justificación:

Tres diseños Desktop:

Se puede observar en los diseños la jerarquización según su clasificación de importancia, podemos

ver que en los tres diseños se mantiene fijo el logo de la empresa que a la vez servirá de link para
poder volver al inicio de la página desde cualquier punto de ella, el buscador, el ingreso al portal de
usuario.

Y en el sector inferior podemos mantener fija el Footer que nos entrega la información de
localización física y digital de la empresa y las políticas con que trabajan.

Para generar los diseños analizamos las similitudes de otras páginas del rubro similar a la de la
empresa para que sea más familiar y de fácil uso para el cliente.

Al comparar ambos tipos de wireframes ( de alta y baja fidelidad) podemos concluir que a pesar que
conlleva más trabajo y tiempo de diseño, el wireframe de alta fidelidad entregara una visión más
certera al cliente del diseño final de su página web.

Tres Diseños Mobile:

SE puede observar en la jerarquización mobile que se mantienen los criterios descritos para los
wireframes desktop.

14
2. Analice la propuesta y estructura de Wireframes para 1 pantalla del sitio web, descomponiendo
y explicando sus elementos. Justifique su respuesta en un mínimo de 200 palabras e incorpore
imágenes cuando corresponda.

Este Wireframe se compone de:

Logo: Sección donde ira el logo de lempres y a lavez servirá de link para volver al inicio desde
cualquier pantalla del sitio web.

Búsqueda: Sección para que el usuario pueda realizar búsquedas especificas de muebles sin que
deba pasar por algún menú.

Carro: zona de la pagina donde el cliente vera en resumen los productos que ha seleccionado para
su posible compra.

15
Login/ inicio de sesión: link para que usuarios registrados vean sus pedidos en curso, pedidos
anteriores y modifiquen su información de entrega, envío o facturación. A la vez sirve para llegar al
registro de nuevos clientes.

Menu/ TAB: organiza las categorías que se le han entregado a la página, ordenadas de izquierda a
derecha según jerarquía.

Titulo ofertas diarias: jerárquicamente más grande que el resto del texto para llamar la atención
del cliente sobre lo que se quiere vender.

Fotos Ofertas diarias: muestra los productos que se ofertan de manera limitada.

Fotos productos 2x1: muestra los productos que se ofrecen dos por el valor de uno.

Banner productos: muestra los productos ambientados con decoración en los diferentes lugares
del hogar.

Fotos productos: muestra los productos que no están en oferta ( por lo mismo tiene esta ubicación
inferior en la pagina)

Link Spotify: es un banner que redirige al cliente a una playlist de música promocionada por la
pagina.

Footer: se encuentra anclado al final de todas las vistas de la pagina y nos entrega acceso a la
información de localización de la empresa, redes sociales, políticas de la empresa.

3. Analice y desarrolle un wireflow o flujo de Wireframes de las 3 pantallas en versión desktop y

mobile. Justifique su respuesta explicando todo el flujo en un mínimo de 200 palabras e
incorpore imágenes cuando corresponda.

16
17
4.

18
19
en los Wireflow presentados vemos los siguientes movimientos de la página:

Primer Wireflow Mobile y Desktop: despliegue del menú hamburguesa y de los detalles de la
oferta.

Segundo Wireflow: Selección de producto en portada principal que nos lleva al detalle del
producto.

Tercer Wireflow: flujo desde el inicio al portal de ingreso de clientes.

20
 4.-Analice el uso de la herramienta digital utilizada, cuáles fueron los criterios de selección y la
experiencia de los integrantes del grupo. Evidenciar con capturas de pantalla el proceso de uso.
Justifique su respuesta en un mínimo de 200 palabras

La herramienta digital utilizada es una página llamada Lucid.app, de fácil navegación, permite
el trabajo en conjunto desde diferentes PC.
Si bien contiene plantillas de fácil adaptación, no conlleva mayor dificultad crear una desde 0.
Se eligió porque se trabaja de manera online sin tener que instalar en el pc, es de paga, sin
embargo, te permite trabajar una semana de manera gratuita.

Ítem 4:

De acuerdo con el trabajo previamente realizado, debe analizar de manera grupal el proceso de
planificación, construcción y ejecución. Responda de manera ordenada y coherente los siguientes
aspectos de su experiencia grupal, identifique al autor o autores de la respuesta identificando
claramente sus aportes específicos en el texto resultante.

1. Cuando se desarrolló el análisis de la problemática y el contexto en el cual se insertaba el

proyecto, al momento de realizar los prototipos ¿qué decisiones tomaron para realizar los
Wireframes?, es decir, ¿qué aspectos tuvieron en cuenta para ejecutar las acciones
posteriores? Expliquen en un mínimo de 200 palabras el proceso llevado a cabo.

Lo primero que analizamos fueron nuestras propias experiencias como usuarios compradores en
otras páginas, para determinar qué aspectos facilitarían y hacen más atractivos el proceso de
compra.

Luego estudiamos páginas de la competencia para ver aspectos en común y generar un Wireframe
más familiar para el usuario.

De esta manera generamos nuestros prototipos considerando el análisis de los aspectos

anteriormente detallados.

2. Cuando comenzaron a planificar los Wireframes, ¿qué aspectos consideraron y cómo influyó
en la creación de éstos? Por ejemplo, ¿por qué decidieron hacerlo simple o complejo, si
incluyeron interacción o solo estructura, por qué escogieron ciertas pantallas o menús por
sobre otros y cómo llevaron a cabo la jerarquización de los contenidos? Explique en mínimo de
200 palabras el proceso llevado a cabo.

La jerarquización se eligió tomando en cuenta lo primero que busca el cliente y lo que la empresa
desea mostrar al cliente, es por esto que en menú podemos observar primero la opción ofertas, y
luego para facilitar la navegabilidad una segmentación por sectores de las casas (según los muebles
que las personas busquen).

Escogimos un diseño que tenga llamados de interacción como el acceso directo a las conversaciones
de WhatsApp, debido que generalmente los muebles no son bienes que se adquieran con
regularidad y el cliente debe sentirse seguro y confiado al hacer elección de compra.

3. Evalúen en qué aspectos influyeron en el uso de Wireframes de baja y alta fidelidad en el

proceso de construcción y/o acercamiento al resultado final ¿Qué beneficios o desventajas

21
 concretas pudieron apreciar? ¿cómo lo resolvieron? Explique en mínimo de 200 palabras el
proceso llevado a cabo

Consideramos aspectos como que es lo que el dueño de la empresa quiere mostrar a los clientes y
lo relacionamos con lo que el cliente busca ver en una confiable página web de venta de muebles,
por lo que iniciamos creando los Wireframes de baja fidelidad para identificar el contenido a
reproducir en el portal web.

Basándonos en eso y en información tipo que logramos encontrar en otros portales web de similar
índole logramos esbozar nuestros wireframes de alta fidelidad.

Apreciando lo anterior como una ventaja para que el cliente que visite el portal web se sienta
cómodo e interprete de manera fácil la página.

Una desventaja encontrada es que como miembros del equipo hemos tenido diferentes
experiencias de compra por lo que nuestras aportaciones sobre lo que debe llevar una página en
algunos son distintas, lo solucionamos revisando otros portales que nos guíen a que es lo más común
en este tipo de diseño.

4. ¿Qué elementos incorporaron para que el producto final, tanto en Mobile como desktop,
lograra entregar al usuario una buena experiencia y quiera volver a visitar su producto digital?
Explique en mínimo de 200 palabras el proceso llevado a cabo

El primer elemento es el fácil acceso a las ofertas de interés para el cliente ya que muchas veces es
el principal motivo para hacer la búsqueda en la web.

De la misma manera agregar el botón de conversación a través de WhatsApp el cliente tiene de

manera más accesible la información a posibles dudas que surjan en el proceso.

Otra opción que hace mas atractiva la visita a esta web es que posicionamos un banner que permite
deslizarse entre diferentes imágenes que muestran los muebles a vender en diferentes ambientes
ya de una casa, esto le expone al cliente como se vería el producto en su hogar o le daría ideas de
como decorado en su casa.

22