Parmi les premières échéances importantes de la formation à l’intégration web où je me trouve actuellement, figure le « projet individuel« . Il s’agit de réaliser un petit site web, accompagné d’un print (affiche, flyer, autocollant, tee-shirt… au choix), et d’un texte d’une page maximum justifiant nos choix en termes de design, de charte graphique et d’ergonomie. Le site doit également comprendre une petite vidéo, de 30 secondes à une minute, et au moins un effet JQuery. Le thème 2016 est suffisamment vague pour laisser libre court à la créativité : « l’Asie »!
Barème sur 20 :
- Fichier justificatif : 2 points
- Print : 3
- HTML/CSS/JQuery : 6
- Web design / ergonomie : 4
- Responsive : 3
- Vidéo : 2
La note de ce projet individuel compte pour 10% du global de la formation. L’idée est de synthétiser ce qui aura été vu sur un mois et demi (entre la rentrée du 24 août et le jour du rendu, le 17 octobre prochain) :
- Graphisme (Photoshop, Illustrator)
- Montage vidéo (Adobe Première)
- Intégration HTML/CSS/Javascript
L’objet de ce billet n’est pas d’insister sur la technicité (réelle) de nos apprentissages, mais au contraire de souligner l’importance de cours plus « sciences humaines », sur le responsive design ou encore l’ergonomie web. En effet, maîtriser des outils logiciels n’est rien si on ne réfléchit pas au rendu final et à l’expérience utilisateur de réalisations qui finalement ne nous appartiennent plus, une fois diffusées, en ligne ou par JCDecaux. Voici donc une sélections de tout ce qu’il ne faut pas faire, des réalisations de gens qui se sont bien amusés avec leurs joujoux logiciels, mais qui n’ont pas, mais pas du tout pensé à l’utilisateur final.
Le pire du web
Il y a quelques années étaient décernés les Craypions d’Or, récompensant les sites web les plus ratés, au design le plus douteux et totalement anti-ergonomiques. Mais le site des Craypion d’Or a mérité à son tour un Craypion : il n’a pas été déménagé mais supprimé!
Néanmoins, en tapant « les plus mauvais sites web du monde » dans Google, on retrouve les sites promus par les Craypions d’Or… et bien d’autres encore :
- Top 18 des sites récompensés aux Craypions d’or, ou le pire du web
- Les pires sites du Web (worst websites ever)
- Les pires designs de sites e-Commerce du monde
Le Blog du moderateur détaillait en 2013 Les 10 pires pratiques des sites Internet (et qu’on trouve encore en 2016, y compris sur les grands sites de presse) :
- Les vidéos en autoplay
- L’autorefresh
- Les pop-undersLe contenu NSFW non indiqué
- L’interstitiel abusif
- Les collecteurs de mailsLa musique en autoplay
- La page de 700 MO
- Le sapin de noël de pubs
- Les sites en flash des années 90
Et enfin, le meilleur (!) pour la fin, qui vaut lui aussi une capture d’écran, mais mérite le détour pour les animations : Le pire site web du monde (monté pour l’occasion, afin de montrer les bonnes pratiques du webdesign par le contre-exemple) :
Soixante millions de Graphistes
Le projet comprend aussi un print et là aussi, il n’est pas difficile de trouver de nombreux exemples de ce qu’il ne faut pas faire. J’ai déjà écrit un billet à propos d’un Tumblr réunissant le pire du print, affirmant ironiquement « qu’il suffit de cliquer » pour être un bon graphiste. Contrairement aux Craypions, il est toujours en ligne et toujours alimenté de nouvelles créations. Il s’agit de Soixante millions de graphistes ?
Et le prix de la pire vidéo…
…. est attribué à Mon territoire de thau, par le service communication de la ville de Sète (env. 45 000 hab). Des moyens humains et financiers ont été mis en oeuvre et si en cherchant le détail, il y aurait à dire sur la prise de vue, la prise de son et le montage, ce qui frappe n’a rien à voir avec la technique. Jugez par vous même :
http://dai.ly/xe4qif
Jour après jour, j’intègre à mon projet certaines des nouveautés que m’offrent les enseignements (découpage en blocs, flex, menu fixe, menu accordéon, menu hamburger…), mais j’essaie de garder en mémoire mon projet initial, tout n’intégrant de nouvelles fonctionnalités que si elles apportent quelque chose. L’idéal en intégration web est de réaliser une maquette sous Photoshop, et de réserver Illustrator aux éléments graphiques qui seront mis en ligne (le vectoriel facilitant la mise en oeuvre du responsive design).
Dans la promo, les travaux des uns et des autres commencent à prendre forme (sous forme de maquettes ou déjà en cours de codage). Quelque soit le profil dominant des mes collègues, (plutôt codeur, plutôt graphiste ou plutôt communicant), tous s’attachent à la cohérence de leurs travaux : la technique n’est qu’un outil nous permettant d’arriver à nos fins.
C’est une forme d’Oulipo : nous imposons volontairement des contraintes (d’ergonomie, de graphisme, etc) à notre créativité, pour obtenir un meilleur résultat. C’est ce qui fait notre valeur ajoutée par rapport aux codeurs/graphistes/vidéastes du dimanche qui sont capables du meilleur comme du pire.
Lisez aussi :
