Pular links da navegação e ir direto para o conteúdo

Publicado em 14 de Aug de 2006 às 07:50

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:

Exemplos de navegações com abas

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:

Exemplo de cores brilhantes
Carbonmade – ótimo exemplo do uso de cores fortes
Exmplo do uso de tons pastel
The City Church – exemplo do uso de tons pastéis
Exemplo do uso de tons pastel + cores brilhantes
Celix – exemplo do uso de tons pastéis + cores brilhantes

Influência da Apple

Apple mudou o design não só de produtos

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

Você é Desenvolvedor ou Designer?
Leia o blog do VTEX Lab, núcleo de inovação para ecommerce da VTEX. Também escrevo por lá. :)

  • por Muniz
  • Web

  • Caramba… Tive a oportunidade de escrever uma vez, em meu blog, sobre o assunnto, falando exatamente disso. O uso exagerado de degradês, sombras e a imitação da Apple, na cara dura.

    Neste site, ensinam como fazer um “layout 2.0” em 10 minutos! Hehe…

  • Interessante Carlos, não tinha visto seu texto até então. Curiosamente falamos da Apple. :)
    A influênciada dela é realmente inegável, uma pena os links do texto não estarem mais apontando para o texto comentado.

    ps: bg pastel + texto escuro no seu blog = outra coincidência

  • ah sim, não esqueça de validá-lo no Certifyr: http://certifyr.com

    ;)

  • A abordagem é supercial, mas as dicas são essenciais. Ah, e gostei da seleção de sites, de encher os olhos! Abraço.

  • Seja moda, tendência, ou até mania, rapidinho as coisas mudam e é sempre bom parar, observar e pensar: O que está em alta agora? Mas e amanhã ?? É interessante pensar também sobre as próximas tendências, e reparar como elas acompanham a tecnologia.

  • descobrir seu blog hoje foi muito legalllllllll ; )) vu voltar para ler com calma depoissssssss

  • Muito legal. Altas dicas uteis. Os sites sugeridos são muitos legais, e uma grande fonte de inspiração.

  • Cores fortes (rosa/azul do flickr) aliado a tons pastéis, backgrounds com texturas de linhas, fonts sans-serifadas e por ai vai…

    O que se observa é que tudo se caminha para uma simplicidade (Apple)

  • Acho que sempre há de se tirar o que é bom.
    Dessa “onda” há a prioridade para a legibilidade das coisas, letras grandes, etc…

    Porém, no quesito das cores acho que fica devendo mesmo. Não há muito contraste, cores muito clarinhas, s vezes deixa irritado! Hehehe =)

  • Excelentes as dicas, Ro! Adorei as indicações de sites :)

    bjsss

  • Tudo muito bom e bonito! Mas transporte isso
    Com excessão do seu blog, difícil é achar um tema decente (e que me agrade, é claro!) pra se usar no blog… :(
    Abraços

  • Aaah eu quero saber eh do trampo novo :D

  • Pingback: fator W » Moda em webdesign, o pior caminho para um site ()

  • Muito bom Rodrigo sou admirador de matérias assim que promovem informação e tendências.

  • Pingback: Netlus » Blog Archive » Ainda existe alguma cor “segura”? ()

  • Pingback: Degradês | Design Coletivo ()

Sobre

Nascido em 1984 é Desenvolvedor Web autodidata desde 2002. Hoje especialista em Design da Informação pela UFPE é Designer na equipe de UX no VTEX Lab (núcleo de inovação para ecommerce), da VTEX.

Saiba mais