PINGDOM_CANARY_STRING
Como fazer um wireframe

Como criar um wireframe no Lucidchart

Tempo de leitura: cerca de 6 minutos

Publicado por: Lucid Content Team

Você não é especialista em criar wireframes, mas precisa muito deles para apresentar um esboço básico das suas ideias ao desenvolvedor web. Desenhar um wireframe de forma manual não é legal, pois você não é nenhum desenhista, e nem tem tempo para aprender a usar um software de wireframe complexo.

Com o Lucidchart, você pode criar e compartilhar wireframes e mockups online de forma rápida, mesmo se não tiver experiência em design. Designers profissionais de UX provavelmente usariam uma ferramenta de wireframing mais sofisticada, mas o Lucidchart é uma ótima solução para quem não é designer. Crie wireframes e mockups bem elaborados para articular e apresentar suas ideias com precisão para desenvolvedores web e designers de UX.

E o melhor? É totalmente gratuito.

Como criar um wireframe no Lucidchart

Com o Lucidchart, você pode criar wireframes e mockups para sites e dispositivos móveis. Mockups são modelos visuais daquilo que você pretende desenvolver, e eles têm uma aparência muito parecida com o produto final, mas não possuem as mesmas funcionalidades. Os wireframes, por outro lado, são feitos para simular funcionalidades e não para ter uma aparência finalizada do produto.

Ambos os tipos de diagramas são ótimos para desenvolver conceitos de propriedades de UI/UX, e você conseguirá obter o máximo proveito dos seus wireframes e mockups ao usá-los juntos. Este guia ensina como criar wireframes no Lucidchart desde o início e também a partir de modelos prontos.

Economize tempo com modelos prontos de wireframes

Talvez você nunca tenha criado um wireframe, ou talvez você apenas queira economizar tempo. Seja o que for, recomendamos usar um modelo pronto para iniciar seu diagrama. Com formas básicas já inseridas nos modelos, você só precisa adicionar conteúdo. O Lucidchart oferece diversos tipos de modelos de wireframe, desde páginas iniciais de sites até aplicativos móveis.

Para abrir a biblioteca de modelos do Lucidchart, acesse sua biblioteca de documentos e clique na seta ao lado de “+Documento”. Deslize pelas categorias à esquerda até encontrar a seção de wireframes.

Clique em um modelo para ler mais sobre ele e, quando encontrar um modelo que atenda às suas necessidades, clique em “Criar documento”. (Você também pode clicar duas vezes em um modelo para abrir um novo documento.) Depois de escolher um modelo, pule para o terceiro passo abaixo.

Para mais informações sobre como usar modelos de wireframe do Lucidchart, assista ao nosso vídeo tutorial.

exemplo de wireframe básico de página inicial
Modelo de wireframe de página inicial (clique na imagem para ver em tamanho maior no Lucidchart)

Prefere começar do zero? Siga este guia para criar seu próprio wireframe no Lucidchart.

1. Selecione suas bibliotecas de formas

Antes de criar um wireframe, prepare seu espaço de trabalho fixando a barra de ferramentas às bibliotecas de formas que você irá usar. Com um documento em branco aberto no editor do Lucidchart, pressione “M” para abrir as bibliotecas de formas. Selecione as que você gostaria de usar e clique em “Salvar”.

Dependendo do seu projeto, você pode aproveitar diversos tipos de bibliotecas. Veja algumas dicas abaixo:

  • Formas de fluxogramas: essas formas geométricas padrão de fluxogramas já estão fixadas na barra de ferramentas, e recomendamos manter elas lá para facilitar o acesso. Use retângulos para dividir um site em diferentes seções, ou use setas para mostrar o fluxo de um elemento da interface do usuário para outro.
  • Mockups de interface do usuário: essa biblioteca de formas oferece uma variedade padrão de contêineres e widgets de interface do usuário. Há formas de sites em branco, bem como marcadores de posição para vídeos, mapas, gráficos, imagens e calendários.
  • Mockups para Android: se estiver criando um aplicativo ou uma página para um dispositivo Android, aqui você encontrará telefones e tablets Android, bem como diálogos e ícones específicos do sistema operacional.
  • Mockups para iOS: se você trabalha com iPhones e iPads, encontre-os na biblioteca de formas de iOS, junto com componentes de interface do usuário específicos para iOS.
  • Imagens: não esqueça da nossa galeria de imagens. Seja para incluir fundos elegantes ou logotipos específicos, pesquise e adicione imagens diretamente do Lucidchart.

