Criando modelos para o seu site. Da exibição em árvore ao design da interface

O design de maquetes/ modelos é uma etapa crítica na criação do seu site. Dessa forma, para que o website seja agradável, é necessário prestar especial atenção ao design gráfico, mas também à eficiência desse mesmo site. Precisará de criar um layout inteligente, que seja adequado ao seu público-alvo e responda às suas necessidades.

Assim, a realização de modelos para websites deve passar por várias etapas, desde o design funcional, a preto e branco, até ao design gráfico, integrando a sua identidade e as cores. Logo, neste artigo, forneceremos todas as chaves para ter sucesso nesta etapa fundamental, que está presente em todos os projetos de criação de sites de alta qualidade.

Quem deverá preparar o modelo do site? Você, uma agência profissional ou o seu estagiário (má ideia!). Não se esqueça que ter ideias claras sobre o o seu projeto online é muito útil para orientar a fase de design da maquete, iniciando assim o seu projeto do website.

Os profissionais de Web geralmente são criativos, em termos de semântica. Existem cerca de dez termos diferentes para descrever modelos de um site. O mais popular é provavelmente o wireframe, mas já ouviu falar de um layout ergo ou de um modelo wireframe, por exemplo? Contudo, essa riqueza semântica não deve ocultar o essencial: o termo maquete engloba duas realidades, que são completamente distintas.

Este modelo é a definição do layout da página em preto e branco, bem como da organização de vários elementos, até aos seus textos principais. É esse tipo de modelo que chamamos de wireframe, layout ergo ou de mock-up. O termo mock-up qualifica precisamente um modelo funcional de escala 1 para 1. O termo “zoning” refere-se a um modelo funcional, que é constituído apenas por blocos, send este o primeiro estágio do wireframe.

O wireframe fornecido aqui foi preparado, após ser usado o software Balsamiq.

Uma extensão do modelo funcional, o modelo de artwork, com as cores e a identidade da sua empresa. É uma representação precisa da página da web, que mais tarde precisará de ser integrada (= codificada em HTML/ CSS) pelos desenvolvedores. Com exceção, por vezes, dos textos, que geralmente ainda são textos fictícios (lorem ipsum). Geralmente, os modelos de artwork são produzidos através do Adobe Photoshop (ou pelo Illustrator).

Alterar o lay out da página, ou a identidade gráfica de um site, não é uma decisão fácil ou rápida. Assim, mesmo que o site esteja a ser construído com a ajuda de um software de criação de sites, este é um trabalho bastante difícil.

Logo, como podemos obter modelos gráficos eficazes e funcionais? Primeiro, reserve um tempo para criar corretamente modelos funcionais, para todas as páginas principais. Idealmente, deverá interagir com esses modelos funcionais: preparar uma primeira versão, pedir uma opinião, refazer o wireframe, pedir opiniões novamente e assim por diante.

Esta questão tem um significado diferente, dependendo da maneira como o site é desenvolvido. Se a criação do site for confiada a um prestador de serviços, a agência da web deve ser convidada a preparar modelos funcionais, bem antes de iniciar o desenvolvimento do site.

Ao contrário do que se possa pensar, as agências profissionais na construção de sites tentam realizar projetos o mais rapidamente possível, para não estarem a trabalhar em muitos projetos simultaneamente. Consequentemente, o wireframing é feito de forma rápida, com uma única comunicação com o cliente.

Por isso mesmo, se está a desenvolver o site, a dificuldade é de forçar a preparar os modelos funcionais, antes de criar a página com a ajuda da interface do CMS. Muitas vezes, temos a impressão de ter uma ideia suficientemente clara do lay out da página, para poupar o trabalho de wireframing. Contudo, a menos que seja um designer experiente em UX, os retornos que podem ser obtidos, com base num modelo funcional simples, são de extrema importância.

Para criar os modelos funcionais de um site, muitas agências ainda usam soluções que podem ser descritas como tradicionais, na era do software SaaS. Essas soluções têm a desvantagem de não facilitarem o gerenciamento de proporções, o que é sempre restritivo quando precisa de pensar no lay out da página, envolvendo muitos formatos de dispositivos, como o celular/ telemóvel, por exemplo.

Convidamo-lo a descobrir a tabela com o resumo, preparada pelo SocialCompare, para descobrir os principais softwares de wireframes do mercado:

• Cacoo: um software SaaS orientado para a colaboração. O Cacoo está disponível numa versão gratuita para o testar ao máximo. Muito fácil de usar, o Cacoo permite a criação de todos os tipos de wireframes e diagramas para o seu site.
• Balsamiq: disponível para dektops (US$ 79) ou na versão web (US$ 12/ mês), o Balsamiq é uma referência no mundo da criação de sites. Simples e poderoso ao mesmo tempo, o Balsamiq permite que qualquer pessoa crie modelos funcionais, de páginas bastante complexas.
• Axure RP: Provavelmente o software mais completo e poderoso para wireframing e criação de protótipos de interfaces de web, no mercado. É normalmente usado por agências de alto nível ou designers freelancers. A versão padrão do software está disponível por US$ 249.

