{"id":16609,"date":"2020-11-15T19:35:20","date_gmt":"2020-11-15T22:35:20","guid":{"rendered":"https:\/\/aledesigner.com.br\/?p=16609"},"modified":"2026-04-18T18:19:29","modified_gmt":"2026-04-18T21:19:29","slug":"afinal-o-que-e-um-wireframe","status":"publish","type":"post","link":"https:\/\/agtdev3.com.br\/ale\/afinal-o-que-e-um-wireframe\/","title":{"rendered":"Afinal, o que \u00e9 um wireframe?"},"content":{"rendered":"<p>Resumidamente, <strong>wireframe \u00e9 um prot\u00f3tipo<\/strong> usado para sugerir a estrutura que o site ter\u00e1 e como ele vai se relacionar com as outras p\u00e1ginas. \u00c9 um projeto estrutural j\u00e1 que, nesse est\u00e1gio, ainda n\u00e3o est\u00e1 definida a identidade visual do site.<\/p>\n<p>Ent\u00e3o, um wireframe \u00e9 um layout que demonstra quais elementos da interface existir\u00e3o nas p\u00e1ginas do site.<\/p>\n<p>Veja porque o wireframe \u00e9 importante:<\/p>\n<ul>\n<li>Estabelece a estrutura das p\u00e1ginas antes de definir o visual, evitando retrabalho<\/li>\n<li>Ajuda a entender quais assuntos ser\u00e3o abordados e suas prioridades<\/li>\n<li>Determina os espa\u00e7os para todos os itens e onde estar\u00e3o localizados<\/li>\n<li>Estabelece a distribui\u00e7\u00e3o dos links e como ser\u00e1 a jornada do usu\u00e1rio<\/li>\n<\/ul>\n<p>O objetivo do wireframe \u00e9 fornecer um <strong>entendimento visual b\u00e1sico<\/strong> de uma p\u00e1gina no in\u00edcio de um projeto a fim de obter a aprova\u00e7\u00e3o da equipe e do cliente antes que a fase criativa comece. Os wireframes tamb\u00e9m podem ser usados \u200b\u200bpara criar a navega\u00e7\u00e3o do site e garantir que a estrutura usada atenda \u00e0 expectativa do usu\u00e1rio.<\/p>\n<p>Al\u00e9m disso, alterar um wireframe \u00e9 bem mais f\u00e1cil e r\u00e1pido do que um design conceitual.<\/p>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-16614\" src=\"https:\/\/agtdev3.com.br\/ale\/wp-content\/uploads\/2020\/04\/o-que-e-wireframe-2.jpg\" alt=\"\" width=\"692\" height=\"464\" \/><\/p>\n<h3>Definindo os wireframes<\/h3>\n<p>\u00c9 importante lembrar que os wireframes funcionam apenas como guias. N\u00e3o devem ter ilustra\u00e7\u00f5es, fotos e nem blocos de texto. Apenas elementos referenciais. Dessa forma, n\u00e3o \u00e9 necess\u00e1rio usar cores, imagens e nenhuma tipografia espec\u00edfica (no m\u00e1ximo uma diferencia\u00e7\u00e3o de t\u00edtulos e subt\u00edtulos definindo propor\u00e7\u00f5es).<\/p>\n<p>Os wireframes podem variar de simples rascunhos no papel at\u00e9 pequenos sistemas criados no computador com detalhes mais bem definidos.<\/p>\n<p>Os de <strong>baixa fidelidade<\/strong> ajudam na comunica\u00e7\u00e3o da equipe do projeto e s\u00e3o relativamente r\u00e1pidos no desenvolvimento. S\u00e3o mais abstratos e costumam usar imagens simples (quadrados, textos falsos, c\u00edrculos simbolizando \u00edcones, riscos definindo links etc.).<\/p>\n<p>Os wireframes de <strong>alta fidelidade<\/strong> s\u00e3o melhores para a documenta\u00e7\u00e3o devido ao seu maior n\u00edvel de detalhe. Esses wireframes geralmente incluem informa\u00e7\u00f5es sobre cada item espec\u00edfico da p\u00e1gina, incluindo dimens\u00f5es, comportamento e\/ou a\u00e7\u00f5es relacionadas a qualquer elemento interativo.<\/p>\n<p>\u00c9 importante lembrar que, mesmo n\u00e3o havendo a participa\u00e7\u00e3o direta do redator e do designer nesse est\u00e1gio (eventualmente), todo o processo deve ser elaborado com o consentimento de toda a equipe. Inclus\u00f5es de textos, novas se\u00e7\u00f5es e novas imagens podem ocorrer no meio do processo e isso deve ser previsto no wireframe tamb\u00e9m.<\/p>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-16613\" src=\"https:\/\/agtdev3.com.br\/ale\/wp-content\/uploads\/2020\/04\/o-que-e-wireframe-1.jpg\" alt=\"\" width=\"692\" height=\"433\" \/><\/p>\n<h3>Vantagens e desvantagens do wireframe<\/h3>\n<p>Uma das grandes vantagens do wireframe \u00e9 que ele fornece uma ideia inicial que pode ser usada como revis\u00e3o junto ao cliente e a equipe. Al\u00e9m disso, um wireframe aprovado pelo cliente d\u00e1 seguran\u00e7a ao designer na hora de criar o layout. Como os wireframes n\u00e3o incluem nenhum design, nem sempre \u00e9 f\u00e1cil para o cliente entender o conceito. Dependendo do cliente, pode ser uma desvantagem.<\/p>\n<p>&nbsp;<\/p>\n<p>&#8230;..<\/p>\n<p>Fonte (adaptado):<br \/>\n<a href=\"https:\/\/medium.com\/@sachinthakeddagodage\/what-are-wire-frames-d5390dad80da\" target=\"_blank\" rel=\"noopener noreferrer\">Sachintha Keddagodage<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Resumidamente, wireframe \u00e9 um prot\u00f3tipo usado para sugerir a estrutura que o site ter\u00e1 e como ele vai se relacionar&#8230;<\/p>\n","protected":false},"author":1,"featured_media":16615,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[57],"tags":[5,44,19,32,45],"class_list":["post-16609","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-criacao-de-sites","tag-design-grafico","tag-prototipo","tag-user-interface","tag-web-design","tag-wireframe"],"acf":[],"_links":{"self":[{"href":"https:\/\/agtdev3.com.br\/ale\/wp-json\/wp\/v2\/posts\/16609","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/agtdev3.com.br\/ale\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/agtdev3.com.br\/ale\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/agtdev3.com.br\/ale\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/agtdev3.com.br\/ale\/wp-json\/wp\/v2\/comments?post=16609"}],"version-history":[{"count":4,"href":"https:\/\/agtdev3.com.br\/ale\/wp-json\/wp\/v2\/posts\/16609\/revisions"}],"predecessor-version":[{"id":18818,"href":"https:\/\/agtdev3.com.br\/ale\/wp-json\/wp\/v2\/posts\/16609\/revisions\/18818"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/agtdev3.com.br\/ale\/wp-json\/wp\/v2\/media\/16615"}],"wp:attachment":[{"href":"https:\/\/agtdev3.com.br\/ale\/wp-json\/wp\/v2\/media?parent=16609"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/agtdev3.com.br\/ale\/wp-json\/wp\/v2\/categories?post=16609"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/agtdev3.com.br\/ale\/wp-json\/wp\/v2\/tags?post=16609"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}