Propuesta rediseño web: Municipalidad de Maipú

De Casiopea
Revisión del 18:56 10 dic 2018 de Carolinatapia (discusión | contribs.) (→‎Propuesta final Index)
(difs.) ← Revisión anterior | Revisión actual (difs.) | Revisión siguiente → (difs.)


TítuloPropuesta de rediseño web: Municipalidad de Maipú
Palabras Clavehtml, css, boostrap, código
Período2018-2018
AsignaturaDiseño desde el Código
Del CursoDiseño desde el Código 2018
CarrerasDiseñ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
ProfesorBasilio 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.

Sitiomaipufuente.jpg

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.

Sitiomaipufuente2.jpg

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

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.
Indexmaipu2.png
Indexmaipu1.png
Indexvisual.png


Wireframe general

INDEX1.jpg
INDEX2.jpg
INDEX3.jpg


Versión responsive

INDEX RESPONSIVE.jpg


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.


Indexfinalmaipu.jpg

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.
La página carece de coherencia visual con el resto del sitio, además de la posibilidad de ir a otros puntos del mismo.
La búsqueda con una dirección real funciona.

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.
Los wireframes recalcan la necesidad de h1 y una barra de navegación constante que permita un nexo constante del sitio


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.
Sitiomaipu1.jpg
Sitiomaipu2.jpg

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.

página de Ordenanzas

Version Responsive

Responsive de Ordenanzas

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.

Footer4deordenanzas.png
Footerdeordenanzas.png

Noticias

Observaciones

Noticias municipalidad de Maipú
Muestra de la pagina actual de noticias


  • 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

Wireframe1maipu.png
Wireframe1maipu2.png
Wireframe1maipu3.png

Rediseño Noticias 1

Jerarquíasnoticias1maipu.png
Jerarquíasnoticias2maipu.png
Jerarquíasnoticias3maipu.png
Jerarquíasnoticias4maipu.png

Rediseño Noticias 2

Noticiaslectura1.png
Noticiaslectura2.png
Noticiaslectura3.png

Re-diseño del Contenido Visual

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

logo de la municipalidad de Maipu
Maipu renace
Isotipo-maipu.png


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). banner ley de transparencia transparencia activa banner ley de lobby

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.

Maipu-14.png Maipu-06.png Maipu-05.png Maipu-01.png Maipu-03.png Maipu-08.png Maipu-10.png Maipu-12.png Maipu-04.png Maipu-07.png Maipu-09.png Maipu-11.png Maipu-13.png

Footer

rediseño de footer