Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Présentation web design

4,838 views

Published on

Présentation web design pour les mardis CCI à Bayonne par Fabien Pelissier de la société MyWebShop.

Published in: Design

Présentation web design

  1. 1. Web Design<br />Web Design<br />Support par<br />
  2. 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. 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. 4. Le processuscréatif<br />
  5. 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. 6. Le processus créatif<br />Créatif ?<br />Design organisé<br />
  7. 7. Le processuscréatif: BriéfingCréatif<br />1 : Définir<br />2 : Affiner<br />3 : Cerner<br />
  8. 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. 9. Le processuscréatif : Chartegraphique<br />Codes couleurs& Principales Typographies<br />
  10. 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. 11. Le processuscréatif : Collage Mood Board<br />Exemple : Futur site e-commerce d’articles pour bébés<br />
  12. 12. Le processuscréatif : Template Mood Board<br />Exemple : Futur site e-commerce d’articles pour bébés<br />
  13. 13. Le processuscreatif: Zoning Template<br />Zoning Template = Définir les principales zones d’interface et leurs impacts visuels ou importance<br />
  14. 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. 15. Le processuscréatif: Les wireframes<br />
  16. 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. 17. Le processuscréatif : Exemple de “Rough”<br />
  18. 18. Le processuscréatif : Les maquettes<br />Ultimeétapeavant le développement<br />
  19. 19. Le processuscreatif : Les maquettes<br />
  20. 20. La charte web<br />
  21. 21. Composition d’unecharte web<br />Qu’est-cequ’unecharte web ? :<br /><ul><li>Chartegraphique
  22. 22. Réglesd’écriture et typographiques (Web font stack, Titres, etc.)
  23. 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. 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. 25. Techniques de web design<br />
  26. 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. 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. 28. Web Design : Golden ratio<br />Exemplesthéoriques :<br />
  29. 29. Web Design : Golden ratio<br />Exempleconcret :<br />
  30. 30. Web design : symétrie et asymétrie<br />Exemples de sites baséssur des design symétriques<br />
  31. 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. 32. Web design : Typographie<br />Exemples de sites baséssur la typographie<br />
  33. 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. 34. Web design : couleurs<br />Exemples de design bâtiautour de la colorimétrie<br />
  35. 35. Web design : La profondeur<br />Donner de la profondeur = Mode de la “3D”<br />
  36. 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. 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. 38. Web design : Grid design<br />Exemple : 960 Grid design<br />
  39. 39. Web design : Grid design<br />Exemple de réalisationsbaséessur des grilles<br />
  40. 40. Web design : Creative Layout<br />Creative Layout = Design originaux<br />Design originaux = Pas de normeparticulière<br />Sortir du lot !<br />
  41. 41. Creative Layout : Exemples<br />
  42. 42. Design mobiles<br />
  43. 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. 44. Responsive design ?<br />
  45. 45. Non : Juste un Design “Switchy” <br />
  46. 46. Exemple de Design Flexible<br />
  47. 47. Conclusion<br />
  48. 48. Temps – Budget - Qualité<br />
  49. 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 />

×