Web Design: 11 sites incríveis que você se surpreenderá com o CSS!

Com a importância que a internet ganhou nos últimos anos, o design se tornou uma parte essencial do desenvolvimento de websites e aplicações web. E, acompanhando tudo isso, vem o CSS que evoluiu bastante com o passar dos anos e hoje se encontra em sua versão CSS3, cheio de possibilidades diferentes estilizações, efeitos e novos recursos que possibilitam otimizar ainda mais os códigos de estilo.

E…

Para demonstrar o poder dessa linguagem de folha de estilo incrível, elaboramos uma lista com sites incríveis que possuem um CSS complexo que, junto com outras tecnologias como Javascript, transformam simples arquivos HTML em belíssimas peças de design. Todos os exemplos apresentados a seguir foram premiados pelo CSS Design Awards, portanto, merecem o destaque!

Contudo, antes de começar a ler este post, reserve alguns minutos a mais, pois você corre sérios riscos de ficar hipnotizado pela interface da cada um destes websites principalmente se você é um aficionado assumido por web design e desenvolvimento front-end. Prepare-se e depois não diga que eu não avisei!

IMPORTANTE: Todos os websites a serem apresentados abaixo foram avaliados pelo conjunto de sua obra, ou seja, CSS + JavaScript. Contudo, utilizamos como critério diferenciador o CSS, por isso, o título desse post.

1. Agência RESN

Agencia-RESN (2)

Website: RESN

Provavelmente o site mais inovador dessa lista. O site que usa CSS combinado com tecnologias 3D aplicado com canvas e Javascript. Apesar das diversas tecnologias envolvidas e das possibilidades de interação, o site é leve. Isso é resultado de um processo intenso de otimização de código.

DICA: veja este website com o som ligado, a experiência é muito mais impactante. Além disso, não se esqueça de segurar o diamante por mais de alguns segundos por diversas vezes! Explore ao máximo, este site tem uma resposta até para o clique de “inspecionar elemento”.

2. Who We Are Is What We Leave Behind

Subaru (2)

Website: Subaru

Ligeiramente mais pesado do que o exemplo anterior, mas com muita interação. A melhor feature deste website com certeza é a possibilidade de arrastar e aplicar zoom no mapa (não, não é do google maps que estamos falando).

OBS: este website foi criado pela RESN (agência do site acima), os caras são bons mesmo!

3. Save the Rainforest

Rainforest (2)

Website: Rainforest

Excelente aplicação de canvas, ambientação 3D e fotos em 360° graus. A interação profunda com o usuário é resultado de um amplo estudo de User Interface (UI) e de uma aplicabilidade complexa de Javascript.

4. Locus Solus

Locus-solus (1)

Website: Locus-solus

CSS e Javascript aplicados a um design minimalista que prioriza o usuário e a informação, invés de websites pesados e cheios de detalhes sem importância. Neste caso, o CSS foi otimizado e está muito bem estruturado.

5. Agência Aerolab

Aerolab (1)

Website: Aerolab

Assim como o website anterior, esse exemplo também utiliza técnicas de design minimalista para priorizar a informação. No entanto, trata-se de um site com mais animações e uma aplicação complexa de Javascript e CSS3, para assim, tornar a navegação mais interativa.

DIFERENTE:

  • Efeitos de hover, principalmente, onde há os caracteres “[“ ou“]”, em laranja;
  • Efeitos de scroll do mouse principalmente na homepage.

6. Parallax.js

Parallax (1)

Website: Parallax

Este é um pouco diferente, pois na verdade, trata-se de uma demonstração do plugin Javascript para o uso da técnica de parallax, bastante usada na rotina de desenvolvimento de websites. Este trabalho consiste no uso de muitas camadas CSS e uma aplicação sublime do parallax em Javascript.

Importante: se possível, acesse via mobile e tablet também!

7. Estúdio digital Akafu

Akaru (1)

Website: Akaru

A simplicidade, por incrível que pareça, é o diferencial desse site. Além disso, o uso pensado de animações dão um tom de naturalidade para o website. Também houve um intenso trabalho de otimização, para assim, torná-lo leve em todas as plataformas.

8. Grosse Lanterne

lanterne (1)

Website: Grosse Lanterne

O mérito deste site está na suavidade como as animações acontecem e as variaões de telas conforme o usuário navega, tornando o site bastante dinâmico em termos visuais.

9. Confluence

confluence (1)

Website: Confluence

Cores fortes combinadas com leveza. A UI deste website foi pensada para chegar em qualquer tela com poucos cliques. Tudo se dá através de uma boa aplicação de CSS e Javascript.

10. Overpx

