Recentemente, ouvi de uma designer em uma reunião de equipe, que ela estava enfrentando essa dificuldade, pois tinha vindo de uma realidade de agência tradicional, onde a palavra de ordem é a criatividade.

Nessa ocasião, eu disse para que ela buscasse um ponto de encontro, um balanceamento entre a usabilidade e o processo criativo.

Interessante que calhou de eu estar presente em uma mesa redonda na Campus Party 2011 sobre Criatividade Digital, e resolvi ao final do painel perguntar sobre essa questão para Raphael Vasconcellos, responsável pela estratégia criativa da Agência Click, e que fez trabalhos para grandes marcas.

Concordei totalmente e aprendi com sua colocação.
Ele disse que a usabilidade e acessibilidade devem ser a base, o fundamento para o processo criativo, isto é, antes de tudo, o projeto visual e criativo do site tem que funcionar e ser acessível, tem que ser fácil de usar e entender, e se não for assim, pode jogar no lixo. Portanto, o criativo deve estudar usabilidade e acessibilidade para que possa criar com criatividade em cima disso, pois senão não há resultados.

Ouvi há um tempo em uma palestra que Inovação = Criatividade com Resultados, isto é, a criatividade só é inovação quando traz resultados. Contextualizando com o assunto deste post e sabendo que a inovação é um interesse de toda agência, acredito que agregar usabilidade e acessibilidade à criatividade trará ainda mais resultados nos projetos, e consequentemente inovação.

Portanto, a usabilidade e acessibilidade vem antes da criatividade, e o caminho não é encontrar um ponto de equilibrio entre os dois como antes eu pensava, e sim criar e ser criativo sobre o fundamento da usabilidade.

Fica a dica para os web designers. Estudem como serem criativos com usabilidade, e é claro não se esqueçam de tornar o site acessível a todos.

Pensem nos usuários!

• O pulo do gato: @font-face
• Por que renovar o design do seu site?

Yahoo! – 2009

O site do Yahoo! mudou bastante durante o período acima. Hoje, o design nos traz a impressão que o site mais se parece com um portal de informações do que uma ferramenta para buscas.

Google – 2009

O Google manteve o seu design simples e objetivo como sempre. O design de 2009 mostra que há menos informações na tela do que no design de 1999.

Microsoft – 2009

A Microsoft evoluiu bastante. O design velho é totalmente oposto do design novo, que nos passa a impressão de uma empresa grande e robusta.

Pepsi – 2009

O site antigo da Pepsi era terrível com esse plano de fundo verde. Felizmente, hoje o site possui um design moderno e atraente.

Lego – 2009

O site antigo do Lego, nos traz um aspecto muito utilizado na época: O uso de GIFs animadas para enfeitar o site. Já o site atual, segue a tendência atual de design e nos traz um site muito mais colorido e divertido, algo bom para o seu público-alvo.

UOL – 2009

O UOL evoluiu bastante também. Hoje, o site nos traz a impressão de um grande portal de informações, o que não acontecia no design de 1996 onde a proposta maior era de mostrar uma empresa de provedor de internet.

McDonald’s – 2009

O site de 1998 do McDonald’s utilizava as cores do seu logo e não possuía muito conteúdo. Atualmente, o design é mais focado no McCafé, sendo o mesmo mais elegante e sério.

White House – 2009

O site da Casa Branca sempre serviu como um informativo sobre notícias dos presidentes do governo norte americano, mas nunca se destacou muito quando se diz respeito ao seu design. Isso mudou com a entrada do presidente Obama, conhecido como o homem que mudou a forma de se fazer propaganda política, trouxe também uma nova proposta para o site do governo com um design inovador e muito atraente.

Ou seja…

Os sites antigamente tinham uma caracterísca de estarem sempre alinhados a esquerda. Isso ainda é visto hoje em dia, porém em pequena quantidade. Possuiam GIFs animados e não eram muito agradáveis de olhar, pois eles não trabalhavam uma organização de conteúdo e alinhamento dos mesmos. Hoje em dia, a maioria dos sites são alinhados ao centro, as animações deixaram de ser GIFs animados e passaram a ser em Flash, os conteúdos são organizados e possuem um padrão de alinhamento no layout.

Vendo todos estes sites de grandes entidades, concluímos que a Internet mudou e principalmente a forma de se trabalhar com ela. As empresas estão cada vez mais investindo em conteúdo e qualidade quando o assunto é internet.

• Não há artigos relacionados.

1. Contraste

Usar contraste entre os elementos que compõem um site ajuda os usuários a distinguir diferentes seções do mesmo e possibilita também a aplicação de destaques especiais em elementos importantes da página.

Ryan Keiser

No site do designer Ryan Keiser temos um exemplo do uso do contraste para causar impacto nos visitantes e atrair a visão do usuário para o menu de navegação na lateral direita.

Post Pixel

No site da Postpixel temos um exemplo de contraste no topo do site e quando olhamos o layout vemos que este efeito faz com que os elementos “saltem da tela” e tornem-se um ponto que certamente não passará despercebido aos olhos do visitante.

2. Gradientes

A utilização de gradientes na composição do layout é importante para criar sensações de profundidade e iluminação nos elementos, porém deve ser utilizado com moderação evitando ao máximo contrastes muito fortes de cores dentro do gradiente .

