Para o nosso desenvolvimento do wireframe, devemos passar pelas quatro fases:  pesquisa, estudo, estratégia e arquitetura do projeto.

No post anterior, fizemos a pesquisa junto ao cliente. Agora temos que fazer um estudo deste material, avaliar se temos todas as informações para que possamos
montar uma estratégia e com ela construir a arquitetura do projeto.

A arquitetura do projeto pode ser montado de várias formas, porém vou mostrar um dos métodos mais comuns que é em forma de fluxograma:

Fluxograma Modelo

Fluxograma Modelo

Detalhe sobre esta etapa, temos que cuidar com a usablidade, fazer o caminho ideal para que o usuário possa atingir o objetivo montado na estratégia do site.

Este fluxograma ajuda em todos os processos do desenvolvimento. Agora estamos com todas as informações para montarmos o wireframe. Ele pode ser  desevolvido usando lápis e papel, ou um software específico, fica aberto esta  opção.

É interessante usar apenas duas variações de cores e linguagens simples, afinal,  esta documentação terá que estar disponível em todos os processos do  desenvolvimento e inclusive para o cliente.

Abaixo um exemplo seguindo o que foi apresentado no fluxograma:

Home

Modelo 1

Modelo 1

Empresa

Modelo 2

Modelo 2

Uma dica interessante é usar legendas no wireframe, numerando cada bloco de informações, quando a página for grande.

Nesse caso, como é pequena, podemos dizer que o topo terá uma imagem no formato PNG, e a imagem da notícia tera uma imagem no formato PNG com dimensões de 300px x 300px.

Não é obrigatório o desenvolvimento de wireframes para todas as telas, e sim as mais importantes, isto é definido na parte de estratégia do projeto.

Agora com todo o material desenvolvido, podemos apresentar para o cliente como irá  funcionar o novo site. Este é apenas um dos processos. Após a aprovação do cliente, podemos então passar para a parte de produção.

Abraços

Olá pessoal, demorei um pouco mas to de volta. Hoje vou falar de um assunto que nos sites brasileiros (existem em sites internacionais também) ainda não é totalmente valorizado. A arquitetura de informações.

Normalmente no desenvolvimento de um site, já estamos pensando em layout e como será programado. Porém não pensando em várias etapas como usabilidade, acessibilidade e organização do conteúdo.

Esta etapa de organização de conteúdo é muito importante para o desenvolvimento de projeto como um todo.

O que devemos coletar do cliente nesse primeira fase:

“Sobre o site do cliente?”

Ele deve descrever qual a funcionalidade do site até o momento, para que possa ser feito um desenvolvimento seguindo o ramo da empresa.

“Quem é seu publico alvo?”

Apresentar quais classes que acessam seu site, estas informações são importantes para que possa ser feito adiante testes de usabilidade e acessibilidade. Outro teste importante que acho legal, é testes de hardware de acordo com o tipo de público. Exemplo: O público alvo deste site tem em média internet com velocidade de conexão de até 1mb, e podem apresentar configurações de computadores inferiores aos atuais disponibilizados no mercado, então temos que usar tecnologias em que o site se comporte de uma melhor forma neste tipo de configuração.

“Qual o objetivo do site?”

Mostrar para qual finalidade ele esta apresentando o site para o usuário.  Se é compra, venda, divulgação, pesquisa e etc.

E claro, devemos saber quais são os concorrentes do cliente. É interessante fazer uma análise dos principais concorrentes e apontar pontos negativos que podem ser usados a favor no desevolvimento.

Após esta análise junto ao cliente, podemos então começar a estruturar o conteudo do site. (Wireframe)

Toda equipe de desenvolvimento deve estar participando desse processo, pois serão definidos os componentes que serão utilizados no site e funcionalidades.

No próximo post, vamos começar com a estruturação do site por partes.

Abraços