webdesign ~ les bonnes pratiques ~. définition organisation dun site architecture générale...
TRANSCRIPT
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 (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