PINGDOM_CANARY_STRING
Lucidspark LogoO que são wireframes?
    Get started
Diagram

O que são wireframes?

What would you like to do with a wireframe?

Show me tips on how to make a wireframe.
I'd like to know about different types of wireframes.

Conteúdo

Leitura de 13 minuto(s)

Ready to try your hand at freestyle brainstorming? Take Lucidspark for a spin. It's a virtual whiteboard built for collaborative ideation.

Get started

O que é um wireframe?

Vamos supor que você foi contratado para construir uma casa. Qual o primeiro passo a ser dado? Antes de começar a construir, você precisa criar uma planta. É melhor refazer a planta agora do que reformar a casa inteira depois. 

Mas você não está aqui para aprender sobre construção — você quer criar um aplicativo ou, quem sabe, um site. E os processos até que são semelhantes: você não deve criar um aplicativo ou site sem criar diagramas de wireframe primeiro.

Assim como uma planta, o wireframe é um desenho básico focado na estrutura e layout. Pense no wireframe como o “esqueleto” do seu site ou aplicativo.

Wireframes ajudam você a organizar e estruturar as coisas, para focar nos detalhes em outro momento do projeto. Um wireframe é composto por formas básicas que representam os elementos visuais de uma página, como barras de pesquisa, imagens de cabeçalho e outros contêineres.

Wireframes podem parecer complexos, mas podem ser usados por qualquer pessoa, não apenas profissionais de UX. Wireframes não requerem software especializado ou uma vasta experiência. Muitos wireframes começam como esboços em um caderno ou até mesmo num guardanapo — qualquer coisa que esteja ao seu alcance ao surgir uma inspiração. No entanto, para realmente tirar proveito de seus wireframes, não os deixe só como esboços. Ao desenvolver sua ideia inicial, use uma plataforma digital de wireframes para aprimorar seus diagramas, acrescentar detalhes e simular a experiência do usuário. Os melhores wireframes mostram o desenho da página, o fluxo do usuário, arquitetura de informações e comportamentos esperados do usuário.

Wireframes oferecem dois benefícios principais: dão a todas as partes interessadas uma visão clara do design do seu produto, e também mantêm o design focado no usuário.

Tipos de wireframes

Wireframes normalmente são divididos em três categorias: baixa fidelidade, fidelidade média e alta fidelidade. A fidelidade de um wireframe é relacionada à quantidade de detalhes que ele contém. Wireframes de baixa fidelidade são contornos esboçados e focados no layout, e wireframes de alta fidelidade incluem texto de preenchimento e imitam algumas funcionalidades do usuário. 
Vamos fazer uma análise mais profunda dessas distinções e avaliar casos de uso para cada nível de wireframe.

Wireframes de baixa fidelidade

wireframe de baixa fidelidade

Um dos primeiros passos no processo de design é criar um wireframe de baixa fidelidade. Considere esses diagramas como rascunhos e uma maneira de visualizar rapidamente o layout básico do seu aplicativo ou site. Um wireframe de baixa fidelidade é simples e prático, portanto, adicione somente textos essenciais e formas básicas. Não inclua imagens, texto de preenchimento e ícones, pois todos podem ser representados por uma caixa ou “X” etc.

Lembre-se: rápido não significa desleixado. Quem quer entregar um esboço em um guardanapo para o chefe? Use uma plataforma digital para criar wireframes práticos e profissionais, e você ainda tem acesso a recursos de colaboração. Você não precisa fazer cópias físicas ou tirar fotos de um quadro branco. Basta clicar em “compartilhar”.

Wireframes de fidelidade média

wireframes de fidelidade média

Depois de registrar suas ideias com wireframes de baixa fidelidade, é hora de aprimorá-los. Ao criar um wireframe de fidelidade média, foque em sua escala e proporção. Qual é o tamanho de cada elemento em relação à janela ou à tela como um todo? E aos outros elementos? A estilização ainda não é importante. Quando chegar o momento, você pode inserir ícones genéricos e textos importantes.

