Blog

Destaques da Galeria

galeria

Confira 10 sites que passaram pela seção Galeria da Revista W e marcaram nossa seleção durante o ano

A Revista W destaca mensalmente os sites que mostram criatividade ao aplicar as principais tecnologias em seus sites (HTML5, CSS, JavaScript, Responsivo, CMS e Plug-in). Confira 10 exemplos incríveis dessas páginas que marcaram a seleção do ano:

1. Formas em CSS

A desenvolvedora Envy Labs fez o redesign de seu site em 2013 com a intenção de refletir o crescimento da empresa. O sites destaca web fontes, transições CSS em hover e CSS shapes. As deliciosas ilustrações são de Justin Mezzell. A homepage traz esses desenhos com bases de meio círculo que atuam em uma transição circular divertida. “O desafio foi trabalhar na escala responsiva da animação. Usamos uma pequena porcentagem de transform-origin para alinhar as coisas em todos os tamanhos de tela”, explicou o desenvolvedor Nick Walsh. A equipe também usou MVCSS, um Sass baseado em arquitetura MVC CSS.

2. Jogo do Bigode

O The Mustache Game é uma versão online em HTML5 de um jogo divertido. A equipe criou um bookmarket em JavaScript para permitir que os usuários jogassem em plataformas de vídeo como Hulu e YouTube. Dan Nelson, um dos responsáveis pelo site, conta que “aprender a semântica e as regras básicas do HTML5 foi renovador”. Eles ficaram surpresos com a facilidade para embedar vídeos por meio do elemento <video>: “Usamos para facilmente embedar um filme, usando fallbacks para cada browser, sobreposição jQuery e demos a chances de o visitante experimentar o game sem sair do site”.

3. Pelado na Web

“Mostre pele, não mostre pelo” é o grito de guerra do The Fur-Free Paredeum site que permite que você fique pelado (virtualmente) e se junte à campanha contra empresas que ainda usam peles de animais em seus produtos. A agência Grimm Gallun Holtappels é a que está por trás do projeto, e resolver ir pelo mais simples para apoiar a ideia: “O objetivo principal era atrair as pessoas com uma ferramenta envolvente e deixar os usuários se divertirem” conta Stella Schmidt. “Usamos Flash Player 11 e o apoio do GPU para atingir a performance e mostrar muitos Naketars (avatares com personagens nus)”. A ideia é genial, mas um defeito é o carregamento que pode ser afetado por conexões não tão ágeis.

4. Filmes mudos

Para relembrar os clássicos do cinema mudo, o Google Creative Lab criou a Peanut GalleryValdean Klump, um produtor da equipe explicou o conceito do site: “O The Peanut Gallery é um experimento do Chrome que permite que usuários adicionem legendas a filmes mudos por um recurso de voz no desktop. A tecnologia por trás é a API Google Web Speech, baseada em JavaScript e que permite que desenvolvedores integrem reconhecimento de fala em seus web apps”. O projeto faz um ótimo trabalho de demonstração das novas APIs, que mostra em tempo real os textos atualizados assim que o sistema entende o discurso humano pelo microfone.

5. Que viagem!

O Packing Battle é um site divertido e “viajado”, feito pela agência digital Symbio. Antes desse resultado, o site apenas promovia uma viagem segura pela República Tcheca, onde o viajante teria a chance de participar de competições para ganhar qualquer coisa, de um cupom para presentes até um castor de pelúcia. Felizmente a Symbio entrou em cena com a revisão da marca e o site. O resultado ficou mais colorido, divertido e bem acabado. “A maior parte do trabalho foi feita em três pessoas”, explica o designer da Symbio, Václav Krbusek.

6. Tela cheia

A Miagui é uma agência focada em produção de imagens publicitárias de Porto Alegre (RS), e seu site foi desenvolvido pela Piano Fuzz. O site é um reflexo do trabalho da agência e por isso há a presença de imagens grandes e que ocupam toda a tela. Esse modelo de apresentação em tela cheia foi amplamente usado e acabou virando tendência em User Interface no mundo todo. Alguns efeitos interessantes são utilizados na página “sobre”, como o famoso parallax com suas sobreposições de elementos e também algumas brincadeiras em CSS, como opacidades e transições que acabam tornando a rolagem mais interativa.

7. Site animado

Você já pensou em estudar a fundo todo o potencial que as animações em CSS3 têm a oferecer? O designer Pedro Ivo Hudson levou a sério esta questão em seu trabalho final da graduação de design gráfico. O site do The Good Man prova que vale a pena investir tempo em estudos e trabalhos experimentais. O projeto levou 4 meses para ser desenvolvido e foi premiado como site do dia pela FWA e pelo Awwwards. Com visual bem clean, forma geométricas e uma paleta de cores bem resolvida, a página apresenta uma série de animações, todas desenvolvidas em CSS3, colocando à prova o poder das propriedades de animação.

8. Superplayer

O Superplayer é um site brasileiro de streaming de música que reúne playlists e uma seleção de canções com base em estilos, gêneros e até sentimentos dos usuários. Com estética flat design e cores vivas a página possui uma navegeção simples, com rolagem horizontal e um grande mosaico com blocos coloridos, onde são disparadas as seleções musicais. A ferramenta promete ser a solução para aqueles momentos quando não sabemos ao certo que bandas ouvir, e queremos apenas dar o play, seja qual for o estado de espírito.

9. Viagens exóticas

A AM Travel é uma agência de turismo classe A que traz opções de viagens bem diferentes. A empresa funciona como uma consultoria em roteiros, criando rotas exclusivas ou auxiliando seus clientes na escolha do pacote ideal. Para isso, a empresa resolver apresentar um site para destacar seus serviços, oferecendo uma forma mais práticas para o cliente montar o roteiro. O diferencial é a chance de personalizar sua viagem. A página é ilustrativa, composta por fotografias, cores, ícones e texturas, que garantem uma aparência elegante e lúdica. A navegação é simples, direta e a interface refinada cativa imediatamente o público-alvo.

10. Tendência

Em vertical parallax (que prova que esta moda pegou), o site da agência Eiffel conta sua história através de ilustrações tipográficas. O site não possui menu e sua navegação fica por conta da rolagem de tela, contando apenas com um formulário de contato ao final da página, como forma de interação. Outro recurso bastante usado são as fotografias em resolução full screen para transmitir ideias através de textos e fotografias. Essa já é uma tendência que vem sendo adotada por alguns sites, que preferem manter a comunicação simples e o mais direta possível.

 

1 Comentário

Comente