Wireframing é um aspecto essencial do processo de design UX. Mas o que é um wireframe e como você constrói um? Vamos descobrir.

Se você já mergulhou no fascinante campo do design UX, provavelmente já ouviu a palavra ‘wireframes’ por aí. Wireframes é uma parte crucial do processo de design do produto – mas o que são wireframes e por que são importantes?

Nesta postagem do blog, mostraremos tudo o que você precisa saber sobre wireframes. Começaremos dissecando a anatomia de um wireframe – desde o que ele é, até onde se encaixa no processo de design do produto, até quais recursos estão incluídos em um. Em seguida, daremos uma olhada nos diferentes tipos de wireframes, quais ferramentas são necessárias para criá-los e terminar com alguns exemplos de wireframes para mostrar sua versatilidade.

No final deste artigo, você será levado de novato em wireframes a especialista de boa fé!

Aqui está o que vamos cobrir:

1. O que é um wireframe?
2. Quando ocorre o wireframe?
3. Qual é o propósito de wireframing?
4. Quais são os diferentes tipos de wireframes?
5. O que está incluído em um wireframe?
6. Wireframes de sites x wireframes móveis
7. Quais ferramentas são usadas para criar wireframes?
8. Exemplos de wireframes
9. Conclusão

Pronto para levantar a tampa sobre o maravilhoso mundo dos wireframes? Lá vamos nós!

1. O que é um wireframe?

Vamos começar com a pergunta óbvia: o que é um wireframe?

Não muito diferente de um projeto arquitetônico, um wireframe é um esboço de esqueleto bidimensional de uma página da Web ou aplicativo. Os wireframes fornecem uma visão geral clara da estrutura da página, layout, arquitetura de informações, fluxo do usuário , funcionalidade e comportamentos pretendidos. Como um wireframe geralmente representa o conceito inicial do produto, o estilo, a cor e os gráficos são reduzidos ao mínimo.

Os wireframes podem ser desenhados à mão ou criados digitalmente, dependendo de quantos detalhes são necessários.

Wireframe é uma prática mais comumente usada por designers de UX. Este processo permite que todas as partes interessadas concordem sobre onde as informações serão colocadas antes que os desenvolvedores construam a interface com o código.

Quer saber como criar um wireframe? Confira este vídeo, onde o designer sênior de UX, Dee Scarano, apresenta o melhor guia para iniciantes em wireframing.

2. Quando se precisa de um o wireframe?

O processo de wireframing tende a ocorrer durante a fase de brainstorming do ciclo de vida do produto. Durante esta fase, os designers estão testando o escopo do produto, colaborando em ideias e identificando os requisitos de negócios. Um wireframe é geralmente a iteração inicial de uma página da Web, usada como ponto de partida para o design do produto.

Armados com os valiosos insights obtidos a partir do feedback do usuário, os designers podem desenvolver a próxima iteração mais detalhada do design do produto – como o protótipo ou maquete.

Para saber mais, acesse nosso blog explicando a diferença entre um wireframe, um protótipo e uma maquete.

3. Qual é o propósito de um wireframe?

Os wireframes atendem a três propósitos principais: eles mantêm o conceito focado no usuário, esclarecem e definem os recursos do site e são de criação rápida e barata. Vamos dar uma olhada em cada um desses propósitos com mais detalhes.

Os wireframes mantêm o conceito focado no usuário

Wireframes são efetivamente usados ​​como dispositivos de comunicação; eles facilitam o feedback dos usuários, instigam conversas com as partes interessadas e geram ideias entre os designers. A realização de testes de usuário durante o estágio inicial de wireframe permite que o designer tenha um feedback honesto e identifique os principais pontos fracos que ajudam a estabelecer e desenvolver o conceito do produto.

Wireframing é a maneira perfeita para os designers avaliarem como o usuário interagiria com a interface. Usando dispositivos como Lorem Ipsum, um texto pseudo-latino que atua como um espaço reservado para conteúdo futuro, os designers podem fazer aos usuários perguntas como “o que você espera que esteja escrito aqui?”

Esses insights ajudam o designer a entender o que é intuitivo para o usuário e a criar produtos confortáveis ​​e fáceis de usar.

Os wireframes esclarecem e definem os recursos do site

Ao comunicar suas ideias aos clientes, eles podem não ter o léxico técnico para acompanhar termos como “imagem de herói” ou “frase de chamariz”. Recursos específicos de wireframing comunicarão claramente a seus clientes como eles funcionarão e a que propósito servirão.

