Website wireframe

Um wireframe de site web ou website wireframe é um protótipo usado em design de interface para sugerir a estrutura de um sítio web e relacionamentos entre suas páginas. Um wireframe web é uma ilustração semelhante do layout de elementos fundamentais na interface. Normalmente, wireframes são concluídos antes que qualquer trabalho artístico seja desenvolvido, tendo como principal objetivo a navegação e disposição do conteúdo, assim como demonstrar as preferências de um cliente quanto aos requisitos funcionais de um sistema.

Um documento wireframe para um perfil de uma pessoa.

Wireframe então é um desenho básico de uma interface. Este desenho, no entanto, deve retratar toda a arquitetura de informação do sistema desejada pelo cliente, assim como também um veículo para propostas de funções, elementos gráficos, estrutura e conteúdo. Deve-se observar também que o wireframe retrata a usabilidade do sistema. No entanto, este desenho deve ser muito simples e resumido, informando ao desenvolvedor apenas o que for estritamente necessário de forma simples.

Pode ser usado apenas como base para os desenvolvedores, mas o mesmo também pode ser entregue para o usuário. Esta entrega gera o primeiro contato entre o ambiente digital e o usuário final.

"Usos de wireframes

Wireframes permitem o desenvolvimento de variações de um layout para manter a consistência do design através do site. Esta é uma parte importante do estágio de desenvolvimento inicial pois ela cria expectativas ao usuário e ajuda a desenvolver familiaridade com o site.

A criação de um conjunto de wireframes para um projeto também serve como um meio de comunicação com os clientes e os stakeholders como os geradores de conteúdo, engenheiros e desenvolvedores. No decorrer de um projeto a utilização de wireframes funciona como uma base estável para se considerar mudanças, diversos caminhos de usuário e novos requerimentos. O arquiteto de informação e designer de informação normalmente usam os wireframes como uma reunião dos pensamentos e como documentos de trabalho sólidos nos quais estabelecem a linguagem, o conteúdo e a estrutura de interações que os usuários terão com um determinado projeto ou site.

Wireframes podem variar de simples desenhos estruturais do sítio a uma simulação de navegação de alta fidelidade, que possui movimentos, enlaces funcionais e interações complexas. Para simples desenhos, a prototipagem em papel é a técnica mais comumente utilizada, mas ela tem sido melhorada com a utilização de software para projetos mais complexos. Os programas mais utilizados para criação de wireframes de baixa fidelidade são o Visio, Mockingbird, Balsamiq, iPlotz, Pidoco, InDesign, Illustrator, Photoshop, Adobe Fireworks e OmniGraffle. Para alta fidelidade, ferramentas de prototipagem/wireframing incluem Axure, ProtoShare, Justinmind e Irise. Para propósitos de design de interface de usuário colaborativa, ferramentas de wireframing online como Pidoco ou Protoshare, que oferecem funcionalidade de gerenciamento de projeto ou colaboração, são comuns.

Ver também

• Design gráfico
• Web design
• Design de interface de usuário
• Arquitetura de informação
• Design de interação

Ligações externas

• «Wireframes Magazine» 
• «Manuais, Ferramentas e Recursos para Wireframing Web - Inglês»