Um guia para iniciantes em design de wireframe de sites

O que é um wireframe para um site?

Um wireframe é um layout muito básico para um site ou aplicativo móvel. Um wireframe pode ser tão simples quanto um esboço muito grosseiro ou pode ser um design mais polido, mas todos são considerados de baixa ou média fidelidade, o que significa que não se parecem muito com o design final.

Pense em um wireframe como a estrutura de uma casa. Quando uma casa é emoldurada, você pode ver a estrutura básica disposta em tábuas, mas não tem ideia de como será a casa final, porque as partes bonitas – paredes, janelas, portas, varandas e outros elementos – são adicionadas posteriormente. .

Wireframes não precisam ser bonitos ou parecer um site ou aplicativo real. Na verdade, é melhor que sejam simples. Isso permite uma iteração rápida. Você pode criar vinte ou mais esboços rápidos no tempo que levaria para criar uma bela maquete. Quanto mais simples você mantiver seu wireframe, menos comprometido você estará com ele e mais fácil será fazer alterações.

Qual é a finalidade dos wireframes de sites?

Wireframes servem como estrutura básica para um site ou aplicativo. Assim como um artista pode criar um storyboard de esboços para um filme ou desenho animado para que as pessoas saibam como as cenas serão exibidas, um wireframe ajuda alguém que está construindo um site ou aplicativo a criar a estrutura. Os wireframes permitem uma iteração rápida, tornando rápida e fácil a alteração do layout, da navegação e da aparência.

Existem 3 tipos principais de wireframes:

1. Baixa fidelidade (lo-fi): Um wireframe de baixa fidelidade se parece muito pouco com o design final. É um esboço simples ou um design gráfico simples em preto e branco. Geralmente há poucos detalhes e pode nem haver texto real, apenas linhas ou caixas esboçadas onde os recursos seriam inseridos.
2. Média fidelidade (mid-fi): Um wireframe de média fidelidade é um pouco mais detalhado e um pouco mais próximo de um design polido. Eles geralmente são em preto e branco e não contêm imagens reais, o mesmo que um wireframe de baixa fidelidade, mas podem ter um pouco mais de detalhes, como representações de elementos gráficos como botões ou espaços reservados para imagens.
3. Alta fidelidade (hi-fi): Um wireframe de alta fidelidade vai além dos espaços reservados para imagens e do texto lorem ipsum. Um wireframe de alta fidelidade geralmente faz parte do estágio de protótipo, incluindo conteúdo real, tipografia, cores e outros elementos de marca que serão incorporados ao site ou aplicativo final.

Wireframe vs maquete vs protótipo

Muitas pessoas usam as palavras wireframe, maquete e protótipo de forma intercambiável, mas cada uma delas é uma entrega diferente. Um wireframe é um esboço ou layout gráfico rápido básico de um site ou aplicativo. Embora cada uma dessas etapas de design de site tenha muito em comum, é importante observar as diferenças quando se trata de construir seu próprio site ou aplicativo.

Uma maquete é muito mais detalhada do que um wireframe e pode parecer muito semelhante ao design final, mas ainda não é funcional. Serve apenas como elemento visual para mostrar como será o produto. Seguindo a analogia da construção de uma casa, uma maquete é mais como uma pintura ou modelo 3D para mostrar a aparência do produto final. Você não pode fazer muito com isso, mas dá uma bela imagem de como será quando terminar.

Um protótipo tem funcionalidade adicionada. Por exemplo, um wireframe de papel de baixa fidelidade (esboçado) pode ser transformado em um protótipo criando várias telas pelas quais as pessoas poderiam fazer uma navegação simulada, ou um wireframe de alta fidelidade pode ser transformado em um protótipo no Figma, Sketch, Adobe XD , ou outro pacote de software de prototipagem, conectando elementos para simular a funcionalidade do produto final. Em nossa analogia com a construção de uma casa, o protótipo seria como um modelo da casa real do tamanho de uma casa de boneca ou uma simulação completa em 3D. Você pode ver exatamente como é e como os quartos fluem e tal, mas ainda assim não consegue viver nele.

O que deve ser incluído em um wireframe de site?

Os elementos que devem ser incluídos em um wireframe variam de acordo com o tipo de site ou aplicativo que você está criando, a finalidade que ele servirá, quem será seu público-alvo e outros fatores. De modo geral, existem elementos importantes que quase todos os wireframes devem conter.

1. Navegação: a menos que você esteja criando algo que seja apenas uma página, você precisará incluir elementos para permitir que os usuários se movam entre as páginas, incluindo um botão ou link para retornar à página inicial.
2. Logotipo: a maioria dos sites ou aplicativos possui um logotipo ou nome de site, geralmente localizado no canto superior esquerdo ou no centro da página. Em um wireframe, o logotipo geralmente é apenas uma forma usada como espaço reservado, ou talvez o site ou o nome da empresa no texto.
3. Layout: um wireframe terá um layout geral que inclui locais para imagens, texto, navegação e outros elementos. É como um plano a seguir ao construir o produto acabado.
4. Call to action: uma call to action, ou CTA, facilita uma ação que você deseja que o usuário execute. Por exemplo, você pode querer que o usuário se inscreva em sua lista de e-mail ou compre algo. O CTA geralmente é um botão ou link de texto, possivelmente com funcionalidades adicionais anexadas, como um formulário. Pode haver várias frases de chamariz, mas espaços reservados devem ser incluídos para elas.

