webdesign n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Webdesign PowerPoint Presentation
Download Presentation
Webdesign

Loading in 2 Seconds...

play fullscreen
1 / 15

Webdesign - PowerPoint PPT Presentation


  • 156 Views
  • Uploaded on

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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
webdesign

Webdesign

~ Les bonnes pratiques ~

d finition
IntroductionDé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
textes
I. Eléments de baseTextes
  • 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)
contenus
I. Eléments de baseContenus
  • 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
couleurs 1 3
I. Eléments de baseCouleurs (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
couleurs 2 3
I. Eléments de baseCouleurs (2/3)
  • http://pourpre.com/colordb
couleurs 3 3
I. Eléments de baseCouleurs (3/3)
  • http://colorschemedesigner.com
pr sentation d une page 1 3
II. Organisation d’une pagePré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
pr sentation d une page 2 3
II. Organisation d’une pagePré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
pr sentation d une page 3 3
II. Organisation d’une pagePrésentation d’une page (3/3)
  • Eyetracking
    • Comment l’internaute lit une page
gadgets et widgets
II. Organisation d’une pageGadgets et widgets
  • Bien les sélectionner, surabondance nuisible
  • A garder :
    • Barres de recherche
    • Boutons réseaux sociaux
  • A oublier :
    • Compteurs
    • Animations
arborescence
III. Organisation du siteArborescence
  • 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 !
cat gories ou pages
III. Organisation du siteCaté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
cat gories et pages
III. Organisation du siteCaté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
r f rencement
III. Organisation du siteRéférencement
  • Important dès le Webdesign !
  • Ecriture d’URL
    • Avec les titres des articles
  • Lier les articles entre eux
  • Lier à d’autres sites