Instituto Muviar – Museu Virtual de Arte de Rua

Arquitetura da informação, experiência do usuário, concepção de interface e integração com Wordpress

Sobre o projeto

O Muviar tomou para si a responsabilidade do registro da memória do grafite em todo território nacional. Iniciando seus trabalhos no Paraná, estado sede, a instituição busca apoio para salvaguardar em meio digital todo o acervo do grafite digitalizado e exposto a fim de montar um banco de dados virtual e exposições a respeito do tema. Além disso será disponibilizado o mapeamento das obras a fim de promover a preservação e o turismo.

Será realizada também a publicação do Guia do Grafite Legal que orienta artistas a respeito da prática legalizada em cada município. Nele serão abordados os interesses do grafiteiro para que a obra seja legalizada, as consequências para o autor e obra quando da não legalização da obra, o que diz a lei sobre Grafite e pichação e quais os procedimentos para realização de uma obra legal.

Desafio proposto

Construção de um site responsivo baseado no layout criado pelos museólogos, porém identifiquei uns problemas de padronização, alinhamento, hierarquização e consistência com a marca do museu.

Abaixo segue as telas propostas inicialmente.

Estrutura inicial incial

As imagens representam as propostas iniciais proposta dos museólogos

Modelos iniciais das páginas
Modelos iniciais das páginas

Decidi que precisavam de uma organização melhor. O fluxo ajudou a ter uma visão macroscópica do conteúdo o site.

Fluxo

Relação entre as páginas

Tipografia

Tipografia

Cores

Cores

Layout final

Foi proposta a padronização das telas utilizando um grid de 12 colunas, além de reduzir as variações formatos de telas. O sistema foi desenvolvido utilizando o Adobe XD, Illustrator e Visual Code.

Como gerenciador de conteúdo, escolhido WordPress. O tema construído com base no tema Underscores da Automattic + Bootstrap para agilizar toda a construção do tema. O site foi construído para se adaptar em diversas resoluções de tela.

Nenhum plugin foi utilizado como suporte para a aplicação do layout.