Web Design<br />Web Design<br />Support par<br />
Web Design ?<br />Web Design = Conception d’interfaces web :<br />Architecture (squelette) & Interactions<br />Organisatio...
Des compétences ?<br />Le Web Design réclame avant tout :<br />Sens de l’ergonomie<br />Application des techniques de Desi...
Le processuscréatif<br />
Le processuscréatif<br />Le briefing créatif<br />Les couleurs<br />La chartegraphique<br />Les mood board<br />Le zoning ...
Le processus créatif<br />Créatif ?<br />Design organisé<br />
Le processuscréatif: BriéfingCréatif<br />1 : Définir<br />2 : Affiner<br />3 : Cerner<br />
Le processuscréatif : Les couleurs<br />Pas plus de 3 couleurs en général<br />Rouechromatique :<br />Complémentarité (opp...
Le processuscréatif : Chartegraphique<br />Codes couleurs& Principales Typographies<br />
Le processuscréatif : Les mood board<br />Mood Board (ou planches d’inspiration) = Compilation de différentes sources d’in...
Le processuscréatif : Collage Mood Board<br />Exemple : Futur site e-commerce d’articles pour bébés<br />
Le processuscréatif : Template Mood Board<br />Exemple : Futur site e-commerce d’articles pour bébés<br />
Le processuscreatif: Zoning Template<br />Zoning Template = Définir les principales zones d’interface et leurs impacts vis...
Le processuscreatif: Les wireframes<br />… ou mockups<br />Maquettes de zones plus détaillées avec l’inclusiond’informatio...
Le processuscréatif: Les wireframes<br />
Le processuscréatif : Les bruts (“ROUGH”)<br />Pas réellementune technique maisunepratiquequel’onpeutrencontrer<br />Trava...
Le processuscréatif : Exemple de “Rough”<br />
Le processuscréatif : Les maquettes<br />Ultimeétapeavant le développement<br />
Le processuscreatif : Les maquettes<br />
La charte web<br />
Composition d’unecharte web<br />Qu’est-cequ’unecharte web ? :<br /><ul><li>Chartegraphique
Réglesd’écriture et typographiques (Web font stack, Titres, etc.)
Iconographie, Sets de boutonsàétats et design des principauxélémentsd’interface (Menus, Onglets, Blocs, etc.)</li></li></u...
Charte web : favicon<br />La favicon estl’icôneprésentedans les onglets des navigateurs web :<br /><ul><li>Il s’agit en ré...
Techniques de web design<br />
Principales techniques de web design<br />Les grid system<br />Golden ratio<br />Rouechromatique<br />Symétrie<br />Typogr...
Web design : golden ratio<br />Golden ratio = 1.62 (arrondi)<br />Utilisédepuis des siècles (parthenon, joconde, etc.)<br ...
Web Design : Golden ratio<br />Exemplesthéoriques :<br />
Web Design : Golden ratio<br />Exempleconcret :<br />
Web design : symétrie et asymétrie<br />Exemples de sites baséssur des design symétriques<br />
Web design : Typographie<br />Les sites focalisantsur les techniques / jeuxtypographiquessonttrèsà la mode.<br />Il s’agit...
Web design : Typographie<br />Exemples de sites baséssur la typographie<br />
Web design : couleurs<br />Blanc / noir : Couleursintemporelles<br />Couleurs “à la mode” en fonction des périodes (attent...
Web design : couleurs<br />Exemples de design bâtiautour de la colorimétrie<br />
Web design : La profondeur<br />Donner de la profondeur = Mode de la “3D”<br />
Web design : Larges fonds photo<br />Grâce aux nouvelles technologies (CSS3) ce type de design prendaujourd’hui de l’ample...
Web Design : Grid Design<br />Les “Grid Design” sont des représentationsstatiquesd’espacements “idéaux” en fonctiond’unela...
Web design : Grid design<br />Exemple : 960 Grid design<br />
Web design : Grid design<br />Exemple de réalisationsbaséessur des grilles<br />
Web design : Creative Layout<br />Creative Layout = Design originaux<br />Design originaux = Pas de normeparticulière<br /...
Creative Layout : Exemples<br />
Design mobiles<br />
Responsive Web Design<br />Unegrille flexible<br />Des images flexibles(ou plus exactement des images qui s’adaptentdans u...
Responsive design ?<br />
Non : Juste un Design “Switchy” <br />
Exemple de Design Flexible<br />
Conclusion<br />
Temps – Budget - Qualité<br />
Outilspratiques<br />Rouechromatique interactive :<br />http://colorschemedesigner.com/<br />960 HTML Grid System<br />htt...
Prochain SlideShare
Chargement dans…5
×

Présentation web design

3 354 vues

Publié le

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

Publié dans : Design
0 commentaire
3 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
3 354
Sur SlideShare
0
Issues des intégrations
0
Intégrations
143
Actions
Partages
0
Téléchargements
76
Commentaires
0
J’aime
3
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

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

×