É tempo de passar para a fase dos protótipos gráficos. Se os softwares de wireframes são muito fáceis de aceder, esse não é o caso nos softwares gráficos e, principalmente, com o pacote Adobe.

Naturalmente, não se conseguirá tornar um web designer numa noite, bastando abrir o Adobe Photoshop para ficar provado. Este software é o mais capaz, no campo do design gráfico. Poderoso, flexível e adequado para a fase de corte, necessária para a integração em HTML / CSS, o Photoshop é o software para design de interface do utilizador.

Entre as alternativas, pode-se mencionar o Gimp (código-fonte aberto) ou o Paint Shop Pro. Porém, o domínio do Adobe Photoshop, nessa área, é tal que o formato de arquivo associado, .PSD, tornou-se um substantivo para a maioria dos profissionais de web.

Estamos prestes a abordar as etapas principais, para ajudá-lo a organizar a fase de implementação das maquetes. Obviamente, essa organização precisará de ser adaptada às necessidades específicas do seu projeto e negócio.

Antes de pensar no lay out das páginas, deverá ter uma visão geral muito boa do site idealizado. É muito importante poder identificar os “modelos” da página, ou mais precisamente, os lay outs comuns às várias páginas. Como por exemplo, os modelos de “postagem no blog” ou na “página do produto”.

Obviamente, deverá sempre começar a estudar e a analisar modelos de página, antes mesmo de trabalhar em páginas específicas, como a página inicial. Assim, além de ser interessante para a produção de wireframes, a exibição em árvore é muito útil para projetar processos eficazes do cliente e para preparar redes de páginas internas, com perfeita conformidade com os padrões corretos de SEO.

Essa fase é muito útil para levantar questões interessantes com todos os membros da a sua equipa, pois a exibição em árvore deixa claro muitos pontos-chave do projeto de criação de sites. Logo, recomendamos que trabalhe na exibição em árvore desde o início do planeamento do seu projeto ou negócio web.

Antes de tudo, recomendamos que crie apenas os wireframes relacionados às páginas principais, ou aos modelos de página principal. Duas razões justificam este conselho. A primeira é que isso ajudará a identificar os componentes gráficos que pode usar novamente nas páginas secundárias.

Na nossa experiência, é comum que a visualização em árvore inicial seja alterada, após a criação dos modelos de páginas principais. É por isso que é recomendável que trabalhe nos wireframes de maneira muito interativa, para facilitar melhorias contínuas. Na prática, isso significaria fazer um desenho rápido das 3 páginas principais do processo do cliente, procurar conselhos e refazer essas 3 páginas, detalhando um pouco mais e pedindo opiniões novamente para reformular as 3 páginas e adicionando mais 3 e assim por diante.

Depois de validados os wireframes das páginas principais, recomendamos que aproxime todas as páginas para identificar o conjunto de “componentes gráficos”, que são partilhados entre as páginas.

Por “componente”, queremos dizer blocos, tabelas ou guias, todos os objetos gráficos que poderá usar novamente. O objetivo deste trabalho é tentar reutilizar os mesmos componentes, sempre que o possível. Não reduzirá apenas o trabalho para os desenvolvedores, pois também criará uma experiência de utilizador forte e harmoniosa, com uma verdadeira consistência entre as páginas.

Agora é tempo de entrarmos em detalhes e trabalhar em modelos de páginas secundárias. A esse nível, a questão principal é, frequentemente, o equilíbrio entre discutir cada detalhe e aceitar o primeiro design proposto pelo webdesigner.

Obviamente, isso depende do web designer. com o qual você está a trabalhar. Na nossa experiência no desenvolvimento e criação de sites, geralmente, damos alguns detalhes nas primeiras páginas ao web deisnger e depois modificamos, com base nos primeiros modelos gráficos entregues.

Durante a fase de protótipo funcional, é o dono do projeto, que conhece ao detalhe o seu público-alvo e o seu mercado. Logo, deverá ser este o responsável por liderar o trabalho de wireframing, mesmo que não seja este a criar os wireframes.

Contudo, o protótipo gráfico é diferente, pois haverá mais criatividade e mais liberdade, que deverão ser assumidas pelo web designer. Como cliente, deve fornecer inspirações gráficas, bem como explicar claramente o posicionamento da sua marca/ empresa e também deve prestar atenção para não restringir a criatividade do web designer, por estar a fornecer instruções muito detalhadas.

Se possui bons wireframes funcionais e um resumo criativo específico, será um cliente perfeito para qualquer web designer. O seu designer terá todos as possibilidades nas suas mãos e, muitas vezes, mais motivação para oferecer ótimos designs de interface para o utilizador e para o seu potencial cliente!

Em conclusão, esperemos que tenha percebido a importância de investir tempo na fase de implementação de maquetes do seu futuro site. Este é um passo fundamental para criar um site que seja agradável e eficaz, respondendo às suas necessidades e aos gostos do seu público-alvo.

Assim, e para tornar o seu site realmente adequado ao seu objetivo final, será sempre muito útil mostrar os seus modelos, para as pessoas fora do projeto entenderem na perfeição o que pretende. Criar uma forte experiência do utilizador deverá ser a sua prioridade, trabalhando com as diferenças possibilidades acima analisadas.