MARIE & JULIEN

Les raisons de la refonte

Il y a fort longtemps (2010 ?), j’avais changé mon identité en passant de inkboy.fr à judbd.com, et pour l’occasion j’avais refondu mon book en me frottant à WordPress. C’était un temps où on ne parlait pas encore trop de responsive et le site convenait bien à mes besoins, même si WordPress ne s’était avéré pas si pratique que ça pour un site de type book (encore une fois c’était avant l’ère des thèmes de qualité en pagaille).

Peu pratique à mettre à jour, un peu daté graphiquement et pas compatible mobile, le site est resté figé un moment, et je l’ai abandonné au profit d’un book privé plus simple sous la forme d’un simple dossier Dropbox que je partageais avec de potentiels recruteurs. Ça faisait le job : synchronisé avec mes devices, facile à mettre à jour et… moche. Mais sérieux ça faisait le job.

J’ai ensuite voulu tester le CMS Kirby (on y reviendra en 2e partie) et j’ai donc commencé à avoir quelque chose de viable qui a coïncidé avec le départ de l’agence dans laquelle j’étais, pile quand justement j’ai besoin d’un book. Le hasard fait bien les choses.

Si vous êtes impatients, vous pouvez ouvrir le site en même temps.

La première règle du portfolio est : il faut le remplir.

Utiliser Dropbox s’est révélé être un bon plan car ça m’a permis de remplir mon book peu à peu au fil des mois, dès que je pensais à un truc je le mettais dans la Dropbox, avec les fichiers nécessaires associés (PSD, Typos) et une version JPG pour le book à proprement parler.

Si il y avait besoin de modifs minimes ou recadrage je le faisais à la volée rapidement, ce qui était bien plus simple que de revenir longtemps après sur chacun des fichiers.

Rassembler pour mieux régner

Mine de rien, le fait d’avoir une version Dropbox m’a “forcé” à m’astreindre à cette discipline, ce qui m’a été très précieux après, car les graphistes le savent : rien de plus chiant que de remplir son book avec les bonnes images, les bonnes vignettes etc.

Rien de plus chiant que de remplir son book avec les bonnes images, les bonnes vignettes etc.

Prendre des notes

En parallèle, je tenais une liste des choses à rajouter dans le contenu, avec des interrogations auxquelles je répondrais en faisant le book proprement dit (du genre “mettre tel truc ? Oui mais peut-être présenté de telle manière”), ça m’a également permis de ne rien oublier et de ne pas me poser 12 fois les mêmes questions et de lancer des débuts de réflexions sur le papier.

Cette “curation” de contenu m’a pris plusieurs mois, et je pense que si je ne l’avais pas faite petit à petit je me serais découragé.

Cette “curation” de contenu m’a pris plusieurs mois, et je pense que si je ne l’avais pas faite petit à petit je me serais découragé. Le fait de l’étaler dans le temps m’a aussi permis de me rappeler de projets cools que j’avais totalement oublié de mentionner, et de récupérer les images relatives à ces projets, souvent enfouies dans des archives oubliées de tous.

La deuxième règle du portfolio est : il faut le designer.

Hé oui, il s’agit bien de la 2e règle et non de la 1ere. On peut inverser les 2, mais c’est alors la certitude de revirements sans fin et d’un folio qui ne sort jamais, car en bon graphiste on est jamais satisfait. Disposer du contenu à l’avance peut aussi orienter le design.

En gros, tout va dépendre de votre positionnement (je veux un site FWA qui pète et je ferai le contenu en fonction / mon contenu est plus important).

Il n’y a pas de règles précises sur ce point mais pour une fois j’ai procédé avec le design après.

Cuisine maison ou surgelée ?

D’ailleurs sur le coup, j’ai opté pour une option des plus radicales pour un designer : je n’ai pas designé mon folio moi même, j’ai pris un template html sur étagère que j’ai arrangé à ma sauce.

Ça peut paraitre paradoxal, mais en voici les raisons :

• Le plus important n’était pas de faire un portfolio qui pète, mais de montrer qu’avec mon expérience j’ai déjà réalisé des projets cools, et pas qu’un peu. Le contenant doit s’effacer devant le contenu qui parle de lui même.
• Pour les raisons citées plus haut : me connaissant, le site ne serait jamais sorti à force de remaniements créatifs.
• On est en 2016 : je sais intégrer mes propres sites, mais pas au niveau d’un intégrateur pro, et il n’y a maintenant plus de place pour la bidouille. Responsive avec plusieurs breakpoints, gestion du retina, accessibilité, JS, tout ça ne s’improvise plus et est au delà de mes compétences quand il s’agit de sortir un site avec les derniers raffinements techniques.
• Nécessité de sortir quelque chose rapidement.

L’avantage c’est que n’ayant pas choisi WordPress je n’ai pas été contraint de prendre un thème “usine à gaz” avec des fonctions jusqu’à la moelle, et j’ai pu choisir les gabarits de base dont j’avais besoin pour mon usage, ni plus ni moins.

L’organisation du contenu

Le but de ce nouveau portfolio est de refléter mon positionnement, qui est en gros “Je suis DA web, graphiste, ça fait 10 ans que je travaille dans internet, et je fais non seulement des projets de communication mais aussi des projets pour moi, en plus de participer à l’écosystème des travailleurs du web en donnant des conférences, bloguant, tweetant, trollant”.

