~ Les bonnes pratiques ~ Webdesign ~ Les bonnes pratiques ~

Définition Organisation d’un site Remarques Introduction Architecture générale Organisation des pages (arborescence / navitation) Remarques Ne pas chercher l’originalité Simplifier au maximum la navigation

Textes Police Textes Paragraphes I. Eléments de base Usuelle (reconnue par tous les ordinateurs) Assez grande pour être lisible Textes Fond clair, lettre foncées (noir / gris foncé et blanc) Ne pas souligner (pour les liens) Paragraphes Largeur : 10 – 15 cm (trop long ou trop court sur une ligne = non lisible)

Contenus Images Vidéos Utiliser les supports connus I. Eléments de base Contenus Images A utiliser (au moins une image par article) ! qualité minimale… Pour attirer l’œil, aiguiser la curiosité Vidéos Peuvent être publiées seules Utiliser les supports connus YouTube et Dailymotion pour les vidéos Flickr pour les images

Couleurs (1/3) Ne pas multiplier les couleurs ! I. Eléments de base Couleurs (1/3) Ne pas multiplier les couleurs ! Importance de la charte graphique Les utiliser de façon logique Liens / titres Outils Couleurs : http://www.code-couleur.com/ Complémentaires : http://pourpre.com/colordb Associations « en direct » : http://www.yoyodesign.org/outils/ncolor/ncolor.php?langue=fr Contrastes : http://www.snook.ca/technical/colour_contrast/colour.html Tester : http://colorschemedesigner.com

I. Eléments de base Couleurs (2/3) http://pourpre.com/colordb

I. Eléments de base Couleurs (3/3) http://colorschemedesigner.com

Présentation d’une page (1/3) II. Organisation d’une page Présentation d’une page (1/3) Toujours la même présentation Bandeau (image avec logo, catégories) Barre(s) latérale(s) (une ou deux, avec les widgets) Pied de page (entrées transversales) Exception possible pour la page d’accueil Mais elle doit reprendre le design général

Présentation d’une page (2/3) II. Organisation d’une page Présentation d’une page (2/3) Balayage L’internaute s’arrête sur les éléments qui attirent l’œil (images, titres) Ne lit pas un long texte Importance des titres (pertinents / précis) Utilisation d’images / schémas Paragraphes à puces

Présentation d’une page (3/3) II. Organisation d’une page Présentation d’une page (3/3) Eye tracking Comment l’internaute lit une page

Gadgets et widgets Bien les sélectionner, surabondance nuisible II. Organisation d’une page Gadgets et widgets Bien les sélectionner, surabondance nuisible A garder : Barres de recherche Boutons réseaux sociaux A oublier : Compteurs Animations

Arborescence Règle des trois clics Limiter les choix III. Organisation du site Arborescence Règle des trois clics Pas plus de trois clics pour arriver quelque part Plus considérée comme une règle absolue Limiter les choix Eviter la surabondance de liens Trop de choix nuit à la lisibilité Menus déroulant qui font apparaître les sous-catégories Orienter le choix de l’internaute, pas le complexifier L’internaute doit avoir l’impression de s’y retrouver facilement !

Catégories ou pages ? Catégories Pages III. Organisation du site Regroupe des articles appelés à se renouveler Date de publication importante De type blogs : rangés par date, mise à jour régulière, sous-catégories possibles Exemples : Actualités, Editoriaux… Pages Indépendantes Changent peu Souvent entrées transversales

Catégories et pages Importance des titres Pages : les incontournables III. Organisation du site Catégories et pages Importance des titres Pages : les incontournables A propos (l’internaute doit savoir qui fait ce site, son but) Horaires (pour une paroisse, un sanctuaire…) Venir

Référencement Important dès le Webdesign ! Ecriture d’URL III. Organisation du site Référencement Important dès le Webdesign ! Ecriture d’URL Avec les titres des articles Lier les articles entre eux Lier à d’autres sites