Realización de una plataforma web para la reserva de actividades deportivas.
FUNDAMENTOS DE LA PROPUESTA GRÁFICA
PALETA DE COLORES
Los colores corporativos que he utilizado han sido 2 paletas de colores: la gama de azul y la gama del amarillo.
Por otro lado nos encontraremos los colores neutrales, la escala de grises, para utilizarlos mayormente en las tipografías.
TIPOGRAFÍA
La tipografía utilizada es ROBOTO. He elegido este tipo de tipografía por sus características tan buenas: es clara y legible. En la tipografía no he usado un patrón que siga los múltiplos de 8, ya que en cada ocasión podía venir mejor un tamaño u otro y que no correspondiera a múltiplos de 8. En cambio, a la hora del espaciado entre textos, imágenes y otros componentes sí que he seguido un ritmo armónico en la proporcionalidad siendo estos múltiplos de 8. Una vez definida la fuente tipográfica y los estilos de tamaño y peso, se utilizan los textos de esta página para crear los estilos que se utilizarán en todo el proyecto.
ESTRUCTURA
Es importante tener en cuenta la composición utilizando múltiplos de ocho y de cuatro puesto que el desarrollo de los componentes será indispensable para la construcción de las pantallas posibles de la interfaz, por lo que tener un modelo numérico que permita la jerarquización de alimentos al interior de la pantalla ayudará enormemente en el equilibrio de la misma y en la integración de cada uno de los elementos al momento de construir un interfaz eficiente y efectiva. Utilizaremos dos tipos de rejillas, una para cada uno de los breakpoints. La rejilla del móvil consistirá en 4 columnas con un ancho entre ellas de 72px y unos márgenes/canales de 16px. La rejilla del ordenador consistirá en 12 columnas con un ancho entre ellas de 64px y unos márgenes/canales de 24px. Estas rejillas se utilizan para poder organizar bien los componentes a lo largo del proyecto.
PROCESO DE DISEÑO
El proyecto consistía es realizar una web en la que se podía hacer reservas deportivas, es decir, instalaciones: pistas, salas… Por lo que el usuario tendrá que realizar la tarea de reservar una actividad deportiva y luego pagarla. Para ello, nada más abrir la web el usuario tiene opción a: Iniciar sesión, Registrarse o Reservar (como invitado). Una vez que entra en la zona reservas el usuario tendrá que elegir una de las actividades deportivas. Después el usuario tendría que escoger día y hora. Una vez el usuario este de acuerdo con el día, la hora y el precio, el usuario tendrá que proceder al pago. Si el usuario no tiene cuenta, tendrá que rellenar todos los datos, pero si el usuario tiene cuenta, únicamente tendrá que efectuar el pago. Todo el proceso va en cadena, por lo que el usuario no debería tener problemas a la hora de efectuar una reserva y pagarla.
PANTALLA PRINCIPAL
CREAR CUENTA
REALIZAR RESERVA
SELECCIÓN FECHA Y HORA
PROCEDER AL PAGO
RESERVA REALIZADA CON EXITO
ESTRUCTURA MÓVIL
Al ser un diseño responsive la versión móvil es muy similar a la versión ordenador. Excepto por el añadido del menú en la versión móvil, ya que si no había mucho ruido con tanta información. Está pensada para que el usuario pueda utilizarla sin problemas con una mano, ya que los usuarios que utilizan el móvil suelen usarlo de esta manera.
ESTRUCTURA ORDENADOR
UI KIT
El UI KIT completo lo podéis ver en: https://www.figma.com/file/VLslxLL3PsNSPnK6LnlzsS/PEC2_ANDREAOMEDES_PROTIPADO_2?node-id=9%3A19
MEJORAS
Dados los resultados de la tabla puedo concluir con una serie de mejoras que aplicaré en la web, tanto en la versión ordenador como en la versión móvil.
Las iré enumerando de manera que en la parte de mejoras veremos los cambios que he efectuado conforme a los problemas dados.
Dónde la primera imagen es el prototipo antiguo y la segunda la mejora
*Para ver mejoras del ordenador ir a:
https://www.figma.com/file/VLslxLL3PsNSPnK6LnlzsS/PEC2_ANDREAOMEDES_PROTIPADO_2?node-id=702%3A1878
1. No sabe cómo volver atrás o a inicio cuando ha creado la cuenta
2. Al rellenar datos le gustaría ver siguiente y atrás
3. No sabe cómo volver atrás o a inicio cuando ha creado la cuenta
4.Buscador o filtro en la parte de elección de actividades
5. Celda de aceptar condiciones es algo pequeña
6. Las horas en formato móvil se ven pequeñas
7. No ve el botón de atrás. Va hacia arriba de la web e intenta hacer clic en el evento donde salen todos los datos de la reserva para modificar la fecha
8. Al finalizar una reserva le gustaría que hubiera un botón para ir a inicio.
CONCLUSIONES
De este proyecto, me llevo el saber empatizar con el usuario para una mejor realización de una plataforma. Por más que tú pienses que está todo correcto, eso lo piensas tú y solo tú.
Me llevo el saber diseñar de una manera Resposive, pensando en al menos 3 dispositivos: ordenador, tablet y smartphone.
Crear una web puede ser simple, pero no nos damos cuenta de todo lo que lleva detrás. Todo lo que se emplea para que quede un diseño bonito, usable e interactivo.
Hablo de los componentes, las interacciones (default, presionado, hover, desabilitado…), de posición siguiendo una reticula, de chebox, desplegables y de muchas cosas más.
No hemos hecho código (HTML o CSS), pero si que hemos tenido el cuidado y la precisión de hacer todo que sea prototipable y que los informaticos nos miren raro y nos hagan reestructurar completamente el prototipo.
Cada proyecto que he ido haciendo he ido descubriendo muchas más cosas y perfeccionando técnica, algo que en Febrero veía imposible.
Aún me queda mucho por aprender, pero estoy segura que este es el camino y que para aprender hay que fallar, fallar, fallar y al final llegar al éxito
Un saludo a todos y gracias por leerme