Orca Bay Sea Foods

Veja como o gradiente é usado de forma sutil na parte superior do site, no quadrado temos a cor inicial e a cor final do gradiente vertical da página, perceba que quando olhamos para as cores separadamente do gradiente temos uma visão melhor da diferença de tonalidade.

News Berry

Também um exemplo de gradiente vertical mais curto, passando a sensação de que o banner está saltando acima do plano do restante do site.

Guifx

Nesse caso o gradiente foi utilizado para criar a sensação de profundidade no botão “Home” da página.

3. Espaçamento entre as letras

Este efeito que também é conhecido como “kerning” e possui duas funções: melhorar a capacidade de leitura do texto de acordo com o contexto visual no qual está inserido ou ser utilizado como elemento gráfico capaz de traduzir um evento. Veja os exemplos:
Veja como a palavra abaixo transmite melhor a idéia que se deseja passar. Usar este efeito simples pode dar um toque especial na mensagem que se deseja passar e pode até mesmo transmitir uma sensação ao usuário.

Espaçamento entre as letras

E o espaçamento entre linhas?

Este tipo de espaçamento também é muito importante para otimizar a leitura e proporcionar mais leveza ao seu design, deixando-o mais limpo e agradável. Veja a diferença no exemplo abaixo, perceba como um maior espaçamento entre as linhas possibilita uma leitura muito melhor.

Espaçamento entre linhas

Nos próximos artigos vamos discutir mais algumas técnicas para enriquecer o design do seu site deixando-o mais atrativo e aumentando sua taxa de conversão.
Até a próxima!

• Novo layout no blog!
• O pulo do gato: @font-face
• Capitalistas Sociais e Economia Criativa na Campus Party 2011
• Por que renovar o design do seu site?

“Na Sony, supomos que todos os produtos de nossos concorrentes terão basicamente a mesma tecnologia, o mesmo preço, o mesmo desempenho e as mesmas características. O design é a única coisa que diferencia um produto do outro no mercado.”

Norio Ohga, presidente e CEO, Sony

A cada dia mais empresas estão investindo em divulgação através da internet devido ao crescimento do número de pessoas que acessam a rede e pelo fato da internet ser uma mídia de divulgação mais barata do que outras: televisão, revistas e os jornais. Este evidente crescimento na quantidade de empresas na internet tem estabelecido uma disputa acirrada pelo acesso dos usuários em seus sites, fazendo com que as empresas assumam verdadeiras brigas de foices para conseguirem mais e mais visitas, acreditando que isso será suficiente na hora de obter mais clientes pela internet na hora de vender seus produtos e serviços.

Estas estratégias de divulgação, como links patrocinados, e-mail marketing e otimização de sites para mecanismos de busca, são as maneiras mais utilizadas para conseguir mais visitas e, de uma maneira geral, os resultados obtidos são muito satisfatórios quando dizem respeito ao aumento de visitas ao site. Porém, muitos acabam se deparando com um dado assustador nos relatórios das campanhas:

“Muitos dos usuários apenas entram no site, permanecem alguns segundos e em seguida saem do site.”

Este tipo de comportamento, além de não favorecer a empresa, pode ser altamente prejudicial a uma marca, pois os usuários que tiveram esta atitude provavelmente nunca mais irão acessar aquele site, não irão indicar o site a alguém; e se a empresa tiver sorte ele vai esquecer do que viu ou senão irá associar o nome da empresa a algo muito ruim e de baixa qualidade. Esse problema tão comum acontece geralmente por dois motivos:

O ruim: – O usuário não encontra a informação que procura.

O pior ainda: – O design e a estrutura do site é tão ruim que espanta o usuário e ele passa a acreditar que nenhuma informação vindo “daquilo” pode ter credibilidade.

Por isso, para àqueles que desejam possuir sites que sejam capazes de converter visitas em compras, ou seja, tornar o visitante em um cliente, é fundamental sempre renovar o design e o conteúdo de um site, visando sempre tornar o site mais atrativo e convidativo ao visitante para que ele retorne mais vezes, criando desta forma um vínculo com os usuários. Desta forma, a empresa ganha competitividade no mercado e cria um diferencial em relação aos concorrentes.

Valorizar o design é garantir competitividade ao produto e desenvolvimento à empresa, desde que realizado por profissionais experientes, que saibam adequar recursos da empresa, necessidades do mercado e metas a serem alcançadas.

Case de sucesso

A Akabamentus & Lazer é uma loja localizada em Campinas-SP que comercializa diversos produtos voltados para área lazer como churrasqueiras, piscinas, saunas e etc. Cliente da Princi já há mais de 10 anos, a Akabamentus & Lazer acaba de lançar seu site com um layout novo e mais conteúdo para seus visitantes.

Esta terceira versão do site da Akabamentus criada pela Princi Agência Web conta também com o lançamento de uma loja virtual que possibilita a venda de produtos para qualquer lugar do Brasil.

Veja o site anterior:

Vejo o novo site:

• O pulo do gato: @font-face
• Capitalistas Sociais e Economia Criativa na Campus Party 2011
• Criatividade vs. Usabilidade e Acessibilidade
• Novo layout no blog!
• Dicas para enriquecer seu design