La 3D dans le web design ressources et tutoriels

07/02/2014

Ressources

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.

Si vous souhaitez voir des univers en 3D réalisés en CSS et HTML je vous conseille cet article :
– Creating 3D worlds with HTML and CSS

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.

Des ressources pour vos réalisations web

Pour terminer cette petite introduction, nous vous proposons de découvrir une liste de ressources et tutoriels qui pourront vous aider à réaliser des effets en 3D avec quelques lignes de CSS3 et Javascript.

La plupart des exemples provient du site Tympanus.net qui est l'une des meilleures ressources en matière de tutoriels récent et de qualité en web design.

Si vous avez des exemples ou des sites innovants sur le principe de la 3D, n'hésitez pas à les partager avec nous en laissant un commentaire.

Nous espérons que cet article est pu nourrir votre imagination et vous donner plein d'idées innovantes pour vos projets web !