1.
Web Design<br />Web Design<br />Support par<br />

2.
Web Design ?<br />Web Design = Conception d’interfaces web :<br />Architecture (squelette) & Interactions<br />Organisation des pages & Arborescence<br />Ergonomie<br />Accessibilité et facilité d’utilisation<br />Esthétique<br />

3.
Des compétences ?<br />Le Web Design réclame avant tout :<br />Sens de l’ergonomie<br />Application des techniques de Design au Web<br />Bonne connaissance des contraintes techniques<br />Bases en programmation web & connaissance des standards (W3C, WAI, Mobilité, etc.)<br />De la créativité<br />…. Du temps, de la persévérance et un certain sens de l’abnégation !!<br />

4.
Le processuscréatif<br />

5.
Le processuscréatif<br />Le briefing créatif<br />Les couleurs<br />La chartegraphique<br />Les mood board<br />Le zoning template<br />Les wireframes<br />Les “rough”<br />Les maquettesgraphiques<br />

6.
Le processus créatif<br />Créatif ?<br />Design organisé<br />

7.
Le processuscréatif: BriéfingCréatif<br />1 : Définir<br />2 : Affiner<br />3 : Cerner<br />

8.
Le processuscréatif : Les couleurs<br />Pas plus de 3 couleurs en général<br />Rouechromatique :<br />Complémentarité (opposéesur la roue) => Effet “Choc”<br />Couleursanalogiques (proches)<br />Triade et Tétrade=> Bonne base de départ<br />

9.
Le processuscréatif : Chartegraphique<br />Codes couleurs& Principales Typographies<br />

10.
Le processuscréatif : Les mood board<br />Mood Board (ou planches d’inspiration) = Compilation de différentes sources d’inspiration pour faire ressortirl’ambiancecréative du projet.<br />2 types de mood boards :<br />Les collages<br />Les “templates”<br />

11.
Le processuscréatif : Collage Mood Board<br />Exemple : Futur site e-commerce d’articles pour bébés<br />

12.
Le processuscréatif : Template Mood Board<br />Exemple : Futur site e-commerce d’articles pour bébés<br />

13.
Le processuscreatif: Zoning Template<br />Zoning Template = Définir les principales zones d’interface et leurs impacts visuels ou importance<br />

14.
Le processuscreatif: Les wireframes<br />… ou mockups<br />Maquettes de zones plus détaillées avec l’inclusiond’informationscontextuelles, d’élémentsd’interface et d’interactionsutilisateur<br />

15.
Le processuscréatif: Les wireframes<br />

16.
Le processuscréatif : Les bruts (“ROUGH”)<br />Pas réellementune technique maisunepratiquequel’onpeutrencontrer<br />Travail manueloupapier (éventuellementscanné) pouvantservir de base pour les échangesinitiaux<br />

17.
Le processuscréatif : Exemple de “Rough”<br />

18.
Le processuscréatif : Les maquettes<br />Ultimeétapeavant le développement<br />

19.
Le processuscreatif : Les maquettes<br />

20.
La charte web<br />

21.
Composition d’unecharte web<br />Qu’est-cequ’unecharte web ? :<br /><ul><li>Chartegraphique

22.
Réglesd’écriture et typographiques (Web font stack, Titres, etc.)

23.
Iconographie, Sets de boutonsàétats et design des principauxélémentsd’interface (Menus, Onglets, Blocs, etc.)</li></li></ul><li>Charte web : iconographie<br />Le set iconographique d’un site ou d’une charte web définit l’identité symbolique<br />Se compose de jeux d’icônes et de leurs déclinaisons<br /> Du très simple : Au trèsdétaillé :<br />

24.
Charte web : favicon<br />La favicon estl’icôneprésentedans les onglets des navigateurs web :<br /><ul><li>Il s’agit en réalité d’un simple fichier “.ico” au format 64x64 maximum. Par exemple :</li></li></ul><li>Charte web : sets de contrôles<br />Sets de boutons avec états + élémentsd’interface (menus, onglets, blocs, etc.) avec variations contextuellesévent (exemple : univers)<br />

25.
Techniques de web design<br />

26.
Principales techniques de web design<br />Les grid system<br />Golden ratio<br />Rouechromatique<br />Symétrie<br />Typographie<br />Responsive Web Design<br />Des fondsphotographiques<br />… du style !<br />“La compétencetechnique, c’estl’art de maîtriser la complexitéalorsque la créativitéestl’art de maîtriser la simplicité.”<br />Christopher Zeeman (traduction)<br />

27.
Web design : golden ratio<br />Golden ratio = 1.62 (arrondi)<br />Utilisédepuis des siècles (parthenon, joconde, etc.)<br />Appliqué au web design : “Page Layout” <br />… mais pas que: Toutes les “proportions d’or” sontbonnesàprendre<br />

28.
Web Design : Golden ratio<br />Exemplesthéoriques :<br />

29.
Web Design : Golden ratio<br />Exempleconcret :<br />

30.
Web design : symétrie et asymétrie<br />Exemples de sites baséssur des design symétriques<br />

31.
Web design : Typographie<br />Les sites focalisantsur les techniques / jeuxtypographiquessonttrèsà la mode.<br />Il s’agitclairementd’unetendanceactuelletrès en vogue en ce moment<br />

32.
Web design : Typographie<br />Exemples de sites baséssur la typographie<br />

33.
Web design : couleurs<br />Blanc / noir : Couleursintemporelles<br />Couleurs “à la mode” en fonction des périodes (attention aux effets de mode)<br />Exemple, couleursà la mode été 2011 :<br />

34.
Web design : couleurs<br />Exemples de design bâtiautour de la colorimétrie<br />

35.
Web design : La profondeur<br />Donner de la profondeur = Mode de la “3D”<br />

36.
Web design : Larges fonds photo<br />Grâce aux nouvelles technologies (CSS3) ce type de design prendaujourd’hui de l’ampleur et peutcréer des effetssaisissants :<br />

37.
Web Design : Grid Design<br />Les “Grid Design” sont des représentationsstatiquesd’espacements “idéaux” en fonctiond’unelargeurdéfinie.<br />Il en existe de trèsnombreuxdontcertains “standards” telsque le 960 ou le 920.<br />Le Grid Design sonttrèssouvent “golden ratio compatibles”<br />

38.
Web design : Grid design<br />Exemple : 960 Grid design<br />

39.
Web design : Grid design<br />Exemple de réalisationsbaséessur des grilles<br />

40.
Web design : Creative Layout<br />Creative Layout = Design originaux<br />Design originaux = Pas de normeparticulière<br />Sortir du lot !<br />

41.
Creative Layout : Exemples<br />

42.
Design mobiles<br />

43.
Responsive Web Design<br />Unegrille flexible<br />Des images flexibles(ou plus exactement des images qui s’adaptentdans un contexteflexible)<br />Les Media Queries<br />

44.
Responsive design ?<br />

45.
Non : Juste un Design “Switchy” <br />

46.
Exemple de Design Flexible<br />

47.
Conclusion<br />

48.
Temps – Budget - Qualité<br />

49.
Outilspratiques<br />Rouechromatique interactive :<br />http://colorschemedesigner.com/<br />960 HTML Grid System<br />http://960.gs/demo.html<br />DaFont (typo)<br />http://www.dafont.com/fr/<br />Web Font Stack<br />http://www.codestyle.org/servlets/FontStack<br />