webdesign ~ les bonnes pratiques ~. définition organisation dun site architecture générale...

Webdesign~ Les bonnes pratiques ~

Définition• Organisation d’un site

Architecture généraleOrganisation des pages (arborescence /

navitation)

• RemarquesNe pas chercher l’originalitéSimplifier au maximum la navigation

Introduction

Textes• Police

Usuelle (reconnue par tous les ordinateurs)

Assez grande pour être lisible

• TextesFond clair, lettre foncées (noir / gris foncé et

blanc)Ne pas souligner (pour les liens)

• ParagraphesLargeur : 10 – 15 cm (trop long ou trop court

sur une ligne = non lisible)

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éosPeuvent être publiées seules

• Utiliser les supports connusYouTube et Dailymotion pour les vidéosFlickr pour les images

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

I. Eléments de base

Présentation d’une page (1/3)

• Toujours la même présentationBandeau (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’accueilMais elle doit reprendre le design général

II. Organisation d’une page

Présentation d’une page (2/3)

• BalayageL’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émasParagraphes à puces

II. Organisation d’une page

Présentation d’une page (3/3)

• Eye trackingComment l’internaute lit une page

II. Organisation d’une page

Gadgets et widgets• Bien les sélectionner, surabondance

nuisible• A garder :

Barres de rechercheBoutons réseaux sociaux

• A oublier :CompteursAnimations

II. Organisation d’une page

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 !

III. Organisation du site

Catégories ou pages ?• Catégories

Regroupe des articles appelés à se renouvelerDate de publication importanteDe type blogs : rangés par date, mise à jour

régulière, sous-catégories possibles Exemples : Actualités, Editoriaux…

• Pages IndépendantesChangent peuSouvent entrées transversales

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

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

III. Organisation du site