Presentacion Juan Felipe Perafan
INTRODUCCION A LA INTERFAZ DE USUARIO
Índice
FASE 1.
FASE 2.
FASE 3.
FASE 4
FASE 5.
FASE 1.
Fase 1. Definición de la aplicación
Nombre de la aplicación: UniTask Cauca.
Tipo de aplicación: Productividad / Gestión Académica.
* Tipo de Interfaz: Móvil (App).
Usuario objetivo: Estudiantes y docentes de la Institución Universitaria Colegio Mayor del Cauca.
Qué problema resuelve: Ayuda a los estudiantes a centralizar sus fechas de entrega, horarios de clase y recordatorios de exámenes, evitando el olvido de tareas y mejorando la organización del tiempo académico.
Objetivos
FASE 2
2.1
2.2
2.3
Encabezado: Logo de "UniTask" (un icono de un check-list estilizado) el nombre de la app.
Campos de entrada: Cuadros de texto redondeados para "Correo Institucional" y "Contraseña".
Acción: Botón grande en color azul con texto blanco que dice "Iniciar sesión".
Enlace: Texto pequeño debajo: "¿No tienes cuenta? Crear cuenta".
Navegación: Una barra inferior (Tab Bar) con iconos de: Inicio, Calendario, Tareas y Perfil.
* Contenido Principal: Un saludo personalizado: "¡Hola, Juan! Tienes 3 entregas para hoy". Debajo, tarjetas con las materias y horas de clase.
Campos: * Nombre Completo.
* Correo electrónico (@unimayor.edu.co).
.Contraseña.
.Confirmar contraseña.
Acción: Botón amarillo con letras negras que dice "Crear cuenta".
Diseño de interfaces
Para visualizar estas pantallas, imagina un diseño limpio con los colores institucionales (azul y amarillo).
03
FASE
Escribe un titular genial
Fase 3. Principios de diseño visual
Equilibrio: Se utiliza una disposición simétrica en el login para transmitir orden.
Contraste: El botón de "Iniciar sesión" resalta sobre el fondo claro para atraer la atención del usuario.
Alineación: Todos los campos de texto están alineados a la izquierda para facilitar la lectura.
Proximidad: Las etiquetas de los campos están cerca de sus respectivos cuadros de texto para que el usuario entienda su relación. Repetición: Se usa la misma tipografía y estilo de botones en las tres pantallas para dar coherencia.
FASE 4.
Leyes de Gestalt
Principios de diseño
- Proximidad y continuidad para una navegación intuitiva
- Semejanza y contraste para claridad visual
- Uso de iconos universales para mejorar la experiencia del usuario
Escribe un titular genial
Fase 5. Experiencia de usuario
¿La interfaz es fácil de entender? Sí, utiliza un lenguaje visual minimalista y estándar de aplicaciones móviles modernas.
* ¿El usuario sabe qué hacer en cada pantalla? Sí, cada pantalla tiene un objetivo único y claro (entrar, registrarse o ver tareas).
* ¿Los botones principales son visibles? Sí, se utiliza el color y el tamaño para que los botones de acción ("Crear cuenta", "Iniciar sesión") sean los elementos más llamativos.
+ INFO
Muchas Gracias
Juan Felipe Perafan
TRUQUITO
La interactividad es la pieza clave para captar el interés y la atención de tu audiencia. Un genially es interactivo porque tu público explora y se relaciona con él.
Presentacion Juan Felipe Perafan
Juan Perafan
Created on March 18, 2026
Start designing with a free template
Discover more than 1500 professional designs like these:
View
Memphis Presentation
View
Higher Education Presentation
View
Psychedelic Presentation
View
Harmony Higher Education Thesis
View
Vaporwave presentation
View
Geniaflix Presentation
View
Vintage Mosaic Presentation
Explore all templates
Transcript
Presentacion Juan Felipe Perafan
INTRODUCCION A LA INTERFAZ DE USUARIO
Índice
FASE 1.
FASE 2.
FASE 3.
FASE 4
FASE 5.
FASE 1.
Fase 1. Definición de la aplicación Nombre de la aplicación: UniTask Cauca. Tipo de aplicación: Productividad / Gestión Académica. * Tipo de Interfaz: Móvil (App). Usuario objetivo: Estudiantes y docentes de la Institución Universitaria Colegio Mayor del Cauca. Qué problema resuelve: Ayuda a los estudiantes a centralizar sus fechas de entrega, horarios de clase y recordatorios de exámenes, evitando el olvido de tareas y mejorando la organización del tiempo académico.
Objetivos
FASE 2
2.1
2.2
2.3
Encabezado: Logo de "UniTask" (un icono de un check-list estilizado) el nombre de la app. Campos de entrada: Cuadros de texto redondeados para "Correo Institucional" y "Contraseña". Acción: Botón grande en color azul con texto blanco que dice "Iniciar sesión". Enlace: Texto pequeño debajo: "¿No tienes cuenta? Crear cuenta".
Navegación: Una barra inferior (Tab Bar) con iconos de: Inicio, Calendario, Tareas y Perfil. * Contenido Principal: Un saludo personalizado: "¡Hola, Juan! Tienes 3 entregas para hoy". Debajo, tarjetas con las materias y horas de clase.
Campos: * Nombre Completo. * Correo electrónico (@unimayor.edu.co). .Contraseña. .Confirmar contraseña. Acción: Botón amarillo con letras negras que dice "Crear cuenta".
Diseño de interfaces Para visualizar estas pantallas, imagina un diseño limpio con los colores institucionales (azul y amarillo).
03
FASE
Escribe un titular genial
Fase 3. Principios de diseño visual Equilibrio: Se utiliza una disposición simétrica en el login para transmitir orden. Contraste: El botón de "Iniciar sesión" resalta sobre el fondo claro para atraer la atención del usuario. Alineación: Todos los campos de texto están alineados a la izquierda para facilitar la lectura.
Proximidad: Las etiquetas de los campos están cerca de sus respectivos cuadros de texto para que el usuario entienda su relación. Repetición: Se usa la misma tipografía y estilo de botones en las tres pantallas para dar coherencia.
FASE 4.
Leyes de Gestalt
Principios de diseño
Escribe un titular genial
Fase 5. Experiencia de usuario ¿La interfaz es fácil de entender? Sí, utiliza un lenguaje visual minimalista y estándar de aplicaciones móviles modernas. * ¿El usuario sabe qué hacer en cada pantalla? Sí, cada pantalla tiene un objetivo único y claro (entrar, registrarse o ver tareas). * ¿Los botones principales son visibles? Sí, se utiliza el color y el tamaño para que los botones de acción ("Crear cuenta", "Iniciar sesión") sean los elementos más llamativos.
+ INFO
Muchas Gracias
Juan Felipe Perafan
TRUQUITO
La interactividad es la pieza clave para captar el interés y la atención de tu audiencia. Un genially es interactivo porque tu público explora y se relaciona con él.