Le document analyse les tendances du web design en 2012, en mettant l'accent sur des éléments clés tels que la couleur, la simplicité, les polices personnalisées, et le responsive web design. Il présente également des principes de design tels que le minimalisme et l'utilisation de la typographie. Plusieurs exemples de sites illustrent ces tendances et restent d'actualité dans l'évolution du web.

1. LESTENDANCES
DUWEB DESIGN
2012
Modes, évolutions et exemples
issues de l’internet d’aujourd’hui.
Jean-Philippe Cabaroc Mail : cabaroc@gmail.com
Twitter : @cabaroc
Directeur artistique
www.cabaroc.com

2. QU’EST CE
INTRODUCTION
QUE LE
WEB DESIGN ?

3. QU’EST CE QUE LE WEB DESIGN ?
C’EST AVANT TOUT
UN DESIGNER

4. QU’EST CE QUE LE WEB DESIGN ?
LE TRAVAIL D’UN DESIGNER
> Améliorer l’accès a un besoin
> Allier aspect esthétique et
fonctionnel
> Connaître les contraintes
techniques

5. QU’EST CE QUE LE WEB DESIGN ?
MAIS INTERNET
ÉVOLUE SANS ARRÊT

6. QU’EST CE QUE LE WEB DESIGN ?
MAIS INTERNET
ÉVOLUE SANS ARRÊT
> Il faut se tenir sans cesse
au courant

7. LA COULEUR
1.

8. LA COULEUR
Couleur pantone 2012
TANGO MANDARINE
(TANGERINE TANGO)
Sources : http://www.pantone-france.com/

9. LA COULEUR
2010 2011 2012
Turquoise Chèvrefeuille Tango Mandarine
«Calme «Courage «Énergie
Apaisemment Confiance Chaleur
Protection.» Vitalité.» Vivacité.»

10. SIMPLICITÉ
2.

11. SIMPLICITÉ
L’EXEMPLE DE GOOGLE
3 OBJECTIFS CLÉS :
> Focus (ciblé)
> Elasticity (elastique)
> Effortlessness (aisance)

12. SIMPLICITÉ
Évolution de la page d’accueil de google depuis 1997
1997 1998
1999 2001
Sources : http://www.lookback.fr/

13. SIMPLICITÉ
Évolution de la page d’accueil de google depuis 1997
2002 2004
2011 2012
Sources : http://www.lookback.fr/

14. SIMPLICITÉ
Évolution du design de google map
Sources : http://googledata.org/

15. LES POLICES
3.
PERSONNALISÉES

16. LES POLICES PERSONNALISÉES
AVANT
> Choix limité de polices
> Contraint par le catalogue de
polices présent dans
l’ordinateur de l’internaute

17. LES POLICES PERSONNALISÉES
AUJOURD’HUI
> On peut intégrer le fichier de
police directement dans le
site
> Contraint uniquement par
les droits d’utilisations de la
police

18. LES POLICES PERSONNALISÉES
AVANTAGES
> Des designs améliorés
sans être obligé de transformer
un texte en image

19. LES POLICES PERSONNALISÉES
www.silverlng.com www.made-in-you.com
www.nykevanwyk.com
www.messagefirst.com

20. LES POLICES PERSONNALISÉES
Catalogues de polices web libre de droit :
www.fontsquirrel.com www.google.com/webfonts

21. LE DESIGN
4.
TYPOGRAPHIQUE

22. LE DESIGN TYPOGRAPHIQUE
PRINCIPE
> Utiliser le texte comme
élément principal du design

23. LE DESIGN TYPOGRAPHIQUE
www.oliverkavanagh.com www.kidd81.com
www.simpleasmilk.co.uk
www.amazeelabs.com

24. 5. LE RÉTRO

25. LE RÉTRO
OBJECTIF
> Apporter chaleur
et convivialité
> Donner une ambiance
ludique ou décalée

26. LE RÉTRO
www.level2d.com www.tricycleterror.com
www.lesfillesalaviolette.com
www.allstarlanes.co.uk

27. LE
6.
MINIMALISME

28. LE MINIMALISME
PRINCIPE
> Économie maximale
des moyens
> Se débarraser du superflue
pour aller à l’essentiel

29. LE MINIMALISME
www.brettarthurphoto.com www.archiduchesse.com
www.10yearsintype.com www.madebysofa.com

30. ONE SINGLE
7.
PAGE

31. ONE SINGLE PAGE
PRINCIPE
> Créer un blog facile d’accès
> Mettre un maximum
d’information dans un
minimum d’espace

32. ONE SINGLE PAGE
www.wingcheng.com www.soupagency.it www.jcsuzanne.com www.launchfactory.org www.marlene-portfolio.com

33. LE
8.
RESPONSIVE
WEBDESIGN

34. LE RESPONSIVE WEBDESIGN
PRINCIPE
> S’adapter à
toutes les tailles d’écran

35. LE RESPONSIVE WEBDESIGN
Sources : www.mediaqueri.es

36. LE RESPONSIVE WEBDESIGN
www.smashingmagazine.com www.mikeyanderson.com
www.gravitatedesign.com www.gingerwhale.com

37. 9. LE PARALLAXE

38. PARALLAXE
PARALLAXE ??
> Animer séparément
différents plans d’un site web

39. PARALLAXE
www.nikebetterworld.com www.nintendo.com.au/gamesites/mariokartwii
www.soul-reaper.com www.slaveryfootprint.org

40. LE GIF ANIMÉ
9.
CONTEMPORAIN

41. LE GIF ANIMÉ CONTEMPORAIN
VRAIMENT ?
> Oui, le GIF peut être tendance

42. LE GIF ANIMÉ CONTEMPORAIN
Ce GIF là, on oublie
(sauf en l’utilisant au second degré)

43. LE GIF ANIMÉ CONTEMPORAIN
www.fromme-toyou.tumblr.com/tagged/gif http://dvdp.tumblr.com/tagged/dvdp%20done
http://graphism.fr/regardez-star-wars-en-gif-anim www.iamnotanartist.org

44. POUR ALLER PLUS LOIN
RESPONSIVE WEBDESIGN TYPOGRAPHIE PERSONNALISÉE
RESSOURCES RESSOURCES
• http://bit.ly/qmnL3F • http://www.fontsquirrel.com
• http://www.blogoergosum.com/29433-responsive-web-design- • http://www.google.com/webfonts
une-introduction-et-quelques-frameworks • https://typekit.com
TUTORIELS POUR POUR LES INTÉGRATEURS/DÉVELOPPEURS TUTORIELS
• http://www.alsacreations.com/article/lire/930-css3-media-que- • http://www.alsacreations.com/astuce/lire/630-fonte-personna-
ries.html lisee-site-web.html
• http://www.grafikart.fr/tutoriels/html-css/media-queries-res- • http://www.html5-css3.fr/css3/police-personnalisee-css3-font-
ponsive-178 face-google-font
PARALLAXE HTML5
TUTORIELS (EN ANGLAIS)
• http://www.franckmaurin.com/the-parallax-effects-with-jquery • http://www.alsacreations.com/article/lire/750-HTML5-nou-
• http://css-tricks.com/auto-moving-parallax-background veautes.html
• http://www.webdesignshock.com/one-page-website • http://www.alsacreations.com/search/tag/html5
• http://html5demos.com

45. MERCI !
Jean-Philippe Cabaroc
Directeur artistique
Mail : cabaroc@gmail.com
Twitter : @cabaroc
www.cabaroc.com