Portfolio créatif : mon conte de fées devenu site

Comment construire un portfolio créatif qui montre qui vous êtes tout en restant professionnel ? J’ai récemment obtenu mon diplôme en Marketing digital, et je voulais que mon premier portfolio soit plus qu’une liste de projets. Je l’ai donc construit comme un livre d’histoires interactif, où une petite fée guide les visiteurs à travers mon travail.

À qui s’adresse cet article : aux jeunes diplômés, aux professionnels du marketing et aux créatifs qui construisent un premier portfolio et veulent qu’il leur ressemble sans perdre en clarté.

Cette analyse de mon portfolio se déroule en sept parties. Chacune commence par ce que j’ai fait et pourquoi, puis vous donne ce que vous pouvez copier :

• Sept choix, de l’idée et de l’identité visuelle à l’animation, à l’utilisabilité, aux preuves et aux compromis.
• Un test de 30 secondes pour les recruteurs à appliquer à votre propre site, et les erreurs de portfolio que ces choix évitent.
• Ce que chaque choix a coûté, en poids et en entretien, pour que vous le chiffriez avant de le copier.

Pourquoi j’ai construit quelque chose de différent : un portfolio qui reflète la personnalité

Jeune diplômée, je savais que je voulais un portfolio qui soit plus qu’une liste de projets et de réussites. Je voulais un petit monde qui reflète qui je suis. J’aime la créativité, les histoires et donner vie à des idées inhabituelles, alors un modèle classique ne m’a jamais convenu. Je voulais quelque chose qui soit uniquement le mien.

Comment le copier. Partez de ce que vous aimez créer, pas d’un modèle. Les recruteurs ne lisent pas chaque mot. Nielsen Norman Group note que très rarement les responsables du recrutement prennent le temps de lire votre portfolio en entier, mot à mot, et Designlab prévient que vous avez seulement quelques secondes pour créer le lien avec un visiteur avant qu’il ne ferme le site.

La personnalité, c’est ce qui fait s’arrêter quelqu’un pendant ces secondes. Un portfolio de marketing avance une affirmation avant de montrer le moindre échantillon : cette personne sait donner à une marque l’allure de quelqu’un. Si la page autour des échantillons est un modèle neutre, l’affirmation n’a aucune preuve. Ma page d’accueil porte une ligne à ce sujet : « Le marketing, ce n’est pas seulement raconter une histoire. C’est la faire ressentir. » Le guide de Shopify sur les portfolios place l’identité de marque en premier : les couleurs, les polices et les images aident à donner le ton du site, et la voix compte autant.

Mon premier écran le fait avant toute explication. Il montre mon nom en écriture manuscrite avec le N dans un rose plus profond, la ligne “Marketing · Creative · Da Nang → United States” et deux boutons, View Work et Get in Touch.

Trouver mon identité visuelle : la fée, la palette de couleurs et la typographie

J’ai toujours été attirée par les contes de fées, la nature et l’illustration poétique, alors l’idée de la fée est venue comme un prolongement naturel de ma personnalité. J’ai choisi des verts doux, des roses, des détails floraux et des éléments dessinés à la main pour que le site soit ludique tout en restant professionnel. Je voulais que les visiteurs reconnaissent ma personnalité à travers le design avant même de lire un mot sur moi.

Comment le copier. Choisissez les quelques éléments qui portent votre identité. La mienne repose sur une fée, un cadre d’orchidées vert et un nom en écriture manuscrite. La palette et les polices ci-dessous les mettent en place, et la section suivante leur donne vie.

Deux palettes, une même impression

Ce que j’ai fait. Ma page d’accueil et mon blog partagent une impression mais pas une palette. La page d’accueil est un papier crème (#F2EDE3) avec du rose, de la sauge, du vert forêt, de l’olive, du brun et de l’or. Le blog est d’un blanc pur avec une poignée de couleurs de marque. La douceur vient d’un rose poudré (#D4A8B4) et d’un vert sauge (#8B9E7A) posés contre un vert forêt (#4A6741), et le cadre floral du héros est construit en deux couches : un fond de papier fixe et une couche à part de fleurs qui bougent.

Le blog est passé au blanc à la suite d’une correction consignée dans sa propre feuille de jetons. La première version utilisait un papier crème, mais ce crème s’est révélé être celui d’une coque d’application, pas d’un article. Mesurées sur les pages d’article, cinq surfaces de lecture par défaut sur cinq étaient d’un blanc pur. La chaleur a donc été déplacée là où elle ne touche pas le texte courant : la couleur d’accent, les badges et un voile chaud derrière les encadrés.

Polices associées par rôle, texte resté littéral

Ce que j’ai fait. Le nom sur la page d’accueil est composé en Dancing Script, avec le N dans un rose plus doux, et la ligne au-dessus utilise la même écriture en plus petit. Les titres de section utilisent Cormorant Garamond, les petites étiquettes Caveat et le texte de l’interface Inter. Le blog sépare les rôles plus strictement : Geist pour l’interface et les titres, Source Serif 4 pour la lecture, en 20 pixels sur 32 avec une colonne de 680 pixels.

Pourquoi cela compte pour un recruteur. Une écriture manuscrite est un mauvais choix pour des paragraphes, donc elle n’apparaît que là où la page est une personne : le nom et la ligne qui le précède. La page d’accueil peut se permettre quatre polices parce que c’est une affiche. Le blog non, parce qu’on le lit.

Le texte suit la même séparation. Le bandeau du blog est « The Fairy’s Field Notes » au-dessus du titre « Where Curious Ideas Grow », c’est le personnage qui parle à petite dose. Les parties pratiques restent littérales : la navigation de l’accueil dit Social, Mobile, Design, SEO, Web App, Writing, About, Sign in et Contact, chacun un type de travail qu’un responsable du recrutement peut chercher, pas une devinette.

Comment le copier. Donnez à chaque police un seul rôle et dites-le à voix haute : celle-ci est le nom, celle-ci est la lecture. Laissez votre voix se montrer dans le bandeau et les accroches, et gardez des libellés de navigation assez simples pour être parcourus d’un coup d’œil.

Donner vie à mon portfolio : illustration, mascotte et animation

Je ne voulais pas d’une présentation statique. Je voulais un livre d’histoires interactif où une petite fée guide les visiteurs à travers mes projets, où les illustrations prennent vie et où chaque section a son propre personnage. Les animations et les petites interactions sont là pour que l’exploration soit une expérience, et non un défilement de CV.

Comment le copier. Donnez une mission au mouvement et construisez son interrupteur en même temps. Les deux parties ci-dessous montrent comment.

Une mascotte avec une mission, et un interrupteur

Ce que j’ai fait. La fée est la première chose que la page d’accueil anime. Elle existe sous forme de sept planches de sprites, une par pose (voler, battre des ailes, s’asseoir, réfléchir, joie, toucher et tourner), de huit images chacune. Les sept planches PNG pèsent ensemble un peu plus de 1 Mo, ce qui est tout le coût d’une mascotte qui peut bouger.

Elle réagit aussi au visiteur. Elle tape quand on appuie, a l’air heureuse quand on atteint un lien ou un bouton, et se tourne dans le sens où elle se déplace. Ce sont trois de ses sept poses à l’œuvre.

Elle mérite sa place parce qu’elle fait quelque chose. Sur les appareils à pointeur, elle suit le curseur avec un ressort amorti, donc elle traîne derrière le pointeur au lieu de s’y accrocher d’un coup. Sur un téléphone, il n’y a pas de curseur à suivre, alors elle voyage avec le défilement et rend visite aux titres. Les poses ont un sens là où on les place : elle réfléchit près du titre SEO, s’assoit près du titre About et est joyeuse près du titre de contact.

Pourquoi cela compte pour un recruteur. Une mascotte avec une mission est une signature et un guide. Une mascotte collée dans un coin est un autocollant. Elle apparaît aux titres de section et sur les bords, jamais sur un échantillon, si bien que le travail reste le sujet.

L’interrupteur. Le mouvement est l’endroit où la personnalité devient un risque. Le navigateur peut indiquer si l’utilisateur a demandé à son appareil de réduire les mouvements non essentiels, et MDN note que ce type d’animation peut provoquer un inconfort chez les personnes souffrant de troubles vestibulaires. Sur les appareils à pointeur, la page d’accueil masque le curseur système, dessine la fée et garde un petit point de 15 pixels à la position exacte du pointeur, avec une traînée d’étincelles à quatre branches derrière. Cette traînée ne s’exécute pas pour les visiteurs qui ont demandé moins de mouvement, ni sur les écrans tactiles. Sur le blog, la fée repose sur sa trajectoire avec la première image de ses ailes, et sur la page d’accueil elle est fixée au pointeur au lieu de le suivre sur un ressort.

Les petites interactions suivent la même règle. Un bouton monte de 2 pixels au survol, puis redescend et s’assombrit légèrement quand on appuie, et une pièce de travail s’élève au survol. Le livre ci-dessous s’ouvre quand on fait glisser la couverture ou qu’on appuie sur Entrée, et les flèches tournent ses pages.

Comment le copier. Choisissez un motif. Décidez où il apparaît (titres et bords) et où il n’apparaît jamais (sur vos échantillons), puis écrivez la version à mouvement réduit en même temps que l’effet.

Un vocabulaire d’illustration, réutilisé

Ce que j’ai fait. Le cadre d’orchidées de la page d’accueil, les papillons, les étincelles et les vignes forment un seul vocabulaire. Ils se répètent d’une section à l’autre, donc un visiteur apprend ce qui appartient au site après le premier écran. Des dessins vectoriels avec nervures, taches et ombrages ont remplacé les premiers détourages matriciels, qui paraissaient flous. Les papillons gardent leur battement d’ailes et la pousse garde sa fleur unique, et tous restent immobiles quand un visiteur demande le mouvement réduit.

Le vocabulaire s’étend jusqu’au travail lui-même. Le chapitre Mobile Marketing est dessiné comme un livre : une couverture verte à bordure dorée avec ma marque qui se soulève sur une page de chapitre à côté de maquettes de téléphone, et dont les pages défilent sur quatre canaux.

Mobile
Marketing

CeraVe × Creva

Chapter II

Mobile Marketing

• I. SMS Messages
• II. MMS Rich Media
• III. Email Campaign
• IV. Push Notifications

Pourquoi cela compte pour un recruteur. Designlab recommande un ensemble cohérent de maquettes qui aide à unifier visuellement votre portfolio. Un vocabulaire répété fait ce travail pour toute la page, et les vecteurs restent nets à toute taille, ce qu’une image matricielle étirée ne fait pas.

Comment le copier. Fixez un petit ensemble de formes et de couleurs, réutilisez-le dans chaque section et appliquez-le aussi à la présentation de vos échantillons. Prévoyez plus de soin qu’une photo de banque d’images n’en demande.

Concevoir pour les gens, pas seulement pour l’esthétique : UX, lisibilité et accessibilité

Le plus grand défi a été d’équilibrer une illustration détaillée et une expérience utilisateur claire et professionnelle. En tant que marketeuse, je sais qu’un beau design ne vaut pas grand-chose si les visiteurs ne trouvent pas ce qu’ils cherchent. J’ai donc gardé les projets visibles, la navigation claire et le blog agréable à lire.

Comment le copier. Voici les vérifications que je fais pour la lisibilité, l’accessibilité et les téléphones. Sur le blog, le confort de lecture tient à une colonne de 680 pixels avec un texte de 20 pixels sur une ligne de 32, encre sombre sur blanc, la mesure que Medium utilise pour le corps de ses articles.

Un contraste mesurable

Pourquoi cela compte pour un recruteur. Un faible contraste paraît négligé et fatigue l’œil. Les règles d’accessibilité web demandent un rapport de contraste d’au moins 4,5:1 pour le texte normal. L’encre du texte de mon blog est à 15,52:1 sur le blanc et le vert des boutons à 6,35:1. L’or et le rose échouent comme texte, à 2,29:1 et 2,24:1, donc le blog ne les utilise qu’en aplat et garde des jumeaux plus sombres pour le texte : une encre rose à 5,56:1 et une encre dorée à 6,10:1. Je les ai assombris jusqu’à ce qu’ils passent au lieu d’abandonner les couleurs.

Comment le copier. Choisissez d’abord les couleurs de votre identité, puis testez chacune comme texte sur le fond de votre page. Quand une couleur échoue, gardez-la en aplat et assombrissez un jumeau pour les mots. Mettez la chaleur dans le cadre et gardez le texte courant sur un fond uni à fort contraste.

Mouvement, écrans tactiles et une suite claire

Chaque effet ci-dessus a une version à mouvement réduit, et les écrans tactiles ont leur propre parcours, car un téléphone n’a pas de curseur à suivre. La navigation de l’accueil se termine par un bouton Contact et l’en-tête propose Get in Touch, de sorte qu’un visiteur qui aime le travail sait quoi faire ensuite. Designlab conseille de rendre l’expérience mobile simple et utilisable et de donner un appel à l’action clair. Les contrôles ont aussi un état appuyé, pas seulement un état de survol, parce qu’un doigt ne survole jamais, et un contrôle ciblé reçoit un contour visible de 2 pixels.

Le test de 30 secondes pour les recruteurs de votre portfolio

Ouvrez votre portfolio sur un téléphone, lancez un minuteur et répondez dans l’ordre. C’est un test que j’utilise pour lire une page comme un recruteur qui survole, pas une norme.

1. Les 5 premières secondes. Pouvez-vous dire qui est cette personne et quel type de travail elle fait ? Si vous devez faire défiler, le premier écran ne remplit pas son rôle.
2. Les 10 secondes suivantes. Comptez les travaux. Designlab place le juste milieu à 3-5 projets, et Nielsen Norman Group intitule l’étape choisir 3-5 projets comme études de cas détaillées.
3. Les 5 secondes suivantes. Trouvez comment prendre contact. Designlab conseille un bouton « Get in touch » bien visible comme appel à l’action.
4. Les 5 secondes suivantes. Lisez un paragraphe de corps de texte. Le texte atteint-il au moins 4,5:1 sur son fond, et la longueur de ligne est-elle confortable ?
5. Les 5 dernières secondes. Vérifiez un chiffre ou une affirmation. Une étiquette à côté dit-elle ce que c’est et ce que ce n’est pas ?
6. Activez ensuite le mouvement réduit dans les réglages de l’appareil et rechargez. La page doit garder son sens, avec les effets au repos.

Laisser le travail parler de lui-même : comment je présente mes projets

Mon portfolio rassemble les réseaux sociaux, le SEO, le design graphique et les campagnes créatives. Il montre le travail que j’ai fait pour développer des communautés sur les réseaux sociaux, créer du contenu et mener des projets de marketing. Je crois que la créativité doit toujours avoir un but : le design attire l’attention, mais le travail raconte la vraie histoire.

Ce que j’ai fait. La page d’accueil nomme cinq chapitres (réseaux sociaux, marketing mobile, design graphique, SEO et une application web), et le travail se trouve à un défilement du premier écran. Une page très décorée éveille le soupçon que le fond est mince, alors les sections de preuves sont volontairement littérales. Là où un chiffre pourrait être mal compris, la page le précise à côté : « Ces totaux de comptes sont des instantanés, pas ma production personnelle ni une croissance qui m’est attribuable. » Chaque carte de chapitre porte aussi une étiquette claire à côté de la marque, comme Account snapshot, Coursework ou Live product.

Pourquoi cela compte pour un recruteur. La personnalité attire l’attention, et les étiquettes sobres empêchent cette attention de se transformer en doute. Un recruteur qui survole peut faire confiance à un chiffre qui porte sa propre limite.

Comment le copier. Nommez chaque travail pour ce qu’il était et ce que vous avez fait. Mettez la réserve à côté du chiffre, pas en note de bas de page. Plus la page est décorée, plus les affirmations doivent être sobres.

Qu’évitent ces choix ? Les erreurs de portfolio courantes

Chaque choix ci-dessus ferme la porte à une erreur que nomment les guides de portfolio.

Les compromis derrière la magie : performance et coûts de design

Il y a eu des compromis. Parfois j’ai simplifié une illustration, réduit une animation ou choisi une mise en page plus lisible plutôt que quelque chose de plus spectaculaire. Une marque personnelle solide, ce n’est pas ajouter toutes les idées créatives. C’est choisir les détails qui améliorent l’expérience.

Comment le copier. Chiffrez chaque idée avant de la garder. Voici le prix des miennes, en poids et en entretien. Deux des choix ci-dessous sont sobres exprès : le blog reste blanc, et la fée se repose quand un visiteur demande moins de mouvement.

Ce que la création de mon portfolio m’a appris sur la marque personnelle

Construire ce portfolio m’a appris que la marque personnelle consiste à se comprendre soi-même et à trouver une façon créative de le communiquer. Je n’ai pas caché ma personnalité joueuse pour paraître professionnelle, parce que créativité et professionnalisme peuvent coexister.

Ce que je vous transmettrais :

• Choisissez un personnage ou un motif et donnez-lui un travail. Une mascotte qui s’assoit près des titres et réagit au curseur est un système. Une mascotte collée dans un coin est un autocollant.
• Laissez la personnalité vivre dans le cadre. Gardez le texte courant sur un fond uni à fort contraste.
• Vérifiez le contraste avant de tomber amoureux d’une couleur. Si une couleur de marque échoue comme texte, utilisez-la en aplat et assombrissez un jumeau pour le texte.
• Construisez l’interrupteur avec l’effet. Le mouvement réduit et les écrans tactiles sont aussi des visiteurs.
• Étiquetez vos preuves avec des mots simples. Plus la page est décorée, plus les affirmations doivent être sobres.

Je n’ai pas seulement construit un portfolio pour montrer ce que j’ai fait. J’ai construit un petit monde qui montre qui je suis.

FAQ : comment faire ressortir un portfolio

Combien de projets un portfolio créatif doit-il montrer ?

Moins que vous ne le pensez. Designlab dit que le juste milieu se situe généralement entre 3 et 5, et Nielsen Norman Group suggère 3-5 projets comme études de cas détaillées. Ma page d’accueil montre cinq chapitres, et chacun dit ce qu’était le travail.

Une mascotte ou une illustration rendra-t-elle mon portfolio peu professionnel ?

Pas quand elle a une mission et ne gêne pas le travail. La mienne apparaît aux titres et sur les bords, jamais sur un échantillon, et chaque effet a une version à mouvement réduit. Le risque que nomment les guides, c’est la décoration qui détourne du contenu, c’est pourquoi les sections de preuves restent littérales.

Comment choisir les couleurs d’un portfolio de marque personnelle ?

Partez de l’identité, car Shopify place l’identité de marque en premier, puis testez chaque couleur comme texte. La règle d’accessibilité demande au moins 4,5:1 pour le texte normal. Les couleurs qui échouent peuvent encore servir en aplat, avec un jumeau plus sombre pour les mots.

Les recruteurs liront-ils mes descriptions ?

Probablement pas en entier, alors restez bref et commencez par ce que vous avez fait. Le conseil de Shopify pour les descriptions de travaux est de rester concis, et un responsable du recrutement cité par Nielsen Norman Group dit « Ne me montrez pas seulement le produit fini. »

Dois-je écrire sur la façon dont j’ai construit mon propre portfolio ?

Oui, si vous l’écrivez à partir de l’expérience. Les conseils de Google sur le contenu utile demandent si votre contenu démontre clairement une expertise de première main et une connaissance approfondie. Une analyse de votre propre site, avec les vrais choix et ce qu’ils ont coûté, est de première main par construction.

Si vous préparez votre propre portfolio créatif, j’espère que les compromis ci-dessus vous épargneront quelques détours. Si vous voulez tout voir ensemble, le portfolio est le meilleur point de départ, et le blog montre la version plus calme de la même identité. Vous pouvez me joindre via la page de contact.

Ceci est un récit à la première personne de mon propre site, pas une norme de design. Les sources liées fixent les règles de contraste, de mouvement réduit et de portfolio ; toute autre affirmation décrit ce site tel qu’il a été construit.