RSS - Postságua da vida
trabalho experimental.
a água da vida
e-mail marketing convênios médicos
e-mail marketing convênios médicos
e-mail marketing intermédica
E-mail Marketing Intermédica
Estudo de marca Planos com desconto
Estudo de marca " Planos com desconto"
MRT
Layot manuel ratão tratores
A importância do Wireframe para a construção de sites!
O primo pobre do layout é fundamental para o trabalho do arquiteto de informação e do Designer Digital porque auxilia a equipe de desenvolvimento na tarefa de produzir o site de maneira mais rápida, padronizada e eficiente.
Aliado ao sitemap (veja ao lado), o wireframe é um documento que se torna cada vez mais fundamental para o trabalho do arquiteto de informação, apesar de não ser (e nem pretender ser) uma régua de estilos para o layout e a criação das páginas de um site, como é erroneamente interpretado por muitos profissionais da web.
Sua função é estruturar o conteúdo de cada página, indicando o peso e relevância de cada elemento do layout e sua relação com os demais elementos formadores do todo.
Também cabe ao wireframe indicar a correta marcação de textos, breadcrumbs de navegação, guidelines de marca e até dos recursos de programação e tecnologia a serem utilizados pela equipe de produção. Posteriormente também serve como baliza para testes de usabilidade.
Além desta função estrutural, o wireframe também é utilizado para marcação das etapas de um processo de interação entre usuário e sistema. Como as etapas de uma compra online, por exemplo, que vão da busca pelo produto, escolha de um dos resultados, confirmação de intenção, preenchimento do cadastro e opção de pagamento.
Para cada um destes passos de compra deve haver um wireframe que explique detalhamente todas as possibilidades de interação e o caminho percorrido pelo usuário.
Principais elementos de um wireframe
Na construção do wireframe o arquiteto e designer busca representar esquematicamente todos os elementos que compõem a página. Imagens, textos, formulários, flash, mecanismos de busca são representados por variações gráficas de elementos similares – como quadrados e círculos, traços contínuos e pontilhados, palavras em negrito e sublinhadas, largura e altura das páginas – padronizados para todos os wireframes da documentação.
Para evitar descrições alongadas, que geram mais confusão do que entendimento, vamos diretamente analisar 3 wireframes da home do Suerubin que foram construídos para ilustrar as diferenças entre um trabalho mais aberto (com baixo detalhamento) e outro com guidelines mais definidas e marcações pré–estabelecidas pelo arquiteto e ainda sua conclusão.
Baixo detalhamento de um Wireframe
O primeiro é um documento superficial, de baixo detalhamento e pouca influência no trabalho dos designers e das demais equipes do projeto. Ele traz apenas uma marcação de blocos de conteúdo.
Wireframe com detalhamento maior
Já o segundo modelo apresenta alto grau de detalhamento dos componentes da página e utiliza vários elementos gráficos para representá–la. Este modelo de wireframe é muito útil no desenvolvimento de um site e também em sua documentação posterior, para futuras consultas. Além, é claro, de valorizar o trabalho desenvolvido pelo arquiteto.
É só observar atentamente o segundo wireframe e já nos propomos algumas questões que envolvem as competências de um arquiteto de informação e de um designer digital, tais como conhecimentos intermediários de design, tecnologia, programação e redação.
O conhecimento dos principais conceitos de cada uma delas sem dúvida alguma enriquece o wireframe e apresenta à equipe de produção um projeto bem melhor resolvido e passível de implantação.
Veja o trabalho final aplicado ao Wireframe por profissionais de designe:
Usabilidade
Outro ponto de importância na construção de um wireframe é o que toca na questão da usabilidade. Antes de qualquer coisa, devemos ter a consciência de que a análise da usabilidade não cabe ao arquiteto e sim ao designer ou profissional da área digital, até por ser um procedimento adotado numa etapa posterior ao trabalho de arquitetura. Fazemos análise de usabilidade quando o site já está criado e produzido, hospedado em um servidor com endereço específico, apenas para que os envolvidos neste trabalho e os usuários por eles selecionados possam checar a eficiência do site em atender as expectativas do público alvo.
Porém o arquiteto pode contribuir com a usabilidade de um site no momento em que está construindo os wireframes, ao evitar conteúdos redundantes e sobreposição de conteúdo, além de layouts complexos ou links escondidos. O arquiteto deve prever em sua documentação alguns procedimentos de auxílio ao usuário do site, como maior rapidez de obtenção de resultados, supressão de etapas intermediárias, controle sobre o modo de exibição do conteúdo, menus e links sempre visíveis, padronizados e inteligíveis, entre outros detalhes.
Identidade e Marca
Por fim, é na construção do wireframe que o arquiteto e designer vai garantir que todas as páginas mantenham uma unidade gráfica, padronizada e uma presença de marca relevante para o patrocinador do site, o cliente.
Um website raramente é uma ação isolada de uma empresa na tentativa de se comunicar com seu clientes, prestando serviços ou vendendo diretamente seus produtos. É muito importante que o site esteja, graficamente e conceitualmente alinhado com a proposta de comunicação que vem sendo adotada nas demais ações na internet e mesmo nas mídias off–line, como jornais, revistas, TV, outdoors, ponto–de–venda etc. É claro que este envolvimento com a marca deve ater–se também ao respeito pelas características do universo digital e o objetivo individual de cada projeto, conjugando unidade e autonomia de atuação.
Alguns riscos e vantagens do wireframe
Riscos
– Não atender as expectativas dos clientes, empresas ou instituições, que estão longe dos conceitos mais básicos da AI, sentindo–se assim mais confortáveis em aprovar layouts de designers, por serem peças com grande impacto gráfico.
– Acomodar a equipe de criação de modo que os designers, por falta de tempo hábil ou insegurança, não mais inovem em seus projetos e sigam as indicações do wireframe à risca.
– Por não ser desenhado na exata escala em que será construído o site, pode gerar desencontros de entendimento da relevância de cada elemento na composição da página e seu impacto de visualização.
– Necessita de tempo, educação e insistência de uso até tornar–se corretamente entendido pelos profissionais envolvidos nas etapas de cada projeto.
Vantagens
– Facilita a aplicação de conceitos de usabilidade já testados e comprovadamente eficientes.
– Auxilia a equipe de desenvolvimento e programação na tarefa de produzir o site de maneira mais rápida, padronizada e eficiente.
– Após a implantação do site, os wireframes auxiliam nos testes de usabilidade e mostram efetivamente o que deve ser refeito em cada uma das páginas.
– Funciona como uma documentação do site e deve ser consultado antes de cada modificação posterior, para prever impactos na arquitetura e funcionalidade.
Principais softwares para construção de wireframes
Você pode criar seus wireframes em qualquer software que permita o mínimo de organização de elementos geométricos e textos, porém existem alguns que facilitam este trabalho por serem agentes customizados para esta função:
CorelDRAW – Ilustrator – InDesign – Entre outros…
Por Leonardo Oliveira
estampa missões urbanas
Estampa para camisetas “Missões Urbanas 2009″ Sib Perus
t-shirt
Versão Masculina
Versão Feminina
E-mail marketing agencia link
E-mkt Agencia link
logo redesign
Redesign de logotipo não oficial
Antigo:
Novo:
