Wireframe
Um Wireframe é uma representação de
baixa fidelidade de um design.
Ele deve mostrar claramente:
• Os principais grupos de conteúdo (o quê?)
• A estrutura da informação (onde?)
• Uma descrição e visualização básica do
interface e interação do utilizador (como?)
[Link]
Dicas para a Construção
dos Wireframes
INTERAÇÃO HOMEM-COMPUTADOR
Licenciatura em Sistemas de Informação para a Gestão
Dicas para a Construção dos Wireframes
1. TER UM BOM CONHECIMENTO DA
EXPERIÊNCIA PRETENDIDA - FLUXOS
Antes de começar, é importante conhecer o objetivo e as
metas que irão levar os utilizadores a usar o produto.
Depois de se conhecer bem o público-alvo, é preciso tomar
algumas decisões:
• Para onde deseja que o utilizador vá?
• O que quer que ele veja?
• Onde gostaria que ele tocassem (CTAs)?
• Qual é o objetivo principal do produto?
Ter um bom conhecimento
da experiência pretendida
para o utilizador
A criação de wireframes é o principal caminho
para a criação dos fluxos do produto. É
importante criar demonstrações visuais dos
caminhos que o utilizador deve seguir.
Dicas para a Construção dos Wireframes
2. FAZER ESBOÇOS
Antes de se começar a transformar as ideias em wireframes
deve-se primeiro fazer um estudo no papel.
Nesta fase permite-se o debate do design sem que este
tenha de ser já perfeito.
O detalhe e a construção digital deverá acontecer depois.
Fazer Esboços
Quando se começa a transformar as ideias em
um wireframe, deve-se começar por esboçar
primeiro no papel. Este é o momento para o
debate de ideias sem se estar focado na
perfeição dos ecrãs.
Dicas para a Construção dos Wireframes
3. TRABALHAR COM GRIDS
Para se criar uma boa hierarquia de informações e se manter
a proporção, a escala e o equilíbrio, é fundamental o uso de
grids.
As grids geralmente existem em formatos predefinidos de 12
colunas, 16 colunas ou 24 colunas.
Trabalhar com Grids
Na criação de webistes ou no no design de
aplicações móveis, trabalhar com grids é
fundamental para se criar uma boa hierarquia
da informações e se criar um equilíbrio nos
ecrãs.
As grids auxiliam na estruturação dos layouts,
acelerando a fase de criação de protótipos e de
desenvolvimento.
Grid é uma malha construída com
diversos retângulos e é utilizada para
ordenar elementos gráficos.
Tondreau, 2009
Os grids são muitas vezes mal
compreendidos e mal utilizados no layout
das páginas.
A escolha do grid deve ser feita depois de
se saber o rumo do projeto.
Benefícios do Grid… para o utilizador
• Facilita a leitura dos elementos.
• Melhora a experiência visual.
• Menos esforço cognitivo para interpretar o
conteúdo.
• O olho humano percebe a distribuição
proporcional dos elementos e associa as
informações com maior facilidade.
Benefícios do Grid… para o designer
• Rapidez para adicionar, alterar e mover
elementos.
• Padrões de espaçamento e alinhamento
proporcionam uma linha de trabalho
uniforme.
• Linguagem visual comum em toda a
página.
• Mantém a consistência do trabalho caso
outro designer mexa no ficheiro.
Benefícios do Grid… para o programador
• Melhor forma de o layout ser colocado
online, o mais pixel perfect possível.
• Atualização do layout de maneira
consistente.
• Rapidez na construção do front-end
do site.
O plugin para o browser, Wirify permite
que ter uma versão wireframezada de
qualquer website online.
A observação contínua através dos
wireframes e do que outros designers /
websites estão a desenvolver ajuda a ter
uma visão de como um wireframe
contribui para a organização da
informação.
[Link]
[Link]
MAIS SOBRE GRIDS
[Link]
INTERAÇÃO HOMEM-COMPUTADOR
Licenciatura em Sistemas de Informação para a Gestão
Dicas para a Construção dos Wireframes
4. PESQUISAR INSPIRAÇÃO
O wireframing envolve investigar o que já foi criado. Assim, é
importante investigar o que já existe no mercado e ver como
outros produtos resolveram fluxos e a experiência do
utilizador através de wireframes.
Deve ser entendido como se pode criar algo comparável ou
melhor do que o que está no mercado agora.
Aqui estão algumas boas ideias de sites para buscar
inspiração.
Websites para Inspiração
INTERAÇÃO HOMEM-COMPUTADOR
Licenciatura em Sistemas de Informação para a Gestão
Antes de começar um wireframe procure
inspirações.
I ♥ wirefames é um excelente website
para encontrar inspiração.
Neste website pode ter uma visão geral e
um entendimento visual de como outros
designers estão a desenvolver os seus
processos de wireframing.
BEHANCE DRIBBBLE AWWWARDS PINTEREST
LAND-BOOK SITE INSPIRE PTTRNS UIMOVEMENT
Muito mais em [Link]/blog/post/design-inspiration-sites
Dicas para a Construção dos Wireframes
5. HIERARQUIZAR A INFORMAÇÃO
A hierarquia da informação é a ordem de importância que é
atribuída às informações apresentadas no produto.
A hierarquia da informação é a forma como a informação é
organizada e apresentada ao utilizador final.
Hierarquizar a Informação
Deve-se procurar o máximo de formas
possíveis para apresentar as informações, mas
não nos devemos prender à beleza, mas antes
privilegiar o que o utilizador final precisar saber
quando está nesse ecrã.
Nunca esquecer que o fluxo deve ser suave e
destacar uma ação de cada vez.
Dicas para a Construção dos Wireframes
6. CRIAR CASOS DE ESTUDO
Para se entender completamente o problema que um produto
digital está a tentar resolver, deve-se criar casos de estudo do
utilizador para melhor se visualizar como ele irá interagir com
o produto.
Criar Casos de Estudo
Tentar visualizar o mercado-alvo e criar um
storyboard de um cenário é uma excelente
forma de se pensar fora da caixa e começar a
tomar decisões informadas e que moldarão o
design do produto, desde a conceção até à sua
conclusão.
[Link]
Escolher as Ferramentas
INTERAÇÃO HOMEM-COMPUTADOR
Licenciatura em Sistemas de Informação para a Gestão
Construção de Wireframes - Balsamic
[Link]
[Link]
[Link]
Construção de Wireframes - XD
[Link]/xd
[Link]
Construção de Wireframes - Photoshop
[Link]/photoshop
Construção de Wireframes - Axure
[Link]
Construção de Wireframes - Online
[Link]
Construção de Wireframes - Online
[Link]
Construção de Wireframes - Online
[Link]
Construção de Wireframes – Papel
[Link]
[Link]