Descubra como Wireframes podem lhe auxiliar na elaboração dos seus projetos
Descubra como Wireframes podem lhe auxiliar na elaboração dos seus projetos
Eae! Td bele?
No processo de desenvolvimento de um site além do Projeto Gráfico (o layout cheio de cores que você faz no PSD) podem existir também outras partes como Arquitetura da Informação↓, UX↓, etc.
Pensando nisso, falarei neste artigo sobre a parte de prototipação, mais especificamente dos wireframes.
Se você ainda não ouviu falar sobre, provavelmente irá ouvir. Se você nunca usou um, provavelmente irá usar… Porque um designer, principalmente se você for freela, é muito mais do que usar Photoshop ou Illustrator. Você é um projetista: deve saber planejar o que será feito e como ser feito.
E você pensando que seria só fazer uns gradientes no photohop, né Galucho?
Então, sem mais delongas, vamos conhecer essa ferramenta largamente usada no desenvolvimento de interfaces. Vem comigo!
Neste artigo você descobrirá:
O que é um Wireframe
A importância da prototipação nos projetos
O que deve conter em um Wireframe
Quais os tipos de Wireframes
Como criar Wireframes
O que é um Wireframe?
Wireframe é um esboço: uma simulação de como a interface deverá funcionar.
Basicamente é unir todas as informações que colhemos no briefing para o papel, de um modo estruturado prevendo como será a construção.
Logo, ele retrata o layout , de forma simples, da página organizando o conteúdo e os elementos da interface no espaço que pretendemos usar. Além de fornecer toda a estrutura para o designer elaborar o layout, ele fornece os elementos funcionais (como a navegação, por exemplo) que serão usados por um desenvolvedor.
O wireframe geralmente não tem estilo tipográfico, cor, ou gráficos, já que o foco principal está na funcionalidade, comportamento e no conteúdo.
E também ele precisa ser flexível a alterações rápidas, permitindo assim que se façam testes dos vários pontos do projeto (usabilidade, navegação, interação, leiturabilidade, por exemplo)
A importância da prototipação
A grande vantagem dos wireframes é que através deles conseguimos demonstrar quais serão as informações e elementos que estão contidos no projeto, além de como deve ser o seu funcionamento, de uma forma simples, prática e muito mais rápida do que construir o layout direto Photoshop.
São muito mais fáceis de se fazer e mais baratos. E podem ser tranquilamente revistos, adaptados e descartados quase que instantemente.
Eles são muito úteis quando você precisa apresentar seu trabalho, seja para o seu cliente, ou seu superior, porque permite que ele (seu cliente) visualize melhor as suas ideias facilitando assim o entendimento do projeto e otimizando o tempo de ambos.
Independente da complexidade do site, fazer essa prototipação ajuda a esclarecer dúvidas, e a definir exatamente o que se precisa ser feito por todas as áreas envolvidas no projeto.
O que colocar no wireframe?
Apesar do wireframe conter somente o essencial, quando estiver elaborando –o pense em como será o design, pense em cada ação( e na sua reação também), pense passo a passo.
Então o primeiro passo,lógico, é pensar. E saiba que durante a elaboração você terá que refazer e testar coisas várias vezes. Faz parte do processo.
E uma ferramenta que pode lhe auxiliar nessa parte da organização dos pensamentos é o mapa mental. Após a leitura desse artigo, confira esse bônus sobre mapas mentais.
Desenvolvendo Mapas Mentais
Organização, criação, memorização, entendimento e hierarquização de ideias
Clique aqui e veja mais
Mapas mentais são diagramas de informações hierarquizados.
É um estilo de diagrama, uma sistematização dos pensamentos, categorizada e expostos graficamente usando de artifícios como cores, imagens e palavras chaves.(Clique na imagem para ver o exemplo ampliado)
A atribuição sobre a criação dos mapas mentais é um pouco controvérsia na história, mas o fato é que o inglês Tony Buzan é o responsável pela elaboração e popularização dos mapas mentais como usamos hoje em dia. Mapas mentais baseia-se no conceito que nossos pensamentos não são lineares.
Eles são muito mais úteis e lhe ajudam a memorizar e a enxergar bem mais possibilidades do que o método de anotação linear tradicional.Eles favorecem na organização, na criação, na memorização, no entendimento e na hierarquização das ideias.Com mapas mentais você pode gerir e gerenciar informações conectando ideias a uma ideia central de uma forma muito mais simples e funcional.Os mapas mentais tem diversas aplicações em diversos casos desde questões pessoais até , e principalmente, questões profissionais e de negócios.E para criar um Mapa mental você pode usar papel e caneta ou algum software.
Existem várias ferramentas por aí. O que eu indico é o Mindmeister. E antes de começar é bom você conhecer as 7 leis de Tony Buzan para mapas mentais:
Comece no centro de um papel;
Use uma imagem central que definia a ideia principal;
Utilize-se de cores;
Conecte Ramos primários, secundários, terciários e quantos forem necessários;
Deixe os ramos curvilíneos para dar um aspecto de árvore a eles;
Use imagens, nossa mente lida melhor com elas;
Use palavras chaves.
Claro que essas regras podem ser quebradas ( como por exemplo os ramos curvilíneos) , mas a essência delas é realmente válida.
Os mapas mentais é um excelente suporte para o desenvolvimento de qualquer projeto, independente do assunto.
Então, fica a dica sobre mapas mentais. Use e abuse dessa ótima ferramenta.
Estrutura:
Comece por elementos comuns: cabeçalhos e rodapés, áreas de conteúdo, navegação, barras laterais, busca, etc. E depois adicione o restante, como widgets, imagens, botões.
Coloque também elementos sobrepostos como modais, caixas de seleção, botões de rádio e outras funcionalidades.
Caso precise, quando se coloca medidas , por exemplo, utilize de etiquetas e setas para evidenciar.
Navegação:
Essa parte é muito importante. Ela deve mostrar a relação entre os links, o modo que serão apresentados ao usuários e as opções existentes para se navegar no site.
Conteúdos:
Coloque onde ficará aquele banner, aquele título, aquela caixa de texto.
Nos títulos, nos textos da navegação e/ou links utilize termos genéricos que mostrem a o tamanho e a importância, por exemplo “H1 Título” ou “Link Nav 1”
Não perca tempo colocando conteúdo real no seu wireframe. Utilize, por exemplo, o Lorem Ipsum, para preencher o espaço. O importante não é o que está escrito e sim os formatos, o posicionamento e as margens deste conteúdo.
Tipos de Wireframes
Basicamente existem dois tipos de wireframes: de baixa fidelidade e de alta fidelidade.
Wireframes de baixa fidelidade são basicamente compostos somente por quadrados, linhas, círculos, triângulos sobre um fundo simples (normalmente em branco) e com alguns rótulos.
Este tipo de wireframe pode ser desenhado a mão ou em algum software gráfico.
Wireframes de alta fidelidade são mais incrementados. Esse estilo usualmente se aproveita de elementos do design do projeto como, por exemplo, cores, imagens , ícones, o logo do cliente, etc.
O objetivo desse estilo de wireframe é se aproximar mais do layout do projeto transmitindo uma melhor ideia de como ficará o site .
O nível de detalhamento do wireframe depende do projeto, da finalidade e da preferência de quem está projetando.
Se você pesquisar mais sobre isso , dentro dessa questão de AI, você também encontrará 3 tipos diferentes de modelos : Wireframe, Mockup e Protótipo.
Na minha opinião, somente um deles já basta na maioria dos projetos, pois não existe a necessidade de usar três camadas diferentes para a mesma coisa. Mas mesmo assim é bom conhecer como funcionam as coisas, principalmente em algumas empresas.
Wireframe: como já vimos, é um esboço simples da interface. Organiza o conteúdo e os elementos da interface no espaço que pretendemos usar. Pode ser feito a mão ou em algum software gráfico.
Mockup: é uma prévia fiel do design do projeto. Nele se incluí normalmente o design final e todos os elementos que irão compor a página, porém , normalmente, são estáticos.
Protótipo: é uma prévia funcional do resultado final. Normalmente não contém todas as funcionalidades que existirão no projeto, mas proporciona aos clientes a capacidade de interagir com a interface e simular o resultado final. Um protótipo pode ou não ter elementos do projeto de design.
Como criar Wireframes?
Criar wireframes é simples: você pode fazê-lo a mão, numa folha de papel, em algum software de sua preferência, como Illustrator, Photoshop, ou algum específico para essa função como o Axure.
A forma como você vai criá-lo vai depender do seu estilo e também da demanda do projeto.
Projetos mais simples provavelmente não exigirão tanto, enquanto que projetos maiores talvez exijam um pouco mais.
O importante é fazer algo útil e com qualidade.
Logo, não importa tanto se você vai usar uma programa ou folhas de papel. “Capisce?”
Se você optar por fazer no papel, além de lápis, borracha e canetas, algo que pode lhe ajudar na elaboração é usar o papel quadriculado.
Você pode também usar esse modelo de navegador com o corpo quadriculado: http://www.raincreativelab.com/paperbrowser/. É só baixar e imprimir.
Se você optar por criar usando algum software, você pode usar programas específicos. Abaixo segue alguns deles:
Desktop:
MockupScreens
Axure
Pencil
FlairBuilder
ForeUI
OverSite
Microsoft Visio
Justinmind Prototyper
FluidIA → Gratuito
DENIM →Gratuito
Balsamiq Mockups → Gratuito
MockApp → Gratuito
Online:
Mockplus RP
Miro
Figma
iPlotz
ProtoShare
MockFlow
HotGloo
Cacoo
Jumpchart
Gliffy
JustProto
Pidoco
Templates:
Konigi Graph Paper
Sqetch
Free Sketching & Wireframing Kit
Free Web UI Wireframe Kit
E para facilitar a sua vida segue alguns links de galerias com inúmeros exemplos de wireframes:
Wireframe Showcase
I ♥ Wireframes Flickr Group
E para lhe ajudar ainda mais também veja esse Método do Jason Santa Maria. Ele descreve seu processo de criação de wireframes, desde o esboço no papel até o Illustrator
Conclusão
O wireframe ajuda os designers a saberem quais telas serão e como devem ser layoutadas.
O wireframe ajuda os desenvolvedores a tirarem dúvidas sobre como serão os comportamentos, as funcionalidades, entre outras coisas.
O wireframe ajuda a você mostrar para o seu cliente o que você tem em mente e com isso aumentam suas chances de receber um melhor feedback.
Então, Galucho, essa ferramenta pode lhe ajudar em muito no processo de elaboração de uma interface.
É algo simples, barato , editável e que pode prever e evitar problemas.
Espero que tenha gostado.
E você usa wireframe no seu dia a dia? Tem dúvidas sobre alguma coisa? Usa outra ferramenta de prototipação que não citei aqui?
Deixe seu comentário. Estou curioso saber sobre suas experiências com wireframes.
Até mais.
Forte Abraço!
Referências:
http://sixrevisions.com/user-interface/website-wireframing/
http://www.richardbarros.com.br/blog/artigos/dicas-para-desenvolvimento-de-wireframes
Imagens:
Glossário – Para ajudar os aprendizes de Chief
Arquitetura da Informação (AI)↑
Arquitetura de Informação é a organização da informação que possibilita ao usuário ter acesso a ela (a informação) de uma forma simples e eficiente.
User Experience ↑
UX trata da percepção, da satisfação, da experiência do usuário enquanto usa algum produto, sistema, site, etc.
The post Descubra como Wireframes podem lhe auxiliar na elaboração dos seus projetos appeared first on Chief of Design.
Descubra como Wireframes podem lhe auxiliar na elaboração dos seus projetos
Fonte: Chef of Design