~ Les bonnes pratiques ~

Présentation au sujet: "~ Les bonnes pratiques ~"— Transcription de la présentation:

1 ~ Les bonnes pratiques ~
Webdesign ~ Les bonnes pratiques ~

2 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

3 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)

4 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

5 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 : Complémentaires : Associations « en direct » : Contrastes : Tester :

6 I. Eléments de base Couleurs (2/3)

7 I. Eléments de base Couleurs (3/3)

8 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

9 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

10 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

11 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

12 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 !

13 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

14 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

15 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