Todos esses elementos podem ser (e geralmente devem ser) simples espaços reservados. Eles não precisam ser específicos na fase de wireframe. Por exemplo, os links de navegação na parte superior da página podem ser apenas linhas que mostram para onde o menu irá eventualmente. Ou o logotipo pode ser apenas uma caixa ou círculo indicando um possível posicionamento. Lembre-se de que o objetivo de um wireframe é mostrar o layout básico, não escolher fontes ou cores ou ser representativo do design final.

Você precisa do seu conteúdo pronto para o wireframe?

Não. Você não precisa de nenhum tipo de conteúdo pronto para construir seu wireframe. Como um wireframe lo-fi pode ser tão simples quanto um esboço com caixas e linhas como espaços reservados, você nem precisa saber coisas como opções de navegação. Se quiser ver a aparência de um design com conteúdo, você pode usar um texto de espaço reservado conhecido como lorem ipsum.

Muitos pacotes de software possuem plug-ins lorem ipsum que você pode usar para gerar texto de espaço reservado, ou você pode apenas inventar algo sem sentido para ter uma ideia de como o conteúdo ficará na página e com as fontes escolhidas. Você pode até copiar texto de um livro de domínio público ou artigo da Wikipedia para substituir o conteúdo.

Como criar um wireframe

Criar um wireframe é um processo relativamente simples. Um wireframe geralmente começa como um simples esboço. Não precisa ser um esboço bonito. Nem precisa ter linhas retas. Você não precisa de habilidades de desenho. Se você conseguir segurar uma caneta ou lápis, poderá esboçar uma estrutura de arame.

Se estiver criando um site completo ou um aplicativo móvel, você precisará criar vários wireframes. Por enquanto, vamos nos concentrar em criar apenas um. Você pode repetir esse processo para cada wireframe, conforme necessário.

1. Liste os elementos necessários

O primeiro passo na criação de um wireframe é decidir o que deve estar na página. Você provavelmente precisará de elementos como logotipo, menu de navegação, algumas imagens, título e algum texto ou outro conteúdo. Você sempre pode adicionar elementos posteriormente, mas tente ser o mais completo possível.

2. Crie esboços

A seguir, você desejará esboçar pelo menos um layout básico para o wireframe. Você pode fazer isso digitalmente, se preferir, mas geralmente é mais rápido e fácil fazer iterações em seu wireframe se você apenas esboçar com uma caneta ou lápis. O objetivo desta etapa é experimentar diferentes layouts para chegar a um que seja mais fácil para os usuários interagirem. Você pode criar quantos esboços de wireframe desejar neste estágio.

3. Finalize o wireframe

Depois de escolher um esboço como base, você pode criar um wireframe mais sofisticado para mostrar às pessoas para obter feedback. Nunca é uma boa ideia criar algo sem testá-lo com outras pessoas que possam fornecer feedback valioso e ajudá-lo a melhorá-lo. Você pode usar um programa como o Figma para criar uma versão mais refinada do esboço final.

4. Solicite feedback inicial

Depois de ter um ou dois wireframes de que realmente goste, busque feedback das partes interessadas ou usuários em potencial. As partes interessadas são pessoas que têm interesse no resultado final. Pode ser seu chefe, parceiro de negócios, cliente ou pessoas que possam usar o site ou aplicativo final. Tente não usar amigos ou familiares nesta fase, pois o feedback deles provavelmente será tendencioso e eles provavelmente não serão seu mercado-alvo.

5. Itere o design

Depois de receber o feedback, você provavelmente precisará fazer algumas alterações em seu wireframe. Depois de fazer as alterações, peça feedback novamente. Isso pode ser com as mesmas pessoas de antes ou com um grupo diferente, dependendo de suas necessidades. Continue iterando e obtendo feedback até estar satisfeito com o design e o consenso geral do feedback ser positivo.

Wireframes são essenciais para o processo de design do site

Pode ser tentador pular o processo de wireframing porque você acha que levará muito tempo, mas o wireframing economizará seu tempo no longo prazo. Como o wireframing permite detectar problemas e alterá-los no início do processo, ele pode evitar problemas enormes que mais tarde levariam muito mais tempo para serem corrigidos. Depois de começar a criar wireframes de sites e aplicativos, é improvável que você queira parar.

Depois de concluir seu wireframe, você pode usar um construtor de sites como o fornecido pelo Mailchimp para criar seu site. O editor é simples e fácil de usar, ao mesmo tempo que oferece flexibilidade e uma sólida variedade de opções que podem ajudar a dar vida ao seu wireframe em muito pouco tempo. Mailchimp também oferece serviços adicionais para aproveitar ao máximo seu site, incluindo um pacote abrangente de gerenciamento de relacionamento com o cliente e um serviço de lista de e-mail poderoso e acessível. Comece hoje mesmo com o construtor de sites do Mailchimp.