Este é um roteiro básico para verificação dos elementos interface para desenharmos um projeto. Vale lembrar que os projetos do MDArte são basicamente em CRUD (Create, Retrieve, Update e Delete) e não sistemas CMS com outras divisões e exibições. Cada um pode ter a sua lista e seria legal enviar comentários com adendos para ficar cada vez mais completa e padronizada.

Geralmente aprovamos o layout com um desenho feito em programa de imagem que depois de aprovado passa para um protótipo HTML com CSS e jQuery para testar melhor.

Aqui vai um vídeo bem legal com o processo bem acelerado:

The Rigth Way to Wireframe

 http://www.youtube.com/watch?v=QSxF-pISj1w

 

Roteiro da apresentação da interface deve incluir:

1. Desenho do wireframe
Pode ter mais de uma opção. O wireframe é basicamente demostrar a mancha gráfica da página e discutir sua disposição. Você pode ver belos exemplos aqui no http://webwithoutwords.com/

 

Voce consegue adivinhar que site é esse?

2. Proposta de layout

Cores, elementos gráficos e as pranchas com desenhos de páginas contendo os itens da lista a seguir.

Desenho da Interface deve conter ou prever os itens:

 

1. Navegação
   Botão de ‘Sair do Sistema , Módulos, Abas, Submenus, Menu do Usuário (alterar senha, mudar dados cadastrais) e menus secundários.
2. Definição da áreas de tela principais do sistema
   Formulário de Busca,  Formulários de Inclusão, área para Resultado das Buscas em tabela ou por extenso. É importante ter diferenciações de título e se possível demarcações de cor.
3. Avisos
   Sucesso, Erro, Atenção com títulos e sub textos.
4. Modais, Popups e Lookup Grid
   Uma tela para demostrar estes itens.
5. Comandos
   Estilos dos botões e possiveis diferenciações de navegação ou que executam ação ou apenas limpam um formulário.
6. Rodapé-Footer
   Informações institucionais.

Além da página que exibe grande parte destes elementos, devem ser previstas as páginas:

1. Página de erro (404)
2. Página de Login

No repositório da equipe de design que está no SVN já temos uma seleção com os melhores exemplos, mas aqui voce pode ver dezenas de recursos:

50 Free UI and Web Design Wireframing Kits, Resources and Source Files
Improving The User Experience Of Your Website With Modal Windows
Sign Up form design – best practices & design review

Mais wireframes, dica do Bernardo Chaves:
18 Great Examples of Sketched UI Wireframes and Mockups

 

Autor: Rafael Jardim