Rediseño sitio web Ilustre Municipalidad de San José de Maipo

De Casiopea



TítuloRediseño sitio web Ilustre Municipalidad de San José de Maipo
Tipo de ProyectoProyecto de Curso
Palabras Clavemunicipalidad, sitio web, san josé de maipo
Período2018-2018
Del CursoDiseño desde el Código 2018
CarrerasDiseño, Diseño Gráfico, Diseño Industrial
Alumno(s)Karen Aballay, Consuelo Ahumada, Camila Benavides, Consuelo de la Maza


Análisis sitio web

Al comienzo del proyecto se analiza exhaustivamente el sitio web de la Ilustre Municipalidad de San José de Maipo, en términos de accesibilidad y Search Engine Optimization (SEO), aplicando a su vez otros conceptos como la usabilidad y el contenido responsive.

Para el desarrollo del análisis se utilizan validadores como WAVE para la accesibilidad y la herramienta de prueba de datos estructurados de google para dar cuenta de errores que no se notan a simple vista, y la guía de pautas WCAG 2.0 para guiar la evaluación.

Para mostrar el análisis se construye una presentación de 20 slides con los principales errores en formato "PechaKucha", y un informe más detallado en formato html.

Archivo:Presentación-análisis-sanjosedemaipo.pdf

Mejoras de Accesibilidad y SEO

A partir del análisis se proponen una serie de mejoras para la accesibilidad y optimización de buscadores del sitio. Algunas de estas mejoras se planean llevar a cabo en el rediseño del sitio.

  • Implementar una URL canónica
  • Implementar una redirección 301 para referenciar las versiones no canónicas de la página a la original
  • Agregar el texto alternativo a las imagenes y asegurarse que la descripción sea única y corresponda al contenido de la imagen
  • Optimizar el tiempo de carga de las imágenes
  • Incorporar un lector de pantalla
  • Mejorar los contrastes para cumplir con los niveles de accesibilidad

Propuestas de Rediseño

Tomando en cuenta las mejoras planteadas, y analizando el sitio desde una perspectiva mayor se plantea lo siguiente en pos de mejorar la usabilidad del sitio:

  • Eliminar la barra lateral
  • Eliminar una de las dos barras de navegación
  • Cambiar el buscador grande por iconografía más amigable
  • Sacar la sección de noticias de la barra de navegación (se deja el acceso en el home)
  • Agregar una sección de Educación a la navegación del sitio

Mapa de Navegación

Como se realizan cambios en torno a la navegación se prepara un nuevo mapa de navegación en draw.io para aclarar el panorama general y comenzar con la nueva diagramación del sitio.

Mapanavegacionmunisanjosedemaipo.jpg

Wireframes

Opciones de Diagramación

Se propone una serie de opciones de diagramación para distintas páginas del sitio. Se realizan pruebas de texto con dos colunas, tres columnas, galerías de texto, entre otras.

Posteriormente se decide trabajar con una columna para las grandes páginas de texto, y con dos a tres columnas para páginas mayormente de imágenes.

Páginas Seleccionadas

Luego de probar distintas formas de diagramación se seleccionan las 5 páginas del sitio que se van a rediseñar. Para estas páginas se construyen los wireframes correspondientes (con Axure), para 3 dispositivos, computador, tablet y smartphone.

Home

Noticias

Primera Patente Municipal

Servicios de Salud

Turismo


Código

Al finalizar los wireframes se toman ciertas decisiones acerca de la gráfica y posteriormente se comienza a trabajar con el código. Para algunos casos se utiliza como plantilla el código de Bootstrap, como la barra de navegación, y se trabaja en un archivo css externo para modificar lo deseado.


Gráfica

Se mantiene el logo de San José de Maipo, y de este se extrae la paleta de colores para trabajar el sitio.

Maipo-logositio.png


Se abstraen los 3 principales colores con una propuesta de variación de opacidad.

Maipo-paletadecolores.png