Webdesign
description
Transcript of Webdesign
![Page 1: Webdesign](https://reader035.fdocuments.net/reader035/viewer/2022062520/568163a0550346895dd49c69/html5/thumbnails/1.jpg)
Webdesign~ Les bonnes pratiques ~
![Page 2: Webdesign](https://reader035.fdocuments.net/reader035/viewer/2022062520/568163a0550346895dd49c69/html5/thumbnails/2.jpg)
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
![Page 3: Webdesign](https://reader035.fdocuments.net/reader035/viewer/2022062520/568163a0550346895dd49c69/html5/thumbnails/3.jpg)
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
![Page 4: Webdesign](https://reader035.fdocuments.net/reader035/viewer/2022062520/568163a0550346895dd49c69/html5/thumbnails/4.jpg)
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
![Page 5: Webdesign](https://reader035.fdocuments.net/reader035/viewer/2022062520/568163a0550346895dd49c69/html5/thumbnails/5.jpg)
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
![Page 7: Webdesign](https://reader035.fdocuments.net/reader035/viewer/2022062520/568163a0550346895dd49c69/html5/thumbnails/7.jpg)
Couleurs (3/3)
• http://colorschemedesigner.com
I. Eléments de base
![Page 8: Webdesign](https://reader035.fdocuments.net/reader035/viewer/2022062520/568163a0550346895dd49c69/html5/thumbnails/8.jpg)
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
![Page 9: Webdesign](https://reader035.fdocuments.net/reader035/viewer/2022062520/568163a0550346895dd49c69/html5/thumbnails/9.jpg)
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
![Page 10: Webdesign](https://reader035.fdocuments.net/reader035/viewer/2022062520/568163a0550346895dd49c69/html5/thumbnails/10.jpg)
Présentation d’une page (3/3)
• Eye trackingComment l’internaute lit une page
II. Organisation d’une page
![Page 11: Webdesign](https://reader035.fdocuments.net/reader035/viewer/2022062520/568163a0550346895dd49c69/html5/thumbnails/11.jpg)
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
![Page 12: Webdesign](https://reader035.fdocuments.net/reader035/viewer/2022062520/568163a0550346895dd49c69/html5/thumbnails/12.jpg)
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
![Page 13: Webdesign](https://reader035.fdocuments.net/reader035/viewer/2022062520/568163a0550346895dd49c69/html5/thumbnails/13.jpg)
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
![Page 14: Webdesign](https://reader035.fdocuments.net/reader035/viewer/2022062520/568163a0550346895dd49c69/html5/thumbnails/14.jpg)
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
![Page 15: Webdesign](https://reader035.fdocuments.net/reader035/viewer/2022062520/568163a0550346895dd49c69/html5/thumbnails/15.jpg)
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