Retour sur les ateliers « web design »

Compte-rendu des deux ateliers « web design pour les nuls » – 20 et 27 mars 2014

Les deux ateliers web design, qui se sont tenus dans la salle de formation de la Bibliothèque de Lettres (avenue Foch à Brest) ont rassemblé une dizaine de participants à chaque fois. André Jestin (bibliothécaire à l’UBO) nous a présenté en deux cessions toutes les bases du web design et aussi des pistes pour aller plus loin …Merci encore à lui pour la qualité de ses deux ateliers, et aux participants pour leur enthousiasme et leurs interventions!

participants de l'atelier webdesign

Le web design est souvent confondu à tort avec la seule création graphique, à l’originalité et à l’esthétisme du site…
Principe de base du web design  : un bon site est un site simple, fonctionnel, sobre, épuré. « Design is not just what it looks like and feels like. Design is how it works (Steve Jobs) »

Simplicité et cohérence du site :

  •  Il faut simplifier le site, ne pas se noyer dans les détails.

“Library websites should be smaller” / “the benefits of less = less is more” : Ce n’est pas parce que c’est possible techniquement qu’il faut le faire!

  •  Il faut une cohérence d’ensemble du site, une simplicité, une uniformité de l’architecture du site en travaillant en priorité son architecture, le contenu puis le design en dernier.

Exemple : Le menu doit toujours être à la même place.

less_is_more

Contenu de qualité :

  • Veiller à la qualité du contenu « Always check the content first » ; et bien structurer l’information, par exemple avec la méthode des post-it (énumérer les pages du site, puis les catégoriser, et enfin les structurer).
  • Écriture web : pyramide inversée ou entonnoir : commencez par la conclusion. Une idée par paragraphe.

Gestion de projet collaboratif, agile :

  • « Projet agile » : on tente, on expérimente…  S’accorder le droit à l’erreur, tester, et faire évoluer le site d’après les retours des utilisateurs. C’est plus long, plus coûteux mais au final ça marche.

Usabilité : faire tester le site par des utilisateurs, avec des ordinateurs et des smartphones.

  • Il faut toujours se mettre à la place de l’internaute (exemple : pour les formulaires de demandes « call to action ») : le site est pour l’usager, pas pour nous !
  • Veiller au temps de chargement. Optimiser le poids des images. 600 à 700px : ça suffit pour prendre à peu près toute la place.
  • Le site doit être responsif : «responsive design» (adapté à tous les supports, mobiles en priorité).
  • « Mobile first » ! : le site doit être développé en priorité pour les mobiles avant de penser au PC ou même aux tablettes. On pense à mettre les infos prioritaires en haut. En-dessous d’une certaine taille d’écran, les images ne sont pas affichées.

Mise en page soignée : indispensable pour la lisibilité, l’accessibilité et le référencement

  • Bien équilibrer la page : il faut mettre les infos essentielles au-dessus de la ligne de flottaison pour chaque page.
  • Prévoir des colonnes (15 à 18 caractères par colonne, selon la police).
  • Toujours utiliser des polices lisibles, classiques.
  • Utiliser abondamment les différents niveaux de titres (H2 à H4)
  • Aligner le texte à gauche.
  • Jamais de texte en majuscules.
  • User et abuser des listes à puces.
  • Ne pas hésiter à bien aérer le texte, à laisser du blanc, de l’espace pour faciliter la lecture. Travailler le contraste, l’harmonie des couleurs.
  • Nombre d’or : 1/3 – 2/3.
  • Bien renseigner la balise ALT (image) : il faut toujours mettre du texte alternatif descriptif. Titre compréhensible par l’humain (non voyant) et par les moteurs de recherche.
  • Bien optimiser le poids des images

Le site des bibliothèques de l’UBO (qui a servi de référence pour l’atelier) : http://ubodoc.univ-brest.fr/

steeve_jobs

Publicités

Poster un commentaire

Classé dans Retour sur

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s