Diferencia entre revisiones de «Diseño de interfaz - Conoce Valparaíso»

De Casiopea
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

← Volver a Conoce Valparaíso

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

Edición de perfil de local

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

inicio
tipo listado

Tercera propuesta de interfaz

Estilos

thumb|700px|center

Inicio

inicio 1
inicio 2

Listado

Interfaz 3 - 1200 PC normal Listas.png

Ficha

Interfaz 3 - 1200 PC normal ficha.png

Formulario

Crear cuenta

Formularios PC Crear cuenta.png

Crea tu local

Formularios PC crear local solo.png

Editar perfil de local

1 ficha tipo de local
3 perfil del local
4 contacto

Segunda propuesta de interfaz

Estilos

Interfaz 1200 PC normal 222 m2.png
Interfaz 1200 PC normal 222 estilos.png

Inicio

Interfaz 1200 PC normal 222 inicio 3 copia 2.png
Interfaz 1200 PC normal 222 inicio 3 copia.png

Servicios

Interfaz 1200 PC normal 222 m2 copia.png

Formularios

1 crear cuenta
2
3
4

[[Archivo:Interfaz 1200 PC normal 222 m2 copia 7.png|thumb|700px|center]|5]

Primera propuesta de interfaz

Paleta de colores

Paleta de colores de logotipo

Estilos tipográficos

Estilos tipográficos

Inicio

Inicio

Crear cuenta

Crear cuenta paso 1
crear cuenta paso 2
crear cuenta paso 3

Ingresa tu local

Formulario de Ingresa tu local
Perfil del local creado

Error 404

Error 404

Avisos Pop Ups

Pos up de iniciar sesión, en caso de realizar acción que requiera ingresar
pop up al agregar una página a favoritos