Este artigo foi retirado do blog Smashing Magazine no qual eu dou todos os direitos de autor, eu simplesmente tentei traduzir o melhor possível para português.

Webdesign é arte? Envolve uma grande variedade de técnicas – desde direitos de autor, a tipografia, a noções de layout e até arte – todas fundam-se para criar um interface que não só tem que ser acessível e robusto como também obriga a ser funcional e de fácil acesso ao conteúdo.

Mas para combinar todos esses elementos com sucesso em webdesign é necessários objectivos claros e uma linha orientadora para levar a cabo as directrizes do teu design a um objectivo comum. Tens que ter uma estratégia.

Xadrês

O que é design estratégico?

Design estratégico é a fusão de todos os teus objectivos incluindo todos os aspectos do processo gráfico. O teu objectivo é desenhar um interface que terá bom aspecto e será funcional.

Existem muitos sites por ai simplesmente fantásticos em termos de aspecto e utilizam as mais recentes modas gráficas, no entanto, falham de forma miserável em funcionalidade. O design é claro, parte importante num site, ele dá-nos novas ideias e novas técnicas, mas a implementação dessas técnicas e estilos precisam de ser inteligentes e concisos. Por exemplo, um blog não é uma brochura online; no qual é importante focarmos na usabilidade e funcionalidade em detrimento do design. Por sua vez um site promocional de um jogo de computadores deverá o design ter um papel fundamental para tornar o jogo o mais apelativo possível.

Quando um designer apenas tem como preocupação design e tendências (ex.: web 2.0) sem ter em conta as questões de funcionalidade e de orgânica da empresa para qual está a desenvolver o site, o resultado será pouco eficiente.

Design web, pode ser defino como uma aplicação que comunica, é funcional, acessível, transmite emoções e sensações. Um site para ser eficaz precisa todos estes elementos a funcionar em harmonia com os objectivos propostos. O design estratégico é identificar os objectivos e utiliza-los para te guiar.

Como implementar design estratégico?

Vamos organizar esta implementação em 6 passos, para conseguimos pensar estrategicamente sobre o design do teu interface.

Passo 1, estabelecer objectivos

Uma das primeiras coisas que precisas antes de começar a trabalhar em webdesign é ser o mais claro possível com o cliente. O que pretendemos atingir com o novo ou redesenho do site? Qual o principal objectivo? Procura junto ao teu cliente ou em ti respostas para essas questões. Se ainda não tiveres respostas, precisas de as encontrar, porque esta é a base e é essencial para que o projecto tenha uma meta a atingir.

Lembra-te que o site não é uma peça de arte, é um interface feito para ser funcional. Este poderá ser utilizado para vender produtos, para transmitir dados, para interagir, para informar ou para fornecer serviços. Seja qual for a funcionalidade, o teu design será feito para funcionar. Pergunta a ti porque estás a redesenhar o site, esperas aumentar o número de visitas, reduzir o tráfico ou aumentar a participação dos visitantes?

nytimes

Dá uma olha no design do site New York Times. A sua função é transmitir informação. O interface minimalista funciona lindamente através da aplicação de vários tons de cor de acordo com a importância do texto, quanto menos relevante mais transparente o texto parece ser.

adaptd

Em contrasto com o New York Times, AdaptD é um site de uma empresa de webdesign, cujo o objective não é mostrar muita informação ao utilizador mas sim impressiona-lo com o design, dirigindo a atenção do utilizador para a galeria de trabalhos e para os serviços da empresa. O visual é extremamente importante aqui, e a AdaptD consegue isso de forma muito eficaz através das imagens e de cores fortes.

Passo 2, identifica o teu target

A definição do teu target é fundamental para definir o aspecto e funcionalidade. Existem pontos a ter em conta que podem influenciar o tipo de design, tais como idade, sexo, profissão ou competências técnicas. Um site sobre um jogo de computadores para crianças precisa de um estilo diferente em comparação com um jornal online sobre economia. Usabilidade deve ter um papel muito importante para sites cujo target são utilizadores com mais idade e menos experiência na óptica do utilizador.

O teu target não só vai influenciar o estilo gráfico do teu site como também ter um papel importante na definição de pequeno pormenores como o tamanho da fontea. Portanto, confirma e clarifica o tipo de target no qual o site vai ser usado.

jq

