La 3D dans le web design ressources et tutoriels

Le 07/02/2014

Les techniques de développement évoluent rapidement au niveau du web design entre le CSS3 et le Javascript qui permettent aujourd'hui de réaliser énormément d'effets visuels. On voit de plus en plus rarement de sites conçus avec Flash, qui disparaît progressivement.

Aujourd'hui, nous vous proposons une petite introduction autour de la 3D et du web design avec différents exemples que nous avons recueillis et des ressources pour réaliser de beaux effets visuels

L'interaction du web design par la 3D

Actuellement la tendance du Flat Design touche l'ensemble du web. Cela amène un très grand nombre de sites à être similaire dans leur structure et leur design, donnant ainsi une faible diversité visuelle. Mais on trouve quelques fois de vraies pépites qui jouent sur l'interactivité et amène une autre dimension à l'expérience utilisateur, notamment avec la 3D et les propriétés transform du CSS3.

Quand on parle de 3D dans le web design, nous ne voulons pas parler d'images de synthèse ou d'univers semblable aux jeux vidéo, mais simplement de techniques d'animations ou de mises en pages qui amènent une profondeur et une interaction au web design.

Quelques exemples pour illustrer le sujet

Pour vous citer un exemple sur ce qu'on entend par 3D et web design, nous vous avions présenté dans notre dernier numéro des navigations originales, le site Creaktif. Par un simple effet d'accordéon en 3D, on obtient une profondeur sur l'ensemble du contenu, une expérience intéressante qui permet de plier ou déplier la page.

Nous pouvons également vous présenter le site History Timeline Toyota Hall of Fame qui fonctionne au scroll et qui utilise également des effets de 3D. Le principe est de donner de la profondeur en jouant sur différents plans et sur l'arrivée des éléments avec des mouvements de rotations et d'échelles.

Un dernier exemple avec le portfolio du vidéaste Manuel Rueda qui dispose ses projets à plat pour les relever durant la navigation au scroll. On reste dans un effet simple mais très efficace.