Embed Size (px)
DESCRIPTION
Internet est un lieu en perpétuel mouvement. La technique et les comportements évoluent très vite, ils influencent par conséquent le web design qui est très lié à ces deux facteurs. Par le biais d'exemples et d'études cas, l'atelier propose un tour d'horizon global et transversal des différentes tendances et évolutions actuelles dans web design.Ce
Citation preview
LESTENDANCES DUWEB DESIGN2012Modes, évolutions et exemples issues de l’internet d’aujourd’hui.
Jean-Philippe CabarocDirecteur artistique
Mail : [email protected] : @cabaroc
www.cabaroc.com
INTRODUCTION
QU’EST CE QUE LE WEB DESIGN ?
QU’EST CE QUE LE WEB DESIGN ?
C’EST AVANT TOUT UN DESIGNER
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
MAIS INTERNET ÉVOLUE SANS ARRÊT
QU’EST CE QUE LE WEB DESIGN ?
MAIS INTERNET ÉVOLUE SANS ARRÊT> Il faut se tenir sans cesse
au courant
QU’EST CE QUE LE WEB DESIGN ?
1.LA COULEUR
LA COULEUR
Couleur pantone 2012TANGO MANDARINE(TANGERINE TANGO)
Sources : http://www.pantone-france.com/
Chèvrefeuille
«CourageConfianceVitalité.»
Turquoise
«CalmeApaisemmentProtection.»
2010 2011 2012
Tango Mandarine
«ÉnergieChaleurVivacité.»
LA COULEUR
2.SIMPLICITÉ
SIMPLICITÉ
L’EXEMPLE DE GOOGLE3 OBJECTIFS CLÉS :
> Focus (ciblé)> Elasticity (elastique)> Effortlessness (aisance)
1997
1999
1998
2001
Sources : http://www.lookback.fr/
SIMPLICITÉ
Évolution de la page d’accueil de google depuis 1997
2002
2011
2004
2012
Sources : http://www.lookback.fr/
Évolution de la page d’accueil de google depuis 1997
SIMPLICITÉ
Sources : http://googledata.org/
Évolution du design de google map
SIMPLICITÉ
3.LES POLICES PERSONNALISÉES
LES POLICES PERSONNALISÉES
AVANT> Choix limité de polices> Contraint par le catalogue de
polices présent dans l’ordinateur de l’internaute
AUJOURD’HUI> On peut intégrer le fichier de
police directement dans le site
> Contraint uniquement par les droits d’utilisations de la police
LES POLICES PERSONNALISÉES
AVANTAGES> Des designs amélioréssans être obligé de transformer un texte en image
LES POLICES PERSONNALISÉES
LES POLICES PERSONNALISÉES
www.made-in-you.com
www.messagefirst.com
www.silverlng.com
www.nykevanwyk.com
LES POLICES PERSONNALISÉES
www.google.com/webfontswww.fontsquirrel.com
Catalogues de polices web libre de droit :
4.LE DESIGN TYPOGRAPHIQUE
LE DESIGN TYPOGRAPHIQUE
PRINCIPE> Utiliser le texte comme
élément principal du design
www.kidd81.com
www.amazeelabs.com
www.oliverkavanagh.com
www.simpleasmilk.co.uk
LE DESIGN TYPOGRAPHIQUE
5.LE RÉTRO
LE RÉTRO
OBJECTIF> Apporter chaleur
et convivialité> Donner une ambiance
ludique ou décalée
LE RÉTRO
www.tricycleterror.com
www.allstarlanes.co.uk
www.level2d.com
www.lesfillesalaviolette.com
6.LE MINIMALISME
LE MINIMALISME
PRINCIPE> Économie maximale
des moyens> Se débarraser du superflue
pour aller à l’essentiel
LE MINIMALISME
www.archiduchesse.com
www.madebysofa.com
www.brettarthurphoto.com
www.10yearsintype.com
7.ONE SINGLE PAGE
ONE SINGLE PAGE
PRINCIPE> Créer un blog facile d’accès> Mettre un maximum
d’information dans un minimum d’espace
www.wingcheng.com www.soupagency.it www.jcsuzanne.com www.launchfactory.org www.marlene-portfolio.com
ONE SINGLE PAGE
8.LE RESPONSIVE WEBDESIGN
LE RESPONSIVE WEBDESIGN
PRINCIPE> S’adapter à
toutes les tailles d’écran
LE RESPONSIVE WEBDESIGN
Sources : www.mediaqueri.es
www.mikeyanderson.com
www.gingerwhale.com
www.smashingmagazine.com
www.gravitatedesign.com
LE RESPONSIVE WEBDESIGN
9.LE PARALLAXE
PARALLAXE
PARALLAXE ??> Animer séparément
différents plans d’un site web
PARALLAXE
www.nintendo.com.au/gamesites/mariokartwii
www.slaveryfootprint.org
www.nikebetterworld.com
www.soul-reaper.com
9.LE GIF ANIMÉ CONTEMPORAIN
VRAIMENT ?> Oui, le GIF peut être tendance
LE GIF ANIMÉ CONTEMPORAIN
LE GIF ANIMÉ CONTEMPORAIN
Ce GIF là, on oublie(sauf en l’utilisant au second degré)
LE GIF ANIMÉ CONTEMPORAIN
http://dvdp.tumblr.com/tagged/dvdp%20done
www.iamnotanartist.org
www.fromme-toyou.tumblr.com/tagged/gif
http://graphism.fr/regardez-star-wars-en-gif-anim
POUR ALLER PLUS LOINRESPONSIVE WEBDESIGNRESSOURCES• http://bit.ly/qmnL3F• http://www.blogoergosum.com/29433-responsive-web-design-
une-introduction-et-quelques-frameworks
TUTORIELS POUR POUR LES INTÉGRATEURS/DÉVELOPPEURS
• http://www.alsacreations.com/article/lire/930-css3-media-que-ries.html
• http://www.grafikart.fr/tutoriels/html-css/media-queries-res-ponsive-178
PARALLAXETUTORIELS (EN ANGLAIS)
• http://www.franckmaurin.com/the-parallax-effects-with-jquery• http://css-tricks.com/auto-moving-parallax-background• http://www.webdesignshock.com/one-page-website
TYPOGRAPHIE PERSONNALISÉERESSOURCES• http://www.fontsquirrel.com• http://www.google.com/webfonts
• https://typekit.com
TUTORIELS
• http://www.alsacreations.com/astuce/lire/630-fonte-personna-lisee-site-web.html
• http://www.html5-css3.fr/css3/police-personnalisee-css3-font-face-google-font
HTML5• http://www.alsacreations.com/article/lire/750-HTML5-nou-
veautes.html• http://www.alsacreations.com/search/tag/html5• http://html5demos.com
