Diseño de la interfaz de usuario.
GA6-220501112-AA2-EV01
Wiliam Jhovany Sigindioy Miticanoy
Programación de Aplicaciones para Dispositivos Móviles
Ficha: 3070092
Servicio Nacional de Aprendizaje SENA
Junio 2025
Contenido
1. Introducción................................................................................................................................ 3
2. Herramienta utilizada ................................................................................................................. 3
3. Colores utilizados en el diseño ................................................................................................... 3
4. Enlace Proyecto Figma ................................................................................................................ 3
5. Descripción de las pantallas ....................................................................................................... 4
5.1 Pantalla de Inicio de Sesión .................................................................................................... 4
5.2 Pantalla de Contactos ............................................................................................................. 5
5.3 Pantalla de Recursos Técnicos ................................................................................................ 6
5.4 Pantalla Crear Usuario ............................................................................................................ 7
5.5 Pantalla Crear Contacto .......................................................................................................... 8
5.6 Pantalla Crear Recurso ........................................................................................................... 9
5.7 Menú Lateral de Navegación ................................................................................................ 10
6. Flujo de navegación .................................................................................................................. 10
1. Introducción
Este documento presenta el diseño de la interfaz de usuario de la aplicación móvil ConectaTech,
desarrollada como parte del proceso de formación en programación de aplicaciones móviles. El
objetivo de esta interfaz es proporcionar una experiencia de usuario clara, ágil e intuitiva para
técnicos de campo y supervisores, permitiendo el acceso eficiente a contactos internos, recursos
técnicos y funciones administrativas.
A través del prototipo visual y la descripción detallada de cada pantalla, se busca evidenciar la
coherencia del diseño con los requerimientos funcionales del sistema, así como mostrar el flujo de
navegación y la lógica de interacción de los usuarios. El diseño se elaboró siguiendo principios de
usabilidad y coherencia visual, utilizando una paleta de colores profesional y una arquitectura de
navegación tipo menú lateral (drawer).
2. Herramienta utilizada
Para el diseño del prototipo se utilizó la herramienta de prototipado visual Figma, que permite
construir interfaces simulando la interacción entre pantallas, acorde a los requerimientos
previamente definidos. Las imágenes que se presentan corresponden a capturas del prototipo
funcional desarrollado.
3. Colores utilizados en el diseño
La aplicación ConectaTech utiliza una paleta de colores coherente y moderna, pensada para ofrecer
una experiencia visual clara, profesional y accesible:
Nombre del color Código HEX Uso principal
Azul Primario Claro #4FC3F7 Encabezados, iconos, botones destacados
Azul Secundario (Accent) #10A4E7 Botones principales, resaltado de acciones
Blanco #FFFFFF Fondo de pantallas y tarjetas
Texto Oscuro #333333 Títulos, contenido principal
Texto Secundario #999999 Indicaciones, etiquetas y descripciones
Borde de entrada #E0E0E0 Líneas divisoras y campos de formulario
Rojo de error #E53E3E Mensajes de error
Verde de éxito #4ADE80 Confirmaciones, operaciones exitosas
4. Enlace Proyecto Figma
[Link]
386&t=pBfuk7s2PQwcdBR9-0
5. Descripción de las pantallas
5.1 Pantalla de Inicio de Sesión
Descripción:
Pantalla inicial que permite al usuario autenticarse mediante correo electrónico y contraseña.
Elementos:
• Icono de usuario
• Campos para ingresar correo y contraseña
• Botón “Continuar”
5.2 Pantalla de Contactos
Descripción:
Muestra el listado de técnicos con sus respectivos datos. Permite la búsqueda por nombre o placa
del vehículo asignado.
Elementos:
• Buscador
• Tarjetas con nombre, jefe, teléfono, vehículo
• Iconos para llamada o WhatsApp
5.3 Pantalla de Recursos Técnicos
Descripción:
Lista de recursos técnicos disponibles (documentos o videos). Cada recurso muestra título, autor,
fecha y tipo.
Elementos:
• Buscador
• Tarjetas de recurso
• Botón “Abrir recurso”
5.4 Pantalla Crear Usuario
Descripción:
Formulario de creación de nuevos usuarios del sistema. Uso exclusivo de supervisores.
Elementos:
• Campos: nombre, apellido, correo, contraseña
• Botón “Crear Usuario”
5.5 Pantalla Crear Contacto
Descripción:
Formulario para registrar nuevos técnicos con datos personales, jerárquicos y de vehículo.
Elementos:
• Campos: nombre, cargo, jefe directo, celular
• Campos de información de vehículo
• Botón “Guardar Contacto”
5.6 Pantalla Crear Recurso
Descripción:
Formulario para crear un nuevo recurso técnico (documento o video), incluyendo título,
descripción y enlace.
Elementos:
• Campos: título, detalle, tipo, enlace
• Botón “Guardar Recurso”
5.7 Menú Lateral de Navegación
Descripción:
Menú lateral desplegable que permite navegar entre secciones. Visible en toda la app.
Elementos:
• Nombre y correo del usuario
• Enlaces: Contactos, Recursos Técnicos, Crear Usuario, Crear Contacto, Crear Recurso
Técnico
• Botón “Cerrar sesión”
6. Flujo de navegación
El diseño está basado en una navegación tipo drawer (menú lateral), que permite al usuario acceder
rápidamente a cualquier sección sin salir de la aplicación. La navegación inicia en la pantalla de login
y se redirige a la pantalla de contactos una vez autenticado.