Ele também permite que todas as partes interessadas avaliem quanto espaço precisará ser alocado para cada recurso, conecte a arquitetura de informações do site ao seu design visual e esclareça a funcionalidade da página.

Ver os recursos em um wireframe também permitirá que você visualize como todos eles funcionam juntos – e pode até mesmo solicitar que você decida remover alguns se achar que eles não estão funcionando bem com o resto dos elementos da página. O estágio de wireframe é quando as partes interessadas podem ser brutais!

Wireframes são rápidos e baratos de criar

A melhor parte sobre wireframes? Eles são incrivelmente baratos e fáceis de criar. Na verdade, se você tiver uma caneta e papel à mão, poderá esboçar rapidamente um wireframe sem gastar um centavo. A abundância de ferramentas disponíveis significa que você também pode construir um wireframe digital em minutos (falaremos mais sobre isso mais tarde!).

Freqüentemente, quando um produto parece muito polido, é menos provável que o usuário seja honesto sobre suas primeiras impressões. Porém, ao expor o núcleo do layout da página, as falhas e os pontos problemáticos podem ser facilmente identificados e retificados, sem qualquer gasto significativo de tempo ou dinheiro. Quanto mais tarde ele entrar no processo de design do produto, mais difícil será fazer alterações!

4. Quais são os diferentes tipos de wireframes?

Existem três tipos principais de wireframes: wireframes de baixa fidelidade, wireframes de média fidelidade e wireframes de alta fidelidade. O fator de distinção mais significativo entre esses wireframes é a quantidade de detalhes que eles contêm.

Vejamos isso mais de perto:

Wireframes de baixa fidelidade

Os wireframes de baixa fidelidade são representações visuais básicas da página da Web e geralmente servem como o ponto de partida do design. Como tal, eles tendem a ser bastante rudimentares, criados sem qualquer senso de escala, grade ou precisão de pixel.

Os wireframes de baixa fidelidade omitem qualquer detalhe que possa ser uma distração e incluem apenas imagens simplistas, formas de blocos e conteúdo simulado – como texto de preenchimento para rótulos e cabeçalhos.

Wireframes de baixa fidelidade são úteis para iniciar conversas, decidir sobre o layout de navegação e mapear o fluxo do usuário . Resumindo, wireframes de baixa fidelidade são ideais se você tiver interessados ​​ou clientes na sala e quiser esboçar algo com uma caneta no meio da reunião. Eles também são incrivelmente úteis para designers que têm vários conceitos de produto e desejam decidir rapidamente em que direção tomar.

Wireframes de média fidelidade

O wireframe mais comumente usado dos três wireframes de média fidelidade apresenta representações mais precisas do layout. Embora ainda evitem distrações, como imagens ou tipografia, mais detalhes são atribuídos a componentes específicos e os recursos são claramente diferenciados uns dos outros.

Pesos de texto variáveis ​​também podem ser usados ​​para separar títulos e conteúdo do corpo. Embora ainda preto e branco, os designers podem usar diferentes tons de cinza para comunicar a proeminência visual de elementos individuais. Embora ainda sejam relevantes nos estágios iniciais de um produto, wireframes de média fidelidade geralmente são criados usando uma ferramenta de wireframing digital, como Sketch ou Figma .

Wireframes de alta fidelidade

Finalmente, wireframes de alta fidelidade apresentam layouts específicos para pixels. Onde um wireframe de baixa fidelidade pode incluir preenchimentos de texto pseudo-latino e caixas cinza preenchidas com um ‘X’ para indicar uma imagem, wireframes de alta fidelidade podem incluir imagens reais em destaque e conteúdo escrito relevante.

Esse detalhe adicionado torna wireframes de alta fidelidade ideais para explorar e documentar conceitos complexos, como sistemas de menu ou mapas interativos.

Os wireframes de alta fidelidade devem ser salvos para os estágios finais do ciclo de design do produto.

5. O que está incluído em um wireframe?

Como mencionamos anteriormente, quantos recursos são incluídos em um wireframe depende muito se o wireframe é de baixa, média ou alta fidelidade. No entanto, os elementos normalmente encontrados em wireframes incluem logotipos, campos de pesquisa, cabeçalhos, botões de compartilhamento e texto de espaço reservado pseudo-latino (Lorem Ipsum).

