LESTENDANCES DUWEB DESIGN2012Modes, évolutions et exemples issues de l’internet d’aujourd’hui.
Jean-Philippe CabarocDirecteur artistique
Mail : [email protected] : @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