18-11-2024
1
Contenido
Introducción
Objetivo del Informe
Descripción General del Proyecto
Alcance del Documento
Pantalla de Perfil del Usuario
Pantalla de Estadísticas de Rendimiento del Usuario
Pantalla de Invitaciones y Valoración de Equipos
Pantalla de Inicio y Registro
Pantalla de Menú Principal
mockups
INTEGRANTES:
Carlos Guzmán
Oyarzun
Daniel González
Chávez
Rodrigo Berrios
Castillo
2
Introducción
Objetivo del Informe
El propósito de este informe es presentar los mockups desarrollados para la
aplicación FlashMatch, una plataforma digital diseñada para facilitar la organización de
partidos de fútbol amateur. A través de estos diseños visuales, se busca brindar una
representación clara de las interfaces clave y el flujo de usuario, estableciendo un
estándar de usabilidad y estética que guiará las etapas de desarrollo e implementación.
Descripción General del Proyecto
FlashMatch se enfoca en conectar a jugadores de fútbol de distintas edades y
niveles de habilidad, proporcionando herramientas para organizar partidos, gestionar
reservas de canchas, y realizar un seguimiento del rendimiento de cada jugador. La
aplicación se estructura en diversas funcionalidades que permiten a los usuarios
interactuar de manera intuitiva y rápida, facilitando la organización de eventos deportivos
y promoviendo la formación de una comunidad activa y competitiva.
Alcance del Documento
Este documento incluye los mockups de las pantallas principales de la aplicación
FlashMatch, organizadas en secciones que detallan el propósito de cada pantalla, el
diseño visual y las características clave de usabilidad. Las pantallas documentadas en
este informe incluyen:
● Pantalla de Perfil del Usuario
● Pantalla de Estadísticas de Rendimiento
● Pantalla de Invitaciones y Valoración de Equipos
● Pantalla de Inicio y Registro
● Menú Principal
3
Pantalla de Perfil del Usuario
● Objetivo de la Pantalla: Permitir al
usuario visualizar y actualizar su
información personal, incluyendo
detalles sobre posición en el campo,
edad, disponibilidad y estilo de juego.
● Mockup: [Se inserta la imagen del
mockup]
● Detalles de Diseño:
Foto de Perfil:
Ubicada en la parte
superior, la foto de perfil
del usuario brinda una
identificación visual
clara.
Información Personal:
Campos detallados como:
▪ Nombre: Presenta el
nombre completo del
usuario.
▪ Posición en el Campo:
En este caso, "N°9 -
Delantero Centro" indica
la ubicación de juego
preferida del usuario.
▪ Pierna Predominante: Especifica si el usuario es diestro o zurdo, aquí
"Derecha".
▪ Edad: Presenta la edad del usuario.
▪ Disponibilidad: Indica los días en los que el usuario está disponible para
jugar.
▪ Estilo de Juego: Describe el estilo de juego, en este caso, "Agresivo".
o Botón de Editar Información: Un botón en la parte inferior permite al usuario
editar sus datos personales, indicado por el icono de lápiz en verde.
4
o Navegación Inferior: Iconos en la parte inferior para facilitar el acceso rápido a
otras funciones de la aplicación, como mensajes, partidos y calendario.
Pantalla de Estadísticas de
Rendimiento del Usuario
● Objetivo de la Pantalla: Permitir al
usuario visualizar sus estadísticas de
rendimiento en distintas áreas del juego,
ofreciendo una vista completa de sus
habilidades y desempeño en partidos
recientes.
● Mockup: [Se inserta la imagen del
mockup]
● Detalles de Diseño:
Gráfico de Radar: En el
centro de la pantalla, un gráfico de
radar muestra las estadísticas
principales del usuario en áreas
como:
▪ Regates Exitosos
▪ Tiro y Precisión
▪ Defensa (intercepciones y
tarjetas)
▪ Tiros a Puerta
▪ Assist
Este gráfico permite al usuario identificar de forma visual sus fortalezas y áreas de
mejora en el campo.
o Rendimiento en Partidos: Una sección debajo del gráfico muestra el rendimiento
del usuario en partidos específicos, con una calificación de estrellas. Por ejemplo:
▪ Duoc vs Inacap: Calificación de 4 estrellas.
▪ Walmart vs Tottus: Calificación de 3 estrellas.
o Elemento Visual de Fútbol: En la parte inferior, se incluye un icono visual de un
balón de fútbol y una portería, añadiendo un toque gráfico relacionado con el tema
del deporte.
5
o Foto de Perfil: En la esquina superior izquierda, la foto de perfil del usuario brinda
una identificación rápida, reforzando que las estadísticas pertenecen al jugador
actual.
Pantalla de Invitaciones y Valoración de
Equipos
● Objetivo de la Pantalla: Permitir al usuario gestionar
invitaciones para unirse a partidos o equipos, así
como visualizar su valoración por otros equipos y su
rendimiento en la temporada actual.
● Mockup: [Se inserta la imagen del mockup]
● Detalles de Diseño:
o Sección de Invitaciones:
▪ Invitaciones para Partidos: Los
equipos pueden enviar invitaciones al
usuario para participar en partidos
específicos. Cada invitación muestra el
equipo que invita, el rol necesario (ej.,
"Necesitamos un 9 para el Domingo"), y
botones de aceptación (✔️) o rechazo
(❌).
▪
Invitaciones para Unirse a un Equipo:
Los equipos pueden invitar al usuario a
unirse permanentemente. Incluye un
botón para ver más detalles del equipo invitado ("Ir a Equipo").
o Valoración de Otros Equipos: Muestra la calificación del usuario por otros
equipos, representada en estrellas. Esto permite que el usuario vea cómo
es percibido por sus compañeros y rivales.
o Estadísticas de Partidos Jugados en la Temporada:
6
▪ Resumen del rendimiento del usuario en la temporada, indicando el
número de partidos jugados, victorias y empates (por ejemplo: "8
Matches, 7 Victorias, 1 Empate").
▪ Un ícono visual de una cancha de fútbol refuerza la temática de la
pantalla y proporciona un elemento gráfico que organiza la sección.
7
Pantalla de Inicio y Registro
● Objetivo de la Pantalla: Facilitar el
acceso inicial a la aplicación
permitiendo a los usuarios registrarse
o iniciar sesión utilizando sus cuentas
de Google, Facebook o mediante un
número de teléfono.
● Mockup: [Se inserta la imagen del
mockup]
● Detalles de Diseño:
o Logotipo de la Aplicación:
Ubicado en el centro superior
de la pantalla, el logotipo de
"PartidosYa" con un diseño
llamativo que incluye un balón
de fútbol y una insignia,
proporcionando una fuerte
identidad visual a la
aplicación.
o Opciones de Ingreso:
▪ Google: Botón redondo
con el logotipo de
Google para iniciar
sesión con una cuenta
de Google.
▪ Facebook: Botón redondo con el logotipo de Facebook, permitiendo
a los usuarios registrarse o iniciar sesión a través de su cuenta de
Facebook.
▪ Teléfono: Botón redondo con un icono de teléfono, permitiendo el
inicio de sesión mediante número telefónico.
o Indicador de Carga: Un icono de balón de fútbol animado que gira
mientras la aplicación carga, situado bajo los botones de inicio de sesión.
Esto da un toque temático a la pantalla de carga.
8
o Mensaje de Bienvenida: En la parte inferior, se muestra un texto de
bienvenida “BIENVENIDO” en una barra de fondo dorado, que añade un
toque de calidez a la experiencia inicial del usuario.
9
Pantalla de Menú Principal
● Objetivo de la Pantalla: Facilitar la
navegación hacia las principales
secciones de la aplicación,
permitiendo al usuario acceder
rápidamente a invitaciones, equipos,
canchas, valoraciones y su perfil de
estadísticas.
● Mockup: [Se inserta la imagen del
mockup]
● Detalles de Diseño:
○ Sección de Invitaciones y
Equipos: Representada con
una imagen de varios
jugadores de pie, esta sección
permite al usuario acceder a
las invitaciones para unirse a
partidos o equipos, así como
gestionar las solicitudes de
otros jugadores.
○ Sección de Canchas y
Valoraciones: Icono de una
cancha de fútbol que da
acceso a la información de las
canchas disponibles, junto con
valoraciones y comentarios de
otros usuarios sobre estas
instalaciones.
○ Sección de Perfil y Estadísticas: Icono con un jugador de fútbol junto a
un gráfico de barras, que dirige al usuario a su perfil, donde puede revisar
sus estadísticas y desempeño en partidos.
○ Botón de Menú Principal: En la parte inferior, un botón en una barra
dorada que indica claramente "Menú Principal", permitiendo que el usuario
regrese a esta pantalla desde cualquier sección de la aplicación.
10