Wireframes de alta fidelidade também podem incluir sistemas de navegação, informações de contato e rodapés. A tipografia e as imagens não devem fazer parte de um wireframe de baixa ou média fidelidade – mas os designers costumam brincar com o tamanho do texto para representar a hierarquia de informações ou indicar um cabeçalho.

Os wireframes são tradicionalmente criados em escala de cinza, então os designers costumam brincar com o sombreamento – usando tons mais claros de cinza para representar cores claras e sombreados mais escuros para representar cores mais fortes. Em wireframes de alta fidelidade, os designers podem adicionar cores ocasionais; como vermelho para indicar um aviso ou mensagem de erro, ou azul escuro para representar um link ativo.

Como os wireframes são bidimensionais, é importante ter em mente que eles não exibem bem os recursos interativos da interface, como menus suspensos, estados de foco ou acordeões que implementam a funcionalidade mostrar-ocultar.

6. Wireframes de sites x wireframes móveis

Quando pensamos em wireframes, geralmente pensamos em wireframes de sites para desktop. Mas wireframes móveis requerem considerações especiais. Então, quais são as principais diferenças entre os dois?

Tamanho

Devido às diferenças de tamanho entre aplicativos móveis e sites de desktop , os layouts devem ser pensados ​​com muito cuidado. Devido à largura da tela em um site de desktop, por exemplo, o wireframe de seu site pode apresentar um layout que se espalha por várias colunas.

Em um aplicativo móvel, o número de colunas geralmente é restrito a no máximo uma ou duas colunas. Você precisará decidir se eles veem uma rolagem infinita ou se deseja diminuir o número de itens por página para exibir outro conteúdo abaixo.

Comportamento

A segunda diferença principal é o comportamento do aplicativo móvel ou site. Em um site, o usuário usará um mouse ou trackpad para navegar pela página. O usuário também pode clicar em determinados recursos para revelar informações adicionais ou até mesmo passar o mouse sobre certas interações para revelar menus.

Em um aplicativo móvel, no entanto, os usuários terão que tocar na tela para abrir um recurso. Ao fazer wireframes para aplicativos móveis, isso significa pensar com mais cuidado sobre como você incentivará seus usuários a tocar em um botão específico para alcançar um objetivo específico.

Interação

A maneira como os usuários interagem com os aplicativos móveis difere muito de como eles interagem em um desktop. O aplicativo pode extrair conteúdo e dados da Internet de maneira semelhante a um site, mas muitos aplicativos também oferecem ao usuário a opção de baixar conteúdo para uso offline. Esses “modos offline” específicos para aplicativos móveis devem ser refletidos em seu wireframe.

Para saber mais sobre a criação de wireframes para aplicativos móveis e sites, clique aqui!

7. Quais ferramentas são usadas para criar wireframes?

No cenário atual de abundante tecnologia, os designers têm uma infinidade de ferramentas e programas de wireframes avançados ao seu alcance. Os componentes integrados da IU, como elementos de formulário, estados de botão e navegação, permitem que os designers aproveitem as decisões de design predefinidas e criem wireframes em uma fração do tempo.

Uma das ferramentas de wireframes mais conhecidas na cena é o Sketch , que usa uma combinação de pranchetas e formas de desenho vetorial para permitir que os designers criem facilmente wireframes em uma tela baseada em pixels. O Sketch também possui um recurso de símbolos conveniente, o que significa que você poderá reutilizar os elementos da IU depois de criados.

Precisa de algo mais profissional do que um wireframe de papel, mas não está buscando a perfeição de pixels? Opte pelo igualmente popular Figma , uma ferramenta que permite que os designers se concentrem no layout, no design de interação intuitivo e na arquitetura de informação básica, em vez da qualidade estética.

8. Exemplos de wireframes

Para lhe dar uma ideia da variedade de maneiras pelas quais wireframes podem ser criados (e para fornecer a você alguma inspiração necessária para seus próprios wireframes), vamos dar uma olhada em alguns exemplos de wireframes:

9. Conclusão

Então aí está: tudo que você precisa saber (e mais um pouco) sobre wireframes. Eles podem parecer básicos o suficiente para serem negligenciados, mas os wireframes permitirão que você obtenha a aprovação vital de usuários, clientes e partes interessadas no que diz respeito ao layout e à navegação das páginas principais do produto.

Com essa aprovação, você pode seguir em frente com a confiança de que está projetando algo que seus clientes e usuários irão adorar. O bônus? Wireframes economizam muito tempo e dinheiro a longo prazo!

• 0 Comments
• desenvolvimento
• dicas
• tecnologia
• ti