{"id":13106,"date":"2018-04-13T12:19:48","date_gmt":"2018-04-13T15:19:48","guid":{"rendered":"http:\/\/www.impacta.com.br\/blog\/?p=13106"},"modified":"2018-04-13T12:19:48","modified_gmt":"2018-04-13T15:19:48","slug":"descubra-8-ferramentas-para-criar-prototipos-e-wireframes","status":"publish","type":"post","link":"https:\/\/www.impacta.com.br\/blog\/descubra-8-ferramentas-para-criar-prototipos-e-wireframes\/","title":{"rendered":"Descubra 8 ferramentas para criar prot\u00f3tipos e wireframes"},"content":{"rendered":"<p><span style=\"font-size: 14pt;\"><em>N\u00e3o pode ler esse artigo agora? Ou\u00e7a a mat\u00e9ria no Player abaixo:<\/em><\/span><br \/>\n<iframe loading=\"lazy\" width=\"100%\" height=\"83\" style=\"height: 83px !important;\" scrolling=\"no\" src=\"https:\/\/go.vooozer.com\/embed\/fb890a2c\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><br \/>\n<span style=\"font-size: 14pt;\">O desenvolvimento de aplica\u00e7\u00f5es \u00e9 uma das \u00e1reas mais promissoras para\u00a0<a href=\"https:\/\/www.impacta.com.br\/blog\/2018\/03\/07\/cursos-e-certificacoes-em-ti-o-caminho-para-se-destacar-na-area\/\" target=\"_blank\" rel=\"noopener noreferrer\">se destacar na Tecnologia da Informa\u00e7\u00e3o (TI)<\/a><strong>.\u00a0<\/strong>Afinal de contas, uma infinidade de setores precisa criar solu\u00e7\u00f5es digitais inovadoras diariamente: hospitais, supermercados, universidades, ind\u00fastrias etc. Isso torna esse\u00a0mercado muito amplo. Nesse contexto, quem tem ambi\u00e7\u00f5es na carreira de TI carece de\u00a0atualiza\u00e7\u00f5es constantes\u00a0sobre os prot\u00f3tipos e wireframes. Mas voc\u00ea sabe para que eles servem?<\/span><br \/>\n<span style=\"font-size: 14pt;\">Tratam-se de\u00a0recursos que imitam a estrutura de um futuro programa\u00a0(outro aplicativo) ou site para test\u00e1-lo. Ou seja, eles\u00a0antecipam a montagem e os poss\u00edveis erros em aplica\u00e7\u00f5es que ainda est\u00e3o em constru\u00e7\u00e3o.<\/span><br \/>\n<span style=\"font-size: 14pt;\">Para isso, esses prot\u00f3tipos s\u00e3o mais simples, feitos sem a preocupa\u00e7\u00e3o com os detalhes finais da ferramenta,\u00a0como o <strong>design de\u00a0interface<\/strong>. Quer saber mais? Ent\u00e3o acompanhe neste post oito ferramentas incr\u00edveis\u00a0que podem contribuir para seu avan\u00e7o profissional. Confira!<\/span><\/p>\n<h2><strong><span style=\"font-size: 14pt;\">1. Axure<\/span><\/strong><\/h2>\n<p><span style=\"font-size: 14pt;\">Criado em 2002, o\u00a0<a href=\"https:\/\/www.software.com.br\/p\/axure-rp\" target=\"_blank\" rel=\"noopener noreferrer\">Axure<\/a>\u00a0\u00e9 uma ferramenta de prot\u00f3tipos muito conhecida entre os profissionais da \u00e1rea por sua capacidade de oferecer uma gama muito vasta de testes, principalmente para as fun\u00e7\u00f5es interativas, essenciais para quem est\u00e1 produzindo um\u00a0<a href=\"https:\/\/www.impacta.com.br\/blog\/2018\/02\/26\/voce-sabe-o-que-faz-um-designer-de-game\/\" target=\"_blank\" rel=\"noopener noreferrer\">design de games<\/a>, por exemplo.<\/span><br \/>\n<span style=\"font-size: 14pt;\">Fazer esses experimentos, no entanto, requer certo dom\u00ednio\u00a0sobre as<a href=\"https:\/\/www.impacta.com.br\/online\/Axure-Conhecendo-o-Potencial-da-Ferramenta-online.php\" target=\"_blank\" rel=\"noopener noreferrer\"> funcionalidades do Axure<\/a>. Ele disponibiliza\u00a0prot\u00f3tipos e wireframes com diagramas de fluxos, formul\u00e1rios e elementos din\u00e2micos que podem ser editados de forma personalizada.<\/span><br \/>\n<span style=\"font-size: 14pt;\">Toda a <a title=\"Guia pr\u00e1tico para desbravar o Universo do UX\" href=\"https:\/\/www.impacta.com.br\/blog\/2018\/04\/04\/guia-pratico-para-desbravar-o-universo-do-ux\/\" target=\"_blank\" rel=\"noopener noreferrer\">UX<\/a> (Experi\u00eancia do Usu\u00e1rio ou User Experience) pode ser testada em grupo, j\u00e1 que os dados de um projeto s\u00e3o pass\u00edveis de compartilhamento.<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-size: 14pt;\">Desse modo, os colaboradores envolvidos sempre ter\u00e3o acesso \u00e0s \u00faltimas modifica\u00e7\u00f5es no prot\u00f3tipo. Mais do que isso: o grupo de desenvolvedores pode dividir tamb\u00e9m as percep\u00e7\u00f5es que cada um vai notando ao longo desses experimentos, o que facilita bastante o trabalho em equipe.<\/span><\/p>\n<h2><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-12735 size-full\" src=\"https:\/\/www.impacta.com.br\/blog\/wp-content\/uploads\/2016\/10\/axure_logo2.png\" alt=\"axure_logo2\" width=\"465\" height=\"101\" \/><\/h2>\n<h2 style=\"text-align: left;\"><strong><span style=\"font-size: 14pt;\">2. Sketch<\/span><\/strong><\/h2>\n<p><span style=\"font-size: 14pt;\">Um dos\u00a0<a href=\"https:\/\/www.impacta.com.br\/blog\/2018\/02\/02\/7-ferramentas-de-desenvolvimento-e-design-que-voce-precisa-conhecer\/\" target=\"_blank\" rel=\"noopener noreferrer\">recursos tecnol\u00f3gicos<\/a>\u00a0mais\u00a0populares na ind\u00fastria, o\u00a0<a href=\"https:\/\/www.sketchapp.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Sketch<\/a>\u00a0foi elaborado de forma exclusiva para os usu\u00e1rios do <a href=\"https:\/\/www.impacta.com.br\/curso\/Ambiente-Mac-OS-X.php\" target=\"_blank\" rel=\"noopener noreferrer\">Mac OSX<\/a>. Ele \u00e9 comparado ao <a title=\"e-Book \u2013 Manual do Illustrator: voc\u00ea vai se tornar um ninja!\" href=\"https:\/\/www.impacta.com.br\/blog\/2017\/04\/14\/e-book-manual-do-illustrator-voce-vai-se-tornar-um-ninja\/\" target=\"_blank\" rel=\"noopener noreferrer\">Adobe Illustrator<\/a>, mas muitos designers acham o Sketch ainda mais f\u00e1cil de explorar.<\/span><br \/>\n<span style=\"font-size: 14pt;\">Este\u00a0software faz uma boa compress\u00e3o dos arquivos, o que facilita a circula\u00e7\u00e3o de dados\u00a0entre os integrantes do time de TI. O Sketch tamb\u00e9m ajuda a elaborar interfaces, sites e \u00edcones.<\/span><br \/>\n<span style=\"font-size: 14pt;\">Com o app\u00a0<a href=\"https:\/\/www.sketchapp.com\/docs\/mirror\/\" target=\"_blank\" rel=\"noopener noreferrer\">Sketch Mirror,<\/a>\u00a0\u00e9 poss\u00edvel ver uma pr\u00e9via da plataforma em dispositivos m\u00f3veis. Assim, d\u00e1 para ter uma boa no\u00e7\u00e3o de como a aplica\u00e7\u00e3o vai operar na pr\u00e1tica.<\/span><\/p>\n<h2><strong><span style=\"font-size: 14pt;\">3.\u00a0Balsamiq Mockups<\/span><\/strong><\/h2>\n<p><span style=\"font-size: 14pt;\">Para quem tem pouco tempo para aprender, o\u00a0<a href=\"https:\/\/balsamiq.com\/products\/\" target=\"_blank\" rel=\"noopener noreferrer\">Balsamiq Mockups<\/a>\u00a0pode ser bem \u00fatil. Ele funciona como se o usu\u00e1rio estivesse desenhando com o l\u00e1pis em uma folha de papel.<\/span><br \/>\n<span style=\"font-size: 14pt;\">Isso, \u00e9 claro, em uma vers\u00e3o digital. Assim, \u00e9 vi\u00e1vel\u00a0arrastar os componentes de uma tela de um lugar para o outro, redimensionando a interface com muita rapidez.\u00a0<\/span><br \/>\n<span style=\"font-size: 14pt;\">Esse app conta com 75 controles pr\u00e9-estabelecidos, que s\u00e3o capazes de projetar desde uma simples caixa de di\u00e1logo at\u00e9 aplica\u00e7\u00f5es um pouco mais complexas.\u00a0<\/span><br \/>\n<span style=\"font-size: 14pt;\">Existe, por\u00e9m, uma ressalva: geralmente os wireframes produzidos por meio do Balsamiq s\u00e3o do tipo \u201cbaixa fidelidade\u201d. Isso significa que eles t\u00eam recursos um pouco mais limitados para os testes que antecedem o\u00a0<a href=\"https:\/\/www.impacta.com.br\/blog\/2018\/01\/05\/desenvolvimento-de-aplicacoes-web-tire-suas-duvidas-sobre-o-assunto\/\" target=\"_blank\" rel=\"noopener noreferrer\">desenvolvimento de aplica\u00e7\u00f5es<\/a>.<\/span><br \/>\n<span style=\"font-size: 14pt;\">Os prot\u00f3tipos de alta fidelidade, como j\u00e1 diz o pr\u00f3prio nome, disp\u00f5em de instrumentos extras, que os aproximam mais da realidade dos futuros apps.<\/span><br \/>\n<span style=\"font-size: 14pt;\">Esse aplicativo, embora mais usado para prot\u00f3tipos pouco fi\u00e9is, tamb\u00e9m produz wireframes de similaridade alta.\u00a0Por outro lado, os prot\u00f3tipos do Balsamiq de fidelidade baixa\u00a0s\u00e3o criados de modo muito mais veloz.\u00a0<\/span><\/p>\n<h2><strong><span style=\"font-size: 14pt;\">4. InvisionApp<\/span><\/strong><\/h2>\n<p><span style=\"font-size: 14pt;\">Considerado de simples utiliza\u00e7\u00e3o, o\u00a0<a href=\"https:\/\/www.invisionapp.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">InvisionApp<\/a>\u00a0far\u00e1 seu\u00a0<a href=\"https:\/\/www.impacta.com.br\/blog\/2018\/02\/16\/quais-vantagens-usar-visual-studio-desenvolver-aplicativos\/\" target=\"_blank\" rel=\"noopener noreferrer\">desenvolvimento de aplicativos<\/a>\u00a0ganhar os primeiros elementos em poucos cliques.<\/span><br \/>\n<span style=\"font-size: 14pt;\">Quando um prot\u00f3tipo nesse software \u00e9 completado, \u00e9 simples\u00a0acrescentar recursos interessantes, como anima\u00e7\u00f5es ou efeitos de transi\u00e7\u00e3o entre as p\u00e1ginas.<\/span><br \/>\n<span style=\"font-size: 14pt;\">O Invison tamb\u00e9m oferece a op\u00e7\u00e3o de abrir em dispositivos m\u00f3veis. Outro benef\u00edcio dele \u00e9 a alta fidelidade, que supera muitas das solu\u00e7\u00f5es dispon\u00edveis no mercado.<\/span><br \/>\n<span style=\"font-size: 14pt;\">Assim, ele \u00e9 altamente indicado para obter mais feedback dos usu\u00e1rios, j\u00e1 que suas op\u00f5es de experimentos com os clientes s\u00e3o mais amplas. Os consumidores conseguem at\u00e9 deixar coment\u00e1rios sobre a impress\u00e3o que tiveram da usabilidade desse wireframe.<\/span><\/p>\n<h2><strong><span style=\"font-size: 14pt;\">5.\u00a0FramerJS<\/span><\/strong><\/h2>\n<p><span style=\"font-size: 14pt;\">O\u00a0<a href=\"https:\/\/framer.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">FramerJS<\/a>\u00a0\u00e9 outro instrumento que cria wireframes com intera\u00e7\u00f5es, tanto para a prototipagem de aplicativos inteiros como de anima\u00e7\u00f5es espec\u00edficas para websites, entre outras funcionalidades.<\/span><br \/>\n<span style=\"font-size: 14pt;\">Para os desenvolvedores que n\u00e3o s\u00e3o muito familiarizados com os c\u00f3digos, o FramerJS \u00e9 altamente apropriado. Isso porque ele elabora gr\u00e1ficos com cifras\u00a0autom\u00e1ticas na parte esquerda da tela.<\/span><\/p>\n<h2><strong><span style=\"font-size: 14pt;\">6. OmniGraffle<\/span><\/strong><\/h2>\n<p><span style=\"font-size: 14pt;\">Espec\u00edfico para iOS e Mac, o\u00a0<a href=\"https:\/\/www.omnigroup.com\/omnigraffle\" target=\"_blank\" rel=\"noopener noreferrer\">OmniGraffle<\/a>\u00a0disp\u00f5e de um recurso de arrastar e soltar que \u00e9 bem f\u00e1cil de compreender. Esse aplicativo tem sido muito empregado para testar o fluxo de navega\u00e7\u00e3o.<\/span><br \/>\n<span style=\"font-size: 14pt;\">A desvantagem dele \u00e9 uma colabora\u00e7\u00e3o limitada entre os integrantes de uma equipe, uma vez que esse software n\u00e3o roda em qualquer hardware.<\/span><br \/>\n<span style=\"font-size: 14pt;\">Al\u00e9m da cria\u00e7\u00e3o dos prot\u00f3tipos e wireframes, o OmniGraffle tem funcionalidades para brainstorm entre seus participantes. Os moldes virtuais s\u00e3o baseados em desenhos, o que torna a experi\u00eancia mais flu\u00edda, com mais recursos para dar asas \u00e0 criatividade.<\/span><\/p>\n<h2><strong><span style=\"font-size: 14pt;\">7. Adobe XD<\/span><\/strong><\/h2>\n<p><span style=\"font-size: 14pt;\">Software desenvolvido pela Adobe, o app\u00a0<a href=\"https:\/\/www.youtube.com\/watch?v=ng-j3vxcotQ\" target=\"_blank\" rel=\"noopener noreferrer\">Adobe XD<\/a>\u00a0\u00e9 \u00f3timo para produ\u00e7\u00e3o de prot\u00f3tipos de alta fidelidade. Ele possibilita a formula\u00e7\u00e3o de interfaces com o uso de ferramenta de textos e de vetores.<\/span><br \/>\n<span style=\"font-size: 14pt;\">Para isso, acione o recurso na aba \u201cDesign\u201d. J\u00e1 na op\u00e7\u00e3o \u201cPrototype\u201d, aparecer\u00e1 uma pr\u00e9via do seu wireframe, que \u00e9 pass\u00edvel de compartilhamento.<\/span><\/p>\n<h2><strong><span style=\"font-size: 14pt;\">8. MockFlow<\/span><\/strong><\/h2>\n<p><span style=\"font-size: 14pt;\">O\u00a0<a href=\"https:\/\/www.mockflow.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">MockFlow<\/a>\u00a0\u00e9 mais um dos utilit\u00e1rios para a elabora\u00e7\u00e3o de wireframes tido pelos usu\u00e1rios como uma ferramenta simples. Ele tem mecanismos, como caixas de textos, slideshows e dropbox, que deixam o desenvolvimento mais f\u00e1cil.<\/span><br \/>\n<span style=\"font-size: 14pt;\">Outra qualidade \u00e9 a colabora\u00e7\u00e3o instant\u00e2nea, j\u00e1 que ele oferece chats de intera\u00e7\u00e3o. O design vem pr\u00e9-conclu\u00eddo, o que contribui para a familiariza\u00e7\u00e3o dos desenvolvedores iniciantes com suas interfaces.<\/span><br \/>\n<span style=\"font-size: 14pt;\">Um de seus principais benef\u00edcios \u00e9 a flexibilidade. Isso porque esse aplicativo proporciona recursos gr\u00e1ficos para fazer wireframes espec\u00edficos para iPad, iPhone, Facebook e Android.<\/span><br \/>\n<span style=\"font-size: 14pt;\">Os prot\u00f3tipos e wireframes, portanto, s\u00e3o cruciais no desenvolvimento de aplica\u00e7\u00f5es. Afinal de contas, eles\u00a0podem aumentar a efici\u00eancia dos produtos tecnol\u00f3gicos e, ao menos tempo, reduzir os esfor\u00e7os necess\u00e1rios para isso.\u00a0 Desse modo, um designer aprimora as suas habilidades. Assim, aquele velho sonho de entrar para uma\u00a0<a href=\"https:\/\/www.impacta.com.br\/blog\/2018\/01\/29\/como-montar-uma-equipe-de-ti-de-sucesso-aprenda-aqui\/\" target=\"_blank\" rel=\"noopener noreferrer\">equipe de TI de sucesso<\/a>\u00a0ficar\u00e1 mais pr\u00f3ximo.<\/span><br \/>\n<span style=\"font-size: 14pt;\">O que voc\u00ea achou do nosso post? Conhece alguma outra ferramenta para criar prot\u00f3tipos e wireframes? Ent\u00e3o deixe o seu coment\u00e1rio nesse\u00a0post!<\/span><\/p>\n<div class=\"sharing-default-minimal post-bottom\"><div class=\"nectar-social default\" data-position=\"\" data-rm-love=\"0\" data-color-override=\"override\"><div class=\"nectar-social-inner\"><a href=\"#\" class=\"nectar-love\" id=\"nectar-love-13106\" title=\"Love this\"> <i class=\"icon-salient-heart-2\"><\/i><span class=\"love-text\">Love<\/span><span class=\"total_loves\"><span class=\"nectar-love-count\">0<\/span><\/span><\/a><a class='facebook-share nectar-sharing' href='#' title='Share this'> <i class='fa fa-facebook'><\/i> <span class='social-text'>Share<\/span> <\/a><a class='twitter-share nectar-sharing' href='#' title='Share this'> <i class='fa icon-salient-x-twitter'><\/i> <span class='social-text'>Share<\/span> <\/a><a class='linkedin-share nectar-sharing' href='#' title='Share this'> <i class='fa fa-linkedin'><\/i> <span class='social-text'>Share<\/span> <\/a><a class='pinterest-share nectar-sharing' href='#' title='Pin this'> <i class='fa fa-pinterest'><\/i> <span class='social-text'>Pin<\/span> <\/a><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"<p>N\u00e3o pode ler esse artigo agora? Ou\u00e7a a mat\u00e9ria no Player abaixo: O desenvolvimento de aplica\u00e7\u00f5es \u00e9 uma das \u00e1reas mais promissoras para\u00a0se destacar na Tecnologia da Informa\u00e7\u00e3o (TI).\u00a0Afinal de contas, uma infinidade de setores precisa criar solu\u00e7\u00f5es digitais inovadoras diariamente: hospitais, supermercados, universidades, ind\u00fastrias etc. Isso torna esse\u00a0mercado muito amplo. Nesse contexto, quem tem [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":16988,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[26,10],"tags":[66,590],"class_list":["post-13106","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-arte-design","category-desenvolvimento","tag-desenvolvimento-2","tag-prototipo"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\r\n<title>Descubra 8 ferramentas para criar prot\u00f3tipos e wireframes<\/title>\r\n<meta name=\"description\" content=\"Criar prot\u00f3tipos e wireframes \u00e9 fundamental para facilitar e organizar o desenvolvimento de sites e aplica\u00e7\u00f5es. Conhe\u00e7a 8 ferramentas mais usadas para isso!\" \/>\r\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\r\n<link rel=\"canonical\" href=\"https:\/\/www.impacta.com.br\/blog\/descubra-8-ferramentas-para-criar-prototipos-e-wireframes\/\" \/>\r\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\r\n<meta property=\"og:type\" content=\"article\" \/>\r\n<meta property=\"og:title\" content=\"Descubra 8 ferramentas para criar prot\u00f3tipos e wireframes\" \/>\r\n<meta property=\"og:description\" content=\"Criar prot\u00f3tipos e wireframes \u00e9 fundamental para facilitar e organizar o desenvolvimento de sites e aplica\u00e7\u00f5es. Conhe\u00e7a 8 ferramentas mais usadas para isso!\" \/>\r\n<meta property=\"og:url\" content=\"https:\/\/www.impacta.com.br\/blog\/descubra-8-ferramentas-para-criar-prototipos-e-wireframes\/\" \/>\r\n<meta property=\"og:site_name\" content=\"Blog Impacta - Dicas e Not\u00edcias sobre Carreira\" \/>\r\n<meta property=\"article:published_time\" content=\"2018-04-13T15:19:48+00:00\" \/>\r\n<meta property=\"og:image\" content=\"https:\/\/www.impacta.com.br\/blog\/wp-content\/uploads\/2020\/04\/ferramentas-para-criar-prototipos-e-wireframes.jpg\" \/>\r\n\t<meta property=\"og:image:width\" content=\"850\" \/>\r\n\t<meta property=\"og:image:height\" content=\"284\" \/>\r\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\r\n<meta name=\"author\" content=\"Reda\u00e7\u00e3o Impacta\" \/>\r\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\r\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Reda\u00e7\u00e3o Impacta\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutos\" \/>\r\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.impacta.com.br\/blog\/descubra-8-ferramentas-para-criar-prototipos-e-wireframes\/\",\"url\":\"https:\/\/www.impacta.com.br\/blog\/descubra-8-ferramentas-para-criar-prototipos-e-wireframes\/\",\"name\":\"Descubra 8 ferramentas para criar prot\u00f3tipos e wireframes\",\"isPartOf\":{\"@id\":\"https:\/\/www.impacta.com.br\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.impacta.com.br\/blog\/descubra-8-ferramentas-para-criar-prototipos-e-wireframes\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.impacta.com.br\/blog\/descubra-8-ferramentas-para-criar-prototipos-e-wireframes\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.impacta.com.br\/blog\/wp-content\/uploads\/2020\/04\/ferramentas-para-criar-prototipos-e-wireframes.jpg\",\"datePublished\":\"2018-04-13T15:19:48+00:00\",\"author\":{\"@id\":\"https:\/\/www.impacta.com.br\/blog\/#\/schema\/person\/2e0896bac7656da15b68f5ad2ddd0d8c\"},\"description\":\"Criar prot\u00f3tipos e wireframes \u00e9 fundamental para facilitar e organizar o desenvolvimento de sites e aplica\u00e7\u00f5es. Conhe\u00e7a 8 ferramentas mais usadas para isso!\",\"breadcrumb\":{\"@id\":\"https:\/\/www.impacta.com.br\/blog\/descubra-8-ferramentas-para-criar-prototipos-e-wireframes\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.impacta.com.br\/blog\/descubra-8-ferramentas-para-criar-prototipos-e-wireframes\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/www.impacta.com.br\/blog\/descubra-8-ferramentas-para-criar-prototipos-e-wireframes\/#primaryimage\",\"url\":\"https:\/\/www.impacta.com.br\/blog\/wp-content\/uploads\/2020\/04\/ferramentas-para-criar-prototipos-e-wireframes.jpg\",\"contentUrl\":\"https:\/\/www.impacta.com.br\/blog\/wp-content\/uploads\/2020\/04\/ferramentas-para-criar-prototipos-e-wireframes.jpg\",\"width\":850,\"height\":284},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.impacta.com.br\/blog\/descubra-8-ferramentas-para-criar-prototipos-e-wireframes\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"https:\/\/www.impacta.com.br\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Descubra 8 ferramentas para criar prot\u00f3tipos e wireframes\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.impacta.com.br\/blog\/#website\",\"url\":\"https:\/\/www.impacta.com.br\/blog\/\",\"name\":\"Blog Impacta - Dicas e Not\u00edcias sobre Carreira\",\"description\":\"Dicas, Not\u00edcias e Conte\u00fados sobre Carreira, Tecnologia, Design, Gest\u00e3o e Marketing. Conhe\u00e7a e Acompanhe o Blog Impacta\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.impacta.com.br\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.impacta.com.br\/blog\/#\/schema\/person\/2e0896bac7656da15b68f5ad2ddd0d8c\",\"name\":\"Reda\u00e7\u00e3o Impacta\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/www.impacta.com.br\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/7443a59e479c8f31067628e3a4bed9ad?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/7443a59e479c8f31067628e3a4bed9ad?s=96&d=mm&r=g\",\"caption\":\"Reda\u00e7\u00e3o Impacta\"},\"url\":\"https:\/\/www.impacta.com.br\/blog\/author\/redacao\/\"}]}<\/script>\r\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Descubra 8 ferramentas para criar prot\u00f3tipos e wireframes","description":"Criar prot\u00f3tipos e wireframes \u00e9 fundamental para facilitar e organizar o desenvolvimento de sites e aplica\u00e7\u00f5es. Conhe\u00e7a 8 ferramentas mais usadas para isso!","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:\/\/www.impacta.com.br\/blog\/descubra-8-ferramentas-para-criar-prototipos-e-wireframes\/","og_locale":"pt_BR","og_type":"article","og_title":"Descubra 8 ferramentas para criar prot\u00f3tipos e wireframes","og_description":"Criar prot\u00f3tipos e wireframes \u00e9 fundamental para facilitar e organizar o desenvolvimento de sites e aplica\u00e7\u00f5es. Conhe\u00e7a 8 ferramentas mais usadas para isso!","og_url":"https:\/\/www.impacta.com.br\/blog\/descubra-8-ferramentas-para-criar-prototipos-e-wireframes\/","og_site_name":"Blog Impacta - Dicas e Not\u00edcias sobre Carreira","article_published_time":"2018-04-13T15:19:48+00:00","og_image":[{"width":850,"height":284,"url":"https:\/\/www.impacta.com.br\/blog\/wp-content\/uploads\/2020\/04\/ferramentas-para-criar-prototipos-e-wireframes.jpg","type":"image\/jpeg"}],"author":"Reda\u00e7\u00e3o Impacta","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Reda\u00e7\u00e3o Impacta","Est. reading time":"6 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.impacta.com.br\/blog\/descubra-8-ferramentas-para-criar-prototipos-e-wireframes\/","url":"https:\/\/www.impacta.com.br\/blog\/descubra-8-ferramentas-para-criar-prototipos-e-wireframes\/","name":"Descubra 8 ferramentas para criar prot\u00f3tipos e wireframes","isPartOf":{"@id":"https:\/\/www.impacta.com.br\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.impacta.com.br\/blog\/descubra-8-ferramentas-para-criar-prototipos-e-wireframes\/#primaryimage"},"image":{"@id":"https:\/\/www.impacta.com.br\/blog\/descubra-8-ferramentas-para-criar-prototipos-e-wireframes\/#primaryimage"},"thumbnailUrl":"https:\/\/www.impacta.com.br\/blog\/wp-content\/uploads\/2020\/04\/ferramentas-para-criar-prototipos-e-wireframes.jpg","datePublished":"2018-04-13T15:19:48+00:00","author":{"@id":"https:\/\/www.impacta.com.br\/blog\/#\/schema\/person\/2e0896bac7656da15b68f5ad2ddd0d8c"},"description":"Criar prot\u00f3tipos e wireframes \u00e9 fundamental para facilitar e organizar o desenvolvimento de sites e aplica\u00e7\u00f5es. Conhe\u00e7a 8 ferramentas mais usadas para isso!","breadcrumb":{"@id":"https:\/\/www.impacta.com.br\/blog\/descubra-8-ferramentas-para-criar-prototipos-e-wireframes\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.impacta.com.br\/blog\/descubra-8-ferramentas-para-criar-prototipos-e-wireframes\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.impacta.com.br\/blog\/descubra-8-ferramentas-para-criar-prototipos-e-wireframes\/#primaryimage","url":"https:\/\/www.impacta.com.br\/blog\/wp-content\/uploads\/2020\/04\/ferramentas-para-criar-prototipos-e-wireframes.jpg","contentUrl":"https:\/\/www.impacta.com.br\/blog\/wp-content\/uploads\/2020\/04\/ferramentas-para-criar-prototipos-e-wireframes.jpg","width":850,"height":284},{"@type":"BreadcrumbList","@id":"https:\/\/www.impacta.com.br\/blog\/descubra-8-ferramentas-para-criar-prototipos-e-wireframes\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"https:\/\/www.impacta.com.br\/blog\/"},{"@type":"ListItem","position":2,"name":"Descubra 8 ferramentas para criar prot\u00f3tipos e wireframes"}]},{"@type":"WebSite","@id":"https:\/\/www.impacta.com.br\/blog\/#website","url":"https:\/\/www.impacta.com.br\/blog\/","name":"Blog Impacta - Dicas e Not\u00edcias sobre Carreira","description":"Dicas, Not\u00edcias e Conte\u00fados sobre Carreira, Tecnologia, Design, Gest\u00e3o e Marketing. Conhe\u00e7a e Acompanhe o Blog Impacta","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.impacta.com.br\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Person","@id":"https:\/\/www.impacta.com.br\/blog\/#\/schema\/person\/2e0896bac7656da15b68f5ad2ddd0d8c","name":"Reda\u00e7\u00e3o Impacta","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.impacta.com.br\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/7443a59e479c8f31067628e3a4bed9ad?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7443a59e479c8f31067628e3a4bed9ad?s=96&d=mm&r=g","caption":"Reda\u00e7\u00e3o Impacta"},"url":"https:\/\/www.impacta.com.br\/blog\/author\/redacao\/"}]}},"acf":{"post_description":null,"capa_mobile":null},"_links":{"self":[{"href":"https:\/\/www.impacta.com.br\/blog\/wp-json\/wp\/v2\/posts\/13106","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.impacta.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.impacta.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.impacta.com.br\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.impacta.com.br\/blog\/wp-json\/wp\/v2\/comments?post=13106"}],"version-history":[{"count":0,"href":"https:\/\/www.impacta.com.br\/blog\/wp-json\/wp\/v2\/posts\/13106\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.impacta.com.br\/blog\/wp-json\/wp\/v2\/media\/16988"}],"wp:attachment":[{"href":"https:\/\/www.impacta.com.br\/blog\/wp-json\/wp\/v2\/media?parent=13106"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.impacta.com.br\/blog\/wp-json\/wp\/v2\/categories?post=13106"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.impacta.com.br\/blog\/wp-json\/wp\/v2\/tags?post=13106"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}