@ Brest

Relier et partager autour du web

Doc@brest : Retour sur les ateliers de webdesign (mars 2014)

Compte-rendu des deux ateliers « webdesign pour les nuls » (salle de formation de l’UBO) – 20 et 27 mars 2014

Les deux ateliers web design, qui se sont tenus dans la salle de formation de la bibliothèque (avecnue 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 webdesign 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 webdesign 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.

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).
• Ecriture 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
o Bien équilibrer la page : il faut mettre les infos essentielles au-dessus de la ligne de flottaison pour chaque page.
o Prévoir des colonnes (15 à 18 caractères par colonne, selon la police).
o Toujours utiliser des polices lisibles, classiques.
o Utiliser abondamment les différents niveaux de titres (H2 à H4)
o Aligner le texte à gauche.
o Jamais de texte en majuscules.
o User et abuser des listes à puces.
o 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.
o Nombre d’or : 1/3 – 2/3
o 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.
o bien optimiser le poids des images

Le site de la bibliothèque http://ubodoc.univ-brest.fr/


Via un article de stephanie Corfec - adeupa, publié le 4 avril 2014
©© a-brest, article sous licence creative common info
flickr
Rentrée des élèves-ingénieurs en alternance, promotion 2019
par Telecom Bretagne
Creative Commons BY-NC-SA