[GUIA] 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.

Anúncios

~ por Julio Fragoso em 03/01/2007.

4 Respostas to “[GUIA] Como desenhar no estilo Web 2.0 – 1ª parte”

  1. ta de muita qualidade o trabalho que vc fez no dvd, vi agora parabens, abracos.

  2. eu achei legal o blog fiz um pra mim tambem, so pra familia mesmo, da uma olhada, nao ta tao bom porque nao sei mecher ahahaah, mais ta legal, coloquei ate tei blog la, http://oscartoronto.wordpress.com/ , abracos.

  3. to aqui pra fazer uma reclamacao e um pedido, enta vo pegar leve na reclamacao senao meu pedido nao vai ser aceito ahahaha, a reclamacao e que ta demorando muito pra ser atualizado e o pedido e pra sempre passar la no meu, valeu, abracos.

  4. […] Fonte: https://julioweb.wordpress.com/ […]

Deixe um comentário

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

 
%d blogueiros gostam disto: