Alterações gráficas - Story Telling

« post anterior | home | post seguinte »

Sábado, 21 de Maio de 2011

Alterações gráficas

Durante o desenrolar do projecto, à medida que desenvolvíamos os conteúdos a serem integrados no mesmo, apercebemo-nos de que o design da nossa aplicação se encontrava algo limitado, e não permitia que esta atingisse o seu verdadeiro potencial.

Assim, decidimos efectuar algumas mudanças no que diz respeito à componente visual, visto não estar completamente do nosso agrado. Estas foram ponderadas com a colaboração do orientador do projecto, e comunicadas atempadamente.

Entre as alterações efectuadas, para além das razões de ordem estética, destaca-se a reestruturação do menu. Enquanto anteriormente a aplicação possuía apenas um menu único, situado do lado esquerdo, na versão actual efectuamos a separação das componentes de interacção e navegação. Para esse efeito, criámos um novo menu, situado no canto superior direito (dedicado à vertente de comandos da aplicação, como glossário ou ajuda), para além do já existente (que passa a ser dedicado à componente de interacção com as histórias).

A resolução dos ecrãs foi também alterada, para melhor se adaptar à plataforma onde a aplicação se encontrará inserida.

Decidimos também que ambos os menus deveriam ser retrácteis, para permitir o aumento da área de conteúdos, durante a visualização das histórias, e manter o aspecto da aplicação mais limpo e cuidado, no geral.

Para isso, recorremos à criação de ícones, que servem de metáforas para permitir ao utilizador perceber o propósito de cada botão do menu de histórias, mesmo quando este se encontra fechado.

No que diz respeito aos ícones da barra superior, foram também personalizados por nós, com o intuito de serem o mais reconhecível possível aos utilizadores, de modo a que a interacção seja facilitada.

Optámos ainda por personalizar a barra de progresso, recorrendo a bandeiras para obter um aspecto mais aproximado do que pretendíamos.

Seguem abaixo os novos mock-ups que executámos para demonstrar a versão actual do design do projecto: