Wireframe: o que é e por que utilizar? \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto** Termina em Tempo restante da oferta: 13 Horas 50 Min 01 Seg Tempo restante da oferta: 13 50 01 [Assinar →](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Explorar [ Quanto custa? ](#assinatura) [ FAQ ](https://www.treinaweb.com.br#faq) [Matricule-se](#assinatura) [ Entrar ](https://www.treinaweb.com.br/login) [ Início ](https://www.treinaweb.com.br) [ Artigos ](https://www.treinaweb.com.br/blog) Wireframe: o que é e por que utilizar? [ Acessibilidade e User Experience (UX) ](https://www.treinaweb.com.br/blog/categoria/acessibilidade-e-user-experience-ux) # Wireframe: o que é e por que utilizar? Ao desenvolver um site ou um aplicativo, é comum pensarmos em como ele será. Essa primeira ideia, muitas vezes iniciadas no papel, tem um nome: wireframe. [ Marylene Guedes ](https://www.treinaweb.com.br/blog/autor/marylene-guedes) 6 anos atrás ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/03/WIREFRAME.png) Ao desenvolver um site ou um aplicativo, é comum pensarmos em como ele será, quais funcionalidades, menus… Essa ideia inicial, muitas vezes rabiscadas no papel, tem um nome: **wireframe**. ### O que é um wireframe? O wireframe é uma etapa do desenvolvimento de um projeto, onde criamos um “esqueleto”, que serve para ilustrar, de maneira simplificada, um site ou aplicativo. O objetivo principal do wireframe é focar na organização do conteúdo, dentre outras características da Arquitetura da informação. Já temos um artigo que aborda o papel da [Arquitetura de Informação](https://www.treinaweb.com.br/blog/arquitetura-da-informacao-um-breve-overview/ "Arquitetura de Informação"), mas de forma bem resumida, ela tem o foco em ajudar o usuário a encontrar o que ele está procurando. Um wireframe é considerado um protótipo de baixa fidelidade, pois ele está distante do entregável, não sendo tão fiel, podendo ser modificado e refeito. Ele serve mais para termos uma ideia do que vai vir a ser o produto final. Aqui vamos focar mais em um [protótipo](https://www.treinaweb.com.br/blog/vantagens-da-prototipacao-no-desenvolvimento-de-software/ "protótipo") de um site/app/sistema, mas ele pode servir para qualquer coisa, não somente um app ou site. Abaixo temos alguns dos benefícios de se utilizar wireframes: - Apresenta resultados mais tangíveis e compreensíveis, servindo também para um entendimento do que será feito; - Facilita o alinhamento da expectativa do cliente quanto ao que o usuário quer e ao projeto criado; - A entender quantas telas o projeto precisará e como elas devem ser desenhadas; - Auxilia na diagramação do conteúdo, facilitando o trabalho do designer; - Promove o desenvolvimento de variações de layout; - Sua revisão e adaptação são mais baratas de serem feitas. [ ![UX/UI - Introdução](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/ux-ui.svg) Curso UX/UI - Introdução Conhecer o curso ](https://www.treinaweb.com.br/curso/ux-ui-introducao) Como seu foco é ser simples, muitas vezes ele pode aparentar estar incompleto, mas a magia dele está justamente em sua simplicidade. Esse esboço facilita muito para que você não perca muito tempo criando algo elaborado. A partir desse esboço mais básico podemos ter mais ideias de mudanças e melhorias. É importante ressaltar que o wireframe serve para mostrar termos de estrutura e não aparência. Sendo assim, nesta etapa devemos pensar e observar outras coisas, como por exemplo, como as informações ficarão organizadas, quais menus ele irá ter, como será o fluxo de uma página, como será a navegação principal, etc… Isso deve ser feito antes de começarmos a pensar em cores, formas, formato, imagens, fontes, etc. Isso vale também porque o seu cliente/usuário pode não se atentar no que ele realmente tem que ver. Ele tem que ver o que realmente importa neste momento: se está intuitivo, se a navegação está correta, etc. No wireframe você só precisa ter uma ideia aproximada das informações que estão acontecendo na página, do que vai tratar o projeto. ### Tipos de wireframes Podemos dividir os tipos de wireframes em três principais: - **Wireframe de baixa fidelidade:** como já vimos neste artigo, é a versão mais simples possível, tendo os elementos principais, feitos em papel e caneta, por exemplo; - **Wireframe anotado:** neste tipo já temos um upgrade, podendo adicionar mais detalhes ao wireframe, como por exemplo, colocar legendas e anotações para facilitar o entendimento do que cada item faz; - **Wireframe de fluxo de usuários:** neste tipo é mostrado como um usuário irá navegar pelo conteúdo. Aqui tudo pode ser estático, sem interação. O foco é mostrar como funciona um fluxo de usuário; - **Wireframe interativo:** aqui já podem entrar a utilização de softwares para criarmos uma interação, seja com cliques, toques, zoom, etc. ### Onde fazer um wireframe? Para cada contexto que vimos acima, o wireframe tem uma quantidade de detalhes: ele pode ser simples, feito no papel, numa lousa… Depois você pode ir para uma ferramenta, deixando-o mais interativo, feito em softwares como o [Axure](https://www.axure.com/ "Axure") e o [Sketch](https://www.sketch.com/ "Sketch"). Lembre-se sempre de evitar adicionar elementos visuais complexos. Nesta etapa, menos é mais. Esses elementos podem te distrair da tarefa principal. Você pode utilizar algumas técnicas no desenvolvimento do wireframe, como a técnica “Crazy 8’s”, onde você dobra um pedaço de papel em 8 seções diferentes e depois faz 8 diferentes ideias de um wireframe o mais rápido possível. Também não se esqueça de aproveitar as [10 heurísticas de Nielsen](https://www.nngroup.com/articles/ten-usability-heuristics/ "10 heurísticas de Nielsen"), para melhorar a usabilidade da sua interface. Com o uso desse esboço, você poderá diminuir drasticamente os riscos de errar ao criar aplicativos e sites. - [ #UX ](https://www.treinaweb.com.br/blog/tag/ux) - [ #protótipo ](https://www.treinaweb.com.br/blog/tag/prototipo) - [ #wireframe ](https://www.treinaweb.com.br/blog/tag/wireframe) Autor ![Marylene Guedes](//secure.gravatar.com/avatar/5b0ba52b3705f298802db58782656bbc?d=mm) ## Marylene Guedes Responsável pelo sucesso do cliente na TreinaWeb. Graduada em Gestão de Tecnologia da Informação pela FATEC Guaratinguetá, além de estudante de UX/UI. [Todos os artigos](https://www.treinaweb.com.br/blog/autor/marylene-guedes) ## Continue estudando Transforme leitura em prática com os cursos e formações da TreinaWeb. [Ver cursos](https://www.treinaweb.com.br/cursos) Continue lendo ## Artigos relacionados - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/09/como-funciona-a-prototipacao-no-desenvolvimento-de-software-400x280.png) [ Engenharia de Software ](https://www.treinaweb.com.br/blog/categoria/engenharia-de-software) 6 anos atrás ## [ Como funciona a prototipação no desenvolvimento de software? ](https://www.treinaweb.com.br/blog/como-funciona-a-prototipacao-no-desenvolvimento-de-software) A prototipação no desenvolvimento de software permite amadurecer ideias, identificar problemas e engajar pessoas no processo de criação de um sistema. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/08/double-diamond-e-sua-utilizacao-nos-processos-de-ux-400x280.png) [ Acessibilidade e User Experience (UX) ](https://www.treinaweb.com.br/blog/categoria/acessibilidade-e-user-experience-ux) 6 anos atrás ## [ Double Diamond e sua utilização nos processos de UX ](https://www.treinaweb.com.br/blog/double-diamond-e-sua-utilizacao-nos-processos-de-ux) Neste artigo abordaremos o que é o Double Diamond e suas etapas, que vão da imersão até ao protótipo. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/07/29063746/0-400x280.png) [ Carreira ](https://www.treinaweb.com.br/blog/categoria/carreira) 7 anos atrás ## [ Como funciona uma empresa de desenvolvimento de software? ](https://www.treinaweb.com.br/blog/como-funciona-uma-empresa-de-desenvolvimento-de-software) Veja de forma resumida como é trabalhar em uma empresa de desenvolvimento de software. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2024/08/capa-acessibilidade-400x280.png) [ Acessibilidade e User Experience (UX) ](https://www.treinaweb.com.br/blog/categoria/acessibilidade-e-user-experience-ux) 2 anos atrás ## [ UX Inclusivo: A importância da acessibilidade no design ](https://www.treinaweb.com.br/blog/ux-inclusivo-a-importancia-da-acessibilidade-no-design) Confira a importância de tornar suas aplicações móveis acessíveis para todos, garantindo inclusão social, maior alcance e conformidade legal. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/09/ux-research-e-360-view-o-que-e-e-como-pode-ser-aplicado-400x280.png) [ Acessibilidade e User Experience (UX) ](https://www.treinaweb.com.br/blog/categoria/acessibilidade-e-user-experience-ux) 6 anos atrás ## [ UX Research e 360 View – O que é e como pode ser aplicado? ](https://www.treinaweb.com.br/blog/ux-research-e-360-view-o-que-e-e-como-pode-ser-aplicado) Entenda o que é e como aplicar o UX Research e 360 View, técnicas importantes na hora de pensar em uma melhor experiência do usuário. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/10/24001738/UX-UI-400x280.png) [ Acessibilidade e User Experience (UX) ](https://www.treinaweb.com.br/blog/categoria/acessibilidade-e-user-experience-ux) 7 anos atrás ## [ UX e UI: O que é e quais as diferenças? ](https://www.treinaweb.com.br/blog/ux-e-ui-o-que-e-e-quais-as-diferencas) Confira neste artigo o que vem a ser a UX (User eXperience) e a UI (User Interface), suas diferenças e no que elas se complementam. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/ux-400x280.jpg) [ Design ](https://www.treinaweb.com.br/blog/categoria/design) 10 anos atrás ## [ UX: A importância da experiência do usuário nos projetos ](https://www.treinaweb.com.br/blog/ux-a-importancia-da-experiencia-do-usuario-nos-projetos) Em um mercado competitivo, projetar uma boa experiência acaba sendo fundamental para o sucesso de um produto ou serviço. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/lean-ux-como-potencializar-o-foco-na-experiencia-do-usuario-parte-1-400x280.png) [ Acessibilidade e User Experience (UX) ](https://www.treinaweb.com.br/blog/categoria/acessibilidade-e-user-experience-ux) 6 anos atrás ## [ Lean UX: como potencializar o foco na experiência do usuário – parte 2 ](https://www.treinaweb.com.br/blog/lean-ux-como-potencializar-o-foco-na-experiencia-do-usuario-parte-2) Nessa segunda parte, veremos os 15 princípios que regem o Lean UX. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/lean-ux-como-potencializar-o-foco-na-experiencia-do-usuario-parte-1-400x280.png) [ Acessibilidade e User Experience (UX) ](https://www.treinaweb.com.br/blog/categoria/acessibilidade-e-user-experience-ux) 6 anos atrás ## [ Lean UX: como potencializar o foco na experiência do usuário - parte 1 ](https://www.treinaweb.com.br/blog/lean-ux-como-potencializar-o-foco-na-experiencia-do-usuario-parte-1) Uma ótima experiência do usuário é essencial para o sucesso de qualquer projeto. Conheça neste artigo o Lean UX e como potencializar seus resultados. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/pessoas-ux-400x280.jpg) [ Acessibilidade e User Experience (UX) ](https://www.treinaweb.com.br/blog/categoria/acessibilidade-e-user-experience-ux) 10 anos atrás ## [ Personas em UX ](https://www.treinaweb.com.br/blog/personas-em-ux) Personas são personagens fictícios criados para representar os diferentes tipos de usuários que podem usar um site, marca ou produto. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/03/29143654/TW-ENTREVISTAS-RAFAEL-CAFERATI-400x280.png) [ Entrevistas ](https://www.treinaweb.com.br/blog/categoria/entrevistas) 9 anos atrás ## [ TW Entrevista 06: Rafael Caferati ](https://www.treinaweb.com.br/blog/tw-entrevista-06-rafael-caferati) Fizemos uma série de entrevistas com desenvolvedores chamada "TW Entrevista". O entrevistado de hoje é o Rafael Caferati, desenvolvedor especialista em UI/UX que já foi premiado pelo CSS Design Awards. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/11/PROFISSIONAL-USABILIDADE-400x280.png) [ Acessibilidade e User Experience (UX) ](https://www.treinaweb.com.br/blog/categoria/acessibilidade-e-user-experience-ux) 6 anos atrás ## [ Como é o dia a dia de um profissional de Usabilidade? ](https://www.treinaweb.com.br/blog/como-e-o-dia-a-dia-de-um-profissional-de-usabilidade) O profissional de usabilidade possui habilidades que mesclam aspectos técnicos e estratégicos. Ele é o responsável por analisar, medir e melhorar o nível de satisfação do usuário ao utilizar um site ou aplicativo. Ler artigo ## Um ano de acesso total para você viver de programação. Todos os cursos e formações da TreinaWeb numa única assinatura, com professores que atuam no mercado, suporte direto e certificados. Do primeiro `console.log` ao mercado de trabalho. - **1 ano** de acesso a **todos os cursos** - Cursos novos **toda semana** - Suporte **direto com professores** - Plano de carreira **personalizado** - **Certificados digitais** inclusos - **Aplicativos** para Android e iOS, com **acesso offline** **Garantia incondicional de satisfação** Teste por 7 dias e, se não fizer sentido para você, devolvemos seu dinheiro. ### Acesso completo a todos os cursos e dezenas de Formações. 12 meses Economize R$ 840,00 54% OFF de 12x R$ 129,00 por apenas 12x R$ 59,00 sem juros no cartão de crédito ou R$ 599,00 à vista Oferta termina em **13h 50min 01s** - Acesso imediato e ilimitado durante 1 ano. - Plano de carreira personalizado. - Suporte direto com professores. - E muito mais! [Matricule-se agora](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Escola online de programação, tecnologia e IA. - [ ](https://www.facebook.com/TreinaWeb/) - [ ](https://www.instagram.com/treinaweb/) - [ ](https://www.youtube.com/user/TreinaWeb) - [ ](https://twitter.com/treinaweb) - [ ](https://www.linkedin.com/company/treinaweb) - [ ](https://github.com/treinaweb) ## Inscreva-se em nossa newsletter Receba lançamentos, promoções e novidades. Seu nome Seu WhatsApp Seu melhor e-mail Inscrever-se ## Cursos - [ Base para Devs ](https://www.treinaweb.com.br/categoria/base-para-devs) - [ Front-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-front-end) - [ Back-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-back-end) - [ Mobile ](https://www.treinaweb.com.br/categoria/desenvolvimento-mobile) - [ Bancos de Dados ](https://www.treinaweb.com.br/categoria/bancos-de-dados) - [ Cloud ](https://www.treinaweb.com.br/categoria/cloud-computing) - [ IA ](https://www.treinaweb.com.br/categoria/ia) - [ E mais ](https://www.treinaweb.com.br/categoria/e-mais) - [ Ver todos os cursos ](https://www.treinaweb.com.br/cursos) ## Conteúdo - [ Formações ](https://www.treinaweb.com.br/formacoes) - [ Projetos práticos ](https://www.treinaweb.com.br/projetos-praticos) - [ Direto ao ponto ](https://www.treinaweb.com.br/direto-ao-ponto) - [ Planos ](https://www.treinaweb.com.br#assinatura) - [ Depoimentos ](https://www.treinaweb.com.br#depoimentos) - [ Comunidade ](https://www.treinaweb.com.br#comunidade) - [ Corpo docente ](https://www.treinaweb.com.br#docente) ## A empresa - [ Sobre a TreinaWeb ](https://www.treinaweb.com.br#sobre) - [ Perguntas frequentes ](https://www.treinaweb.com.br#faq) - [ Vantagens de estudar na TreinaWeb ](https://www.treinaweb.com.br/vantagens-de-estudar-na-treinaweb) - [ Cursos para empresas ](https://www.treinaweb.com.br/empresas) - [ Sugira um novo curso ](https://www.treinaweb.com.br/sugerir-curso) - [ Trabalhe conosco ](https://www.treinaweb.com.br/trabalhe-conosco) - [ Artigos ](https://www.treinaweb.com.br/blog) - [ Desenvolvedores e agentes ](https://www.treinaweb.com.br/developers) - [ Contato ](https://www.treinaweb.com.br/contato) - [ Política de privacidade ](https://www.treinaweb.com.br/politica-de-privacidade) - [ Termos de uso ](https://www.treinaweb.com.br/termos-de-uso) ## Baixe nosso aplicativo [ Disponível na **App Store** ](https://apps.apple.com/us/app/treinaweb/id1322729447) [ Disponível no **Google Play** ](https://play.google.com/store/apps/details?id=br.com.treinaweb.mobile) Av. Paulista, 1765, Conj 71 e 72 · Bela Vista · São Paulo · SP · 01311-200 © 2004 – 2026 TreinaWeb Tecnologia LTDA · CNPJ 06.156.637/0001-58