Rodrigo Muniz > Moda no web design

Apesar de não gostar muito de rótulos como RIA e Web 2.0 esse texto abusa desse último rótulo, vamos lá.
Se você é um web design atento é fácil notar características visuais comuns em sites rotulados de “web 2.0″, algumas já estão começando a saturar como logos com reflexo mal aplicado e afins. Por que não discutir isso?

Navegação horizontal superior

Visualmente falando, sites com navegação vertical no canto esquerdo são rapidamente associados a portais, esses marcaram a cara da web nos anos 90. Por isso o que está na moda é criar navegações lineares na parte superior do layout, geralmente fazendo uso de abas. Algumas vezes com dois níveis dependendo da estrutura do site.
Exemplos de abas:

• Log
• LogoPond
• Tiny Tot T-shirts

A morte do breadcrumb

Juntamente com as abas veio a substituição do velho breadcrumb por outros elementos visuais usados na própria barra navegação, agora é comum o uso de indicadores como setas ou mudança de cores de fundo e de texto. Mas muitos são contra a morte da velha trilha de migalhas de pão. :)

Mania de grandeza

As resoluções de tela estão cada vez maiores com monitores igualmente crescidos. O conteúdo é o que importa? Então as fontes precisam ser grandes para facilitar a leitura. Esqueça a época em que fontes para serem bonitas precisavam ter 10 ou 11px. Legibilidade é o importante.
Campos de formulário, ícones e botões agora também são grandes. Ah, não esqueça dos topos e rodapés gigantes. Só não exagere nos dois num mesmo layout. Lembrando que sua navegação está lá no topo, então não precisa dar tanto destaque no tamanho. Assim o conteúdo acaba em segundo plano e isso não é nada “web 2.0″.

We [heart] fontes serifadas

Não, não é hora de usar Times New Roman em todo o seu layout e nem em todos eles, a revolução na moda dos layouts não foi tão grande assim. Algumas fontes continuam especialmente boas para impressos, mas algumas das serifadas agora podem ser aplicadas sem medo na web. Se antes era proibido o uso em títulos a moda agora é aplicá-las, ainda que com certa moderação, em elementos com fontes bem maiores que de textos com mais de um parágrafo. Mas claro que isso ainda depende do estilo e da identidade visual.

We care about colors

Finalmente chegamos às cores, mas ainda aproveitando o assunto tipografia notamos que textos pretos em fundo bege estão em alta não só pelo atrativo visual, mas também pela ajuda na legibilidade.
Fundo pastel + texto marrom escuro ou preto = bola dentro.
Mas não é só como fundo de textos escuros que os pastéis estão na moda, outras cores em tons pastéis podem ser aplicadas em todos os elementos do layout, se ainda conseguir associar bem a cores fortes e brilhantes você vai marcar um belo gol na passarela 2.0.
Exemplos:

Carbonmade - ótimo exemplo do uso de cores fortes

The City Church - exemplo do uso de tons pastéis

Celix - exemplo do uso de tons pastéis + cores brilhantes

Influência da Apple

A Apple é tão famosa pelo design de seus produtos quanto os Beatles são na música, e na web a empresa de Steve Jobs também fez escola e influenciou toda uma geração de sites. A maior característica do site da maçã é a aparência clean em quase todas as páginas e limpeza nunca esteve tão em alta na web.
Navegação superior com abas, bom aproveitamento de espaços em branco, uso de fotos bem tratadas acompanhadas de textos objetivos e de impacto, boxes com cantos arredondados, rodapé maior que o normal… Não parece que eles copiaram isso tudo de algum lugar? Mas foi o mundo quem copiou isso deles. Em todos esses elementos a Apple foi pioneira no layout de suas páginas e hoje ainda está a frente de qualquer um.

Look ‘n’ feel

Conclusão, não precisar ser muito observador para atentar finalmente para o uso mais racional de degrade e sombras nesses sites, parece que demorou 10 anos para nós web designers notarmos que o degrade não é puramente um fade de cores para enfeitar um elemento e sim para dar características que imitem elementos da vida real e proporcionar um experiência melhor aos visitantes. As sombras não precisam ser exclamativas, precisam sim estar em total sintonia com a direção da luz da qual o layout site tenta passar a idéia. Como é o nome disso mesmo? Look and feel!
Look ‘n’ feel, dude, é o segredo de uma interface na moda 2.0 e visualmente agradável.

Mais

• Blog Design Trends
• Top 10 Ways to Uglify Your Blog
• Tag inspiration no del.icio.us
• Padronização da web atual
• Building your very own Web2.0 layout
• Web 2.0 tem um estilo. Mas não é forma, é conteúdo

Compare Preços de: DVD, MP3, LCD, Plasma, HDTV, Home Theater no Buscapé.

Popularity: 15% [?]