• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Tendances du web design 2012
 

Tendances du web design 2012

on

  • 9,744 views

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 ...

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

Statistics

Views

Total Views
9,744
Views on SlideShare
7,455
Embed Views
2,289

Actions

Likes
11
Downloads
165
Comments
0

27 Embeds 2,289

http://www.scoop.it 1006
http://www.pourquoi-entreprendre.fr 543
http://alchemy.atosworldline.com 310
http://blog.websourcing.fr 154
http://catherine-est-unanime.blogspot.fr 151
http://josuelassource.tumblr.com 41
https://precontact.bluekiwi.net 19
http://127.0.0.1 11
http://feedly.com 10
http://fdebailleul.tumblr.com 6
http://catherine-est-unanime.blogspot.com 6
http://pinterest.com 5
http://www.pinterest.com 4
http://catherine-est-unanime.blogspot.co.uk 3
http://catherine-est-unanime.blogspot.pt 3
http://feeds.feedburner.com 3
http://www.netvibes.com 3
http://translate.googleusercontent.com 2
http://www.catherine-est-unanime.blogspot.fr 1
http://digg.com 1
http://leed.fam-martel.eu 1
http://reader.aol.com 1
http://www.tumblr.com 1
https://si0.twimg.com 1
http://catherine-est-unanime.blogspot.ca 1
http://meltwaternews.com 1
http://www.catherine-est-unanime.blogspot.in 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Tendances du web design 2012 Tendances du web design 2012 Presentation Transcript

    • LESTENDANCESDUWEB DESIGN2012Modes, évolutions et exemplesissues de l’internet d’aujourd’hui.Jean-Philippe Cabaroc Mail : cabaroc@gmail.com Twitter : @cabarocDirecteur artistique www.cabaroc.com
    • QU’EST CEINTRODUCTIONQUE LEWEB 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
    • QU’EST CE QUE LE WEB DESIGN ? 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
    • LA COULEUR1.
    • LA COULEUR Couleur pantone 2012 TANGO MANDARINE (TANGERINE TANGO)Sources : http://www.pantone-france.com/
    • LA COULEUR 2010 2011 2012 Turquoise Chèvrefeuille Tango Mandarine «Calme «Courage «Énergie Apaisemment Confiance Chaleur Protection.» Vitalité.» Vivacité.»
    • SIMPLICITÉ2.
    • SIMPLICITÉ L’EXEMPLE DE GOOGLE 3 OBJECTIFS CLÉS : > Focus (ciblé) > Elasticity (elastique) > Effortlessness (aisance)
    • SIMPLICITÉÉvolution de la page d’accueil de google depuis 19971997 19981999 2001Sources : http://www.lookback.fr/
    • SIMPLICITÉÉvolution de la page d’accueil de google depuis 19972002 20042011 2012Sources : http://www.lookback.fr/
    • SIMPLICITÉÉvolution du design de google mapSources : http://googledata.org/
    • LES POLICES3.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
    • 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
    • LES POLICES PERSONNALISÉES AVANTAGES > Des designs améliorés sans être obligé de transformer un texte en image
    • LES POLICES PERSONNALISÉES www.silverlng.com www.made-in-you.com www.nykevanwyk.com www.messagefirst.com
    • LES POLICES PERSONNALISÉES Catalogues de polices web libre de droit : www.fontsquirrel.com www.google.com/webfonts
    • LE DESIGN4.TYPOGRAPHIQUE
    • LE DESIGN TYPOGRAPHIQUE PRINCIPE > Utiliser le texte comme élément principal du design
    • LE DESIGN TYPOGRAPHIQUE www.oliverkavanagh.com www.kidd81.com www.simpleasmilk.co.uk www.amazeelabs.com
    • 5. LE RÉTRO
    • LE RÉTRO OBJECTIF > Apporter chaleur et convivialité > Donner une ambiance ludique ou décalée
    • LE RÉTRO www.level2d.com www.tricycleterror.com www.lesfillesalaviolette.com www.allstarlanes.co.uk
    • LE6.MINIMALISME
    • LE MINIMALISME PRINCIPE > Économie maximale des moyens > Se débarraser du superflue pour aller à l’essentiel
    • LE MINIMALISME www.brettarthurphoto.com www.archiduchesse.com www.10yearsintype.com www.madebysofa.com
    • ONE SINGLE7.PAGE
    • ONE SINGLE PAGE PRINCIPE > Créer un blog facile d’accès > Mettre un maximum d’information dans un minimum d’espace
    • ONE SINGLE PAGE www.wingcheng.com www.soupagency.it www.jcsuzanne.com www.launchfactory.org www.marlene-portfolio.com
    • LE8.RESPONSIVEWEBDESIGN
    • LE RESPONSIVE WEBDESIGN PRINCIPE > S’adapter à toutes les tailles d’écran
    • LE RESPONSIVE WEBDESIGNSources : www.mediaqueri.es
    • LE RESPONSIVE WEBDESIGN www.smashingmagazine.com www.mikeyanderson.com www.gravitatedesign.com www.gingerwhale.com
    • 9. LE PARALLAXE
    • PARALLAXE PARALLAXE ?? > Animer séparément différents plans d’un site web
    • PARALLAXE www.nikebetterworld.com www.nintendo.com.au/gamesites/mariokartwii www.soul-reaper.com www.slaveryfootprint.org
    • LE GIF ANIMÉ9.CONTEMPORAIN
    • LE GIF ANIMÉ CONTEMPORAIN VRAIMENT ? > Oui, le GIF peut être tendance
    • LE GIF ANIMÉ CONTEMPORAIN Ce GIF là, on oublie (sauf en l’utilisant au second degré)
    • 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
    • POUR ALLER PLUS LOINRESPONSIVE WEBDESIGN TYPOGRAPHIE PERSONNALISÉERESSOURCES 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.comTUTORIELS 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-fontPARALLAXE HTML5TUTORIELS (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
    • MERCI !Jean-Philippe CabarocDirecteur artistiqueMail : cabaroc@gmail.comTwitter : @cabarocwww.cabaroc.com