Overpx | Site com CSS surpreendente

Website: Overpx

Uso de parallax e simplicidade de navegação definem este website.

11. Waaark

waark (1)

Website: Waaark

Cores flat, animações incríveis e transições mais incríveis ainda. Este é o conceito do Waaark.

Aproveitando, irei contar uma história sobre este site…

Uma vez eu estava me sentindo “engraçadinho” no meu papel de web designer e resolvi “trollar” o desenvolvedor front-end da Becode. Aí, eu resolvi chamar ele e falar o seguinte:

(Detalhe: recém havíamos entregado o primeiro modelo de layout da plataforma Beta da Becode)

Eu: “Cara, gostei deste site.” (mostrei o site pra ele)
Ele: “Muito legal mesmo, gostei também!” (respondeu ele, muito empolgado)
Eu: “Então, o site da Becode que construímos não foi aprovado e agora precisamos que você reformule todo o design da Becode para algo similar a isso, com estes efeitos, transições, animações, etc. Tens como fazer isso em um mês?” (olhei seriamente para ele)
Ele: (ele me olhou assim)

Front-end Dev Assustado


Concluindo…

Repetindo… muitas das funcionalidades presentes em websites e apresentadas aqui são criadas através de códigos Javascript (funções de arrastar, zoom e algumas animações). Porém, neste post, avaliamos o conjunto da obra e o CSS como um diferencial, responsável por dar estilo a página de acordo com o design proposto pelo web designer. Aliás, é muito importante ressaltar a importância e o papel de tanto web designers, quanto front-end developers, sem profissionais competentes nessas duas áreas, nenhuma dessas aplicações inspiradoras apresentadas aqui seriam possíveis!

Curso online de HTML5, CSS3 e JavaScript da Becode! O seu primeiro passo para se tornar um front-end developer!

CSS e o seu poder de transforamação

Outra boa dica é o site CSS Zen Garden, que mostra o quão poderoso pode ser um arquivo CSS. O site mantém uma lista de diversos estilos desenvolvidos pela comunidade, que são aplicados para o mesmo arquivo HTML. Essa é a melhor forma de mostrar todo poder do CSS. Além disso, para entender um pouco mais, é possível analisar detalhadamente cada um dos exemplos citados através do código fonte.

A cada design que acessamos, podemos ver um site totalmente diferente do outro, apenas mudando o arquivo CSS. A lista completa de estilos para o mesmo arquivo HTML você pode acessar aqui.


Espero que esse post tenha lhe ajudado a conhecer um pouco mais sobre o poder do CSS que, por muitas vezes, é uma tecnologia menosprezada injustamente, como você mesmo pode ver! Caso você tenha gostado do post e queira nos ajudar a descobrir outros sites incríveis que exploram o poder do CSS ao máximo, comente aqui com a sua sugestão de site e o porquê de ele merecer fazer parte dessa lista! Teremos prazer em adicionar a sua sugestão!

Erick Scudero

Escrito por Erick Scudero

Especialista em Marketing Digital e apaixonado por tudo que envolve o universo de tecnologia e comunicação. Durante sua jornada na terra dos cangurus (Austrália), atuou em diversos projetos prestando consultoria em questões de UX, SEO, Marketing Digital e modelos de negócio com foco em startups. É cofundador da Becode, da M2up e instrutor de cursos presenciais na TargetTrust.

14 Comentários

Leave a Reply
  1. Muito Interessante o seu trabalho Erick Scudero

    Tenho um Desejo, me tornar espetacular e conseguir projetar, e fazer Páginas Web

    Pode me ajudar ?

    Se sim agradeço imenso desde já, sou Moçambicano !
    Muito Obrigado e Parabéns !

    Cordiais Saudações

    • Que ótimo, Victório! Fico muito feliz que os posts tenham ajudado e servido como inspiração. Quanto a te ajudar, claro! Não sei qual é o seu nível de conhecimento nessa área. Contudo, caso você seja iniciante, recomendo que você aprenda primeiro HTML, CSS e JavaScript, para isso, sugiro o nosso curso sobre o assunto. Você pode ver mais sobre o conteúdo do curso aqui. Abraços! 😀

  2. Parabéns pelo excelentíssimo senso de humor, chorei de rir quando li !
    E em relação a matéria, ajuda bastante quando há necessidade de estudo de algo desse gênero !

    PARABÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉS !

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Os 10 comandos SQL que você não pode viver sem! | Becode

Os 10 comandos SQL que você não pode viver sem!

Guia para desenvolver o seu 1º site dinâmico utilizando PHP! | Becode

Guia para desenvolver o seu 1º site dinâmico utilizando PHP!