Wireframes de baixa fidelidade ajudam a conquistar o apoio das partes interessadas, mas só isso. Não há mais funcionalidade. Wireframes de fidelidade média desenvolvem os rascunhos iniciais em documentos mais otimizados e detalhados. Normalmente, são criados no início do processo de design.

Algumas plataformas digitais de criação de wireframes permitem adicionar funcionalidades de usuário aos diagramas. Um wireframe de fidelidade média deve oferecer ao visitante uma sensação de fluxo do usuário. Se um botão altera o layout da página ou acessa uma nova página, vincule-o a um wireframe que represente a nova tela.

Wireframes de alta fidelidade

Em wireframes de alta fidelidade, o aspecto mais importante é a precisão. Cada elemento no diagrama deve estar posicionado perfeitamente no lugar certo, em uma questão de pixels. Sempre que possível, inclua as imagens e o texto que estarão no produto final. Menus e outros elementos clicáveis da página devem ser funcionais e incluir o mesmo grau de detalhe.

Devido ao grande número de detalhes em um wireframe de alta fidelidade, os diagramas geralmente são criados por designers de UX. Enquanto os outros dois tipos de wireframes geralmente ajudam quem não é designer a comunicar suas ideias a profissionais de design, os wireframes de alta fidelidade são o contrário: designers usam wireframes de alta fidelidade para que outras partes interessadas possam conferir o design final.

Wireframes, principalmente de alta fidelidade, são muito semelhantes a diagramas de mockup. Se você não sabe distinguir entre esses dois tipos de diagramas, a seção a seguir aborda seus respectivos recursos e usos.

Wireframes x mockup

Wireframes são considerados as plantas de aplicativos e sites, e um mockup é um modelo 3D colorido e em escala. Assim como você nunca confundiria uma planta baixa com uma casa acabada, você nunca acreditaria que um wireframe, mesmo de alta fidelidade, é o produto finalizado. E é para ser assim. Wireframes não são feitos para serem visualmente incríveis — eles são usados para comunicar estrutura e funcionalidade.

Mockups, por outro lado, modelam o produto final com a maior precisão possível. Um mockup inclui toda a estilização, como fontes, cores e imagens, mas não as funcionalidades de um wireframe.

Conforme descrito acima, wireframes são usados durante todo o processo de design e geralmente são criados por pessoas que não fazem parte da equipe de design. Wireframes ajudam as partes interessadas a solucionar quaisquer falhas de design estrutural e a concordarem entre si sobre como o aplicativo ou site funcionará. A maioria dos elementos estéticos são deixados para outro momento.

Mockups focam na aparência do produto e geralmente são criadas por designers quando o processo de criação de wireframes estiver concluído. Uma vez que os mockups de um produto são aprovados pelas partes interessadas, o projeto pode avançar para a fase de desenvolvimento.

O que são wireframes em UX?

Qualquer um pode criar um wireframe. No entanto, os wireframes costumam ser usados por designers de UX, e esta seção explicará o porquê.

Como o nome do cargo indica, designers de UX (ou designers de experiência do usuário) determinam as diferentes maneiras através das quais o usuário interage com um produto. Em aplicativos e sites, designers de UX são responsáveis pelo design da interface. Wireframes permitem aos designers de UX simularem a interface do usuário e aperfeiçoarem o design antes de iniciar o trabalho de codificação.

Como é isso na prática? Ao projetar uma interface web, a equipe de UX precisa considerar diversos comportamentos de usuário: como o usuário navegará pela página? Haverá pop-ups? Menus suspensos? E, em caso afirmativo, onde estão localizados esses recursos?

Ao criar wireframes de sites, designers de UX conseguem fazer rascunhos do layout do site e do fluxo do usuário. Os objetos dentro de um wireframe podem ser clicáveis para simular a experiência real do usuário. Designers podem então compartilhar esses wireframes com outras equipes para obter opiniões. Designers de UX usam wireframes de aplicativos para a mesma finalidade.

O Whiteboard é rápido e fácil com o Lucidspark. Inicie uma avaliação gratuita hoje mesmo para começar a criar e colaborar.

Get started

Quando começar a criar wireframes

Quando se trata de wireframes, quanto mais cedo você começar, melhor. (Na medida do possível, é claro.) Determinados projetos exigem diferentes tipos de fluxos de trabalho, mas, como regra geral, você deve criar seu primeiro wireframe na fase inicial ou de planejamento do ciclo de vida do projeto.

Se for criar o wireframe na fase inicial, comece com wireframes de baixa fidelidade. A fase inicial é o melhor momento para fazer experiências: você teve uma ideia de um site ou aplicativo, mas não sabe exatamente como ele será. Wireframes de baixa fidelidade são rápidos e fáceis de criar, portanto, são ferramentas de brainstorming perfeitas. Registre suas ideias, envie-as para outras partes interessadas para obter opiniões e, em seguida, comece tudo de novo.

Conforme o projeto avança para a fase de planejamento, comece a gerar wireframes de média e alta fidelidade. A fase de planejamento é quando os projetos começam a se concretizar, e você precisará de wireframes abrangentes antes de passar para a próxima fase — a execução.

Conforme o andamento do projeto nas duas primeiras fases, seus wireframes devem se tornar mais complexos e aprimorados. Ao entregar os designs para a equipe de desenvolvimento para iniciar a codificação (a fase de execução), o processo de wireframes será encerrado.

Elementos de um wireframe

Wireframes parecem simples pois não há muito acontecendo esteticamente. De certa forma, é por isso que eles são tão eficazes. Ao desenvolver sites e aplicativos, é muito tentador tentar criar fontes e cores logo antes de planejar a experiência do usuário adequadamente. Em wireframes, você deixa essas distrações de lado e foca em três aspectos fundamentais do seu produto: design de informações, design de navegação e design de interface.

Design de informações

Ao interagir com seu aplicativo ou site, os usuários recebem informações constantemente: que tipo de site estão visitando? Como podem interagir com ele? Qual é o “propósito” do site? O processo é automático e, em grande parte, subliminar. Como designer, você facilita essa interação ao escolher como apresentar as informações em uma página.

Como é isso na prática?

Por exemplo, se o seu site fornece um serviço de mensagens, a maioria dos usuários que visitam ele se enquadra em duas categorias: usuários de retorno ou novos visitantes. Usuários de retorno provavelmente farão login, e novos visitantes podem querer criar uma conta ou simplesmente aprender mais sobre o seu serviço. Na página inicial, você precisa atender cada tipo de visitante e lhes fornecer informações suficientes para atingir seus respectivos objetivos. Talvez essa informação seja comunicada por meio de botões: fazer login, cadastre-se ou mais informações. O design de informações decide o que incluir e onde posicioná-los.

Design de navegação

Todos nós já gastamos muito tempo procurando o menu de “Configurações” em aplicativos. E todos já tivemos a sensação de que um site está dando voltas na navegação. Por exemplo, quando você acha que a página de “Informações da conta” está apenas a um clique, mas você acaba voltando para a página inicial ou, pior, uma página de erro 404. O ponto é, como usuários, passamos por problemas de design de navegação o tempo todo.

O design de navegação determina as maneiras pelas quais os usuários se movimentam pelo seu aplicativo ou site. A partir de qualquer tela, o usuário pode acessar várias outras telas. No entanto, eles não saberão disso a menos que você os informe. Menus suspensos, links clicáveis e barras de rolagem são exemplos de elementos visuais que ajudam o usuário a navegar no seu produto.

Design de interface

O design de interface junta tudo isso: informações, navegação e, bem, tudo o que está em seu wireframe. Tanto o design de navegação quanto o design de informações têm componentes na tela, como botões, menus etc. O design de interface é como esses elementos são incorporados na interface do usuário como um todo, que inclui outros elementos como caixas de texto, imagens de cabeçalho e barras laterais.

Como fazer um wireframe

Ao saber mais sobre a teoria dos wireframes fornecida neste guia, é hora de colocar esse conhecimento todo em prática. Veja alguns passos para começar a criar wireframes:

