O que é wireframe é e para que serve na programação? - blog.Mastertech
Post date 19 de março de 2018
Quando você começa um novo projeto, não importa de qual área se trata, é muito provável que inicie criando uma lista de coisas que ele irá conter. No caso de uma mesa, por exemplo, ela terá uma superfície plana de determinado formato e um número de pernas em locais específicos de acordo com a sustentação da superfície.
A partir disso, se define seu material, sua cor, seus detalhes. Entretanto, tudo começa na forma primária, na estrutura, na hierarquia de elementos que compõem um produto ou serviço. Esse guia visual e escrito que determina suas especificações é o wireframe.
O wireframe é um desenho básico, um esboço, um esqueleto, uma maquete eletrônica com especificações do produto ou serviço que será criado. Feito na maioria das vezes de forma simples, ele se trata de um rascunho sem cores ou imagens que prevê posições, campos, funcionalidades.
Em um site, por exemplo, o rascunho não é o layout, mas o que vem antes dele e define a estrutura de uma aplicação, sem a camada gráfica. O wireframe deve refletir os principais grupos de conteúdo de um projeto, a estrutura da informação e uma descrição com visualização básica de sua interface. Normalmente, quem desenvolve os wireframes são os arquitetos de informação ou designers de informação.
Para que o wireframe serve na programação?
Criar wireframes é parte essencial do desenvolvimento de projetos web. O objetivo do wireframe é auxiliar o desenvolvedor no entendimento dos requisitos que foram recolhidos junto ao cliente com relação às funções e objetos que um sistema deverá conter.
Eles ajudam na prototipação de telas para o desenvolvimento de sites e aplicativos. Para isso, devem incluir informações suficientes para refletir o que precisa aparecer em cada página do projeto web: cabeçalhos, rodapés, barras laterais, áreas de conteúdo, meta-informação, busca, widgets, gráficos, etc.
Mas porque não partir direto para o desenvolvimento ou design do layout final? Os wireframes podem ser facilmente revistos, adaptados ou descartados, por isso é fundamental passar por essa etapa de testes e experimentos antes de virar código ou um trabalho mais pesado de design.
Com os wireframes você, sua equipe, seus clientes e seus usuários compreendem melhor do que se trata a aplicação para sugerir alterações antes mesmo de exigir recursos mais complexos.
O jeito mais simples todo mundo conhece: papel e caneta. Fazer rascunhos rápidos em papel já pode auxiliar muito no desenvolvimento de novos projetos. Entretanto, existem softwares como o Axure que tem maior grau de complexidade e oferecem ferramentas para a melhor visualização de seus esboços. Outros mais simples são o GoMockingBird e o Mockflow.
Todos eles se tratam de arrastar elementos base para suas telas de aplicação. Para isso, é preciso antes listar o conteúdo que irá formar o seu projeto, escolher os elementos da interface, definir a hierarquia de informações em blocos e tipografia para, depois, definir a navegação entre as telas.
A criação de wireframes é a base para projetos de front-end, sendo um guia na criação de aplicações personalizadas que atraem desde seu esqueleto até as partes mais visíveis de um projeto. Não deixe de aproveitar dessa habilidade!
Tagsaplicativoappcriar wireframemaquetemockupMt-legacyo que é wireframeprogramaçãoprototipaçãoprototipação de telasprotótipowireframe
Pesquisa de mercado: como isso funciona no UX design Recursos para educar filhas e filhos com habilidades do século 21