{"id":2452,"date":"2019-02-26T00:00:00","date_gmt":"2019-02-26T00:00:00","guid":{"rendered":"https:\/\/rockcontent.com\/br\/2019\/02\/26\/wireframes\/"},"modified":"2019-02-26T00:00:00","modified_gmt":"2019-02-26T00:00:00","slug":"wireframes","status":"publish","type":"post","link":"https:\/\/pingback.com\/br\/resources\/wireframes\/","title":{"rendered":"Wireframes: quais os tipos e as principais ferramentas de cria\u00e7\u00e3o"},"content":{"rendered":"\n

Voc\u00ea deve se lembrar como eram os sites<\/a> nos anos 90, cheios de anima\u00e7\u00f5es em flash e elementos coloridos. Era uma bagun\u00e7a total. Felizmente, hoje as empresas t\u00eam se preocupado com a experi\u00eancia do usu\u00e1rio. As interfaces costumam ser mais clean e elegantes \u2014 e os wireframes <\/strong>s\u00e3o um dos motivos dessa evolu\u00e7\u00e3o.\u00a0<\/p>\n\n\n\n

O amadorismo \u00e9 cada vez menos presente nos meios digitais. Sabemos bem que um website ou aplicativo bem estruturado \u00e9 essencial para obter bons resultados <\/strong>nessas plataformas. Se ficar qualquer d\u00favida, basta abrir o Google Analytics<\/a> e verificar os indicadores de performance. <\/p>\n\n\n\n

\u00c9 claro que n\u00e3o podemos dar brecha para os erros e somente depois consert\u00e1-los. O planejamento serve justamente para isso, n\u00e3o \u00e9 mesmo? Ent\u00e3o, se voc\u00ea ainda n\u00e3o sabe o que \u00e9 um wireframe e sua import\u00e2ncia para um projeto de sucesso na web, esse texto vai ser de grande serventia.<\/p>\n\n\n\n

Quer dar um passo a mais em sua jornada no Marketing Digital<\/a> e conhecer o mundo dos wireframes? Continue lendo e confira!<\/p>\n\n\n\n[post-table-index]
<\/p>\n\n\n[rock-convert-pdf id=”42917″]\n\n\n\n

O que \u00e9 um wireframe?<\/h2>\n\n\n\n

Tamb\u00e9m chamado por alguns profissionais de prototipa\u00e7\u00e3o \u2014 embora seja um termo mais abrangente \u2014, o wireframe<\/a> \u00e9 um prot\u00f3tipo da p\u00e1gina de um site ou aplicativo.<\/p>\n\n\n\n

Isso significa que, antes da elabora\u00e7\u00e3o do layout<\/a>, \u00e9 criada uma esp\u00e9cie de rascunho. Dessa forma, conseguimos enxergar como o produto final vai ficar. Caso seja verificado que h\u00e1 algo errado, \u00e9 poss\u00edvel ajustar o esbo\u00e7o quantas vezes for necess\u00e1rio. <\/p>\n\n\n\n

Logo, o wireframe serve como um guia para auxiliar na diagrama\u00e7\u00e3o da p\u00e1gina<\/strong>. Apesar de ser muito usado no in\u00edcio de cada projeto, ele tamb\u00e9m pode ser de grande utilidade quando for preciso fazer alguma altera\u00e7\u00e3o \u2014 como a implementa\u00e7\u00e3o de uma nova funcionalidade no app da empresa. <\/p>\n\n\n\n

Existem diversas maneiras de elaborar um wireframe: voc\u00ea pode faz\u00ea-lo at\u00e9 mesmo em uma folha de papel ou usar um software de edi\u00e7\u00e3o. O mais importante nesse caso n\u00e3o \u00e9 a ferramenta, mas a ideia e a execu\u00e7\u00e3o.\u00a0<\/strong><\/p>\n\n\n\n

Qual \u00e9 a sua import\u00e2ncia para a cria\u00e7\u00e3o de um projeto?<\/h2>\n\n\n\n

Imagine que voc\u00ea tem uma empresa que desenvolve sites<\/a> e acaba de fechar neg\u00f3cio com um cliente. Voc\u00ea vai l\u00e1, faz o briefing e executa o projeto de acordo com o que foi passado na reuni\u00e3o. Chega na hora da entrega, seu cliente diz que n\u00e3o gostou de nada e pede para refazer do zero.<\/p>\n\n\n\n

Essa situa\u00e7\u00e3o \u00e9 bastante inc\u00f4moda, mas acontece com frequ\u00eancia. Ao elaborar wireframes antes de entregar o projeto finalizado, voc\u00ea evita esse tipo de transtorno que gera gastos e atrasos. At\u00e9 porque \u00e9 muito mais f\u00e1cil alterar o esbo\u00e7o do site em vez dele j\u00e1 pronto<\/strong>.<\/p>\n\n\n\n

O cliente tamb\u00e9m fica mais tranquilo quando participa das etapas do projeto. Assim, ele tem certeza que n\u00e3o ter\u00e1 surpresas desagrad\u00e1veis l\u00e1 na frente.<\/p>\n\n\n\n

Muitas vezes, aquilo que imaginamos n\u00e3o fica t\u00e3o bom ap\u00f3s a execu\u00e7\u00e3o. \u00c9 preciso colocar no papel e testar para validar \u2014 ou rejeitar \u2014 a ideia inicial. Existem diversas ferramentas de cria\u00e7\u00e3o de wireframes que permitem esses testes de navega\u00e7\u00e3o.<\/p>\n\n\n\n

Com o esbo\u00e7o pronto, voc\u00ea consegue fazer com que todos os envolvidos, como os webdesigners e programadores, tenham a mesma vis\u00e3o do projeto. Ou seja, n\u00e3o vai haver tanto ru\u00eddo na comunica\u00e7\u00e3o. <\/p>\n\n\n\n

Saiba que voc\u00ea tem poucos segundos para ganhar a aten\u00e7\u00e3o de um visitante que entra no seu site pela primeira vez<\/strong>. Se ele se sentir desconfort\u00e1vel ou n\u00e3o encontrar as informa\u00e7\u00f5es que queria, \u00e9 bem prov\u00e1vel que n\u00e3o volte mais. Ent\u00e3o, \u00e9 preciso n\u00e3o dar margem para erros.\u00a0<\/p>\n\n\n\n[rock-biblioteca]\n\n\n\n