1 / 15

Webdesign

Webdesign. ~ Les bonnes pratiques ~. Introduction. Définition. Organisation d’un site Architecture générale Organisation des pages (arborescence / navitation) Remarques Ne pas chercher l’originalité Simplifier au maximum la navigation. I. Eléments de base. Textes. Police

declan
Download Presentation

Webdesign

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Webdesign ~ Les bonnes pratiques ~

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

  3. I. Eléments de base Textes • Police • 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. 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. 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

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

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

  8. 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. 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. II. Organisation d’une page Présentation d’une page (3/3) • Eyetracking • Comment l’internaute lit une page

  11. 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. 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. III. Organisation du site Catégories ou pages ? • Catégories • 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. 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. 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

More Related