Je voulais aussi une partie “à propos” qui donne un aperçu rapide de qui je suis / ce que je fais, au delà du simple CV et des 3 lignes introductives habituelle.

J’ai donc décidé de créer 5 parties distinctes :

• La page d’accueil : je la considère comme un lieu de passage rapide (peu de gens passent par la home grâce aux moteurs de recherche), il y a donc une grosse image et une citation prise au hasard (rafraîchissez la page !) avec une petite sélection de projets au hasard en dessous. Le but est d’avoir un aperçu très rapide du ton du portfolio.
• Le portfolio : La rubrique inévitable, elle répertorie tous mes travaux notables réalisés en agence pendant ces 10 dernières années.
• Les side projects : J’ai fait un grand nombre de projets hors entreprise, pour le fun, pour m’entraîner ou pour d’autres personnes, et pas forcément en intervenant en tant que DA/Graphiste. Je voulais que ça transparaisse dans mon book.
• Les publications : J’ai publié des textes à plusieurs endroits sur internet et je voulais les regrouper sur un espace qui m’appartient, pour garder une copie accessible en cas de mise hors ligne sur les autres sites.
• La page bio / CV : cette rubrique regroupe une courte biographie, un CV, les espaces sur lesquels je suis présent sur internet et des recommandations de mes pairs (une bonne idée piquée à Vincent Valentin. N’hésitez pas à m’envoyer la vôtre si vous voulez dire du bien de moi (Je sais que oui).

Pour les projets individuels, en plus des images, j’ai essayé d’ajouter systématiquement quelques lignes de contexte : à quel poste je suis intervenu, quel était la problématique, comment s’est déroulé le projet.

Je pense que cette partie est trop souvent négligée dans les books et qu’on ne sait jamais trop quelle a été l’étendue de la participation du graphiste au projet. Parfois le contexte est même plus intéressant que la créa elle-même.

Ce petit texte peut aussi vous servir de mémo quand vous déroulez votre book lors d’un entretien.

Tout montrer ?

Le CMS utilisé dispose d’une fonction bien pratique : la possibilité de cacher des pages qui ne sont alors accessible que par leur URL directe.

J’ai usé de cette fonction sans retenue, car il était important pour moi d’être sélectif sur ce que je montrais publiquement, tout en me laissant la possibilité de montrer des projets plus spécifiques à des futurs clients ou recruteurs. Cette fonction me permet aussi de commencer à remplir des pages de projets encore en production pour les publier quand ils ne sont plus confidentiels.

Ces pages masquées peuvent être affichées avec un système de tag dont nous allons parler immédiatement.

le tag parfait

Quand on commence à avoir beaucoup de contenu, il est tentant de le taguer pour le catégoriser. Le risque étant de se retrouver avec des tags quasiment vides, qui ne sont pas très pertinents.

J’ai préféré une autre approche : en plus des tags visibles “classiques” (comme le domaine d’expertise) qui ont vocation à être affichés sur chaque projet mais pas à être filtrés, j’ai mis en place un système de tags parallèles secrets connus de moi seul (hin hin hin) qui me permet de récupérer une collection de projets tagués.

Cette collection contient des projets publics mais aussi des projets masqués que je veux mettre en avant dance ce contexte.

Ça me permet de proposer une petite sélection grâce à un simple lien. En voici une petite démonstration. Certains projets montrés sur cette page n’apparaissent jamais dans mon portfolio public.

L’humour : pourquoi c’est drôle ?

Le lien précédent me permet d’aborder le sujet de l’humour (dieu que ce billet est bien écrit). J’ai parsemé mon book de petites touches humoristiques, et j’avoue qu’il m’a été difficile de ne pas sombrer dans le gros gag qui tâche et d’en faire (vraiment) trop, je ne dois mon salut qu’à l’avis éclairé de mes amis m’ont conseillé de freiner mes ardeurs.

J’ai donc gardé quelques ressorts comiques deci-delà (phrases random sur la home, ton des recommandations, le ton de certain textes…) tout en gardant en tête qu’il ne fallait pas non plus passer pour le rigolo de service.

Le résultat

À vous de me dire si le résultat fonctionne ou pas, mais pour la première fois, faire cette refonte de site personnel n’a pas été une tannée.

D’habitude on commence avec le design qui est le plus sympa (dans les 1eres versions du moins) et ensuite on doit gérer des choses comme le contenu, l’intégration et le développement qui sont nettement moins drôles et peuvent vite taper sur les nerfs.

Le fait d’avoir fait de longues phases séparées et d’améliorer le portfolio graduellement m’a semblé être une méthode efficace, et chose rare pour un book perso, le projet ne me sort pas par les yeux et j’ai plaisir à y ajouter des petites fonctionnalités ou à en améliorer des existantes.

Mon conseil les kids : dites non à la drogue et n’arrêtez jamais de rassembler des éléments pour votre book. C’est un travail continu. Commencez maintenant si vous n’y êtes pas déjà.

Comme je me suis fait un développement sur mesure, la partie mise à jour est elle aussi simple et agréable à faire, comme nous allons le voir dans la seconde partie de cette étude de cas.