Esse mockup foi criado usando uma combinação de formas e imagens básicas de fluxogramas, e a biblioteca de formas UI de mockups.

como fazer um mockup

2. Adicione formas em seu diagrama de wireframes

Comece a criar seu wireframe com um formato básico: o contêiner que abrigará todos os outros elementos. Dependendo da natureza do seu design, ele provavelmente será uma silhueta de um dispositivo móvel ou uma janela de navegador. Dispositivos móveis encontram-se nas bibliotecas de formas de “Dispositivos iOS” e “Dispositivos Android”. As janelas de navegadores estão na biblioteca de “Contêineres de interface do usuário”.

Conforme adiciona elementos, vá do geral ao específico, inserindo elementos de design grandes antes dos detalhes menores. Use contêineres para criar seções em seu diagrama, que podem representar barras de ferramentas, menus laterais etc.

Depois de inserir os elementos grandes, adicione botões e blocos de texto individuais. Por último, edite detalhes específicos de design, como fontes, cores, fotos e logotipos.

3. Use links, camadas e pontos de acesso para adicionar funcionalidades

Depois de concluir o layout do wireframe, use links, camadas e pontos de acesso para simular a funcionalidade do site. Essas três funções permitem criar botões que realmente funcionam, criar pop-ups, incluir links para acessar conteúdos externos e navegar de uma página do wireframe para outra. Experimente o diagrama interativo abaixo!

Saiba mais sobre links, camadas e pontos de acesso.

4. Use mockups para mapear fluxos da jornada do usuário

Fluxos da jornada do usuário mostram o andamento da interação do usuário com o aplicativo. Os fluxos podem focar na interface front-end que o usuário percorre, ou na infraestrutura de back-end construída pelo desenvolvedor. Em vez de esboçar um fluxo da jornada do usuário com apenas formas de fluxogramas, use mockups para apresentar a aparência do aplicativo aos membros da sua equipe.

exemplo de fluxo de wireframes de aplicativo bancário
Modelo de wireflow de aplicativos bancários (clique na imagem para ver tem tamanho maior no Lucidchart)

5. Publique, compartilhe ou apresente

Mockups e wireframes podem demorar bastante tempo para serem desenvolvidos. Ao concluí-lo, você pode apresentar seu trabalho de diversas maneiras:

  • Use o modo de apresentação do Lucidchart para simular um site de verdade. Pontos de acesso e links terão a aparência e funcionalidade de botões e pop-ups reais.
  • Incorpore um diagrama dinâmico em seu site. Ao atualizar seu documento do Lucidchart, as alterações também serão feitas em todos os lugares que seu documento estiver incorporado.
  • Publique seu wireframe como um PDF ou site. Qualquer pessoa com o URL poderá visualizar e interagir com seu diagrama.
  • Compartilhe com seus colaboradores um link para acessar o documento. Você pode pedir suas opiniões sobre o design, e fazer perguntas para eles por meio de comentários.

Você tem experiência em criar wireframes? Envie suas melhores dicas e macetes nos comentários abaixo!

Comece a diagramar com o Lucidchart hoje mesmo — gratuitamente!

Cadastre‐se gratuitamente

Bastante acessado

what does HR do

O que faz o RH? 11 responsabilidades importantes

Sobre o Lucidchart

O Lucidchart é o aplicativo de diagramação inteligente que capacita as equipes a esclarecer a complexidade, alinhar seus insights e construir o futuro, mais rapidamente. Com esta solução intuitiva baseada em nuvem, todos podem trabalhar visualmente e colaborar em tempo real enquanto criam fluxogramas, maquetes, diagramas UML e muito mais.

O Lucidchart é a alternativa on-line ao Visio mais conhecida e utilizada em mais de 180 países por milhões de usuários, desde gerentes de vendas para mapear organizações-alvo a diretores de TI para visualizar sua infraestrutura de rede.

Iniciar

  • Preços
  • Individual
  • Equipe
  • Empresa
  • Falar com área de vendas
Português
EnglishFrançaisDeutsch日本語PortuguêsEspañolNederlandsPусскийItaliano
PrivacidadeJurídico
Baixe o(a) Apple App StoreBaixe o(a) Google Play Store
© 2022 Lucid Software Inc.