1. Mapear um plano


wireframe

Não importa se você está usando um wireframe para um aplicativo ou site, uma coisa é certa: você precisará criar mais de um wireframe. Wireframes tratam do fluxo do usuário. Como o usuário se move pelo seu aplicativo? Há algum lugar específico ao qual você gostaria que ele fosse?

Antes de começar a criar seus diagramas, mapeie os possíveis caminhos que o usuário pode percorrer, listando cada nova tela que ele poderá encontrar. Para cada tela, você precisará de um wireframe adicional.

Esse trabalho preliminar pode parecer exagerado, mas vale a pena. Ir diretamente para o processo de criação de wireframes sem ter uma ideia clara do fluxo do usuário acaba gerando diagramas confusos e bagunçados.

2. Adicionar formas básicas


wireframe

Depois de planejar tudo de forma minuciosa, você estará pronto para iniciar os rascunhos. Comece selecionando um “quadro” para seu diagrama. Se você estiver criando um wireframe de aplicativo, selecione uma forma semelhante à tela de um celular. Para um wireframe de site, escolha uma forma semelhante a uma janela de navegador. A maioria das plataformas de wireframes digitais terá ambos os quadros básicos disponíveis em sua biblioteca de formas.

Em seguida, adicione os maiores elementos do wireframe, como formas e contêineres básicos, que representam itens como uma barra de cabeçalho, coluna lateral, caixa de texto etc. Não há necessidade de incluir texto ou imagens neste momento, basta estabelecer o arranjo geral.

Repita este processo para cada wireframe que você precisa criar.

3. Adicionar botões e vincular wireframes


wireframe

Depois de estabelecer o arranjo dos wireframes, é hora de adicionar algumas funcionalidades. Em qualquer tela do seu produto, provavelmente há vários botões que direcionarão o usuário para uma nova tela. Você pode tê-los adicionado como formas no último passo, caso contrário, selecione uma forma básica para representar cada botão e adicione-a agora. Você também pode adicionar qualquer texto que apareça no botão (“página inicial”, por exemplo).

Se sua plataforma de wireframes inclui recursos de vinculação, vincule cada botão ao wireframe para o qual ele deve direcionar o usuário.

Dica: selecione uma única fonte para usar no wireframe. Aplique texto em negrito e itálico quando for necessário, e espere para usar qualquer outro estilo de texto nos mockups e nos protótipos.

4. Obter opiniões e fazer alterações


wireframe

Você dedicou muitas horas aos seus wireframes. O arranjo parece estar certo, e você os vinculou para simular o fluxo do usuário. Agora é hora de compartilhá-los com outras partes interessadas. Há aspectos dos seus wireframes que provavelmente precisam ser melhorados, e por isso que é importante mostrá-los para pessoas novas antes de acrescentar mais detalhes.

Talvez a localização de um botão não esteja perfeita. Ou talvez a barra de menus seja muito grande e esteja dominando a página. Seja qual forem as opiniões dos seus colegas, ouça e considere-as pois é um processo colaborativo.

Faça as alterações sugeridas para melhorar seus wireframes. Repita o processo até que seus projetos sejam aprovados por todas as partes interessadas necessárias.

5. Adicionar detalhes


wireframe

Seus diagramas agora provavelmente são wireframes de fidelidade média. Com o projeto básico aprovado, você pode começar a aprimorar os detalhes. Adicione imagens e texto. Use cores para diferenciar os diversos elementos na página, mas continue mantendo tudo na escala de cinza. Certifique-se de que tudo está no tamanho certo, até o último pixel.

6. Compartilhar seus wireframes

Agora você deve ter um conjunto de wireframes funcionais de alta fidelidade. Compartilhe-os com as partes interessadas do projeto e equipes relevantes.


Ready to try your hand at freestyle brainstorming? Take Lucidspark for a spin. It's a virtual whiteboard built for collaborative ideation.

Português
EnglishFrançaisDeutsch日本語PortuguêsEspañolNederlandsPусскийItaliano
PrivacidadeJurídico
© 2021 Lucid Software Inc.