Propuesta de rediseño: sitio web municipalidad de Machalí

De Casiopea



TítuloPropuesta de rediseño: sitio web municipalidad de Machalí
Palabras Claverediseño, ux, municipalidad, diseño gráfico, diseño de interacción
Período2018-2018
Del CursoDiseño desde el Código 2018
CarrerasDiseño, Diseño Gráfico, Diseño Industrial, Interacción y Servicios
Alumno(s)Raquel Cataldo, Francisca Delgadillo, Javiera Missana

Informe de accesibilidad y optimización

Informe: archivo HTML

https://codepen.io/jmissana/pen/mQJEJa

Páginas revisadas

  • Inicio

Machali inicio.png

  • DIDECO / Egis

Machali egis.png

  • Trámites / preguntas frecuentes

Machali preguntas.png

  • Trámites / trámite fácil

Machali tramite facil.png

Mejoras de accesibilidad propuestas

  • Etiquetado alt correcto y en español.
  • Evitar los botones imagen.
  • Mejora en la tipografía (puntaje, color, peso).
  • Mejora en los breadcrumbs (orden correcto).
  • Proporcionar medios para que el sitio sea accesible para todo tipo de público.
  • Evitar colores demasiado saturados y vibrantes que dañan la vista.
  • Ralentizar el movimiento de los banners automáticos.
  • Evitar la repetición innecesaria de contenido, evitar links vacíos.
  • Mantener el código válido.

Mejoras de accesibilidad a trabajar

  • Etiquetado alt correcto y en español.
  • Evitar los botones imagen.
  • Mejora en la tipografía (puntaje, color, peso).
  • Mejora en los breadcrumbs (orden correcto).
  • Evitar colores demasiado saturados y vibrantes que dañan la vista.
  • Evitar la repetición innecesaria de contenido, evitar links vacíos.
  • Mantener el código válido.

Rediseño

Páginas a rediseñar

  • Inicio
  • Trámites / trámite fácil
  • Municipalidad / Teléfonos Municipales
  • Municipalidad / Misión-visión de la Municipalidad
  • Noticias

Arquitectura de información

Mapa de navegación: actual

Mapa navegacion machali actual.png

Nota: El mapa de navegación expuesto comprende únicamente el flujo de acción de las páginas en la que se enfocará el proyecto.

Mapa de navegación: rediseñado

Mapa4machali.png

Wireframes

Primeras versiones

Identidad

Paleta de colores

Para la paleta de colores se mantiene la tríada principal del logotipo, con pequeñas modificaciones de saturación y luminosidad. Se agrega también una dupla de colores secundarios, usados en detalles y como complemento.

Machali paleta.png

Logotipo

El logotipo se mantiene y de él se extrae la paleta de colores usados a lo largo de las 5 pantallas (y por ende en el resto del sitio)

Logo machali.png

Fotos

Gráfica

La imágen del footer fue retrazada debido a que la original está hecha con imágen y no con código.

Footer javiera.png

Pantallas rediseñadas

Inicio

Trámite fácil

Teléfonos municipales

Misión/visión municipal

Noticias