Diferencia entre revisiones de «Diseño de interfaz - Conoce Valparaíso»
(→Inicio) |
|||
Línea 26: | Línea 26: | ||
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. | 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=== | ||
<gallery> | <gallery> |
Revisión del 23:58 22 sep 2015
Diseño de Interfaz
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
Eventos
Promociones
Patrimonio y cultura
Servicios turísticos
Transporte y ayuda
Crear cuenta
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]