Como conceber um protótipo página web

Um protótipo website combina os wireframes de páginas web individuais em uma visão bruto do site com foco exclusivo em layout de página de teste e sistemas de navegação. Criação de um protótipo é simplesmente criar um site básico com links de trabalho, mas não elementos de design como esquema de cores ou imagens. Isso permite que uma equipe web para ajustar o layout para um projeto consistente em todo o site que é simultaneamente funcional e atraente.

Abra um programa de software ou programa on-line para a criação de wireframes e protótipos. Um programa de edição de fotos vai trabalhar para criar seu protótipo a partir do zero, mas pode ser mais demorado.

Arraste e solte, quadrados e retângulos de cor clara de tamanho adequado para representar as diferentes secções da sua página web, como o logotipo, menus de navegação e do corpo principal. Use uma única cor em tons diferentes, tais como cinza, para ajudar a se concentrar em layout e não esquema de cores.

Repita o passo 2 para cada página da web em seu site. Incluir pontos para todos os elementos de navegação e menus.

Escrever o código HTML para todas as páginas do seu site usando um editor HTML, baseando o design nos modelos que você criou nas etapas 1 a 3. Use software de web design, como o Adobe Dreamweaver, para criar suas páginas, se você não sabe HTML. Deixar de fora fundos e imagens. Substitua com cor cinza claro diferentes fundos ou caixas e rotular com tags como "Logotipo" ou "Cabeçalho" para mostrar o que deve ir para lá.

Digite todo texto relevante para as páginas. Optar por escrever uma frase resumo ou parágrafo indicando a finalidade da página para prototipagem rápida. Consulte esta declaração de propósito quando você precisa para determinar o quão bem funciona uma página no layout do site atual.

Visualize seu protótipo on-line e testar os sistema de navegação, links e menus. Faça anotações de seções de alterar ou páginas que não estão funcionando. Verifique se suas páginas usam a mesma navegação e esquema de layout todo.

dicas

• Verifica Sitepoint.com recomenda OmniGraffle e Axure RP Pro para wireframing e prototipagem. Outra opção é lápis, um Mozilla Firefox add-on livre.
• Verifica W-edge design, preconiza a suas páginas protótipo em papel se você tiver problemas para obter o código HTML para olhar direito ou quer uma maneira rápida de brincar com idéias diferentes de layout.

Referências

• ligação Sitepoint: 16 Design Ferramentas para Prototipagem e Wireframing
• ligação W de ponta projeto: desenvolvimento de um website Prototype