• Ressources

La 3D dans le web design ressources et tutoriels

Publié le
La 3D dans le web design ressources et tutoriels

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

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.

creaktif

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.

toyota hall of fame

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. 

Manuel rueda

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 ! 

3D Shading With Box Shadows

3D Effect Mobile Showcase

3D Effect Mobile Showcase

Slicebox

Slicebox

Makisu

Makisu

Stack Slider

Stack Slider

jQuery Tip Cards: Navigation

google-tip-cards

Animated Opening Type

Animated Opening Type

3D Timeline

3DTimeline

Scattered Polaroids Gallery

 

 

By Vincent

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *