Diseño de interfaz - Conoce Valparaíso
Diseño de Interfaz
Ver maquetas navegables de sitio PC https://marvelapp.com/i6717h y Maqueta sitio movil https://marvelapp.com/dh25i1
En base a todos los puntos detectados en la evaluación heurística y los paseos cognitivos realizados a dueños de locales y visitantes, se realizan las propuestas finales de interfaz de la plataforma. Se diseñan en base a la estructura de los wireframes, aplicando estilos gráficos y correcciones ya detalladas en las evaluaciones anteriores; dando como resultado una interfaz con una mejor capacidad de conversación con los usuarios tipo visitante y dueños de locales, mejorando la interacción con los botones y llamados a la acción para ambos tipos de usuario, entre varios cambios y mejoras que se irán comentando al costado de la imagen.
Estilos de texto
Los estilos de texto corresponden a la tipografía Roboto Slab en las siguientes Variables:
- H1: Roboto Slab regular, 35 pt cuerpo y 45 de interlínea.
- H2: Roboto Slab bold, 25 pt cuerpo y 35 de interlínea.
- H3: Roboto Slab regular, 24 pt cuerpo y 30 de interlínea.
- Párrafo básico: Roboto Slab regular, 14 pt cuerpo y 26 pt de interlínea.
- Textos de mapa: Roboto Slab bold, 14 pt cuerpo y 26 pt de interlínea.
Estilos de color
Los colores se aplican en base al diseño del logotipo y se dividen según la sección del sitio. Los colores corresponden a:
- Rojo (#E4241D) para servicios turísticos.
- Amarrillo (#FECC16) para eventos, actividades y rutas.
- Cian (#009EE3) para transporte y ayuda.
- Azul (#414F9D) para patrimonio y cultura.
Esto se muestra principalmente en los fondos de las galerías de imágenes y en los íconos en el mapa de los lugares. Se utiliza verde para los botones de llamado de acción primarios como el crear cuenta, guardar cambios; los colores blanco con negro para los botones de acciones secundarias, como los del menú, los filtros, ver más, etc.
Tipos de página
Inicio
- Inicio inicio sin.png
Inicio PC
- Interfaz movil - inicio inicio.png
Inicio Móvil
Eventos
- Eventos listado todos.png
Listado PC
- Eventos ficha asistir.png
Ficha PC
- Eventos ficha aviso confirmacion.png
Mensaje confirmación PC
- Interfaz movil - eventos listado.png
Listado Móvil
- Interfaz movil - eventos ficha.png
Ficha Móvil
Promociones
- Promociones listado ver listado.png
Listado PC
- Promociones listado filtros.png
Filtros PC
- Promociones ficha visitante.png
Ficha PC
- Interfaz movil - promociones listado.png
Listado Móvil
- Interfaz movil - promociones filtrar.png
Filtros Móvil
- Interfaz movil - promociones ficha.png
Ficha Móvil
Patrimonio y cultura
- Patrimonio y cultura listado ver listado.png
Listado PC
- Patrimonio y cultura listado filtros.png
Filtros PC
- Patrimonio y cultura ficha.png
Ficha PC
- Interfaz movil - patrimonio listado.png
Listado Móvil
- Interfaz movil - patrimonio filtrar.png
Filtros Móvil
- Interfaz movil - patrimonio ficha.png
Ficha Móvil
Servicios turísticos
- Servicios turisticos listado.png
Listado PC
- Servicios turisticos filtros.png
Filtros PC
- Servicios turisticos ficha.png
Ficha PC
- Interfaz movil - servicios listado.png
Listado Móvil
- Interfaz movil - servicios filtrar.png
Filtros Móvil
- Interfaz movil - servicios ficha.png
Ficha Móvil
Transporte y ayuda
- Transporte y ayuda 2 listado ver listado.png
Listado PC
- Transporte y ayuda 2 listado filtros.png
Filtros PC
- Transporte y ayuda ficha .png
Ficha PC
- Interfaz movil - transporte listado.png
Listado Móvil
- Interfaz movil - transporte filtrar.png
Filtros Móvil
- Interfaz movil - transporte ficha.png
Ficha Móvil
Crear cuenta
- Formularios ingresar.png
Ingresar
- Formularios Crear cuenta.png
Crear cuenta
- Formularios 1 datos del local.png
Datos del local
- Formularios 2 ubicacion.png
Ubicación
- Formularios 3 contacto.png
Contacto
- Formularios 4 galeria.png
Reseña
- Formularios 5 reseña.png
Galería
- Formularios 6 redes sociales.png
Redes sociales
Propuestas anteriores
Séptima propuesta Interfaz
Crear cuenta e ingresar
- Interfaz 6 - Formularios 2 creado dueño de local.png
mensaje para dueño de local
Edición de perfil de local
- Interfaz 6 - Formularios 2 5 reseña.png
5 reseña
Editar perfil de persona y de local
Creando y editando eventos y promociones
Fichas de cada categoría
Sexta propuesta,después de test de usuario
En base a los análisis del test "paseo cognitivo realizado, se realizan las correcciones a la interfaz de PC.
Interacciones con visitante
Los principales cambios en cuanto la interfaz son que en la sección superior al crear cuenta, el visitante pueda recibir notificaciones y pueda cerrar sesión, además de achicar el tamaño del mapa y la galería para que en la primera pantalla se vea que hay más contenido debajo. Además, se suben los botones de guardar, compartir y subir fotografía a la sección superior derecha, ya que antes, debajo del mapa eran ignoradas, y se tendía a buscar en esta área. En el footer se dan los llamados a la acción mas grandes, para que sean fáciles de encontrar.
Interacciones con dueños de local
Se corrige todo lo que tiene que ver con el formulario de crear cuenta y local, para que queden ambos juntos; además de los formularios de editar perfil de local, arreglando los nombres de cada categorías.
Quinta propuesta
Movil
PC
Cuarta propuesta de interfaz
Movil
PC
Tercera propuesta de interfaz
Estilos
Inicio
Listado
Ficha
Formulario
Crear cuenta
Crea tu local
Editar perfil de local
Segunda propuesta de interfaz
Estilos
Inicio
Servicios
Formularios
[[Archivo:Interfaz 1200 PC normal 222 m2 copia 7.png|thumb|700px|center]|5]