O que é wireframe?

Originalmente, o termo “wireframe” descrevia uma representação visual de objetos tridimensionais, como aqueles usados ​​na concepção e no desenvolvimento de produtos. Atualmente, o termo também é usado para descrever a modelagem 3D em animações por computador e na concepção e no desenvolvimento de páginas web em 2D e aplicativos móveis.

Em web design, um wireframe ou diagrama de wireframe é uma representação visual em escala de cinza da estrutura e funcionalidade de uma única página web ou uma tela de aplicativo móvel. Wireframes são usados ​​no início do processo de desenvolvimento para estabelecer a estrutura básica de uma página antes de acrescentar o design visual e conteúdo, e podem ser criados usando papel, em HTML/CSS ou usando aplicativos de software. 

Wireframes substituem o caráter abstrato do mapa do site, que normalmente é o primeiro passo para o desenvolvimento de sites, com algo mais tangível e compreensível. Há diversas finalidades inter-relacionadas para os wireframes:

• Garantir que o site ou aplicativo seja criado de acordo com as metas.

  Ver os destaques claramente, e com influência criativa mínima, permite às partes interessadas focar outros aspectos do projeto. Os wireframes definem expectativas sobre como os recursos serão implementados ao mostrar como funcionarão, onde estarão localizados e os benefícios que fornecerão. Um recurso pode ser removido caso não se encaixe nas metas do seu site.

• Focar a usabilidade.

  O wireframing oferece um olhar objetivo para nomes de links, caminhos para a conversão, facilidade de uso, navegação e colocação de recursos. Wireframes ajudam a identificar as falhas na arquitetura ou nos recursos do site e mostram o quão bem fluem a partir de uma perspectiva do usuário.

• Capacidade de crescimento de conteúdo.

  Se você sabe que seu site crescerá num futuro próximo, ele precisa ter capacidade de acomodar este crescimento, com o mínimo de impacto na arquitetura, na usabilidade e no design. O wireframing pode revelar estas importantes oportunidades para o crescimento de conteúdo, e como acomodá-las.

• Feedback e iteração facilitada.

  Em vez de juntar todas as funcionalidades, o layout e os elementos criativos em uma única etapa, wireframes garantem que estas considerações sejam feitas separadamente. Isso permite que as partes interessadas forneçam um feedback muito mais cedo durante processo. A criação de wireframes usando o software apropriado faz com que o processo iterativo inerente ao web design seja muito menos trabalhoso.

O valor de wireframes para o desenvolvimento de sites e aplicativos

Os wireframes organizam e unificam todos os participantes do desenvolvimento de sites. Como é isso? Há muitos aspectos: os desenhos são calibrados de forma mais cuidadosa. A equipe de desenvolvimento tem uma maior compreensão do trabalho sendo executado. A criação de conteúdo é mais objetiva. É evitada a necessidade de cortar, corrigir ou totalmente reconstruir mais adiante no processo – conhecido como “scope creep”, em inglês. E qual é o valor disso? Economiza tempo e dinheiro.

O design da experiência do usuário é um método para aumentar a fidelidade e satisfação do cliente, melhorando a usabilidade e o prazer na interação entre o cliente e o site, aplicativo e produto. O design da interface do usuário é mais próximo ao design gráfico, embora as responsabilidades sejam um pouco mais complexas. No geral, o design da experiência do usuário vem antes do design da interface do usuário. UX e UI tendem a, e devem, se sobrepor no processo de design de wireframes. As áreas de foco incluem:

Arquitetura da informação e wireframes 

Parte do processo global de desenvolvimento de sites e wireframes, a arquitetura da informação (AI) posiciona e prioriza informações de uma forma que leva ao entendimento de um site ou aplicativo móvel por futuros utilizadores. Há quatro elementos fundamentais, de acordo com a Arquitetura da informação para a world wide web:

• Esquemas e estruturas de organização: categorizando e estruturando a informação
• Rotulagem de sistemas: representando informações
• Sistemas de navegação: passando por informações
• Sistemas de busca: procurando e encontrando informações

Uma boa AI começa com uma análise de negócios abrangente para desenvolver uma estratégia de conteúdo para um escopo geral de estrutura, conteúdo e estilo de design baseado nos objetivos da empresa. Para confirmar que a análise e estratégia estejam corretas, wireframes e protótipos de papel são um primeiro passo importante. Testar protótipos e wireframes é a melhor maneira de obter feedback dos usuários no início do processo de design, o que ajuda a prevenir reformulações dispendiosas quando o site estiver ativo. Testes de protótipos e wireframes também ajudam a avaliar vários designs em termos de desempenho e de preferência do usuário para criar o melhor produto possível.

Design de navegação e wireframes

O sistema de navegação inclui uma série de elementos na tela que permitem ao usuário passar de uma página para a outra. O design de navegação deve deixar clara a relação entre os links para que os usuários entendam naturalmente as suas opções de navegação. Normalmente, os sites oferecem diversos sistemas de navegação, como uma navegação global, local, complementar, contextual e de cortesia.

Design de interface de usuário e wireframes

O design de UI envolve escolher e organizar elementos de interface que ajudam os usuários a interagir com os recursos do sistema de uma forma que maximiza a eficiência e facilidade de uso. Elementos de UI comuns incluem botões, campos de entrada de texto, caixas de seleção, menus e botões de rádio.

Saiba mais sobre ferramentas wireframe UI

Existem quatro tipos diferentes de wireframes que vão desde o mais simples (preto-e-branco ou de planta) até o mais complexo (praticamente simulando a realidade):

• Wireframes básicos.

   Também conhecidos como renderizações de baixa fidelidade, estes são esquemas de página bastante simples, geralmente em preto e branco.

• Wireframes anotados.

   Estes adicionam uma ampla gama de detalhes a um wireframe básico. Anotações são notas breves, geralmente ao lado ou na parte inferior de um wireframe, que descrevem cada item do wireframe, normalmente separadas por áreas de conteúdo e funcionalidade, e exibem (brevemente) o motivo e propósito de cada item.

• Wireframes do fluxo de usuários.

  Quando a anotação não é suficiente para mostrar como um usuário de site ou aplicativo navegará pelo conteúdo de página em página, de forma lógica, mais informações podem ser necessárias. Esses wireframes podem ser visualizações estáticas de um wireframe totalmente interativo, e podem incluir uma apresentação de slides ou uma coleção de wireframes em série para exibir um fluxo de usuário principal ou uma série de fluxos de usuário.

• Wireframes interativos de alta definição.

   Você pode experimentar interações (p. ex., toques, cliques e deslizes) dentro de wireframes individuais ou entre eles. Adicionar interações antes de chegar às maquetes completas ou à prototipagem ao vivo economiza horas ao designer e desenvolvedor. Esta variação de wireframes só pode ser realizada com software de apresentação e design gráfico, ou de wireframing e prototipagem.

Agora que abordamos os componentes fundamentais dos wireframes, vamos dar uma olhada em como juntar tudo para projetar e criar um wireframe simples. 

1. Pense sobre o propósito final do site, e crie com esse objetivo em mente. Pense em como o usuário vai interagir com a interface.

2. Comece com uma representação simples e de baixa fidelidade da página web segmentada em três partes: o cabeçalho (a primeira coisa que o usuário verá no topo da página); o corpo da página web; e o rodapé, que geralmente contém informações menos importantes.

3. Em seguida, pense sobre a navegação. Adicione botões e links para que os usuários possam visitar as principais seções de seu site, incluindo áreas de conteúdo, pesquisa e login do usuário.

4. Faça anotações em seu wireframe para maior clareza. 

Agora você pode compartilhar o wireframe com as partes interessadas, antes de passar para a próxima etapa. Você pode desenhar o wireframe inicial à mão, em papel ou em um quadro branco, mas quando chegar à fase 4, você provavelmente vai usar um software para desenvolver o wireframe mais ainda.

Quer saber mais sobre como criar seu próprio wireframe? Confira este tutorial Lucidchart.

Você pode tentar imaginar o resultado final de um site ou aplicativo, mas é muito mais fácil preparar um wireframe com antecedência, determinando o que é necessário fazer antes mesmo de começar. Software e ferramentas de wireframes permitem criar exemplos de projetos com flexibilidade e funcionalidades que economizam seu tempo. Você pode elaborar ideias, visualizar o escopo geral do projeto e evitar erros ao longo do caminho. Os templates facilitam ainda mais a visualização rápida de suas ideias, a realização de ajustes e a resolução de quaisquer problemas.

Saiba mais sobre o uso de software e ferramentas para desenhar wireframes de sites.

Saiba mais sobre o uso de software e ferramentas para desenhar wireframes de aplicativos.

Templates de wireframes são extremamente necessários ao começar a criar uma nova página web ou um aplicativo. Você pode encontrar templates gratuitos de wireframes on-line. A maioria dos softwares para a criação de sites e aplicativos também oferece uma grande variedade de templates. Seguem alguns exemplos de templates do Lucidchart para ajudar você a entender como funciona o processo de design de wireframes:

