Galeria

Sites que abusam de CSS3

sites css ft img

Confira 10 exemplos de sites que dominam a tecnologia e conquistam resultados incríveis

Optar pelos novos recursos do CSS3 é um tiro certeiro para um website moderno. Esta poderosa tecnologia é capaz de oferecer experiências de navegação e efeitos incríveis ao usuário. Se a intenção do seu projeto é causar impacto e apostar em técnicas modernas talvez o CSS3 seja um dos ingredientes essenciais. Separamos alguns exemplos de sites que abusaram das suas funcionalidades e conseguiram resultados incríveis.

1. Jacksonville Art Walk

Este colorido site foi feito para uma evento de arte que ocorre mensalmente na cidade de Jacksonville (EUA). A Art Walk traz performances de rua e música ao vivoe dezenas de galerias, museus, bares e comércio da cidade se unem para formar uma grande galeria a céu aberto por 15 quarteirões. O site é uma verdadeira obra de arte que usa muito do CSS. O efeito parallax confere outro tom à experiência e traz animações de tinta misturadas a água que são ativadas pela rolagem.  A equipe optou por uma abordagem mobile-first e usou muito do Modernizr.

2. Suggiero

Não é por acaso que o site desta agência de desenvolvimento e marketing digital já foi premiada no quesito CSS. O site é bastante interativo e flui sem maiores problemas nos browsers modernos. As transições tem uma boa performance entre as seções de apresentação dos serviços da empresa, apesar de pecar um pouco em telas menores. O forte mesmo do site da Suggiero é a usabilidade. Os elementos animados foram usados como uma forma de aprimorar a navegação e não como um mero enfeite. Ponto positivo para a página que também usa jQuery.

3. Hipstamatic

O Hipstamatic é um aplicativo de fotos para smartphones disponível para iOS e Windows Phone. Seu site promocional tem alguns dos recursos mais modernos atualmente, com transições e animações bem feitas, imagens desfocadas no background e até flat design. A narrativa do site conduz muito bem o visitamte que termina sua trajetória pela página sabendo exatamente o que é e para que serve o app, principal objetivo do projeto. O uso do CSS não poderia ter sido mais apropriado para enriquecer a navegação e Experiência do Usuário.

4. Peugeot Hybrid 4

A montadora de automóveis Peugeot foi ousada neste projeto que apresenta uma espécie de animação ao estilo quadrinhos para promover sua linha de carros híbridos. Logo ao acessar o site, após um carregamento de duração razoável, o internauta é jogado em uma história que segue automaticamente com trilha sonora e tudo. As ilustrações bem feitas e a performance do parallax impressionam. Mas confessamos que algumas pessoas podem se sentir tontas com a experiência na página.

5. Makrsimonson

A tipografia define o site pessoal de Mark Simonson, designer de fontes. Seu site antigo tinha ênfase no catálogo tipográfico. Hoje traz imagens monocromáticas, Sass e guidelines SMACSS para manter o workflow do CSS. O frontendo foi desenvolvido pela Paravel que optou por PNGs transparentes para exibir os links do topo. Muito do seletor nth-of-type() foi aproveitado. Mark conseguiu que seu site colocasse o foco em seu trabalho com tipografia mas sem o visual de catálogo anterior.

6. Readymag

Esta ferramenta de story telling e apresentações em formatos digitais usa seu site promocional como demonstração de seus serviços. A narrativa segue uma linha que ajuda o visitante a caminhar pela página e os elementos interativos são utilizados para facilitar esse caminho. Além disso, a equipe optou mesclar a espécie de timeline na qual o site foi construído com vídeos explicativos, o que enriquece ainda mais a experiência.

7. Windows of New York

A proposta do Windows of New York já é interessante por si só. A página é um lemebrete para que nunca ninguém deixe de prestar atenção nos detalhes da Big Apple. O projeto é do designer gráfico José Guizar, que decidiu fazer “uma ode á arquitetura” e explorar a cidade. O foto da página está nas ilustrações que vem sempre acompanhadas de cores marcadas, chapadas. Os desenhos ficam ótimos em qualquer tela graças às técnicas responsivas aplicadas. Guizar contou que o CSS, em especial, o ajudou a simplificar o site.

8. Thankful Registry

Este site permite que casais criem um sistema de registro de presentes de casamento de forma personalizada. Criado pela Crush + Lovely, o site colocou o CSS como prioridade. A equipe guardpu um espaço do tempo para manter a estrutura CSS funcionando perfeitamente. “Em um ambiente multiplataforma é essencial que o código esteja organizado, transversal e comentado”, explica Michael Philips um dos responsáveis pelo desenvolvimento da página. Sem dúvidas dá para ver que a organização fez uma boa diferença sobre o site como um todo.

9. Drimlike

A agência de comunicação digital Drimlike apostou em uma identidade criativa para o design de seu site. Pequenas animações em infográficos dão um tom a mais aos detalhes. A rolagem vai direto ao ponto, sem rodeios, deixando bem claro todos os serviços que a empresa oferece. A performance de carregamento poderia melhorar, mas a experiência responsiva é de tirar o chapéu.

10. The Paris Opera

O site do The Opera Paris tem uma abordagem responsiva para facilitar o acesso ao programa de espetáculos por meio de dispositivos móveis. A páginas traz belas fotografias de espetáculos em um carrossel e um calendário criativo que expõe os dias em pequenos círculos. Basta passar o mouse pelos dias para aber a programação completa ou mais informações.

 

 

3 Comentários

Comente