Bonnes pratiques duWebdesignRencontre Tisserands – 17 mars 2012                               Aldric de Villartay
Présentation  Aldric de Villartay     Responsable des développements web à la CEF      depuis le 1er mars.     Membre de...
Plan      Introduction      Les 3 règles du webdesign      Hiérarchie visuelle      Personnalité du site      Les bon...
Introduction                   Un site web                       =     du code   +   un design     +   du contenu
Une alchimie          Fonctionnalités    *         graphisme                       * Un bon site
Allégorie de la maison
Un site web attrayant
Un autre moins !
Les 3 règles du webdesign
3 Règles  1. Rendez votre site facile à lire :     › Considérez les couleurs des textes et les       arrières plan avec at...
3 Règles  2. Rendez votre site facile à naviguer     › Pensez à votre public cible.     › Les liens doivent être clairs et...
3 Règles  3. Rendez votre site cohérent     › Garder un cohérence entre les polices,       images et couleurs utilisées.  ...
Hiérarchie visuelle
Hiérarchie visuelle   Voilà ce que l’on croit...
Hiérarchie visuelle   Et la réalité ...
Hiérarchie visuelle     Créez un centre d’intérêt qui attire      l’attention.     Créez ordre et équilibre.     Attent...
Personnalité du site
Créer une personnalité     Pour ?      › Être reconnu      › Faire la différence      › Donner de l’unité à votre site   ...
Créer une personnalité     Comment ?      › Couleurs      › Typo (espaces, style, taille)      › Images      › Formes    ...
Les bonnes pratiques Niveau 1 ► à vérifier en premier Niveau 2 ► à vérifier ensuite
Bonnes pratiquesGraphisme        La charte graphique est cohérente sur         lensemble du site. (n1)        Les conten...
Bonnes pratiquesTypographie         On privilégiera des familles de polices          standards (n1)         Le nombre de...
Bonnes pratiquesContenus        Le titre de chaque page permet didentifier         son contenu. (n1)        Le titre de ...
Bonnes pratiquesLiens hypertexte        Le soulignement est réservé aux liens. (n1)        Ou : Les liens sont visuellem...
Bonnes pratiquesNavigation        Un plan du site est accessible depuis         chaque page. (n1)        Chaque page aff...
Bonnes pratiquesImages        Les dimensions réelles des images sont         indiquées dans le code source. (n1)        ...
Bonnes pratiquesMultimédia        Les sons et vidéos sont déclenchés par         lutilisateur. (n1)        Les animation...
Bonnes pratiquesFormulaires        Létiquette de chaque champ de formulaire         indique si la saisie est obligatoire....
Bonnes pratiquesIdentification        Lidentité de lauteur, de la société ou de         lorganisation est indiquée. (n1) ...
Quelques détails
Le graphismeLayout     Squelette du site     Pourcentages ou taille fixe ?     Compatibilité des résolutions : 980px ! ...
Le graphismeLayout         layout > fonds > couleurs > html/CSS >JavaScript
Le graphismeLes fonds      Fond uni      Dégradé      Texture      Images            layout > fonds > couleurs > html/...
Le graphismeLes couleurs                         http://www.colourlovers.com/                         http://kuler.adobe.c...
Technos webHtml / CSS      Séparer le fond de la forme      Mises en pages précises et soignées      Standard web     ...
Technos webJavaScript      Améliore l’expérience utilisateur :       › Effets de transitions et de fondu       › Actions ...
Merci
Prochain SlideShare
Chargement dans…5
×

Webdesign aldricde villartay

955 vues

Publié le

