O Wireframe é uma das etapas iniciais do desenvolvimento do design de interfaces. Ele é um esqueleto do projeto, e serve para estimarmos a disposição da interface de um produto, como um site ou aplicativo. Nesta etapa, não definimos as escolhas visuais do produto, como tipos de fonte, cores e efeitos.
Seu intuito não é definir o visual do produto, como cores, fontes e estilos, mas sim dar um direcionamento na disposição visual do projeto e também da sua arquitetura de informação, auxiliando o profissional responsável a diagramar e aplicar a identidade visual na hora de fazer o desenho da interface e protótipos de alta fidelidade.
O wireframe na cocriação
O Wireframe é uma boa ferramenta para projetos de cocriação, onde desenvolvemos o produto com o cliente. O uso deste método visual junto ao cliente possibilita que o mesmo visualize sua ideia de forma mais prática, para ter noção se é possível aplicar o que ele idealiza para seu produto sem prejuízo na usabilidade. Além disso, ele agiliza a aplicação de workshops de cocriação com mais pessoas e equipes, tornando as ideias sugeridas em conjunto de forma palpável e rápida.
Wireframe e o conteúdo
Quando estamos criando um wireframe, conseguimos também dimensionar como será o conteúdo do site, dependendo do modelo de negócio. Quando o seu produto depende de textos extensos, o wireframe auxilia a estruturar como o texto ficará com a parte visual pronta. Assim, conseguimos aplicar uma estratégia de criação content first: onde o conteúdo vem antes do design em si.
Tipos de wireframe
Wireframe em papel
Os wireframes em papel são uma ótima ferramenta para sessões de workshops presenciais e também para rascunhos iniciais de um design, quando não se está próximo de um computador ou tablet. Por ser um método simples, podemos criá-lo com ferramentas baratas, como papel, caneta e marcadores.
Wireframe digital
Com o ritmo das empresas e também com a possibilidade de ministrar workshops on-line, temos diversas ferramentas para criação de wireframes. Podemos criar um com qualquer ferramenta, desde editores de imagens como o Photoshop até ferramentas voltadas para web design, como o Sketch, o Adobe XD e o Figma.
Usando o Figma
O Figma é uma plataforma voltada para a criação de design digital, principalmente na criação de interfaces de produtos digitais e protótipos de alta fidelidade. A plataforma é colaborativa, com uma comunidade extensa de profissionais de design e experiência do usuário.
Ele permite criar peças de design de forma prática, possibilitando a criação em conjunto e o compartilhamento de forma fácil, pois pode ser utilizado no navegador, facilitando o envio de arquivos para clientes e o seu uso em reuniões e workshops de cocriação.
Para utilizar o Figma na criação de wireframe, o primeiro passo é criar uma biblioteca com os componentes comumente utilizados em todo tipo de produto, como botões, banners, headers, tamanho de imagem, textos e títulos. Ter esses elementos prontos agiliza não só a criação do wireframe em si, mas também na etapa de design, já que você tem a percepção da hierarquia do conteúdo, e por isso pode focar mais nas questões visuais.
Os elementos da biblioteca precisam estar em uma página própria e ser componentizados para conseguir ter uma reprodução de wireframe ágil e organizada. Para isso, selecione o elemento que você criou e clique no símbolo que aparece no topo da página. Os componentes criados aparecem na aba de Assets, no canto esquerdo da tela, e para utilizá-lo basta arrastar o componente desejado para a tela.
Quando for utilizar o wireframe em um workshop de cocriação ou fazer um projeto para um cliente, não esqueça de fazer uma cópia da biblioteca. Muitas vezes será necessário inserir elementos específicos ou alterar certos elementos existentes por conta do produto a ser desenvolvido, sendo importante realizar essa cópia para não afetar a biblioteca padrão.
Ao montar uma tela de wireframe, se atente em usar um grid para te guiar. O grid é um conjunto de linhas e colunas com a função de dividir a tela, trazendo uma estrutura para inserir e até criar elementos de design de forma proporcional. Na Tuia, utilizamos a proporção de múltiplos de 4.
Aprenda mais sobre UX Design
Acompanhe outros posts sobre UX Design e conteúdo:
O que é sitemap e qual a sua importância para a arquitetura de informação
O que é Teste A/B, para que serve e quando utilizar
Dicas práticas de acessibilidade digital para o seu produto
Nós na Tuia
Aqui na Tuia temos soluções para empresas e produtos buscando melhorias através do design e conteúdo. Se interessou por nosso método de trabalho? Entre em contato conosco.
Nos acompanhe também em nossas páginas do LinkedIn e Instagram.
Referências
Wireframes: o que são e por que os utilizamos? Disponível em: https://www.organicadigital.com/blog/o-que-sao-wireframes-e-por-que-os-utilizamos/
How to Draw a Wireframe (Even if You Can’t Draw). Disponível em: https://www.nngroup.com/articles/draw-wireframe-even-if-you-cant-draw/
Confira o canal do Figma no YouTube: https://www.youtube.com/@Figma
