Transcript

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

MERCI !Jean-Philippe CabarocDirecteur artistiqueMail : [email protected] : @cabaroc

www.cabaroc.com