View
9.943
Download
2
Category
Preview:
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 : cabaroc@gmail.comTwitter : @cabaroc
www.cabaroc.com
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> Il faut se tenir sans cesse
au courant
QU’EST CE QUE LE WEB DESIGN ?
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
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É
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 :
www.kidd81.com
www.amazeelabs.com
www.oliverkavanagh.com
www.simpleasmilk.co.uk
LE DESIGN TYPOGRAPHIQUE
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
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
www.mikeyanderson.com
www.gingerwhale.com
www.smashingmagazine.com
www.gravitatedesign.com
LE RESPONSIVE WEBDESIGN
PARALLAXE
www.nintendo.com.au/gamesites/mariokartwii
www.slaveryfootprint.org
www.nikebetterworld.com
www.soul-reaper.com
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
Recommended