WireFrame

Na semana veremos como desenvolver um site estático para análise de usabilidade e fluxo de dados, para isso usaremos um sistema para criar o "esqueleto" do site, a ferramenta Axure.
Pode ser baixado uma versão de teste de 30 dias aqui: http://www.axure.com/download
Com o Axure instalado o que veremos é algo como a tela abaixo...


O sistema Axure oferece estrutura para inserir páginas, imagens, navegação etc. Vamos inserir objetos na projeto em branco.
Para se inserir um objeto, clicamos sobre ele e arrastamos o objeto para dentro da área de wireframe ( área de trabalho ). No projeto abaixo inserimos um objeto imagem, e um objeto placeholder ( objeto que indica que será incluído um novo objeto como texto, imagem, ou até mesmo um espaço).

Note que existem linhas de marcação ao redor da área de trabalho para sabermos o tamanho da página que faremos.

Agora inserimos um BOX ( retângulo em tom de cinza) para sobre ele inserirmos o menu horizontal. Para alterar os textos no menu, clique duas vezes sobre o texto que deseja mudar.

Nos MENUS, podemos inserir SUBMENUS clicando com o botão direito onde queremos o submenu e escolhendo a opção correspondente, Veja...

Deste modo um tema pode ser estruturado para ser melhor apresentado ao usuário...

e saiba que deste mesmo modo podemos inserir ou excluir espaços do menu ou submenu.

O projeto ficou assim para a primeira página, a HOME.

Agora para navegar entre as páginas e observar como o projeto responde, vamos criar a próxima página e lincar ambas. veja...

Para inserir no projeto a página, apenas clique duas vezes sobre pagina 1, na guia "PAGES". Depois configure a página como desejar, veja a página 1.


Com as páginas desenvolvidas, selecione o objeto, preferencialmente o MENU, e linque a navegação. Veja...

Deste modo podemos identificar quando o usuário clicar em algo o que deve acontecer.

Para checar como ficou o progresso do projeto, e sua navegação, selecione "PREVIEW" no canto superior direito... veja.


PRONTO! PRONTO!...
... agora é só pegar aquele seu projeto de TCC e desenvolver o wireframe navegável dele...
... menção garantida!


Nenhum comentário: