Refonte de mon portfolio : créa et design

Voici la deuxième partie du making-of de la nouvelle version de mon site. Elle est très longue, car j'ai un millier de choses à vous raconter ! 8-)

Dans la première partie, je vous ai parlé de cette refonte sous l'angle du positionnement et de l'identité, qui était déjà un gros boulot en soi.

Aujourd'hui, je vais vous raconter cette refonte sous l'angle créatif, ce qui n'a pas été de tout repos non plus !

Par où commencer ?

J'ai mis quelques mois à trouver la nouvelle identité graphique de mon site. On a beau réfléchir et travailler pour soi, inventer la charte graphique de son propre site n'est pas aussi évident que ça en a l'air…

Faire peau neuve, et vite !

Cela faisait un moment que j'avais prévu de refaire mon site. Au départ, j'étais tellement impatiente de créer ma nouvelle charte graphique que je me suis lancée, tout feu tout flamme, dans une ébauche de créa, comme un poney fringant.

Mais j'ai bien vite réalisé la limite de cet empressement : rien de ce que je créais ne m'apparaissait comme allant de soi. Je n'étais jamais satisfaite. J'ai réalisé que ce n'était pas une bonne idée de me lancer sans avoir réfléchi a minima sur ce que je voulais communiquer.

Avec le recul, cela paraît évident, pourtant dans le feu de l'action, je n'avais qu'une envie : mettre en ligne, et vite, mon nouveau portfolio.

Certes, il s'agissait d'une refonte, mais on sait bien que refaire son site à soi, c'est plus que ça : c'est un peu une remise en question. On a envie de faire peau neuve, de montrer une meilleure facette de soi, de se débarrasser du spectre de son précédent portfolio qui n'est en général soit plus à jour, soit plus en ligne depuis un moment.

Paradoxalement, plus on va essayer de faire vite, plus on va s'enliser dans un projet mal fichu, faute d'avoir pris le temps de cogiter sur l'ADN du site. Il faut donc réussir à combattre l'urgence, et à rationnaliser son processus créatif.

Ce qui ne veut pas dire qu'une refonte bien gérée soit particulièrement rapide ! Quand on décide de refaire son site, il faut être réaliste et prévoir assez de temps pour faire les choses correctement.

Quel que soit le temps dont vous allez avoir besoin, l'essentiel est d'être satisfait de sa refonte sur le long terme.

La puissance de l'écrit

Avant de me lancer dans la créa pure et dure, je me suis préparé une grande tasse de thé puis j'ai commencé à fouiner dans mes archives personnelles.

Tout ce dont j'avais besoin était écrit dans mes carnets depuis plusieurs années et commençait déjà à se dessiner dans ma tête à travers toutes les notes que j'avais accumulées au fur et à mesure.

Au moment de commencer le design, je me suis fait violence pour mettre au propre, par écrit, mon plan d'action. Wireframes (même grossiers), croquis, notes et début de textes à contribuer une fois que le site serait prêt : rien n'y a échappé. J'ai énormément écrit avant de commencer le design, et cela m'a beaucoup aidée à structurer ma pensée ainsi que mon futur site.

Je savais que je ne voulais plus me poser de questions structurelles une fois que j'aurai commencé les maquettes graphiques. Débroussailler cette refonte par l'écrit m'a aidée à y voir plus clair et à être plus efficace créativement parlant, tout simplement parce que j'étais libérée de tout un tas de questions existentielles que j'avais déjà résolues grâce à la puissance de l'écrit.

L'inspiration

J'avais une idée assez précise du genre d'interface que je voulais créer. Déjà, le papier recyclé et les couleurs douces étaient de mise, car c'était deux des ingrédients de la précédente version de mon blog, qui fonctionnait bien.

De plus, j'avais défini mon blog comme mon carnet virtuel, et il me semblait tout naturel de continuer à filer la métaphore des petits papiers enchevêtrés, renforcée par l'écriture manuelle, ma signature et des petits dessins ici et là.

Je voulais créer un design chaleureux mais pas familier, sympa mais pas ridicule, personnel mais pas amateur, professionnel mais pas ennuyeux, vintage et surtout pas à la mode.

J'ai rapidement collectionné les images inspirantes comme un petit écureuil collectionne les noisettes, triant tout ça dans des dossiers bien étiquetés (c'est fou mais Pinterest n'existait pas encore !).

Progressivement, j'ai créé plusieurs moodboards, qui m'ont servi comme petits remontants quand je m'éloignais un peu trop de l'orientation graphique que j'avais décidé de suivre.

La recherche graphique

Premier jet

Un week-end, j'ai commencé à réunir mes éléments préférés, sans trop réfléchir. Ce fut le premier jet, et ça donna ça :

Rétrospectivement, je suis frappée d'avoir posé tous les éléments fondateurs du design définitif dans ce premier brouillon : le papier recyclé, le mauve, le dessin, l'écriture manuelle, les papiers découpés. Rien d'étonnant puisque c'était là l'ADN de la version précédente de mon blog, qui avait bien marqué les esprits et dont je ne m'étais pas vraiment lassée au fil des années.

Mais je trouvais que cela faisait trop « brouillon », justement, et que ça n'était tout simplement pas assez abouti.

S'en est suivi une longue pause de plusieurs mois pendant lesquels j'ai mis de côté ce projet, histoire de laisser décanter et de cogiter sur un second angle créatif. D'ailleurs, le test au carbone 14 permet de constater que j'avais 28 ans à l'époque. J'en ai aujourd'hui 30… cette première ébauche a donc deux ans. :idea:

Deuxième jet

Ma recherche d'idées et d'inspiration suivit son cours. Je voulais essayer quelque chose d'un peu différent de ce que j'avais fait jusqu'à présent, en supprimant les éléments écrits et dessinés à la main, car je les trouvais maladroits.

J'aboutis au deuxième jet :

Les losanges sous forme de trame de fond ont refait leur apparition : il s'agit là de la reprise symbolique de la texture qui habillait mon précédent portfolio.

Ces losanges me rappellent l'habit d'Arlequin, personnage qui me fascine depuis mon adolescence.

Bref, j'avais beau trouver que ce deuxième jet contenait « quelque chose », je n'arrivais pas à m'y faire. Avoir choisir la Futura comme police principale me semblait un bon choix : hyper lisible, bien nette… Choisir une typo à sa totale opposée pour écrire mon nom m'apparut comme une évidence.

Mais il y avait un problème : je ne me sentais pas chez moi. On aurait dit un template tout fait, un peu artificiel, trop « fille », trop moderne… bof.

Troisième jet

Le troisième jet m'a permis de finaliser la texture que je réutiliserai plus tard dans le design final. J'étais sûre d'avoir trouvé le bon papier recyclé 8-) Les cercles de couleurs sur le deuxième jet me plaisaient bien, mais je trouvais que les losanges d'un côté et les cercles de l'autre étaient trop stricts. J'ai donc déformé les cercles pour en faire plutôt des bulles protéiformes, pour ajouter un peu de hasard et de mouvement.

Tout allait pour le mieux dans le meilleur des mondes jusqu'à mon acquisition du livre Illustration Play 2 de Victionary. Page 1, je tombai sur ceci :

Inutile de dire que cela calma un peu mon enthousiasme. Je compris alors que ma maquette n'était pas assez personnelle. Il n'y avait rien qui ne soit « qu'à moi » et qu'on ne risquait pas de retrouver ailleurs.

En outre, je n'étais plus sûre du tout que montrer exclusivement mes dernières créations sur la page d'accueil du site serait suffisant pour être happé par mon univers. Le format portrait ne conviendrait pas pour toutes. Il fallait que j'affine la page d'accueil.

Quant à la version responsive, je n'y pensais pas encore, trop focalisée que j'étais sur mon empreinte graphique…

Quatrième et dernier jet

Quand j'ai commencé à travailler sur le quatrième jet, cela faisait déjà presque un an que j'avais commencé la refonte de mon site. J'attaquai ainsi cette énième maquette avec la conviction du désespéré.

En refaisant le tour des trois orientations graphiques que j'avais déjà conçues, je réalisai que celle qui me ressemblait le plus, c'était la première, et que celle que je trouvais la mieux finie, c'était la troisième. J'ai donc essayé de mixer les deux. Ces maquettes ont nécessité du dessin, de l'écriture, du gribouillage, et une utilisation intensive de mon scanner :smile:

Au niveau des polices, j'ai eu un énorme coup de cœur pour Sue Ellen Francisco et Strangelove : leur dessin « fait main » était pile ce dont j'avais besoin ! En outre, ces typos se marient bien à ma propre écriture, que j'ai scannée puis convertie en SVG (avec fallback PNG) avant de l'utiliser pour certains titres. Exit la Futura et sa rigidité germanique !

Quant aux dessins, je les ai scannés et utilisés en bitmap (PNG en général), sans me soucier outre mesure de l'affichage hidpi (dit aussi « retina »). La logique aurait voulu que je prépare ces dessins en deux fois plus grands, pour être tranquille par la suite.

Mais je ne l'ai pas fait, ce qui a eu pour conséquence de m'obliger à re-scanner, à re-découper et à re-colorier certains dessins quelques semaines à peine avant la mise en ligne de mon site…

Ce fut une grosse erreur. :cry: Pour ma défense, cela faisait plus d'un an et demi que je travaillais sur la refonte de mon site, dont six mois intensifs, et j'avais hâte d'avancer et de voir l'intégration prendre forme. D'où une découpe d'image sans doute un peu précipitée.

Cela étant dit, je reviendrai sur l'intégration et le développement du site dans la troisième partie de ce billet.

Un début de charte graphique

Une fois le design de mon site à peu près stabilisé (je dis « à peu près », car j'ai finalisé toutes les pages directement dans mon navigateur, pendant l'intégration), j'ai pu commencer à étendre ma nouvelle charte graphique aux autres moyens de communication que j'utilise.

Décliner sa charte graphique à différents supports, c'est assez amusant à faire ! :smile: Je n'en suis qu'au début, car il y a encore pleins d'éléments que j'aimerais designer, mais ça avance doucement.

Mes cartes de visite

Mon compte Twitter

Ma page Facebook

Mon CV papier

Le challenge était de conserver le feeling de ma charte graphique en noir et blanc et sans textures !

10 conseils pour réussir la refonte de votre portfolio

1. Ayez toujours un petit carnet à portée de main. Qu'il s'agisse d'un vrai petit carnet ou bien d'un document dans Google Drive, tous les moyens sont bons pour garder une trace de vos idées. Même si la refonte de votre site n'est pas prévue pour tout de suite, vous connaissez sans doute déjà les axes d'amélioration : notez tout ça. Dès que vous avez une nouvelle idée, notez-la, dessinez, gribouillez, collez. Notez tout, pour ne rien oublier, même (et surtout) les petites idées saugrenues sorties de nulle part. Votre petit carnet sera votre première source d'inspiration lorsque le moment de la refonte sera venu, croyez-moi ! :-)
2. Recyclez vos bonnes idées. Réinventer la roue à chaque fois, c'est épuisant ! Le design actuel de votre site, celui d'avant, vos cartes de visite, vos typos préférées, vos marottes graphiques : tout cela constitue un précieux capital. Ne le sacrifiez pas sur l'autel de la mode. Enrichissez votre univers au lieu de le détruire ! Ce n'est pas parce que votre site est défraîchi que tout est à jeter, bien au contraire. Capitalisez sur votre mémoire.
3. Pensez responsive dès le début. Si vous souhaitez créer un site responsive, pensez-le comme tel dès le début, et pas en fin de course. Cela va avoir une incidence directe sur vos maquettes graphiques. Par exmeple, créer un site performant sur mobile va vous imposer certaines contraintes : il est inutile de charger trois polices différentes avec @font-face sur mobile. Il faut en tenir compte dès l'étape du design, et pas seulement au moment de l'intégration.
4. Gardez la tête froide. Parler de soi positivement et humblement sur son site est un exercice difficile. Écrivez beaucoup, lisez vos textes à vois haute et faites-les relire par des personnes exigeantes, pour vous assurer que tout sonne juste et qu'il n'y a pas de coquille. Et n'oubliez jamais qu'il ne s'agit que d'un site web.
5. Entourez-vous de personnes de confiance, dont vous solliciterez de temps en temps l'avis pour vous confronter à un regard extérieur et bienveillant. Dans ce long travail solitaire qu'est la refonte de son site personnel, il est très important de ne pas trop s'isoler. Demander l'avis de vos alliés — toujours les mêmes, car à chaque étape ils connaîtront l'historique du projet — vous permettra de prendre du recul par rapport à votre création, et de trouver des solutions auxquelles vous n'auriez pas pensé tout(e) seul(e) .
6. Suivez votre instinct. L'objectif est de créer un univers graphique qui vous ressemble, qui soit utile à vos utilisateurs et à vous-même : tant pis s'il est à l'opposé de la mode du moment ! N'oubliez pas que vous allez devoir supporter cette refonte plusieurs années a priori : il faut donc que votre nouveau site vous plaise à 100%. Résistez aux sirènes de l'imitation, faites votre propre soupe.
7. Fixez vous une date de mise en ligne réaliste. Notez-la dans votre agenda, et aménagez votre planning en fonction. Certes, fixer une telle date n'est pas évident à faire en début de projet ; mais lorsque le design est terminé et l'intégration commencée, cela peut vraiment vous aider à boucler. Prévoyez de terminer l'intégration un mois avant cette date, pour avoir le temps de finaliser les tests multi-navigateurs et multi-périphériques, mais aussi, pourquoi pas, de demander à quelques personnes de confiance de beta tester votre site.
8. Ménagez-vous. Refondre son site passe en général après tout le reste, c'est un processus souvent long qui peut s'étaler sur plusieurs mois. Il est donc important d'être à l'écoute de votre corps pour être capable de maintenir l'effort de création et de production sur le moyen voire sur le long terme. Accordez-vous des pauses bien méritées, qui vous permettront de rester motivé(e). En particulier, veillez à dormir suffisamment, et ne vous coupez pas trop du monde : ce n'est qu'un site web !
9. Soyez cohérent(e). Profitez de la refonte de votre site pour mettre à jour vos cartes de visite, votre CV ainsi que vos profils sur les réseaux sociaux. Présenter une image de soi homogène quel que soit le média ne peut que légitimer vos talents en matière de communication personnelle.
10. Restez vous-même. Votre portfolio sera bien plus intéressant si vous y insufflez votre univers. Votre identité graphique ne doit pas être seulement le reflet de votre domaine de prédilection, elle doit être en phase avec vous. Ne créez pas un site pour combler les désidératas — fictifs — des gens, mais créez un site tel que vous l'avez rêvé. Pour se différencier de la masse des blogs qui existent déjà, il faut vous préparer à être un peu plus honnête et un peu moins passe-partout.

J'espère que ce billet vous aura inspirés. Bon courage ! :smile: