Propuesta rediseño web: Municipalidad de Maipú
| Título | Propuesta de rediseño web: Municipalidad de Maipú |
|---|---|
| Palabras Clave | html, css, boostrap, código |
| Período | 2018-2018 |
| Asignatura | Diseño desde el Código |
| 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. |
| Alumno(s) | Dominique Dallmeyer, Ignacio Oliva, Alejandro Marambio, Carolina Tapia |
| Profesor | Basilio Cáceres, Felipe Lavín |
Rediseño Web: Municipalidad de Maipú
Análisis general
- El sitio web posee un contraste de colores entre el texto y el background que permiten una buena visual, el tamaño tipográfico es fácil de leer y además es inclusiva, ya que contiene audios que leen en voz alta los textos más importantes (nivel AA). Abarca los justos servicios y problemáticas, pero con un gran problema de diagramación, ya que en general el sitio está muy saturado de información e imágenes: principalmente hay un conflicto de clasificación de elementos para hacer al sitio más amigable visualmente.
- Un problema repetitivo es la presencia de otras plataformas linkeadas, las cuales no cumplen con una ley similar en cuanto a estructura y lenguaje gráfico: esto pone en conflicto al usuario porque estas se encuentran escondidas dentro de las opciones de menú.
- Aparece otro factor que vuelve a esta nueva plataforma poco inclusiva y es la presencia de otro lenguaje que oscila entre el Ingles y el español lo cual hace que un usuario no bilingue no pueda ser participe de esta información, poco relevante por lo demás.
Mejoras a realizar
- Mejorar las jerarquías de información (coherencia).
- Otorgar contenido accesible desde cualquier plataforma digital (responsive).
- Establecer un lenguaje común en todas las páginas.
- Generar mejor navegación y éxito en búsquedas de contenido.
- Disponer una sensación de permanencia en todo sitio.
Decisiones Gráficas
Tipografía
La primera decisión tipográfico es elegir una familia tipográfica con una buena legibilidad y visibilidad para Web, desde Google Fonts.
Roboto
Se utiliza la familia tipográfica Roboto en distintas variantes. El porque de la elección de esta tipografía es por su disponibilidad, pero además por la legibilidad que entrega debido a su sencillez. Además cabe aclarar que esta tipografía fue diseñada especialmente para plataformas digitales.
Source Sans Pro
Esta familia tipográfica se utiliza por su cantidad de variantes que incluyen una variante Black, la cual se utiliza para engrosar los textos de la barra de navegación y darles legibilidad.
Paleta
La Paleta tipográfica es coherente con el sitio original,por lo que la decisión de colores tiene que ver con dar con tonos celestes presentes en el sitio con leves variaciones para efectos de legibilidad.
Sitiomaipupaleta.jpg
Páginas
Index
Observaciones
- El error que se repite en gran magnitúd en el index del sitio web, es la ausencia del atributo "alt" en las imágenes. Al faltarle este atributo, Google no podrá leer las imágenes y atribuirles un nombre determinado.
- Otro error común en el sitio es la ausencia de texto en los links. Esto es un problema, ya que si el link no contiene texto, la función o propósito de este no será presentado al usuario. Esto puede crear confusión al "keyboard" y al lector de pantallas.
- En general, hay una saturación de información. Se le da importancia a publicidades propias del municipio antes que links relevantes y atajos para mejorar la accesibilidad del sitio, aunque estos links que deberían ser una re-dirección rápida están vacíos. El principal problema es de distribución de la información y de clasificación de lo más importante a lo menos relevante.
- El Footer además es innecesariamente muy extenso y no contiene información relevante que contribuya a las dudas y requerimientos del usuario. En cuanto a accesibilidad no existe la posibilidad de utilizar bien otros dispositivos de entrada como el teclado, y además no está diseñada para ingresar desde otros dispositivos.
Wireframe general
Versión responsive
Propuesta final Index
La propuesta de re-diseño del Index consta de una organización por orden de importancia de la información, y la presencia de atajos y diferentes formas de ser presentada la información para que el usuario pueda encontrar lo que busca en la menor cantidad de clicks posibles. La página se dividió en:
- Un header que contiene los banners más importantes del Gobierno (Ley de Lobby, Ley de transparencia y Solicitúd Ley de Transparencia + Redes sociales)
- Una barra de navegación clara y clasificada.
- Un slider con imágenes e información más relevante e inmediata para el usuario.
- Selección de las noticias más destacadas.
- Atajos de áreas de importancia para las personas de la comuna.
- Afiches o acceso a contenido específico y actualizado.
- Atajos de accesos a temas generales.
Buscador de Barrios
Observaciones
- La página posee una función clara que va más allá de la que declara de buscar barrios, sino más bien es la búsqueda de servicios asociados a un barrio.
- La página en su versión original no posee nexo ni visual ni usable con el sitio en general. En lo visual carece de una coherencia con las otras páginas que a la vez poseen una identidad asociada al sitio mucho más entendible. Esto produce la sensación de que no se está en el sitio. En cuanto a la usabilidad la página del buscador de barrios no da la posibilidad de una navegación contínua en el sitio, carece de una barra de navegación y un footer, o algún enlace de vuelta.
- La página tiene errores de html como no poseer con una declaración de h1, ni tampoco de título e idioma.
- La página, sin embargo, funciona al colocar una dirección real.
Wireframes
- Los wireframes están en una versión móvil y de escritorio, en las versiones se hace hincapié en integrar la barra de navegación, el footer, además de una identidad visual coherente con el resto del sitio. También existe una declaración del h1 para fines de que nuestra página sea encontrable.
Propuesta
- La propuesta va orientada a mejorar las deficiencias observadas. Si bien no se posee una base de datos, se emula una búsqueda con el foco en encontrar los servicios asociados a un barrio, no a la búsqueda de estos. Además se adjunta un Mapa de Maipú que tiene como función ideal(que no es implementada por la necesidad de javascript, así como una base de datos)mostrar los servicios cercanos al sector buscado. Es por esto que se ingresa un Sector de Maipú de los enlistados, más la especificación de un sub-sector para dar así en el resultado con servicios asociados tales como Unidad Vecinal, Servicio de Salud o Retén cercano.
- Además se integra un h1 evidente, junto a la barra de navegación y el footer constante del sitio para dar esa sensación permanente de estar dentro del mismo sitio.
Gestión
Observaciones positivas
- La página cuenta con un orden lógico (al menos estructuralmente visual), una tabla bien construida (sin errores en la lista ordenada)
- Esta bien indexado el link de Microsoft Exel
- La redundancia esta bien aplicada en esta pagina(listas y clicks para cambiar de página)
Observaciones negativas
- No se define el Idioma error fundamental al momento de realizar un archivo html
- Presenta errores en el linkeado de imagenes,se repite constantemente en varias secciones del html
- Ocurre también que se reitera el error en el titulo es el mismo del texto alternativo
- Se da cuenta del error de reiteración de texto alternativo
A partir de estas observaciones se realizó un wireframe en el cual se intentan solucionar tanto los aspectos de distribución de la como los de que permiten una mejor usabilidad de la pagina.
Version Responsive
Propuesta Final
En la propuesta visual final se estableció una coherencia visual en este caso con la definición del color y la jerarquía de tamaños en la tipografía.
Noticias
Observaciones
- Se pueden ver problemas de clasificación y jerarquías del contenido, en ámbitos de diseño esto no estimula la dinámica de lo que se quiere mostrar.
- los tamaños de la imágenes no se presentan con relevancia y no enfatiza la comunicación visual.
- La página no clasifica el contenido por categorías.
- las imágenes no especifican el nombre en la etiqueta alt, problema que se muesta en casi la totalidad de la web.
- No muestra una linea de navegación que mantenga al usuario orientado en la ubicación en que se encuentra (breadcrumbs)
Por otro lado es necesario rescatar que el contenido es actualizado constantemente y muestra algunos aspectos de accesibilidad de lectura(aunque deficientes). Publican también la fecha, hora de la noticia y el redactor.
Wireframe
Rediseño Noticias 1
Rediseño Noticias 2
Re-diseño del Contenido Visual
Logo
En el caso del logotipo se separo el nombre en su parte superior y de manera independiente también se utilizo el isotipo para que permaneciera en la barra de navegación
Los contenidos del Gobierno tenian imagenes de baja resolución por lo que se re-diseñaron con la linea gráfica (tipografia y pantoné del Gobierno).
.png)
Iconografia
Ocurrió algo similar con las cuadriculas enlazadas en el Index, se realizo un re-diseño de cada una de ellas, en torno a los aspectos de legibilidad y Apariencia.