Bonnes pratiques du webdesign par Aldric de Villartay pour la rencontre des Tisserands 2012 à la Conférence des Evêques de France.

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

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
955
Sur SlideShare
0
Issues des intégrations
0
Intégrations
18
Actions
Partages
0
Téléchargements
25
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Webdesign aldricde villartay

  1. 1. Bonnes pratiques duWebdesignRencontre Tisserands – 17 mars 2012 Aldric de Villartay
  2. 2. Présentation Aldric de Villartay  Responsable des développements web à la CEF depuis le 1er mars.  Membre de Technologiae  Porfolio : www.tonegraphics.com Parcours :  2010-2011 : Master I Chef de projet multimédia en alternance  2009- 2010 : Licence Pro Concepteur Intégrateur Web et Multimédia  2007 – 2009 : IUT Services et Réseaux de Communication
  3. 3. Plan  Introduction  Les 3 règles du webdesign  Hiérarchie visuelle  Personnalité du site  Les bonnes pratiques  Quelques détails supplémentaires
  4. 4. Introduction Un site web = du code + un design + du contenu
  5. 5. Une alchimie Fonctionnalités * graphisme * Un bon site
  6. 6. Allégorie de la maison
  7. 7. Un site web attrayant
  8. 8. Un autre moins !
  9. 9. Les 3 règles du webdesign
  10. 10. 3 Règles 1. Rendez votre site facile à lire : › Considérez les couleurs des textes et les arrières plan avec attention. › Ne pas utiliser de fonds flashy. › Utilisez des bons contrastes de couleurs. › Certaines polices sont plus lisibles que d’autres.
  11. 11. 3 Règles 2. Rendez votre site facile à naviguer › Pensez à votre public cible. › Les liens doivent être clairs et faciles à trouver. › Savoir où l’on est et où l’on va.
  12. 12. 3 Règles 3. Rendez votre site cohérent › Garder un cohérence entre les polices, images et couleurs utilisées. › Uniformité.
  13. 13. Hiérarchie visuelle
  14. 14. Hiérarchie visuelle Voilà ce que l’on croit...
  15. 15. Hiérarchie visuelle Et la réalité ...
  16. 16. Hiérarchie visuelle  Créez un centre d’intérêt qui attire l’attention.  Créez ordre et équilibre.  Attention à la quantité d’informations.
  17. 17. Personnalité du site
  18. 18. Créer une personnalité  Pour ? › Être reconnu › Faire la différence › Donner de l’unité à votre site › Donner envie d’engager le dialogue
  19. 19. Créer une personnalité  Comment ? › Couleurs › Typo (espaces, style, taille) › Images › Formes › Textures (sensation tactile)
  20. 20. Les bonnes pratiques Niveau 1 ► à vérifier en premier Niveau 2 ► à vérifier ensuite
  21. 21. Bonnes pratiquesGraphisme  La charte graphique est cohérente sur lensemble du site. (n1)  Les contenus sont présentés avec un contraste suffisant par rapport à leur arrière-plan. (n1)  Le site propose une ou plusieurs feuilles de style dédiées (web, print, mobile) (n2)graphisme > typographie > contenus > liens > navigation > images > multimedia > formulaires > identification
  22. 22. Bonnes pratiquesTypographie  On privilégiera des familles de polices standards (n1)  Le nombre de polices utilisées sur le site doit être inférieur ou égal à trois (n1)  Pour utiliser des polices spéciales, on aura recours à Google webfont (n2)graphisme > typographie > contenus > liens > navigation > images > multimedia > formulaires > identification
  23. 23. Bonnes pratiquesContenus  Le titre de chaque page permet didentifier son contenu. (n1)  Le titre de chaque page permet didentifier le site. (n1)  Le contenu de chaque page du site ne comporte pas de faute dorthographe. (n1)  Un lexique ou un glossaire adapté au public visé explique le vocabulaire sectoriel ou technique. (n2)graphisme > typographie > contenus > liens > navigation > images > multimedia > formulaires > identification
  24. 24. Bonnes pratiquesLiens hypertexte  Le soulignement est réservé aux liens. (n1)  Ou : Les liens sont visuellement différenciés du reste du contenu. (n1)  Dans le cas d’un menu déroulant, on fera attention à la forme du curseur (text vs pointer). (n2)  Chaque lien est doté dun intitulé dans le code source (balise title). (n2)  Les liens consécutifs sont séparés visuellement. (n2)graphisme > typographie > contenus > liens > navigation > images > multimedia > formulaires > identification
  25. 25. Bonnes pratiquesNavigation  Un plan du site est accessible depuis chaque page. (n1)  Chaque page affiche une information permettant de connaître son emplacement dans larborescence du site (fil d’Ariane). (n1)  Les icônes de navigation sont accompagnées dune légende. (n2)graphisme > typographie > contenus > liens > navigation > images > multimedia > formulaires > identification
  26. 26. Bonnes pratiquesImages  Les dimensions réelles des images sont indiquées dans le code source. (n1)  On prêtera une attention particulière à la qualité des photos. (n1)  Les vignettes ne sont pas des images de taille supérieure redimensionnées côté client. (n2)graphisme > typographie > contenus > liens > navigation > images > multimedia > formulaires > identification
  27. 27. Bonnes pratiquesMultimédia  Les sons et vidéos sont déclenchés par lutilisateur. (n1)  Les animations, sons et clignotements peuvent être mis en pause. (n1)graphisme > typographie > contenus > liens > navigation > images > multimedia > formulaires > identification
  28. 28. Bonnes pratiquesFormulaires  Létiquette de chaque champ de formulaire indique si la saisie est obligatoire. (n1)  Dans certains champs on précisera bien le format de saisie. (n1)  Les processus complexes sont accompagnés de la liste de leurs étapes. (n2)  Létape en cours dun processus complexe est indiquée. (n2)graphisme > typographie > contenus > liens > navigation > images > multimedia > formulaires > identification
  29. 29. Bonnes pratiquesIdentification  Lidentité de lauteur, de la société ou de lorganisation est indiquée. (n1)  Le nom du site et/ou le nom de lauteur sont indiqués sur chaque page. (n1)  La page daccueil expose la nature des contenus et services proposés. (n1)graphisme > typographie > contenus > liens > navigation > images > multimedia > formulaires > identification
  30. 30. Quelques détails
  31. 31. Le graphismeLayout  Squelette du site  Pourcentages ou taille fixe ?  Compatibilité des résolutions : 980px ! layout > fonds > couleurs > html/CSS >JavaScript
  32. 32. Le graphismeLayout layout > fonds > couleurs > html/CSS >JavaScript
  33. 33. Le graphismeLes fonds  Fond uni  Dégradé  Texture  Images layout > fonds > couleurs > html/CSS >JavaScript
  34. 34. Le graphismeLes couleurs http://www.colourlovers.com/ http://kuler.adobe.com/ layout > fonds > couleurs > html/CSS >JavaScript
  35. 35. Technos webHtml / CSS  Séparer le fond de la forme  Mises en pages précises et soignées  Standard web  Adapté aux différents médias layout > fonds > couleurs > html/CSS >JavaScript
  36. 36. Technos webJavaScript  Améliore l’expérience utilisateur : › Effets de transitions et de fondu › Actions sur les champs de texte › Applications web avancées  Librairies : › jQuery (70%) › MooTools (15%) layout > fonds > couleurs > html/CSS >JavaScript
  37. 37. Merci

×