{"id":16398,"date":"2021-07-23T13:00:00","date_gmt":"2021-07-23T16:00:00","guid":{"rendered":"https:\/\/agenciagentileza.com.br\/?p=16398"},"modified":"2021-07-23T13:00:00","modified_gmt":"2021-07-23T16:00:00","slug":"o-que-e-wireframe","status":"publish","type":"post","link":"https:\/\/agenciagentileza.com.br\/blog\/o-que-e-wireframe\/","title":{"rendered":"O que \u00e9 Wireframe?"},"content":{"rendered":"\n

Um wireframe<\/strong> \u00e9 um excelente recurso para o sucesso na cria\u00e7\u00e3o de sites e aplicativos. Isso porque \u00e9 necess\u00e1rio fazer um planejamento para elaborar qualquer projeto, e este \u00e9 o objetivo deste prot\u00f3tipo.<\/p>\n\n\n\n

Nos anos 1990, os sites eram repletos de anima\u00e7\u00f5es em flash<\/em> e componentes coloridos. Mas, felizmente, isso mudou, e tal \u201cbagun\u00e7a\u201d deu lugar a estrat\u00e9gias que se preocupam com a experi\u00eancia do usu\u00e1rio.<\/p>\n\n\n\n

Atualmente, os portais possuem uma interface mais clean<\/em>, e isso s\u00f3 foi poss\u00edvel por conta dos wireframes<\/em>. P\u00e1ginas amadoras s\u00e3o cada vez menos comuns, e quando um website ou aplicativo \u00e9 bem estruturado, ele alcan\u00e7a bons resultados.<\/p>\n\n\n\n

Se o propriet\u00e1rio tem alguma d\u00favida, ele s\u00f3 precisa consultar os dados referentes a ela no Google Analytics<\/em>. Obviamente, n\u00e3o se deve fazer as coisas de qualquer forma, abrindo espa\u00e7o para erros, s\u00f3 porque depois \u00e9 poss\u00edvel consert\u00e1-los.<\/p>\n\n\n\n

\u00c9 exatamente por isso que existe o prot\u00f3tipo, visto que ele vai guiar e direcionar todo o trabalho de cria\u00e7\u00e3o do site ou aplicativo, minimizando erros.<\/p>\n\n\n\n

Por esse motivo, \u00e9 essencial que voc\u00ea saiba o que \u00e9 wireframe<\/em>, como ele deve ser trabalhado e quais as vantagens de adot\u00e1-lo, e \u00e9 sobre esse assunto que vamos abordar neste artigo. Portanto, se voc\u00ea tem d\u00favidas, leia at\u00e9 o final.<\/p>\n\n\n\n

Conceito de wireframe<\/em><\/h2>\n\n\n\n

O wireframe<\/em> tamb\u00e9m \u00e9 chamado por alguns profissionais de \u201cprototipa\u00e7\u00e3o\u201d, mas estamos falando de um tema mais abrangente, como um prot\u00f3tipo da p\u00e1gina de um aplicativo ou site.<\/p>\n\n\n\n

Em outras palavras, antes de elaborarmos o layout<\/em> um rascunho \u00e9 feito, o que nos permite enxergar o resultado. Se percebemos que tem algo errado, o esbo\u00e7o pode ser ajustado.<\/p>\n\n\n\n

O wireframe<\/em> pode ser considerado um guia que auxilia na diagrama\u00e7\u00e3o da p\u00e1gina, e mesmo sendo muito usado no in\u00edcio dos projetos, ele pode ajudar se algumas altera\u00e7\u00f5es forem necess\u00e1rias.<\/p>\n\n\n\n

Exemplo disso \u00e9 quando uma empresa de aluguel de stand para divulga\u00e7\u00e3o quer incluir uma nova funcionalidade em seu aplicativo.<\/p>\n\n\n\n

Ent\u00e3o, \u00e9 poss\u00edvel elaborar o wireframe<\/em> de muitas maneiras, usando um software<\/em> ou at\u00e9 mesmo papel e caneta. O importante \u00e9 a ideia e o modo como ela ser\u00e1 executada, e n\u00e3o a ferramenta usada.<\/p>\n\n\n\n

Agora que voc\u00ea j\u00e1 sabe o que \u00e9 wireframe<\/em>, no pr\u00f3ximo t\u00f3pico, vamos mostrar como ele pode ser criado.<\/p>\n\n\n\n

De que maneira colocar em pr\u00e1tica?<\/h2>\n\n\n\n

Mesmo que o intuito desse escopo seja dar um ponto de partida a um projeto, \u00e9 necess\u00e1rio ter cuidado ao elabor\u00e1-lo.<\/p>\n\n\n\n

Ter um planejamento bem executado facilita a execu\u00e7\u00e3o e faz com que tudo flua com mais facilidade. Por isso, ao trabalhar o seu prot\u00f3tipo, considere os seguintes pontos:<\/p>\n\n\n\n

1 – User Experience<\/em> (UX)<\/h3>\n\n\n\n

Al\u00e9m de considerarmos os pontos mais importantes mostrados pelos clientes, \u00e9 preciso garantir uma boa experi\u00eancia para o usu\u00e1rio.<\/p>\n\n\n\n

Antes de inserir qualquer elemento ou fazer uma a\u00e7\u00e3o<\/strong><\/a> de marketing promocional<\/strong><\/a>, \u00e9 necess\u00e1rio fazer alguns testes de usabilidade, inclusive com o pr\u00f3prio wireframe<\/em>.<\/p>\n\n\n\n

Pe\u00e7a a ajuda de algu\u00e9m que esteja envolvido no projeto e diga para realizar algumas a\u00e7\u00f5es. Veja se ele consegue execut\u00e1-las sem precisar de aux\u00edlio externo.<\/p>\n\n\n\n

\u00c9 preciso ter em mente que n\u00e3o basta ter um site ou aplicativo bonito: eles precisam ser funcionais acima de qualquer coisa. Em outras palavras, mais do que agradar aos olhos, eles precisam ser intuitivos.<\/p>\n\n\n\n

2 – Considere os feedbacks<\/em><\/h3>\n\n\n\n

Solicite feedbacks<\/em> ao longo de todo o projeto de cria\u00e7\u00e3o, e aqui nos referimos aos clientes e \u00e0 equipe. Quando nos debru\u00e7amos sobre um trabalho, temos dificuldade em enxergar problemas que s\u00e3o \u00f3bvios para quem est\u00e1 de fora.<\/p>\n\n\n\n

Lembre-se: uma cabe\u00e7a pensa mais do que duas. Sendo assim, ao coletar os feedbacks<\/em>, voc\u00ea consegue melhorar os resultados.<\/p>\n\n\n\n

Ao inv\u00e9s de sobrecarregar uma \u00fanica pessoa com todo o trabalho, estabele\u00e7a um processo colaborativo. Por exemplo, uma pessoa do atendimento pode dizer como est\u00e1 o site de uma empresa de vistoria de <\/strong>transfer\u00eancia<\/strong> para carros<\/strong>, em rela\u00e7\u00e3o a:<\/p>\n\n\n\n