{"id":117409,"date":"2022-02-24T12:21:13","date_gmt":"2022-02-24T15:21:13","guid":{"rendered":"https:\/\/fluency.io\/br\/blog\/?p=316"},"modified":"2023-07-27T12:47:09","modified_gmt":"2023-07-27T15:47:09","slug":"guia-prototipos-ux-design","status":"publish","type":"post","link":"https:\/\/homolog.fluency.io\/br\/blog\/guia-prototipos-ux-design\/","title":{"rendered":"Prototipa\u00e7\u00e3o em UX Design: O Guia Completo para designers"},"content":{"rendered":"\n<p>Prototipa\u00e7\u00e3o \u00e9 uma t\u00e9cnica muito utilizada na <a rel=\"noreferrer noopener\" href=\"https:\/\/fluency.io\/br\/blog\/user-experience\/\" data-type=\"post\" data-id=\"2959\" target=\"_blank\">\u00e1rea de UX design<\/a> para <strong>criar e validar solu\u00e7\u00f5es de forma r\u00e1pida<\/strong>. Geralmente, os prot\u00f3tipos s\u00e3o criados depois da fase de pesquisa com usu\u00e1rios ou benchmarking. Assim, voc\u00ea j\u00e1 conhece a dor do seu cliente e tem hip\u00f3teses para resolv\u00ea-la.<\/p>\n\n\n\n<p>Neste guia, vamos dar uma vis\u00e3o geral sobre prototipa\u00e7\u00e3o e explicar assuntos como:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Os tipos de prototipa\u00e7\u00e3o e n\u00edveis de fidelidade;<\/li>\n\n\n\n<li>Exemplos pr\u00e1ticos de cada um dos tipos de prot\u00f3tipos;<\/li>\n\n\n\n<li>Momento ideal para usar cada modalidade de prot\u00f3tipo;<\/li>\n\n\n\n<li>As principais ferramentas para construir prot\u00f3tipos;<\/li>\n\n\n\n<li>Como e com quem voc\u00ea poder\u00e1 testar seus prot\u00f3tipos.<\/li>\n<\/ul>\n\n\n\n<p>Acompanhe com a gente!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"o-que-sao-prototipos\">O que s\u00e3o prot\u00f3tipos?<\/h2>\n\n\n\n<p>A principal ideia dos prot\u00f3tipos \u00e9 <strong>validar suas hip\u00f3teses de solu\u00e7\u00e3o com o m\u00ednimo de esfor\u00e7o poss\u00edvel<\/strong>, sempre envolvendo as pessoas impactadas (clientes\/usu\u00e1rios) e interessadas (desenvolvedores, gerentes de produto, investidores etc.). Dessa forma, voc\u00ea evita retrabalhos! \ud83d\ude42<\/p>\n\n\n\n<p>Os prot\u00f3tipos podem ter basicamente 3 n\u00edveis de fidelidade: baixa, m\u00e9dia e alta. Isso tem rela\u00e7\u00e3o com a proximidade do resultado final.<\/p>\n\n\n\n<p>Por exemplo, o seu objetivo \u00e9 criar um site de empregos, mas inicialmente voc\u00ea tem apenas esbo\u00e7os no papel sobre como a p\u00e1gina na web deveria funcionar. Nesse caso, o prot\u00f3tipo \u00e9 de baixa fidelidade.<\/p>\n\n\n\n<p>Mas se j\u00e1 tiver um mockup interativo, com estilos (tipografia, cores, tamanhos, posicionamentos) e fluxo de navega\u00e7\u00e3o definidos, o prot\u00f3tipo \u00e9 de alta fidelidade. Tudo depende de quanto voc\u00ea est\u00e1 perto do produto final em funcionamento.<\/p>\n\n\n\n<p>Dependendo do est\u00e1gio do projeto e das pessoas que ir\u00e3o visualiz\u00e1-lo, \u00e9 poss\u00edvel usar est\u00e1gios diferentes de fidelidade. E voc\u00ea tamb\u00e9m pode (e deve) usar mais de um n\u00edvel de fidelidade no processo de cria\u00e7\u00e3o.<\/p>\n\n\n\n<p>Por exemplo, imagine come\u00e7ar um projeto ou criar uma nova funcionalidade em que alguns amigos t\u00eam acesso. Nessa situa\u00e7\u00e3o, voc\u00ea pode adotar prot\u00f3tipos de baixa fidelidade.<\/p>\n\n\n\n<p>Ao trabalhar um produto com clientes ativos e com uma equipe de desenvolvimento, faz sentido utilizar prot\u00f3tipos de alta fidelidade. Isso porque outras pessoas depender\u00e3o da sua entrega para o produto funcionar. Ent\u00e3o, quanto mais detalhes, melhor.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Awari - Prototipa\u00e7\u00e3o R\u00e1pida em UX Design\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/5H1qzod9qP0?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"prototipacao-em-baixa-fidelidade-com-esbocos\">Prototipa\u00e7\u00e3o em Baixa Fidelidade com Esbo\u00e7os<\/h2>\n\n\n\n<p>Essa \u00e9 geralmente a primeira etapa da prototipa\u00e7\u00e3o, mas nem sempre acontece apenas no in\u00edcio do projeto. O ideal \u00e9 usar esses prot\u00f3tipos mesmo em produtos mais consolidados, quando s\u00e3o lan\u00e7adas novas funcionalidades, por exemplo.&nbsp;Para fazer prot\u00f3tipos de baixa fidelidade, voc\u00ea precisa de somente 2 recursos: l\u00e1pis e papel. &nbsp;Por isso, eles s\u00e3o geralmente r\u00e1pidos de construir e de descartar.<\/p>\n\n\n\n<p>O legal dessa etapa \u00e9 que pessoas de diferentes \u00e1reas e especialidades tamb\u00e9m podem participar. Inclusive, essa t\u00e9cnica \u00e9 muito utilizada no come\u00e7o dos <a href=\"https:\/\/fluency.io\/br\/blog\/design-sprint\/\" data-type=\"post\" data-id=\"3001\" target=\"_blank\" rel=\"noreferrer noopener\">Design Sprints<\/a>. O objetivo \u00e9 gerar diversas perspectivas de solu\u00e7\u00f5es, vindas de desenvolvedores, designers, gerentes de produto, vendedores, entre outros participantes.<\/p>\n\n\n\n<p>Obs.: Antes de desenhar p\u00e1ginas com l\u00e1pis e papel, \u00e9 interessante mapear os <a href=\"https:\/\/fluency.io\/br\/blog\/guia-fluxogramas-ux\/\" data-type=\"post\" data-id=\"661\" target=\"_blank\" rel=\"noreferrer noopener\">fluxos de navega\u00e7\u00e3o<\/a> usando t\u00e9cnicas como fluxo de usu\u00e1rios (user flows). Assim, voc\u00ea diminui a chance de esquecer de desenhar partes importantes do fluxo e deixar pontas soltas.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"como-testar-esbocos\"><strong>Como Testar Esbo\u00e7os?&nbsp;<\/strong><\/h3>\n\n\n\n<p>Para testar seus esbo\u00e7os de telas e fluxos, fa\u00e7a um teste de usabilidade simplificado. Essa iniciativa n\u00e3o precisa ser muito formal e pode ser feita com amigos e colegas de trabalho, caso n\u00e3o tenha f\u00e1cil acesso a potenciais clientes. Nessa fase, o mais importante \u00e9 conversar, ao mesmo tempo, com outras pessoas sobre o problema e apresentar o seu esbo\u00e7o de solu\u00e7\u00e3o.<\/p>\n\n\n\n<p>A meta do teste \u00e9 identificar erros mais cr\u00edticos em termos de proposta de valor (se voc\u00ea realmente est\u00e1 resolvendo o problema) e fluxo de navega\u00e7\u00e3o. Depois disso, voc\u00ea ter\u00e1 uma no\u00e7\u00e3o bem melhor do caminho que deve seguir para refinar os prot\u00f3tipos.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"prototipacao-em-media-fidelidade-com-wireframes\">Prototipa\u00e7\u00e3o em M\u00e9dia Fidelidade com Wireframes<\/h2>\n\n\n\n<p>Criar prot\u00f3tipos de m\u00e9dia fidelidade \u00e9 geralmente uma etapa intermedi\u00e1ria. Esse prot\u00f3tipo \u00e9 mais detalhado que desenhos feitos com l\u00e1pis e papel, mas tamb\u00e9m n\u00e3o \u00e9 t\u00e3o refinado quanto um mockup interativo.<\/p>\n\n\n\n<p>Wireframes n\u00e3o s\u00e3o muito refinados visualmente e n\u00e3o t\u00eam problema algum. Geralmente, s\u00e3o em preto e branco e sem imagens, mas voc\u00ea ainda n\u00e3o precisa se preocupar com isso. O foco, nessa fase, \u00e9 construir uma estrutura e definir a hierarquia da informa\u00e7\u00e3o, o fluxo de navega\u00e7\u00e3o e os textos da interface.<\/p>\n\n\n\n<p>Existe uma discuss\u00e3o no mercado de UX sobre a influ\u00eancia dessa etapa no processo de prototipa\u00e7\u00e3o. Alguns designers defendem que ela pode ser pulada. Outros discordam da vis\u00e3o que wireframes n\u00e3o podem ser considerados entreg\u00e1veis finais.<\/p>\n\n\n\n<p>Na maioria dos casos, \u00e9 melhor desenhar um mockup de alta fidelidade para entregar aos desenvolvedores. Dessa forma, eles ter\u00e3o muito mais detalhes sobre aspectos visuais e intera\u00e7\u00f5es. Isso reduz falhas de comunica\u00e7\u00e3o e poss\u00edveis retrabalhos no desenvolvimento.<\/p>\n\n\n\n<p>Mas sempre \u00e9 bom analisar o projeto que voc\u00ea est\u00e1 entrando. \u00c0s vezes, somente os wireframes j\u00e1 s\u00e3o suficientes. Imagine os seguintes cen\u00e1rios:<\/p>\n\n\n\n<p><strong>Cen\u00e1rio 1:<\/strong> Voc\u00ea est\u00e1 trabalhando num produto maduro, com uma marca bem estabelecida e diversos componentes de interface j\u00e1 desenhados e validados.<\/p>\n\n\n\n<p>Nesse caso, voc\u00ea e outros designers, com menos experi\u00eancia na \u00e1rea gr\u00e1fica, possam talvez criar somente wireframes. Isso porque os desenvolvedores j\u00e1 saberiam como implementar a maioria dos componentes.<\/p>\n\n\n\n<p><strong>Cen\u00e1rio 2: <\/strong>Voc\u00ea pega um projeto de um cliente que n\u00e3o tem muita verba para fazer o design, nem muitos recursos para redesenhar toda a UI do produto. Por\u00e9m, esse cliente j\u00e1 utiliza algum framework como Foundation, Bootstrap ou algum template de dashboard.<\/p>\n\n\n\n<p>Nessa situa\u00e7\u00e3o, voc\u00ea possa talvez entregar somente wireframes para o seu servi\u00e7o caber na verba do cliente. Assim, voc\u00ea poder\u00e1 focar bastante na UX, sem se preocupar muito com a UI, que j\u00e1 estaria bem encaminhada por conta do framework ou do template.<\/p>\n\n\n\n<p>Como os prot\u00f3tipos de m\u00e9dia fidelidade s\u00e3o geralmente entreg\u00e1veis intermedi\u00e1rios, voc\u00ea deve considerar se (voc\u00ea ou outra pessoa) poder\u00e1 dar continuidade ao processo.<\/p>\n\n\n\n<p>Existem empresas que t\u00eam equipes de design maiores e separam os processos de UX design e <a href=\"https:\/\/fluency.io\/br\/blog\/guia-ui-designer\/\" data-type=\"post\" data-id=\"5381\" target=\"_blank\" rel=\"noreferrer noopener\">UI design<\/a>. Elas possuem recursos para ter profissionais especialistas nas duas \u00e1reas. Ent\u00e3o, alguns podem trabalhar somente com wireframes, enquanto outros trabalham apenas com mockups interativos.<\/p>\n\n\n\n<p>Em equipes menores, \u00e9 mais comum pular os esbo\u00e7os feitos no papel para mockups interativos, pois os recursos s\u00e3o mais escassos, e os processos precisam ser mais \u00e1geis.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"ferramentas-para-criar-wireframes\">Ferramentas Para Criar Wireframes<\/h3>\n\n\n\n<p>O UXPin \u00e9 uma ferramenta web paga que permite criar desde wireframes e at\u00e9 mockups interativos de alta fidelidade. Essa ferramenta \u00e9 interessante para times menores, por possuir um plano mensal acess\u00edvel.<\/p>\n\n\n\n<p><strong><em>Como e com quem testar meus prot\u00f3tipos de m\u00e9dia fidelidade?<\/em><\/strong><\/p>\n\n\n\n<p>Para testar seus wireframes, voc\u00ea pode fazer um teste de usabilidade, assim como nos prot\u00f3tipos de baixa fidelidade. Mas, dessa vez, o teste pode ser mais bem estruturado e feito com potenciais clientes.<\/p>\n\n\n\n<p>O objetivo \u00e9 validar quest\u00f5es como hierarquia da informa\u00e7\u00e3o, fluxo de navega\u00e7\u00e3o e os textos da interface. Ao passar por essa etapa, voc\u00ea ter\u00e1 em m\u00e3os uma solu\u00e7\u00e3o com uma estrutura s\u00f3lida e evitar\u00e1 alguns retrabalhos na cria\u00e7\u00e3o de mockups de alta fidelidade.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"prototipacao-em-media-fidelidade-com-mockups\">Prototipa\u00e7\u00e3o em Alta Fidelidade com Mockups<\/h2>\n\n\n\n<p>Geralmente, \u00e9 a \u00faltima etapa do processo de prototipa\u00e7\u00e3o. Nela, voc\u00ea refina os esbo\u00e7os feitos em papel ou seus wireframes. Esse prot\u00f3tipo \u00e9 mais conhecido como mockup interativo. Ele \u00e9 chamado dessa forma, porque permite simular intera\u00e7\u00f5es, como clique, toque e hover (passar o cursor por cima). Vale citar tamb\u00e9m que prot\u00f3tipos feitos com c\u00f3digo (HTML, CSS, Javascript) tamb\u00e9m se enquadram nessa etapa de prototipa\u00e7\u00e3o e ser\u00e3o explicados mais para frente.<\/p>\n\n\n\n<p>Ao contr\u00e1rio dos wireframes nos mockups interativos, a meta \u00e9 desenhar a interface de forma mais realista poss\u00edvel. &nbsp;\u00c9 poss\u00edvel pensar em aspectos visuais como cores, tamanhos, propor\u00e7\u00f5es, tipografia etc.<\/p>\n\n\n\n<p>Quando voc\u00ea estiver nessa etapa \u00e9 muito importante avaliar padr\u00f5es de design, de forma a reutilizar elementos e componentes da sua interface. Trabalhando com sistemas de design e instituindo padr\u00f5es, voc\u00ea facilita a vida dos desenvolvedores e cria uma consist\u00eancia (visual e de intera\u00e7\u00e3o) para os usu\u00e1rios.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"ferramentas-para-criar-mockups\">Ferramentas Para Criar Mockups<\/h2>\n\n\n\n<p>O Sketch App \u00e9 um recurso mais popular para cria\u00e7\u00e3o de mockups interativos. Apesar de s\u00f3 funcionar para Mac, a comunidade de designers o utiliza para templates, criando plugins e publicando conte\u00fado sobre essa ferramenta.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"invision-zeplin\"><strong>Invision &amp; Zeplin<\/strong><\/h3>\n\n\n\n<p>O Invision e o Zeplin s\u00e3o recursos bastante \u00fateis para entregar seus mockups para desenvolvedores. Neles, voc\u00ea sincroniza seus arquivos do Sketch\/Photoshop para que os desenvolvedores peguem na web as cores, tamanhos e tipografias.<\/p>\n\n\n\n<p>Esses softwares s\u00e3o interessantes, porque n\u00e3o obrigam os seus desenvolvedores a baixarem ferramentas de design.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"abstract\"><strong>Abstract<\/strong><\/h3>\n\n\n\n<p>O Abstract \u00e9 uma ferramenta de versionamento de arquivos. Ele \u00e9 \u00fatil quando voc\u00ea est\u00e1 trabalhando junto com outros designers ou precisa organizar diversas vers\u00f5es de um arquivo do Sketch.<\/p>\n\n\n\n<p>Por exemplo, imagine que dois designers est\u00e3o desenhando funcionalidades diferentes, usando o mesmo arquivo do Sketch. Em algum momento, eles ter\u00e3o que alinhar o que fizeram para manter o arquivo-m\u00e3e atualizado. O Abstract faz esse alinhamento de uma forma mais organizada.<\/p>\n\n\n\n<p>Outro exemplo seria voc\u00ea trabalhando sozinho para um cliente que pede muitas altera\u00e7\u00f5es. Nesse caso, mantenha um hist\u00f3rico das mudan\u00e7as realizadas para voltar a uma vers\u00e3o anterior do arquivo j\u00e1 aprovada.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"bootstrap-studio\"><strong>Bootstrap Studio<\/strong><\/h3>\n\n\n\n<p>Como voc\u00ea pode perceber, existem muitas ferramentas direcionadas para designers de interface. Nem todas passam de simula\u00e7\u00f5es \u201cest\u00e1ticas\u201d. Isso dificulta &nbsp;executar os testes de usabilidade e passar o layout para os desenvolvedores.<\/p>\n\n\n\n<p>Por isso, algumas equipes de design usam ferramentas como o Bootstrap Studio, que permite criar layouts com o c\u00f3digo do Twitter Bootstrap. No geral, essa ferramenta \u00e9 bem simples. Ela propicia voc\u00ea montar o layout da p\u00e1gina por uma de uma interface drag &amp; drop. Mas para fazer customiza\u00e7\u00f5es, \u00e9 necess\u00e1rio mexer um pouco no c\u00f3digo HTML, CSS e Javascript.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"testando-prototipos-de-alta-fidelidade\"><strong>Testando Prot\u00f3tipos de Alta Fidelidade<\/strong><\/h2>\n\n\n\n<p>Para avaliar seus prot\u00f3tipos de alta fidelidade, voc\u00ea pode adotar o teste de usabilidade. Assim como nos wireframes, essa iniciativa pode ser estruturada e feita com potenciais clientes.<\/p>\n\n\n\n<p>A meta \u00e9 validar tudo que voc\u00ea aprovaria em um wireframe (hierarquia da informa\u00e7\u00e3o, fluxo de navega\u00e7\u00e3o e os textos da interface), mais os aspectos visuais e de intera\u00e7\u00e3o.<\/p>\n\n\n\n<p>Se voc\u00ea estiver usando o Invision, vale a pena testar a ferramenta <a href=\"https:\/\/maze.design\" target=\"_blank\" rel=\"noreferrer noopener\">Maze.<\/a> Ele permite fazer testes de usabilidade remotos usando o pr\u00f3prio mockup interativo do Invision, contabilizando a taxa erros, o tempo que o usu\u00e1rio levou para completar a tarefa e mais.<\/p>\n\n\n\n<p>Ap\u00f3s essa etapa, voc\u00ea ter\u00e1 a interface e as intera\u00e7\u00f5es prontas para serem desenvolvidas. Ap\u00f3s o processo de prototipa\u00e7\u00e3o, a solu\u00e7\u00e3o estar\u00e1 bem ajustada para seus usu\u00e1rios e dispensar\u00e1 os retrabalhos na parte de desenvolvimento.<\/p>\n\n\n\n<p>Na prototipa\u00e7\u00e3o, existem algumas etapas e as suas preocupa\u00e7\u00f5es com o designer v\u00e3o mudando ao longo do processo. No in\u00edcio, voc\u00ea precisa ser \u00e1gil e verificar se est\u00e1 indo para o caminho certo. Depois, passe mais tempo refinando sua solu\u00e7\u00e3o at\u00e9 chegar bem pr\u00f3ximo do que considera real e funcional.<\/p>\n\n\n\n<p>O mais importante \u00e9 sempre manter seus usu\u00e1rios e <a href=\"https:\/\/fluency.io\/br\/blog\/gestao-stakeholders\/\" data-type=\"post\" data-id=\"2939\" target=\"_blank\" rel=\"noreferrer noopener\">stakeholders<\/a> pr\u00f3ximos durante o processo. Eles v\u00e3o ajud\u00e1-lo a construir uma solu\u00e7\u00e3o que realmente resolva um problema.<\/p>\n\n\n\n<p>N\u00e3o se esque\u00e7a de que o processo de prototipa\u00e7\u00e3o \u00e9 c\u00edclico. Ent\u00e3o, sempre que achar necess\u00e1rio, pegue l\u00e1pis e papel para voltar ao in\u00edcio.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"desenvolva-a-sua-carreira-em-ux\"><strong>Desenvolva a sua carreira em UX&nbsp;<\/strong><\/h2>\n\n\n\n<p>A Awari \u00e9 uma <strong>plataforma completa<\/strong> com mentorias individuais, cursos com aulas ao vivo e suporte de carreira para voc\u00ea dar seu pr\u00f3ximo passo profissional como <a href=\"https:\/\/fluency.io\/br\/blog\/guia-ux-designer\/\" data-type=\"post\" data-id=\"3673\" target=\"_blank\" rel=\"noreferrer noopener\">UX Designer<\/a>.<\/p>\n\n\n\n<p>Conhe\u00e7a nossos <a href=\"https:\/\/fluency.io\/br\/blog\/trilha-de-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">cursos de Design<\/a>, com intensivos de<a href=\"https:\/\/fluency.io\/br\/blog\/curso\/data-science\/\"> <\/a><a href=\"https:\/\/fluency.io\/br\/blog\/curso\/ux-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">UX Design<\/a>, <a href=\"https:\/\/fluency.io\/br\/blog\/curso\/ui-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">UI Design<\/a>, <a href=\"https:\/\/fluency.io\/br\/blog\/curso\/user-research\/\" target=\"_blank\" rel=\"noreferrer noopener\">User Research<\/a>, <a href=\"https:\/\/fluency.io\/br\/blog\/curso\/ux-writing\/\" target=\"_blank\" rel=\"noreferrer noopener\">UX Writing<\/a>. Saiba mais sobre a nossa jornada personalizada e materiais complementares feitos por especialistas no mercado.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Prototipa\u00e7\u00e3o \u00e9 uma t\u00e9cnica muito utilizada na \u00e1rea de UX design para criar e validar solu\u00e7\u00f5es de forma r\u00e1pida. Geralmente, os prot\u00f3tipos s\u00e3o criados depois da fase de pesquisa com usu\u00e1rios ou benchmarking. Assim, voc\u00ea j\u00e1 conhece a dor do seu cliente e tem hip\u00f3teses para resolv\u00ea-la. Neste guia, vamos dar uma vis\u00e3o geral sobre [&hellip;]<\/p>\n","protected":false},"author":9,"featured_media":27528,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":[186],"meta":{"inline_featured_image":false,"footnotes":""},"categories":[229],"tags":[],"trilha":[],"class_list":["post-117409","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-skills","format-artigos"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Prototipa\u00e7\u00e3o em UX Design: O Guia Completo para designers - Fluency.io Brasil<\/title>\n<meta name=\"description\" content=\"Prototipa\u00e7\u00e3o \u00e9 uma t\u00e9cnica muito utilizada na \u00e1rea de UX design para criar e validar solu\u00e7\u00f5es de forma r\u00e1pida. Geralmente, os prot\u00f3tipos s\u00e3o criados depois...\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/homolog.fluency.io\/br\/blog\/guia-prototipos-ux-design\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Prototipa\u00e7\u00e3o em UX Design: O Guia Completo para designers - Fluency.io Brasil\" \/>\n<meta property=\"og:description\" content=\"Prototipa\u00e7\u00e3o \u00e9 uma t\u00e9cnica muito utilizada na \u00e1rea de UX design para criar e validar solu\u00e7\u00f5es de forma r\u00e1pida. Geralmente, os prot\u00f3tipos s\u00e3o criados depois...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/homolog.fluency.io\/br\/blog\/guia-prototipos-ux-design\/\" \/>\n<meta property=\"og:site_name\" content=\"Fluency.io Brasil\" \/>\n<meta property=\"article:published_time\" content=\"2022-02-24T15:21:13+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-07-27T15:47:09+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"kaue\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/homolog.fluency.io\/br\/blog\/guia-prototipos-ux-design\/\",\"url\":\"https:\/\/homolog.fluency.io\/br\/blog\/guia-prototipos-ux-design\/\",\"name\":\"Prototipa\u00e7\u00e3o em UX Design: O Guia Completo para designers - Fluency.io Brasil\",\"isPartOf\":{\"@id\":\"https:\/\/fluency.io\/br\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/homolog.fluency.io\/br\/blog\/guia-prototipos-ux-design\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/homolog.fluency.io\/br\/blog\/guia-prototipos-ux-design\/#primaryimage\"},\"thumbnailUrl\":\"\",\"datePublished\":\"2022-02-24T15:21:13+00:00\",\"dateModified\":\"2023-07-27T15:47:09+00:00\",\"author\":{\"@id\":\"https:\/\/fluency.io\/br\/#\/schema\/person\/7b3b2b50ba17b7f2ad0cce0a40bfa00a\"},\"description\":\"Prototipa\u00e7\u00e3o \u00e9 uma t\u00e9cnica muito utilizada na \u00e1rea de UX design para criar e validar solu\u00e7\u00f5es de forma r\u00e1pida. Geralmente, os prot\u00f3tipos s\u00e3o criados depois...\",\"breadcrumb\":{\"@id\":\"https:\/\/homolog.fluency.io\/br\/blog\/guia-prototipos-ux-design\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/homolog.fluency.io\/br\/blog\/guia-prototipos-ux-design\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/homolog.fluency.io\/br\/blog\/guia-prototipos-ux-design\/#primaryimage\",\"url\":\"\",\"contentUrl\":\"\",\"width\":1027,\"height\":420},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/homolog.fluency.io\/br\/blog\/guia-prototipos-ux-design\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"https:\/\/homolog.fluency.io\/br\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Prototipa\u00e7\u00e3o em UX Design: O Guia Completo para designers\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fluency.io\/br\/#website\",\"url\":\"https:\/\/fluency.io\/br\/\",\"name\":\"Fluency.io Brasil\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fluency.io\/br\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/fluency.io\/br\/#\/schema\/person\/7b3b2b50ba17b7f2ad0cce0a40bfa00a\",\"name\":\"kaue\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/fluency.io\/br\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/bdd3958fa53019cfd8f789c0a49a730e7ba40a1d20cb42c9ced7646285842479?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/bdd3958fa53019cfd8f789c0a49a730e7ba40a1d20cb42c9ced7646285842479?s=96&d=mm&r=g\",\"caption\":\"kaue\"},\"url\":\"https:\/\/homolog.fluency.io\/br\/author\/kaue\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Prototipa\u00e7\u00e3o em UX Design: O Guia Completo para designers - Fluency.io Brasil","description":"Prototipa\u00e7\u00e3o \u00e9 uma t\u00e9cnica muito utilizada na \u00e1rea de UX design para criar e validar solu\u00e7\u00f5es de forma r\u00e1pida. Geralmente, os prot\u00f3tipos s\u00e3o criados depois...","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:\/\/homolog.fluency.io\/br\/blog\/guia-prototipos-ux-design\/","og_locale":"pt_BR","og_type":"article","og_title":"Prototipa\u00e7\u00e3o em UX Design: O Guia Completo para designers - Fluency.io Brasil","og_description":"Prototipa\u00e7\u00e3o \u00e9 uma t\u00e9cnica muito utilizada na \u00e1rea de UX design para criar e validar solu\u00e7\u00f5es de forma r\u00e1pida. Geralmente, os prot\u00f3tipos s\u00e3o criados depois...","og_url":"https:\/\/homolog.fluency.io\/br\/blog\/guia-prototipos-ux-design\/","og_site_name":"Fluency.io Brasil","article_published_time":"2022-02-24T15:21:13+00:00","article_modified_time":"2023-07-27T15:47:09+00:00","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"kaue","Est. tempo de leitura":"10 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/homolog.fluency.io\/br\/blog\/guia-prototipos-ux-design\/","url":"https:\/\/homolog.fluency.io\/br\/blog\/guia-prototipos-ux-design\/","name":"Prototipa\u00e7\u00e3o em UX Design: O Guia Completo para designers - Fluency.io Brasil","isPartOf":{"@id":"https:\/\/fluency.io\/br\/#website"},"primaryImageOfPage":{"@id":"https:\/\/homolog.fluency.io\/br\/blog\/guia-prototipos-ux-design\/#primaryimage"},"image":{"@id":"https:\/\/homolog.fluency.io\/br\/blog\/guia-prototipos-ux-design\/#primaryimage"},"thumbnailUrl":"","datePublished":"2022-02-24T15:21:13+00:00","dateModified":"2023-07-27T15:47:09+00:00","author":{"@id":"https:\/\/fluency.io\/br\/#\/schema\/person\/7b3b2b50ba17b7f2ad0cce0a40bfa00a"},"description":"Prototipa\u00e7\u00e3o \u00e9 uma t\u00e9cnica muito utilizada na \u00e1rea de UX design para criar e validar solu\u00e7\u00f5es de forma r\u00e1pida. Geralmente, os prot\u00f3tipos s\u00e3o criados depois...","breadcrumb":{"@id":"https:\/\/homolog.fluency.io\/br\/blog\/guia-prototipos-ux-design\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/homolog.fluency.io\/br\/blog\/guia-prototipos-ux-design\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/homolog.fluency.io\/br\/blog\/guia-prototipos-ux-design\/#primaryimage","url":"","contentUrl":"","width":1027,"height":420},{"@type":"BreadcrumbList","@id":"https:\/\/homolog.fluency.io\/br\/blog\/guia-prototipos-ux-design\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"https:\/\/homolog.fluency.io\/br\/"},{"@type":"ListItem","position":2,"name":"Prototipa\u00e7\u00e3o em UX Design: O Guia Completo para designers"}]},{"@type":"WebSite","@id":"https:\/\/fluency.io\/br\/#website","url":"https:\/\/fluency.io\/br\/","name":"Fluency.io Brasil","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fluency.io\/br\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Person","@id":"https:\/\/fluency.io\/br\/#\/schema\/person\/7b3b2b50ba17b7f2ad0cce0a40bfa00a","name":"kaue","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/fluency.io\/br\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/bdd3958fa53019cfd8f789c0a49a730e7ba40a1d20cb42c9ced7646285842479?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/bdd3958fa53019cfd8f789c0a49a730e7ba40a1d20cb42c9ced7646285842479?s=96&d=mm&r=g","caption":"kaue"},"url":"https:\/\/homolog.fluency.io\/br\/author\/kaue\/"}]}},"_links":{"self":[{"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/posts\/117409","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/comments?post=117409"}],"version-history":[{"count":0,"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/posts\/117409\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/media?parent=117409"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/categories?post=117409"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/tags?post=117409"},{"taxonomy":"format","embeddable":true,"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/format?post=117409"},{"taxonomy":"trilha","embeddable":true,"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/trilha?post=117409"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}