• Save
Atelier Bonnes pratiques du Webdesign - 13ème rencontre des Tisserands - 7 avril 2013
Upcoming SlideShare
Loading in...5
×
 

Atelier Bonnes pratiques du Webdesign - 13ème rencontre des Tisserands - 7 avril 2013

on

  • 400 views

 

Statistics

Views

Total Views
400
Views on SlideShare
356
Embed Views
44

Actions

Likes
0
Downloads
0
Comments
0

1 Embed 44

http://groupe.tisserands.cef.fr 44

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Atelier Bonnes pratiques du Webdesign - 13ème rencontre des Tisserands - 7 avril 2013 Atelier Bonnes pratiques du Webdesign - 13ème rencontre des Tisserands - 7 avril 2013 Presentation Transcript

  • Webdesign~ Les bonnes pratiques ~07/04/2013 1
  • Définition● Organisation d’un site Architecture générale Organisation des pages (arborescence / navigation)● Remarques Ne pas chercher l’originalité Attention aux différents navigateurs ! Attention aux bugs ! (http://autun.catholique.fr/actualite.html) Simplifier au maximum la navigationIntroduction07/04/2013 2
  • Introduction07/04/2013 3
  • Textes● Police Usuelle (reconnue par tous les ordinateurs) Assez grande pour être lisible● Textes Fond clair, lettre foncées (blanc et noir / gris foncé) Ne pas souligner (pour les liens)● Paragraphes Largeur : 10-15 cm (trop long sur une ligne = non lisible)I. Eléments de base07/04/2013 4
  • Contenus● Images A utiliser (mais pas seule ; au moins une image par article) Pour attirer l’œil, aiguiser la curiosité● Vidéos Peuvent être publiées seules En page d’accueil (http://www.diocese-saintetienne.fr/) Elles attirent ! N’hésitez pas à reprendre les vidéos KTO !● Utiliser les supports connus YouTube et Dailymotion pour les vidéos (ex. KTO : YouTube, grosavantage pour le référencement et le nombre de vues) Flickr pour les imagesI. Eléments de base07/04/2013 5
  • Couleurs (1/4)● Ne pas multiplier les couleurs ! Importance de la charte graphique● Les utiliser de façon logique Liens / titres Couleur de fond correspond à un contenu(≠ http://gve.cef.fr) Une couleur par catégorie : ok, mais les partiesdoivent être bien différentesI. Eléments de base07/04/2013 6
  • Couleurs (1/3)I. Eléments de base07/04/2013 7
  • I. Eléments de base07/04/2013 8
  • Couleurs (2/4)● 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.comI. Eléments de base07/04/2013 9
  • Couleurs (3/4)● http://pourpre.com/colordbI. Eléments de base07/04/2013 10
  • Couleurs (4/4)● http://colorschemedesigner.comI. Eléments de base07/04/2013 11
  • Ce qui se fait en matière de design● Textes Par blocs (≠ http://www.corse.catholique.fr/spip.php)● Bordures Peu utilisées (datées) Même couleur que le fond, en + clair ou +foncé, bords arrondis (≠ http://polefontainebleau.catholique.fr/)● Ombres Très utilisées, font modernes ! Doivent être discrètes, dans les gris sans tirer vers lenoir (http://www.diocese-saintetienne.fr/)I. Eléments de base07/04/2013 12
  • I. Eléments de base07/04/2013 13
  • I. Eléments de base07/04/2013 14
  • I. Eléments de base07/04/2013 15
  • Présentation d’une page (1/3)● Toujours la même présentation Bandeau (Image avec logo, catégories. Pastrop grand !) Barre(s) latérale(s) (une ou deux, avec leswidgets) Pied de page (entrées transversales, plan dusite…)● Exception possible pour la page d’accueil Mais elle doit reprendre le design généralII. Organisation d’une page07/04/2013 16
  • Présentation d’une page (2/3)● Balayage L’internaute s’arrête sur les éléments qui attirentl’œil (images, titres) Ne lit pas un long texte Importance des titres (pertinents / précis) Utilisation d’images / schémas Paragraphes à pucesII. Organisation d’une page07/04/2013 17
  • Présentation d’une page (3/3)● Eye tracking Comment l’internaute lit une pageII. Organisation d’une page07/04/2013 18
  • Gadgets et widgets● Bien les sélectionner, surabondance nuisible● A garder : Barres de recherche Boutons réseaux sociaux● A oublier : Compteurs AnimationsII. Organisation d’une page07/04/2013 19
  • 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 avec les sous-catégories Orienter le choix de l’internaute, pas le complexifier L’internaute doit avoir l’impression de s’y retrouverfacilement !III. Organisation du site07/04/2013 20
  • Catégories ou pages ?● Catégories Regroupent des articles appelés à se renouveler Date de publication importante De type blogs : rangés par date, mise à jourrégulière, sous-catégories possibles Exemples : Actualités, Editoriaux…● Pages Indépendantes Changent peu Souvent entrées transversalesIII. Organisation du site07/04/2013 21
  • Catégories et pages● Importance des titres● Pages : les incontournables A propos (l’internaute doit savoir qui fait ce site, son but) Contact Recherche Horaires (pour une paroisse, un sanctuaire…) Venir (pour une paroisse, un sanctuaire…)● En pied de page Mentions légales Éventuellement PresseIII. Organisation du site07/04/2013 22
  • Référencement● Important dès le Webdesign !● Ecriture d’URL Avec les titres des articles / pages, mots-clés Exemple : KTO (http://www.ktotv.com/videos-chretiennes/emissions/a-la-source-loi-taubira,-allocations-familiales,-et-l-actu-de-la-semaine/00075141)● Lier les articles entre eux Onglet + sur les vidéos KTO● Lier à d’autres sitesIII. Organisation du site07/04/2013 23
  • Contact● Jean-Bastien Prévots Webmestre webmestre@ktotv.com 01 73 02 22 4507/04/2013