Como desenhar no estilo Web 2.0 – 1ª parte

Existe um estilo predominante hoje na internet e eu vou destrinchá-lo para os designers brasileiros começarem a se acostumar com esse novo jeito de desenhar sites.

1. Simplicidade

Web-design está mais simples que nunca, e isso é uma coisa boa.
Design 2.0 significa foco, clareza e simplicidade.

E isso não significa ser minimalista, como eu vou explicar depois.

Eu realmente acredito na simplicidade. Isso não é dizer que todos os sites devem ser mínimos, mas que deve-se usar quantos recursos forem necessários para alcançar o que você precisa alcançar.

Como diz o ditado : Me dê duas soluções para um problema, a mais simples é a melhor.

O resultado é que você tem que olhar o conteúdo. Você acaba interagindo exatamente com os elementos que o designer planejou. E você não se importa – Isso é fácil, e você tem exatamente o que você precisava.

Por que simplicidade é bom.

  • Sites têm metas e toda página tem um propósito.
  • A atenção do usuário é um recurso esgotável.
  • É o trabalho do designer ajudar os usuários a achar o que eles querem (ou avisar o que o sitem quer aviar paraeles).
  • Coisas na tela atrem os olhos. Quanto mais coisas na tela existir, quanto mais coisas diferentesexistirem para noticiar, é menos acessível para o usuário alcançar as coisas importantes.
  • Nós temos que estabelecer uma comunicação, e quanto menos barulho, melhor. Isso é economia, ou simplicidade.

Quando e como fazer o designer simples ?

Quando?

Sempre !

Como?

Existem duas coisas importantes para alcançar sucesso com simplicidade:

  1. Remova componentes desnecessários, sem sacrificar a efetividade.
  2. Tente soluções alternativas para alcançar o mesmo resultado mais simplesmente.

Sempre que você estiver fazendo layouts, remover elementos visuais desnecessários deve ser encarado como uma disciplina.

Concentre-se particularmente nas áreas do layout que são menos relevantes para o propósito da página, por que a atividade visual nessas áreas irão tirar a atenção do conteúdo e da navegação.

Use detalhes visuais – Linhazinhas, palavras, formas, cores – para comunicar uma informação importante, não para decorar

E lembre-se de perguntar-se sempre :

Tem como eu fazer isso de forma mais simples ?.

Se a resposta for sim, simplesmente, FAÇA !

2. Layouts Centralizados

Basicamente, uma grande maioria dos sites atuais são posicionados cetralizados na janela do navegador. Relativamente poucos são full-screen (layout flúido) ou alinhado pela esquerda / tamanho fixo, comparando com alguns anos atrás.

Por que Layout centralizado é bom.

Esse estilo “2.0″ é simples, impactante e honesto. Sites que aparecem centralizados na sua frente ficam mais simples e honestos.

Também, porque nós estamos sendo mais econômicos com nossos pixels (e conteúdos), nós não estamos mais pressionados a apertar o máximo de informações possíveis acima da linha do mar.

Nós estamos usando menos para falar mais, então nós podemos ser um pouco mais livres com os espaços usados, e diagramar nosso conteúdo com muitos dos amáveis espaços em branco.

Quando e como usar o layout centralizado?

Como eu disse, posicione seu site centralizado ao menos que tenha uma ótima razão para não fazê-lo.

Você talvez esteja querendo ser mais criativo como o espaço, ou querendo aglomerar o máximo de informação possível na tela.

3. Poucas Colunas

A alguns anos atrás, sites com 3 colunas era o normal e sites com 4 colunas não eram incomuns.
Hoje, site com 2 colunas são bem comuns, e 3 colunas já está como máximo.

Por que poucas colunas é bom.

Menos é mais. Poucas colunas parecem mais simples, impactantes e mais honesto. Nós estamos mostrando menos informaçãos mais claramente.

o site da apple Link externo é um lider na elegância da simplicidade.

Esse tipo de layout funciona muito, mas muito bem. Cada vez que eu experimento o design simples da Apple, eu fico mais convencido que o design Zen é o Graal sagrado.

Como escolher o número de colunas.

Eu definitivamente recomendo que não use mais que 3 colunas, simplesmente por que você não deve usar mais do que precisa.

4. Topo diferenciado

Isso significa fazer o topo da tela (a marca principal e a área de navegação) diferentes do resto (o conteúdo principal)

Claro, isso não tem nada de novo, mas é uma boa idéia e tem sido usada sempre. Mas tem sido usada mais que sempre agora, e a divisão está cada vez mais forte.

Por que o topo diferenciado é bom.

O topo do site diz “Aqui é o topo do site”. Parece óbvio, mas é bom saber onde a página começa.

Isso também inicia a experiência do site com uma força. Isso é muito “2.0″. Nós gostamos de força, impacto.

Quando e como usar o topo diferenciado?

Em qualquer site, a marca e a navegação devem ser óbvias, impactantes e claras.

Então, é uma boa idéia criar um espaço no topo do site para posicionar a logo e a navegação.

Sempre coloque o logo em cima no topo. Eu sempre recomento também, colocar a navegação logo após o logo.

O topo deve ser visualmente diferente do resto do conteúdo. O jeito mais forte de fazer isso é usar um impactante e sólido bloco de uma cor diferente, mas existem alternativas.

5. Navegação simplificada.

Navegação permanente – a navegação global do seu site tem que aparecer em todas as páginas como um parte permanente do layout – tem que ser claramente identificado como navegação, e tem que ser fácil de interpretar.

  • Design 2.0 faz a Navegação global grande, impactante, limpa e óbvia.
  • Hyperlinks inline (links dentro de textos) são claramente diferenciados do texto normal

Por que navegação simplificada é bom.

O usuário precisa ser capaz de identificar a navegação, que vai dizer-lhe várias informações

  • Onde ele está (em um esquema de coisas)
  • Onde mais ele pode ir a partir daqui
  • E quais opções ele tem para fazer as coisas

Seguindo o princípio da simplicidade, e a diminuição geral do “barulho”, o melhor jeito de deixar claro a navegação é :

  • Posicionar os links permanentemente longe do conteúdo
  • Diferenciando a navegação usando cores, tons e formas
  • Fazer a navegação grande e impactante
  • Deixar claro o texto de cada link, sem ambiguidades

Como manter uma navegação simplificada?

Lembre-se sempre de uma coisa: Navegação tem que estar claramente diferenciada da não-navegação.

6. Logos impactantes.

Uma marca limpa, forte e impactante – incorporando atitude, tom de voz e primeira impressão – é ajudada por um logo impactante.

Por que?

Fortes, logos impactantes dizem “Aqui estamos nós” de um modo que nós podemos acreditar.

Quando e como ?

É muito difícil de dizer como criar um bom logo, mas em resumo…

Seu logo deve :

  • Funcionar em todos os contextos – incluindo panfletos e camisas
  • Ser reconhecível e diferente
  • Representar a personalidade e as qualidades da sua marca na primeira vez que ela é vista
  • Na segunda parte vou falar sobre tamanhos de textos, introdução dos sites, cores, superfícies, entre outras coisas.

 

Autor: Julio

Fonte: http://julioweb.wordpress.com/

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s