Usando Wireframes para agilizar seu processo de desenvolvimento
Criar um wireframe é um dos primeiros passos que você deve seguir antes de criar um website.
Um wireframe ajuda você a organizar e simplificar os elementos e conteúdos dentro de um website e é uma ferramenta essencial no processo de desenvolvimento.
Um wireframe é basicamente uma representação visual do layout do conteúdo em um design de site .
O wireframe atua como um protótipo que mostra o posicionamento dos recursos da página, como cabeçalho, rodapé, conteúdo, barras laterais e navegação.
Também especifica o posicionamento dos elementos nessas áreas de conteúdo. Se você deseja desenvolver um site que corresponda exatamente aos requisitos do cliente e minimize as revisões do projeto, o wireframing irá mantê-lo no caminho certo.
Benefícios do Wireframing
A criação de um wireframe oferece ao cliente, ao desenvolvedor e ao designer uma oportunidade de dar uma olhada crítica na estrutura do site e permitir que eles façam revisões facilmente no início do processo.
O wireframing traz os seguintes benefícios principais:
- Ele dá ao cliente uma visão inicial e aproximada do design do site (ou re-design).
- Pode inspirar o designer, resultando em um processo criativo mais fluido.
- Ele fornece ao desenvolvedor uma imagem clara dos elementos que eles precisarão codificar.
- Isso torna claro o apelo à ação em cada página.
- É fácil de adaptar e pode mostrar o layout de várias seções do site.
Ferramentas para desenvolvimento de wireframe
Você tem muitas ferramentas para escolher ao criar um wireframe:
- Mão desenhando no papel é sempre um bom ponto de partida para qualquer designer. Ele fornece uma maneira rápida e fácil de se concentrar e organizar. Se você é muito preciso com esboços, você pode até usar isso como seu wireframe final. (Veja a Figura 1.)
- Software de fluxograma ou mapeamento mental , como Visio . Essas opções de software vêm com elementos pré-empacotados que permitem criar facilmente representações de fluxograma do seu wireframe.
- Software de prototipagem da Web , como Gliffy ou Balsamiq . Ferramentas como essas foram criadas especialmente com o propósito de gerar wireframes, e elas têm recursos de prototipagem fáceis de usar.
- Software gráfico , como o Photoshop ou o Illustrator. O benefício de usar essas ferramentas é que o wireframe pode ser convertido diretamente em uma maquete gráfica do design do site; no entanto, a desvantagem é que você terá que criar todos os elementos manualmente.
- (X) Os wireframes HTML são quase como os próprios sites. Você pode definir o wireframe com código antes de aplicar os estilos ou pode criar um layout de alta fidelidade totalmente estilizado que se parece muito com um design final. (Veja a Figura 2.)
Por fim, o desenvolvedor ou designer deve selecionar a ferramenta que preferir. Pessoalmente, eu uso o Photoshop porque gosto da maneira como organiza o processo e com que facilidade posso converter o arquivo em uma maquete.
Exemplo de estrutura de arame
O nível de detalhe em um wireframe depende de vários fatores, incluindo: quanto de orientação e conteúdo o cliente forneceu, quão complexo é o conteúdo, até onde você está no processo e quanto detalhe deseja incluir .
Aqui estão alguns exemplos de wireframes que foram criados usando diferentes ferramentas e exibindo diferentes níveis de detalhe e cor:
Figura 1: Este esboço simples de wireframe para o site da Coastal Capital Partners (agora renomeado como Broad Reach Retail Partners) foi usado para criar modelos gráficos e, eventualmente, o design final. De Mike Rohde .
Figura 2: Wireframe HTML de baixa fidelidade. Útil para demonstrar como será um site antes que o estilo seja adicionado. Muito útil para usuários com deficiência visual.
Figura 3: Wireframe de baixa fidelidade para a comunidade do animal de estimação da abraço , por Jesse Bennett-Chamberlain de 31Three .
Figura 4: Um modelo preliminar de uma ferramenta de conferência social construída sobre Tiddlywiki para uso no Le Web 3. As notas para acompanhá-lo estão em tiddleleweb.tiddlyspot.com . Wireframe por Phil Hawksworth.
Figura 5: Este é baseado no uso avançado de um sistema de publicação de blogs (WordPress). De Mattheiu Mingassson ou Activeside Internet Strategies and Consulting .
Figura 6: Um wireframe para a comunidade do animal de estimação da abraço , por Jesse Bennett-Chamberlain de 31Three .
Figura 7: Um wireframe com cores e imagens. Wireframe da página de autor por Bokhandel .
Figura 8: Outro wireframe com cor. Por Mattheiu Mingassson de Activeside Internet Strategies and Consulting .
Melhores práticas
Para alcançar os melhores resultados, aqui estão algumas coisas importantes que você deve ter em mente ao desenvolver um wireframe:
- Simplicidade. A chave é mantê-lo simples o suficiente para ser claro para o cliente e ser flexível para o designer, mas detalhado o suficiente para orientar o programador. Como mencionado, você pode criar um wireframe de alta fidelidade, mas fazer isso no início do processo de desenvolvimento pode ser confuso para o cliente, que pode confundi-lo com um rascunho final.
- Trabalhar em escala de cinza. Ao criar elementos para um wireframe, é melhor trabalhar em escala de cinza para que você possa se concentrar no layout sem se distrair com o design. Se você recebeu um logotipo colorido, converta-o para tons de cinza também. Para distinguir e categorizar vários elementos, mostre formas e contornos em diferentes tons de cinza.
- Use wireframes em conjunto com um sitemap. Um wireframe é uma representação visual de um bom sitemap, não um substituto. Um mapa do site é uma ferramenta útil para qualquer site e definitivamente seria útil consultar durante o processo de desenvolvimento.
- Concentre-se no resultado desejado. Tenha uma compreensão clara de como seu cliente deseja que os usuários respondam à página antes de criar seu wireframe. Os apelos à ação devem ser muito claros simplesmente observando o wireframe.
- Crie um wireframe de tamanho completo se for para um website. Isso dará a representação mais precisa da página atual.
- Planeje os elementos protegendo o conteúdo com antecedência. Na melhor das hipóteses, seu cliente já terá fornecido os elementos que devem aparecer em cada página, como logotipo, anúncios, players de Flash ou de vídeo, recursos, seções de navegação e elementos da barra lateral, do cabeçalho e do rodapé. Se você ainda não tiver essas informações, encontre-se com seu cliente e obtenha (ou crie) um sitemap. Se você estiver reprojetando elementos existentes, poderá reuni-los a partir de uma revisão cuidadosa do site. Neste cenário, certifique-se primeiro de confirmar com o seu cliente que não será necessário adicionar ou remover elementos, porque não ter uma compreensão clara das suas expectativas irá atrasar o processo.
Escala de cinza vs. cor
Ao criar um wireframe, o trabalho em escala de cinza ajuda a manter o foco na função principal do processo , que é finalizar o layout, não o design (consulte a Figura 3). Outro risco de trabalhar em cores é que o cliente pode confundir o wireframe para o modelo final.
A cor pode, no entanto, ser útil ao mostrar a localização de cada chamada à ação. Como uma página pode conter várias chamadas à ação, priorizá-las é importante. Os wireframes podem ajudar a determinar qual call to action deve chamar primeiro o olho do usuário.
Trabalhei recentemente em um projeto que tinha um logotipo muito vibrante, que, nesse caso, era a principal chamada à ação porque representava uma revista recém-lançada.
Quando você usa cores, é mais fácil saber se determinados elementos estão dominando a chamada principal para ação. Esse processo ainda se enquadra no domínio do wireframing, em vez do design do mockup, porque os locais dos elementos ainda estão sendo determinados.
A cor pode gradualmente ser adicionada ao wireframe à medida que o projeto avança , o que é mais eficiente do que avançar com os mockups antes que a localização dos elementos seja bloqueada. Ao fazer isso, o software gráfico pode ajudá-lo a mudar diretamente para um modelo quando estiver pronto.
O que evitar?
Como outros aspectos do seu processo de desenvolvimento, o wireframing pode ter suas armadilhas se não for executado adequadamente. Aqui estão algumas dicas sobre o que evitar, a fim de obter os resultados mais eficazes:
- Muita coisa acontecendo na página. Deixe um amplo espaço em branco para que o design não pareça muito ocupado ou confuso.
- Ênfase na cor e design. O wireframing é para decidir o layout e a localização dos elementos. Mesmo que um wireframe possa influenciar o design, adicionar gráficos e cores provavelmente apenas distrairia seu propósito.
- Detalhes demais. Você sempre pode adicionar mais detalhes posteriormente, mas se incluir muito no início, o cliente pode confundir o wireframe para o modelo final.
Se você estiver interessado em aprender mais sobre wireframes, Revista Wireframe é um ótimo recurso que compartilha amostras, discute técnicas e resolve problemas relacionados à arquitetura de informações.
Criar um wireframe para o site do seu cliente fornece uma ferramenta de comunicação eficaz para todas as partes envolvidas.
Até mesmo construir um wireframe simples economizará tempo a longo prazo e facilitará o processo de desenvolvimento para o designer, o desenvolvedor e o cliente.
Escrito exclusivamente para WDD por Eric Shafer.
Você usa wireframes para o seu design? Quais são algumas das melhores maneiras de criar wireframes eficazes?