TECNOLOGÍA EN ANÁLISIS Y DESARROLLO DE SOFTWARE
GA6-220501096-AA4-EV02 ESTABLECER LOS COMPONENTES FRONTEND DE LA
APLICACIÓN WEB
JHON BENAVIDES MONTENEGRO
(EQUIPO # 6)
AÑO 2024
CENTRO DE FORMACIÓN TURISTICA, GENTE DE MAR Y DE SERVICIO
REGIONAL SAN ANDRES
Ficha 2879725
1
INTRODUCCIÓN
A continuación, este documento contiene prototipos de interfaz del proyecto a desarrollar
cumpliendo con los requerimientos funcionales base como lo son el inicio de sesión,
registro de clientes, compras, categorización de productos; se aclara de que estos
prototipos de interfaz se realizan teniendo en cuenta solamente la perspectiva del cliente
o cualquier persona que pueda acceder a la página web, el diseño de esta página web
cumple con las reglas de usabilidad ya que su uso es muy práctico e intuitivo para el
usuario. se tiene en cuenta los cambios sujetos a la creación de los diseños de interfaz
para esta página.
2
OBJETIVOS
Definir que son los prototipos de interfaz de una aplicación web.
Evidenciar gráficamente los componentes del diseño Frontend de
la aplicación web.
Describir brevemente los diseños Frontend de la aplicación web.
Dejar conclusión de lo aprendido.
¿Qué son los prototipos de interfaz?
Los prototipos de interfaz de una aplicación web son representaciones visuales,
generalmente simplificadas, de cómo se verá y funcionará la interfaz de usuario de una
aplicación web. Estos prototipos pueden ser tan simples como un boceto en papel o tan
complejos como un diseño interactivo creado con herramientas especializadas.
¿Para qué se utilizan?
1. Visualizar ideas y conceptos:
Ayudan a plasmar cómo se verá y comportará la aplicación.
Sirven para alinear expectativas entre diseñadores, desarrolladores, y
clientes.
2. Planificar la estructura y navegación:
Facilitan la definición de la arquitectura de información.
Permiten organizar las secciones, menús, y flujos de navegación.
3. Probar la experiencia del usuario (UX):
Detectan problemas de usabilidad y flujo antes de implementar el
código.
Permiten realizar ajustes tempranos, lo que ahorra tiempo y costos.
4. Comunicar el diseño a los desarrolladores:
Actúan como una guía visual para los desarrolladores.
Reducen la ambigüedad sobre cómo deben lucir y comportarse los
elementos.
3
5. Validar con stakeholders o usuarios finales:
Permiten obtener retroalimentación temprana de clientes o usuarios
potenciales.
Aseguran que la interfaz cumple con los objetivos del negocio y las
necesidades del usuario.
A continuación, se procede a mostrar las respectivas capturas de pantalla referentes a los
prototipos de interfaz del
diseño de la página web.
1. aquí se logra ver los
elementos básicos que
tiene una página como lo
son el ícono de la
compañía, n encabezado
conformado por una casilla
de búsqueda, menú
principal uno o varios
botones, una imagen de
presentación y una
pequeña introducción del
contenido a mostrar.
4
2. esta es parte de la
interfaz de inicio de la
página web, aquí se
muestran los productos,
descripción del producto y
su precio (sujeta a
cambios).
3. para finalizar la interfaz
de la pagina inicial
tenemos el “footer” o pie de página; allí se pueden encontrar enlaces a otros sitios,
certificados de la aplicación web o continuación a otras páginas de dicha aplicación.
4. en esta interfaz grafica podemos ver una parte de las categorías de los productos que se
van a comercializar en la pagina en este caso “dulcería nacional”, la interfaz sigue
contando con la misma barra de navegación, pero esta vez tiene integrados los productos
5
con su nombre y una descripción más amplia además de una credencial al lado izquierdo
con información relevante para el usuario (sujeta a cambios).
5. esta interfaz es la sección del carrito de compras; el cliente podrá seleccionar los
productos al gusto para llevarlos al carrito, podrá ver una pequeña descripción y el precio
antes de gestionar el producto en el carrito.
6. esta interfaz grafica nos muestra e formulario de login, es fácil e intuitivo de manejar
(sujeto a cambios).
6
7. y por último aquí se puede presenciar el formulario donde el cliente podrá registrarse
en la página, contiene los campos básicos que solicitan los datos principales del usuario
para completar el registro.
CONCLUSIÓN
Los prototipos creados no solo cumplen con los requerimientos funcionales establecidos,
sino que también proporcionan una base sólida para identificar y resolver problemas de
usabilidad antes de la implementación. Estos diseños reflejan un enfoque centrado en el
usuario, priorizando la simplicidad, la accesibilidad y la efectividad en cada funcionalidad.
Como resultado, el proyecto se encuentra mejor preparado para satisfacer las
necesidades tanto del negocio como de los usuarios finales, asegurando un producto final
de calidad. Se debe considerar de que el proyecto continúa en construcción y estas
interfaces pueden estar sujetas a cambios con tal de mejorar su usabilidad para el usuario.