Wireframes são marcadores de posição do design, mas uma maquete preenche os detalhes visuais, como cores, tipografia e elemento da marca. Enquanto a maquete compartilha dos propósitos do wireframe de documentar e coordenar a visão da equipe, ela acrescenta ótimos visuais, fazendo com que  as maquetes sejam mais úteis para pessoas tomadoras de decisões. Essencialmente, a maquete adiciona um charme visual ao esboço definido no wireframe.

 

O software de wireframes deve facilitar o desenvolvimento de qualquer um dos quatro tipos de wireframes – básicos, anotados, de fluxo de usuários e interativo – de forma rápida e simples. Seguem algumas considerações antes de tomar uma decisão:

• Quão “real” é preciso ser?

  A capacidade de concepção de alguns softwares é muito simples, e o resultado parece desenhado à mão, enquanto outros se aproximam de um protótipo mínimo, com experiência e interface de usuário mais finalizadas. A sua escolha depende do acabamento que seu produto final precisa ter.

• O compartilhamento é uma prioridade?

  Alguns produtos permitem exportar wireframes em uma variedade de formatos, enquanto outros exigem que para visualizar o projeto é necessário ter o produto instalado em seu computador. Usuários que desejam compartilhar seu projeto com um grande número de pessoas precisam de um programa que facilite o compartilhamento para revisão, colaboração e aprovação, como aqueles on-line ou baseados na nuvem.

• Qual plataforma você prefere?

  Usuários que buscam recursos de compartilhamento e criação em equipe em uma variedade de computadores provavelmente precisarão de um produto com acesso on-line ou baseado na nuvem. Há usuários que trabalham em um único dispositivo, e há empresas que querem criações em armazenamento local com software que possa ser instalado.

• Você precisa de acesso off-line?

  Produtos baseados em navegadores são disponíveis estritamente por meio de navegadores web. Usuários com produtos baseados em navegadores podem não conseguir salvar projetos localmente ou trabalhar sem acesso à internet. Produtos baseados em navegadores tendem a ser mais leves e atualizados com mais frequência, mas podem perder o acesso off-line como resultado.

Você está procurando templates e bibliotecas? Estes facilitam em muito a criação de wireframes. Softwares que oferecem templates para aplicativos móveis, design de navegadores web e outros economizam seu tempo, e são especialmente úteis para projetar uma grande quantidade e variedade de wireframes. Além disso, muitos produtos de wireframes fornecem bibliotecas de ícones, widgets e temas.

Por que o Lucidchart é a melhor escolha entre aplicativos on-line para o wireframing

Em poucos minutos, qualquer pessoa consegue usar o Lucidchart, seja um engenheiro ou um principiante. Crie uma demonstração interativa de um site rapidamente! Não é necessário fazer qualquer tipo de download. Agora você pode criar ótimos diagramas na nuvem através do seu navegador. Uma única licença pode ser usada em qualquer computador ou dispositivo tablet.

• Simplicidade:

   menus suspensos, botões e elementos gerais ajudarão você a esboçar um novo conceito ou melhorar um antigo. Hotspots permitem imitar a navegação no site, movendo de uma página a outra, com links para uma página externa, a reprodução de um vídeo e muito mais.

• Seguro e confiável:

  o protocolo de segurança de nível empresarial do Amazon Web Services mantém suas informações seguras. Ao criar diagramas no Lucidchart, suas alterações são salvas continuamente e armazenadas em vários locais. Notificamos você caso problemas de conectividade nos impeçam de salvar o seu mais recente projeto.

• Elementos interativos.

  Não confie apenas em um wireframe estático.Em vez disso, crie uma maquete interativa que oferece a capacidade de clicar em botões, assistir a vídeos, navegar em menus e experimentar outros links.

• Colaboração prática:

  quando todos participam do processo, você reduz o tempo despendido no desenvolvimento. Seus clientes, produtores de conteúdo e programadores podem facilmente conversar entre si e oferecer feedback.

• Recursos valiosos:

  clientes podem usufruir de um wireframe interativo que demonstra a experiência de usuário. Ative o modo de demonstração para fornecer um protótipo funcional de um aplicativo ou site aos seus designers e clientes.

• Publique e compartilhe:

  quando concluir o seu wireframe, será simples compartilhá-lo. Salve em uma variedade de formatos de arquivo de imagem, imprima ou envie por e-mail. Você também pode publicar em mídias sociais ou compartilhar de forma privada para fins de feedback.