Rediseño sitio web Ilustre Municipalidad de San José de Maipo
| Título | Rediseño sitio web Ilustre Municipalidad de San José de Maipo |
|---|---|
| Tipo de Proyecto | Proyecto de Curso |
| Palabras Clave | municipalidad, sitio web, san josé de maipo |
| Período | 2018-2018 |
| Del Curso | Diseño desde el Código 2018 |
| Carreras | Diseño, Diseño Gráfico"Diseño Gráfico" is not in the list (Arquitectura, Diseño, Magíster, Otra) of allowed values for the "Carreras Relacionadas" property., Diseño Industrial"Diseño Industrial" is not in the list (Arquitectura, Diseño, Magíster, Otra) of allowed values for the "Carreras Relacionadas" property. |
| 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
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.
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.
Home 1, trámites más relevantes
Home 2, noticias recientes
Sección inferior
Acceso a historial de noticias
Misión de la municipalidad
Noticias de turismo
Zonas de interés
Formulario de contacto
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
Escritorio
Tablet
Menú Smartphone
Noticias
Escritorio
Tablet
Smartphone
Primera Patente Municipal
Escritorio
Tablet
Smartphone
Servicios de Salud
Escritorio
Tablet
Smartphone
Turismo
Escritorio propuesta 1
Escritorio propuesta 2
Tablet
Smartphone
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.
Se abstraen los 3 principales colores con una propuesta de variación de opacidad.
