{"id":2694,"date":"2019-07-09T00:00:00","date_gmt":"2019-07-09T00:00:00","guid":{"rendered":"https:\/\/rockcontent.com\/br\/2019\/07\/09\/wireframe-de-site\/"},"modified":"2019-07-09T00:00:00","modified_gmt":"2019-07-09T00:00:00","slug":"wireframe-de-site","status":"publish","type":"post","link":"https:\/\/pingback.com\/br\/resources\/wireframe-de-site\/","title":{"rendered":"Conhe\u00e7a o que \u00e9 wireframe de site e aprenda como aplic\u00e1-lo na sua estrat\u00e9gia online"},"content":{"rendered":"\n<p>Quem n\u00e3o gosta de investir tempo e recursos em um bom planejamento acaba sempre sendo obrigado a arranjar tempo e dinheiro para fazer tudo de novo. Esse \u00e9 um famoso bord\u00e3o do Marketing que provavelmente se aplica aos mais distintos contextos, inclusive no desenvolvimento de sites, <a rel=\"noreferrer noopener\" aria-label=\"blogs (abre numa nova aba)\" href=\"https:\/\/rockcontent.com\/br\/blog\/como-criar-um-blog\/\" target=\"_blank\">blogs<\/a> e perfis digitais.<\/p>\n\n\n\n<p>Na pr\u00e1tica, <strong>um wireframe de site \u00e9 uma ilustra\u00e7\u00e3o que re\u00fane e organiza os principais elementos que pretendemos inserir em um site. <\/strong>Ele representa a primeira fase do processo de cria\u00e7\u00e3o de uma plataforma digital e deve conter todos os \u201cpilares\u201d que dar\u00e3o vida a um posterior projeto e sua execu\u00e7\u00e3o.<\/p>\n\n\n\n<p>Neste artigo explicaremos:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"#oque\">o que \u00e9 um wireframe de site;<\/a><\/li><li><a href=\"#tipos\">quais s\u00e3o os tipos de wireframe;<\/a><\/li><li><a href=\"#diferenca\">qual a diferen\u00e7a entre wireframe, mockup, prot\u00f3tipo e layout;<\/a><\/li><li><a href=\"#criar\">como criar um wireframe para sites;<\/a><\/li><li><a href=\"#porque\">por que usar um wireframe.<\/a><\/li><\/ul>\n\n\n\n<p>Tenha em mente que um website tamb\u00e9m \u00e9 um produto e, uma vez ativo, ele se torna a sala de visitas de um profissional ou empresa, por isso, precisamos encarrar a sua constru\u00e7\u00e3o com muita seriedade. Continue a leitura para entender tudo sobre wireframe e ainda aprender a elaborar os seus!<\/p>\n\n\n\n<a id=\"oque\"><\/a>\n\n\n\n<h2 class=\"wp-block-heading\">O que \u00e9 um wireframe de site?<\/h2>\n\n\n\n<p>Sabemos que a pr\u00e1tica nem sempre obedece a teoria, por isso, \u00e9 importante realizar <a href=\"https:\/\/rockcontent.com\/br\/blog\/estudo-de-mercado\/\" rel=\"noreferrer noopener\" target=\"_blank\">estudos<\/a> e elaborar esbo\u00e7os para antecipar falhas, desacordos e preju\u00edzos. Um wireframe, portanto, \u00e9 o primeiro rascunho de um site e \u00e9 nessa etapa que devemos considerar mudan\u00e7as e ajustes mais cr\u00edticos, antes de iniciarmos a constru\u00e7\u00e3o de um layout, de fato.<\/p>\n\n\n\n<p>O desenvolvedor ou arquiteto de informa\u00e7\u00e3o respons\u00e1vel por executar o projeto espera que os wireframes sejam uma reuni\u00e3o de ideias (sugest\u00f5es) e elementos s\u00f3lidos (j\u00e1 consolidados no mercado) que esclare\u00e7am o tipo de linguagem, conte\u00fado e estrutura do site, bem como as intera\u00e7\u00f5es dos usu\u00e1rios dentro desse espa\u00e7o virtual.<\/p>\n\n\n\n<p>Sendo assim, temos tr\u00eas componentes essenciais em um wireframe:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>arquitetura da informa\u00e7\u00e3o: <\/strong>organiza\u00e7\u00e3o do conte\u00fado e dos componentes visuais capazes de garantir uma experi\u00eancia agrad\u00e1vel para o usu\u00e1rio;<\/li><li><strong>estrutura de navega\u00e7\u00e3o: <\/strong>elementos e mapas de navega\u00e7\u00e3o que corroborem para uma navega\u00e7\u00e3o l\u00f3gica e precisa;<\/li><li><strong>projeto de layout: <\/strong>esbo\u00e7o de alguns elementos visuais para orientar a produ\u00e7\u00e3o de arte e webdesign.<\/li><\/ul>\n\n\n\n<p>Os wireframes de sites podem ser feitos de v\u00e1rias formas, desde simples ilustra\u00e7\u00f5es \u00e0 m\u00e3o at\u00e9 simula\u00e7\u00f5es de navega\u00e7\u00e3o sofisticadas montadas em softwares especializados. N\u00e3o h\u00e1, por\u00e9m, nenhum rigor na escolha desses meios, o importante \u00e9 que ele seja capaz de transmitir a ideia do seu futuro site com fidelidade.<\/p>\n\n\n\n<p>Geralmente, os wireframes s\u00e3o conclu\u00eddos e aprovados antes que qualquer trabalho de arte ou desenvolvimento seja realizado, mas em alguns casos, sobretudo na cria\u00e7\u00e3o de plataformas mais ricas e complexas em que v\u00e1rios rascunhos s\u00e3o necess\u00e1rios, a execu\u00e7\u00e3o de partes do projeto pode ser feita concomitantemente \u00e0 finaliza\u00e7\u00e3o dos wireframes.<\/p>\n\n\n\n<a id=\"tipos\"><\/a>\n\n\n\n<h2 class=\"wp-block-heading\">Quais s\u00e3o os tipos de wireframe?<\/h2>\n\n\n\n<p>Do l\u00e1pis e papel \u00e0s mais completas ferramentas digitais, um wireframe pode ser constru\u00eddo com os recursos que possuir ou achar melhor. Entretanto, existem modelos de constru\u00e7\u00e3o diferentes e alguns deles exigem uma riqueza maior de detalhes, o que demanda o uso de softwares. Veja s\u00f3.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Baixa fidelidade<\/h3>\n\n\n\n<p>\u00c9 o tipo mais b\u00e1sico e, por isso, pode ser constru\u00eddo manualmente. Um wireframe de baixa fidelidade geralmente n\u00e3o tem <a href=\"https:\/\/rockcontent.com\/br\/blog\/psicologia-das-cores\/\" rel=\"noreferrer noopener\" target=\"_blank\">cores<\/a> nem muitos detalhes.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">M\u00e9dia fidelidade ou anotado<\/h3>\n\n\n\n<p>Nesse caso ainda temos um wireframe bastante simples, por\u00e9m, seus elementos visuais e textuais s\u00e3o mais organizados e acompanham legendas e anota\u00e7\u00f5es que facilitam o entendimento.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Alta fidelidade<\/h3>\n\n\n\n<p>O modelo de alta fidelidade continua sendo um esbo\u00e7o do seu projeto, mas seus detalhes o aproximam muito mais da vers\u00e3o final. Nesse caso, softwares s\u00e3o necess\u00e1rios para adicionar elementos de navega\u00e7\u00e3o e intera\u00e7\u00e3o.<\/p>\n\n\n\n<p><strong>N\u00e3o \u00e9 necess\u00e1rio ser impec\u00e1vel, pois dessa forma perder\u00edamos os benef\u00edcios da agilidade e da flexibilidade dessa etapa.<\/strong> Seu objetivo \u00e9 apenas deixar o mais claro poss\u00edvel a estrutura do site que pretende construir.<\/p>\n\n\n\n<biblioteca><strong>Voc\u00ea tamb\u00e9m pode se interessar por estes outros conte\u00fados!<\/strong><br>\n   <a href=\"https:\/\/rockcontent.com\/br\/blog\/melhores-sites-de-dominio\/\" target=\"_blank&quot;\" rel=\"noopener noreferrer\">10 melhores sites de dom\u00ednio e o que considerar na escolha<\/a><br>\n   <a href=\"https:\/\/rockcontent.com\/br\/blog\/dicas-de-seguranca-para-sites\/\" target=\"_blank&quot;\" rel=\"noopener noreferrer\">Dicas de seguran\u00e7a para sites, blogs e e-commerces 2019<\/a><br>\n   <a href=\"https:\/\/rockcontent.com\/br\/blog\/otimizacao-de-sites\/\" target=\"_blank&quot;\" rel=\"noopener noreferrer\">Otimiza\u00e7\u00e3o de sites: veja como aplicar t\u00e9cnicas de SEO no seu site<\/a><br>\n   <a href=\"https:\/\/rockcontent.com\/br\/blog\/praticas-de-usabilidade-do-site\/\" target=\"_blank&quot;\" rel=\"noopener noreferrer\">Usabilidade do site: melhores pr\u00e1ticas para adotar em 2019<\/a><\/biblioteca>\n\n\n\n<a id=\"diferenca\"><\/a>\n\n\n\n<h2 class=\"wp-block-heading\">Qual a diferen\u00e7a entre wireframe, mockup, prot\u00f3tipo e layout?<\/h2>\n\n\n\n<p>Para esclarecer as diferentes etapas no processo de <a href=\"https:\/\/rockcontent.com\/br\/blog\/como-criar-um-site\/\" rel=\"noreferrer noopener\" target=\"_blank\">cria\u00e7\u00e3o de um site<\/a> podemos orden\u00e1-las em wireframe, mockup, prot\u00f3tipo e layout. Vamos falar sobre cada uma delas a seguir.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Wireframe<\/h3>\n\n\n\n<p>Como j\u00e1 falamos, o wireframe \u00e9 a primeira coisa a se fazer na constru\u00e7\u00e3o de um site ou qualquer outra plataforma digital. Aqui, nosso trabalho \u00e9 pensar na estrutura b\u00e1sica e no posicionamento dos elementos do nosso produto.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Mockups<\/h3>\n\n\n\n<p>O mockup est\u00e1 bem pr\u00f3ximo ao wireframe, por\u00e9m, ele cont\u00e9m mais detalhes visuais. Nessa etapa definiremos as cores, a tipografia, os logotipos e outros elementos previstos em sua estrat\u00e9gia de <a href=\"https:\/\/rockcontent.com\/br\/blog\/branding\/\" rel=\"noreferrer noopener\" target=\"_blank\">branding<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Prot\u00f3tipo<\/h3>\n\n\n\n<p>A diferen\u00e7a b\u00e1sica do prot\u00f3tipo para as etapas anteriores \u00e9 que ele se trata de um modelo de alta fidelidade, o que exige a incorpora\u00e7\u00e3o de elementos que v\u00e3o al\u00e9m do design. Nesse ponto do processo, o principal objetivo \u00e9 verificar os componentes visuais e validar as funcionalidades do site.<\/p>\n\n\n\n<p>\u00c9 poss\u00edvel que alguns trechos definidos no wireframe do site se comportem de maneira inesperada ou n\u00e3o funcionem bem quando o projeto come\u00e7a a ser prototipado. Nesses casos, \u00e9 preciso verificar todas as etapas do processo e providenciar as mudan\u00e7as necess\u00e1rias.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Layout<\/h3>\n\n\n\n<p>Esse \u00e9 o momento em que o designer entra em a\u00e7\u00e3o mesclando seu talento com as propostas do prot\u00f3tipo. O layout deve concluir toda a estrutura visual do site, um trabalho que j\u00e1 \u00e9 realizado na plataforma que dar\u00e1 vida ao site.<\/p>\n\n\n\n<a id=\"criar\"><\/a>\n\n\n\n<h2 class=\"wp-block-heading\">Como criar um wireframe para sites?<\/h2>\n\n\n\n<p>Antes de qualquer coisa, <strong>\u00e9 necess\u00e1rio fazer um <\/strong><a rel=\"noreferrer noopener\" href=\"https:\/\/rockcontent.com\/br\/blog\/briefing\/\" target=\"_blank\"><strong>briefing<\/strong><\/a> <strong>com o propriet\u00e1rio do site para esclarecer todas as suas exig\u00eancias e os objetivos que busca alcan\u00e7ar em seu projeto.<\/strong> Esse documento ser\u00e1 o horizonte para as futuras ideias que ser\u00e3o discutidas ao longo da elabora\u00e7\u00e3o do wireframe.<\/p>\n\n\n\n<p>Os primeiros esbo\u00e7os podem ser feitos no papel enquanto a equipe de cria\u00e7\u00e3o conversa e decide quais ser\u00e3o os melhores elementos para se inserir naquele site espec\u00edfico. Quando as estruturas b\u00e1sicas estiverem bem lapidadas, passamos, ent\u00e3o, para o computador, onde desenvolveremos um modelo com mais fidelidade.<\/p>\n\n\n\n<p>Muitos softwares podem te ajudar nessa etapa e abaixo voc\u00ea confere algumas sugest\u00f5es.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">InVision<\/h3>\n\n\n\n<p>Come\u00e7ando por uma solu\u00e7\u00e3o totalmente gratuita, temos o <a rel=\"noreferrer noopener\" href=\"https:\/\/www.invisionapp.com\/\" target=\"_blank\">InVision<\/a>, uma ferramenta agrad\u00e1vel de utilizar com diversos recursos interativos para montar o seu wireframe com muitos itens&nbsp;e anota\u00e7\u00f5es.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Adobe XD<\/h3>\n\n\n\n<p>A Adobe oferece um software exclusivo para o desenvolvimento de wireframes de sites: o <a href=\"https:\/\/www.adobe.com\/br\/products\/xd.html\" rel=\"noreferrer noopener\" target=\"_blank\">Adobe XD<\/a>. Se \u00e9 um assinante do pacote completo da marca, ent\u00e3o voc\u00ea j\u00e1 conta com essa ferramenta dispon\u00edvel no seu computador. Para quem n\u00e3o \u00e9 cliente, o primeiro projeto \u00e9 gratuito.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Axure<\/h3>\n\n\n\n<p>O <a href=\"https:\/\/www.axure.com\/\" rel=\"noreferrer noopener\" target=\"_blank\">Axure<\/a> \u00e9 um software popular dessa categoria. Com ele voc\u00ea conta com uma s\u00e9rie de funcionalidades para construir seus projetos e tamb\u00e9m consegue testar a navega\u00e7\u00e3o do seu futuro site.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Hotgloo<\/h3>\n\n\n\n<p>Com a <a href=\"https:\/\/www.hotgloo.com\/\" rel=\"noreferrer noopener\" target=\"_blank\">Hotgloo<\/a> voc\u00ea consegue criar modelos de alta fidelidade usando diversos recursos interativos. A sua maior vantagem, entretanto, \u00e9 que ele \u00e9 totalmente em portugu\u00eas!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Canva<\/h3>\n\n\n\n<p>O <a href=\"https:\/\/www.canva.com\/pt_br\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (abre numa nova aba)\">Canva<\/a> \u00e9 muito utilizado para criar imagens simples para posts, cart\u00f5es e panfletos, por\u00e9m, seus recursos tamb\u00e9m permitem a cria\u00e7\u00e3o de wireframes. Se voc\u00ea j\u00e1 tem alguma familiaridade com a ferramenta, essa pode ser uma boa escolha.<\/p>\n\n\n\n<p>Independentemente, por\u00e9m, dos pedidos de uma empresa ou das sugest\u00f5es dos profissionais envolvidos<strong>, \u00e9 importante manter alguns fatores b\u00e1sicos que garantem a \u201csa\u00fade\u201d de qualquer website nos dias de hoje como <\/strong><a href=\"https:\/\/rockcontent.com\/br\/blog\/ux-e-ui-design\/\" rel=\"noreferrer noopener\" target=\"_blank\"><strong>UX (User Experience)<\/strong><\/a><strong>, <\/strong><a href=\"https:\/\/rockcontent.com\/br\/blog\/mobile-friendly-vantagens-site-otimizado\/\" rel=\"noreferrer noopener\" target=\"_blank\"><strong>Mobile Friendly<\/strong><\/a><strong> e <\/strong><a href=\"https:\/\/rockcontent.com\/br\/blog\/o-que-e-seo\/\" rel=\"noreferrer noopener\" target=\"_blank\"><strong>SEO<\/strong><\/a><strong>.<\/strong><\/p>\n\n\n\n<a id=\"porque\"><\/a>\n\n\n\n<h2 class=\"wp-block-heading\">Por que usar um wireframe?<\/h2>\n\n\n\n<p>As vantagens mais percept\u00edveis no uso de wireframes dizem respeito ao <a href=\"https:\/\/rockcontent.com\/br\/blog\/como-fazer-um-bom-plano-de-marketing\/\" rel=\"noreferrer noopener\" target=\"_blank\">planejamento<\/a> em si. Com um projeto b\u00e1sico central aberto e adapt\u00e1vel, muitos erros e possibilidades de retrabalho podem ser identificados com agilidade, antes de aplicar muitos recursos na constru\u00e7\u00e3o de um modelo s\u00f3lido.<\/p>\n\n\n\n<p>Al\u00e9m disso, precisamos pensar no handoff (ou transfer\u00eancia de arquivos) que \u00e9 facilitada com os softwares de wireframe. Muitas ferramentas permitem o armazenamento em nuvem e a integra\u00e7\u00e3o dos seus arquivos com programas de desenvolvimento e webdesign.<\/p>\n\n\n\n<p>O maior benef\u00edcio dos wireframes, por\u00e9m, \u00e9 que eles tamb\u00e9m funcionam como uma ferramenta de comunica\u00e7\u00e3o e discuss\u00e3o entre clientes, produtores de conte\u00fado, <a href=\"https:\/\/rockcontent.com\/br\/blog\/marketing-e-programacao\/\" rel=\"noreferrer noopener\" target=\"_blank\">desenvolvedores e profissionais de Marketing<\/a>.<\/p>\n\n\n\n<p>Como s\u00e3o flex\u00edveis, <strong>\u00e9 poss\u00edvel sugerir mudan\u00e7as, introduzir novos elementos, diversificar a estrutura e at\u00e9 mesmo recome\u00e7ar o planejamento do zero sem o risco de lidar com grandes preju\u00edzos de tempo ou dinheiro.<\/strong><\/p>\n\n\n\n<p>Podemos concluir que o wireframe de site \u00e9 uma solu\u00e7\u00e3o simples para o planejamento pr\u00e9vio de diferentes tipos de plataformas na internet. Seu papel \u00e9 important\u00edssimo para a qualidade de um site profissional e sua metodologia ainda funciona como um meio de poupar recursos e manter toda a equipe do projeto alinhada.<\/p>\n\n\n\n<p>Gostou do nosso conte\u00fado? Ent\u00e3o aproveite que j\u00e1 est\u00e1 aqui e confira <a href=\"https:\/\/materiais.rockcontent.com\/checklist-site?utm_medium=rock-convert\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"nosso ebook completo sobre lan\u00e7amento de sites (abre numa nova aba)\">nosso ebook completo sobre lan\u00e7amento de sites<\/a>!<\/p>\n\n\n\n<p>\n\n[rock-convert-cta id=&#8221;34970&#8243;]\n\n<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Um wireframe de site, ou website wireframe, nada mais \u00e9 do que um esbo\u00e7o usado para definir as bases da arquitetura de um site. Muito utilizado por ag\u00eancias e desenvolvedores, esse \u201crascunho\u201d confere uma vis\u00e3o preliminar de um projeto, demanda recursos irris\u00f3rios e pode ser modificado facilmente.<\/p>\n","protected":false},"author":1,"featured_media":19313,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[22],"tags":[],"class_list":["post-2694","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tech"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.3.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Wireframe de site: o que \u00e9 e como criar um para seu site?<\/title>\n<meta name=\"description\" content=\"Wireframe de site \u00e9 uma esp\u00e9cie de esbo\u00e7o cuja fun\u00e7\u00e3o \u00e9 definir as diretrizes b\u00e1sicas no projeto de um website. Entenda mais!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/pingback.com\/br\/resources\/wireframe-de-site\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Wireframe de site: o que \u00e9 e como criar um para seu site?\" \/>\n<meta property=\"og:description\" content=\"Wireframe de site \u00e9 uma esp\u00e9cie de esbo\u00e7o cuja fun\u00e7\u00e3o \u00e9 definir as diretrizes b\u00e1sicas no projeto de um website. Entenda mais!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/pingback.com\/br\/resources\/wireframe-de-site\/\" \/>\n<meta property=\"og:site_name\" content=\"Pingback\" \/>\n<meta property=\"article:published_time\" content=\"2019-07-09T00:00:00+00:00\" \/>\n<meta name=\"author\" content=\"Pingback\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@pingbackoficial\" \/>\n<meta name=\"twitter:site\" content=\"@pingbackoficial\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Pingback\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/pingback.com\/br\/resources\/wireframe-de-site\/\",\"url\":\"https:\/\/pingback.com\/br\/resources\/wireframe-de-site\/\",\"name\":\"Wireframe de site: o que \u00e9 e como criar um para seu site?\",\"isPartOf\":{\"@id\":\"https:\/\/pingback.com\/br\/resources\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/pingback.com\/br\/resources\/wireframe-de-site\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/pingback.com\/br\/resources\/wireframe-de-site\/#primaryimage\"},\"thumbnailUrl\":\"\",\"datePublished\":\"2019-07-09T00:00:00+00:00\",\"author\":{\"@id\":\"https:\/\/pingback.com\/br\/resources\/#\/schema\/person\/170478128352e2f21e2360c2e4944a66\"},\"description\":\"Wireframe de site \u00e9 uma esp\u00e9cie de esbo\u00e7o cuja fun\u00e7\u00e3o \u00e9 definir as diretrizes b\u00e1sicas no projeto de um website. Entenda mais!\",\"breadcrumb\":{\"@id\":\"https:\/\/pingback.com\/br\/resources\/wireframe-de-site\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/pingback.com\/br\/resources\/wireframe-de-site\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/pingback.com\/br\/resources\/wireframe-de-site\/#primaryimage\",\"url\":\"\",\"contentUrl\":\"\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/pingback.com\/br\/resources\/wireframe-de-site\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"https:\/\/pingback.com\/br\/resources\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Conhe\u00e7a o que \u00e9 wireframe de site e aprenda como aplic\u00e1-lo na sua estrat\u00e9gia online\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/pingback.com\/br\/resources\/#website\",\"url\":\"https:\/\/pingback.com\/br\/resources\/\",\"name\":\"Pingback Blog\",\"description\":\"Marketing for builders\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/pingback.com\/br\/resources\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/pingback.com\/br\/resources\/#\/schema\/person\/170478128352e2f21e2360c2e4944a66\",\"name\":\"Pingback\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/pingback.com\/br\/resources\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/70cde532238b4f8bf4a6e7e589ff0a259eda38fa966564ca7ed7d23e61c27774?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/70cde532238b4f8bf4a6e7e589ff0a259eda38fa966564ca7ed7d23e61c27774?s=96&d=mm&r=g\",\"caption\":\"Pingback\"},\"description\":\"Pingback: Marketing for builders.\",\"sameAs\":[\"https:\/\/pingback.com\",\"https:\/\/www.instagram.com\/pingbackoficial\/\",\"https:\/\/www.linkedin.com\/company\/pingbackoficial\/\",\"https:\/\/x.com\/pingbackoficial\",\"https:\/\/www.youtube.com\/@pingbackoficial\"],\"url\":\"https:\/\/pingback.com\/br\/resources\/author\/adm1n\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Wireframe de site: o que \u00e9 e como criar um para seu site?","description":"Wireframe de site \u00e9 uma esp\u00e9cie de esbo\u00e7o cuja fun\u00e7\u00e3o \u00e9 definir as diretrizes b\u00e1sicas no projeto de um website. Entenda mais!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/pingback.com\/br\/resources\/wireframe-de-site\/","og_locale":"pt_BR","og_type":"article","og_title":"Wireframe de site: o que \u00e9 e como criar um para seu site?","og_description":"Wireframe de site \u00e9 uma esp\u00e9cie de esbo\u00e7o cuja fun\u00e7\u00e3o \u00e9 definir as diretrizes b\u00e1sicas no projeto de um website. Entenda mais!","og_url":"https:\/\/pingback.com\/br\/resources\/wireframe-de-site\/","og_site_name":"Pingback","article_published_time":"2019-07-09T00:00:00+00:00","author":"Pingback","twitter_card":"summary_large_image","twitter_creator":"@pingbackoficial","twitter_site":"@pingbackoficial","twitter_misc":{"Escrito por":"Pingback","Est. tempo de leitura":"8 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/pingback.com\/br\/resources\/wireframe-de-site\/","url":"https:\/\/pingback.com\/br\/resources\/wireframe-de-site\/","name":"Wireframe de site: o que \u00e9 e como criar um para seu site?","isPartOf":{"@id":"https:\/\/pingback.com\/br\/resources\/#website"},"primaryImageOfPage":{"@id":"https:\/\/pingback.com\/br\/resources\/wireframe-de-site\/#primaryimage"},"image":{"@id":"https:\/\/pingback.com\/br\/resources\/wireframe-de-site\/#primaryimage"},"thumbnailUrl":"","datePublished":"2019-07-09T00:00:00+00:00","author":{"@id":"https:\/\/pingback.com\/br\/resources\/#\/schema\/person\/170478128352e2f21e2360c2e4944a66"},"description":"Wireframe de site \u00e9 uma esp\u00e9cie de esbo\u00e7o cuja fun\u00e7\u00e3o \u00e9 definir as diretrizes b\u00e1sicas no projeto de um website. Entenda mais!","breadcrumb":{"@id":"https:\/\/pingback.com\/br\/resources\/wireframe-de-site\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/pingback.com\/br\/resources\/wireframe-de-site\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/pingback.com\/br\/resources\/wireframe-de-site\/#primaryimage","url":"","contentUrl":""},{"@type":"BreadcrumbList","@id":"https:\/\/pingback.com\/br\/resources\/wireframe-de-site\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"https:\/\/pingback.com\/br\/resources\/"},{"@type":"ListItem","position":2,"name":"Conhe\u00e7a o que \u00e9 wireframe de site e aprenda como aplic\u00e1-lo na sua estrat\u00e9gia online"}]},{"@type":"WebSite","@id":"https:\/\/pingback.com\/br\/resources\/#website","url":"https:\/\/pingback.com\/br\/resources\/","name":"Pingback Blog","description":"Marketing for builders","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/pingback.com\/br\/resources\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Person","@id":"https:\/\/pingback.com\/br\/resources\/#\/schema\/person\/170478128352e2f21e2360c2e4944a66","name":"Pingback","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/pingback.com\/br\/resources\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/70cde532238b4f8bf4a6e7e589ff0a259eda38fa966564ca7ed7d23e61c27774?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/70cde532238b4f8bf4a6e7e589ff0a259eda38fa966564ca7ed7d23e61c27774?s=96&d=mm&r=g","caption":"Pingback"},"description":"Pingback: Marketing for builders.","sameAs":["https:\/\/pingback.com","https:\/\/www.instagram.com\/pingbackoficial\/","https:\/\/www.linkedin.com\/company\/pingbackoficial\/","https:\/\/x.com\/pingbackoficial","https:\/\/www.youtube.com\/@pingbackoficial"],"url":"https:\/\/pingback.com\/br\/resources\/author\/adm1n\/"}]}},"_links":{"self":[{"href":"https:\/\/pingback.com\/br\/resources\/wp-json\/wp\/v2\/posts\/2694","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pingback.com\/br\/resources\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pingback.com\/br\/resources\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pingback.com\/br\/resources\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pingback.com\/br\/resources\/wp-json\/wp\/v2\/comments?post=2694"}],"version-history":[{"count":0,"href":"https:\/\/pingback.com\/br\/resources\/wp-json\/wp\/v2\/posts\/2694\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pingback.com\/br\/resources\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/pingback.com\/br\/resources\/wp-json\/wp\/v2\/media?parent=2694"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pingback.com\/br\/resources\/wp-json\/wp\/v2\/categories?post=2694"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pingback.com\/br\/resources\/wp-json\/wp\/v2\/tags?post=2694"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}