Este é o site da jQuery no qual foi redesenhado para um estilo rock. Aqui o designer foi demasiado longe ao tentar criar uma ideia excitante pois não conseguiu atingir programadores mais sérios ou que não gostem de rock. Entretanto o estilo rock foi substituído por um design mais conservador para conseguir abrangir um target mais vasto.

disney

O site da Disney’s é para crianças. O objectivo é interagir e envolver o utilizador jovem, o design cumpre essa função através de ícones, cores vibrantes e elementos que reagem ao passar o rato.

3 Passo, determinar o estilo gráfico

Muitos designers tem a tendência para ficarem demasiado inspirados pelas ultimas tendências e acabem por implementar ideias sem pensar correctamente sobre qual o estilo gráfico que realmente de adequa. Botões 3D, gradientes, reflexos no chão pode funcionar em alguns sites, mas podem não funcionar assim tão bem para determinadas empresas com uma marca já definida.

Pensa na cor. Pensa nos sentimentos e nas emoções que pretendes transmitir. O teu design deverá encarnar a personalidade e o carácter da marca em questão. Tudo tem uma identidade, mesmo que não estejas a vender um produto ou um serviço – por exemplo, se tiveres um blog – o design do teu blog deverá ter algo que o define e chame a atenção dos teus visitantes. Decide qual deverá ser essa emoção.

carbonica

Carbonica é um site para ajudar utilizadores a reduzir as emissões de carbono para a atmosfera. O interface transmitir mensagens sobre reciclagem e na preocupação de reciclar, abusando nas diferentes texturas e papeis reciclados como nos tons castanhos e verde da natureza.

restaurantica

Restaurantica é um site de críticas de restaurantes no qual todo o site foi desenvolvido dentro do que parece ser um cardápio igual aos encontrados em restaurantes.

Passo 4, definir objectivos sobre o design

Tens já definido o propósito do teu site, objectivo principalmente a atingir, identificaste o target e determinaste o estilo gráfico a adaptar. Podes agora proceder á construção. Como é que fazes as tuas decisões sobre o design funcionar com a tua estratégia? Deixa-me ilustrar-te através de um exemplo:

Supõem que o teu principal objectivo é aumentar o número de utilizadores ao teu site. Como é que através do design podes conseguir esse objectivo? Consigo ver pelo menos 3 formas diferentes de conseguir:

  • Fazer a pagine “Sobre” abrir directamente na primeira página ou estar de forma muito clara na primeira página. O utilizador não deve ter qualquer dúvida sobre o género de informação que irá encontrar.
  • Através de cor ou contrasto dela, fazer o botão de registo se destacar perante todo. Se os utilizadores não conseguem encontrar o botão, não irá conseguir se registar.
  • Revê o processo de registo, e apaga todos os campos que sejam desnecessários e campos opcionais, os utilizadores poderem se registar nesses campos mais tarde. Isto porque se o formulário de registo parecer grande poderá desencorajar utilizadores.

Estas são 3 formas muito simples de através do design, conseguir atingir o objectivo de aumentar o número de registos ao teu site. Os teus objectivos até podem variar mas a estratégia deverá ser sempre a mesma: modificar e focar todos os elementos gráficos para esses mesmos objectivos.

A mesma estratégia aplica-se à tua marca e target: Desenhar o estilo que melhor se adequa. Se o teu site é sobre entretenimento estás livre para usar cores sem limite e elementos gráficos para chamar a atenção do utilizador. Por outro lado se tiveres a construir um site que se foca principalmente na transmissão de informação, por exemplo um blog ou revista, então a usabilidade e leitura dos textos são cruciais no desenvolvimento. Cria um interface que se funda com o conteúdo e não distraia o utilizador das questões essenciais.

stubmatic

Stubmatic é uma aplica box-office. A sua página externa tem dois propósitos: Explicar que tipo de serviços existem e levar o utilizador a inscrever-se. Novos utilizadores podem apenas ficar no teu site por breves minutos, desta forma para não os perder tens que ser conciso. Podes conseguir isso da seguinte forma:

  • Usar imagens/ilustrações grandes que explicam o funcionamento do produto ou serviço;
  • Mostrar screenshots da tua aplicação, os utilizadores querem ver como é visualmente antes de se registarem no site ou fazer o download;
  • Disponibilizar uma visita guiada, usando exemplos de como o teu serviço pode ajudar o utilizador a resolver o seu problema. Se possível mostra um vídeo. Quanto menos esforço para o utilizador compreender o produto melhor;
  • Tenha o botão “Registar-se” em todas as páginas e sempre disponível.

Para o sucesso, o teu site deve de aproveitar ao máximo os breves segundos de atenção que o utilizador irá ter, dá-lhes não só informação mas educá-los sobre o que o teu produto faz, e vender os benefícios. Isto usando o design.

techcrunch

TechCrunch é um dos mais populares blogs sobre tecnologia. O seu novo design removeu todo o grafismo desnecessário, ficando apenas o conteúdo, publicidade e menus. Linhas horizontais e formas verdes dão estrutura ao site, no entanto o interface é praticamente invisível colocando assim o conteúdo em destaque. Para um blog os posts com actualizações diárias este é o formato ideal porque de forma fácil e rápida terás acesso ao conteúdo.

Passo 5, medir resultados

Uma vez desenhado o site, está na altura de medir o sucesso do mesmo junto dos utilizadores. Isto é muito importante, da mesma forma que os primeiros passos do desenvolvimento de um site, porque, até não testares o quanto bem o design funciona em função dos objectivos propostos, nunca saberás o resultado do teu trabalho.

Se o objectivo é aumentar o número de registos nos teus serviços, mede e verifica se existe alguma alteração positiva na mudança. Se queres aumentar o número de subscritores do teu blog, verifica as subscrições do RSS. Se queres aumentar o envolvimento dos utilizadores, verifica se tens mais comentários.

É claro que poderás pedir aos visitantes um feedback, e esta é uma forma muito boa de saber se estás no caminho certo. Mas cuidado para não implementares todas as sugestões dos teus utilizadores. Cada utilizador tem a sua forma de ver as coisas, logo cada um terá uma opinião diferente sobre como o site deveria ficar. Se mesmo assim optares por esta opção, procura respostas com padrão, quantas mais pessoas com a mesma sugestão maior a probabilidade de existir realmente necessidade de melhorias no teu design.

As qualidades e defeitos de um site vão muito além dos breves exemplos dados neste artigo. E por muitas análises que faças o que realmente importa vão ser os resultados. Usa-los para saber se estás na direcção correcta.

analytics

Mesmo que tenhas um orçamento pequeno podes usar ferramentas gratuitas como o Google Analytics para obter vário tipos de informação sobre como o teu site está a ser usado, isto inclui que tipo de subpáginas são mais vistas, que tipo de links as pessoas clicam.

Passo 6, kaizen

Existe uma filosofia japonesa chamada “Kaizen” que se foca em contínuos melhoramentos usando pequenos passos. Quando se trabalha num site, deves de pensar kaizen porque a versão que colocas online nunca é a versão final. Pelo menos não precisa de ser a versão final.

Poderás sempre fazer melhoramentos, e a própria natureza do site vai permitir que os faças a qualquer altura. Isto porque um site não é uma revista que imprimes e vendes: uma vez a revista impressa e nas tuas mãos não poderás fazer modificações ou corrigir possíveis erros. Um site, contudo, está alojado num servidor: se encontrares um erro, podes corrigi-lo, tal como poderás fazer pequenos e graduais melhoramentos ao site para conseguir melhor eficácia no propósito do site.

Usando os dados obtidos, poderás identificar as áreas problemáticas. Talvez o utilizador não encontre o RSS feed, ou uma página importante do site não esteja a ter o número devido de visitas. Seja qual for o problema, haverá sempre uma forma de conseguir resolver.

Conclusão

A melhor estratégia para a construção de um design é simplesmente senso comum: estarás a fazer algo para um propósito específico, dessa forma e para conseguir esse propósito o design deverá direccionar o utilizador. Mas actualmente é muito fácil perder os objectivos iniciais e acabar com algo que é bonito mas que não funciona no contexto onde está inserido. È muito fácil cair em tendências só porque o aspecto fica bonito ou redesenhar secções do site a ficar semelhante com outro site que realmente gostas sem pensar primeiro sobre porque estamos a fazer isso e se essas alterações enquadram-se no propósito do projecto.

Evita cair nesses armadilhas pensando cuidadosamente sobre todos as decisões que faças sobre o teu design. Porque colocar esta cor no botão? Porque usar tags? Porque usar ícones aqui? Uma vez habituado a questionar todos os aspectos do site, todo o processo de desenvolvimento vai se tornar mais focado no propósito principal. Pensa no produto e na organização que estás a representar. Pensa sobre o target que pretendes atingir. O que vai funcionar com o tipo de conteúdo que tens? Não te limites a construir algo bonito, faz-lo funcionar.