Dès que septembre arrive, dans les cercles d'amis, à part ceux qui montrent les embouteillages de la rentrée, ce sont ceux qui montrent leur CV. Ma cousine est en quatrième année cette année, il y a deux jours elle m'a envoyé une capture d'écran au milieu de la nuit, disant qu'elle avait postulé dans plus de trente entreprises, peu ont lu, et les entretiens ne sont même pas en vue. Je lui ai demandé d'envoyer son portfolio pour jeter un coup d'œil, en l'ouvrant, la page était plutôt propre, mais trop propre — propre comme de l'eau claire, après l'avoir vue on ne se souvient de rien.
En fait, beaucoup d'étudiants sont bloqués sur ce point : la technique n'est pas mauvaise, la mise en page est soignée, mais le portfolio n'a tout simplement pas de « point mémorable ». Le recruteur en voit des dizaines par jour, ses yeux sont déjà fatigués. Ce que vous devez faire, ce n'est pas remplir la page, mais pousser doucement sur les détails, pour que son regard s'attarde deux secondes de plus sur votre travail. L'ombre, c'est le coup de pouce le moins cher et le plus rapide.
Ne sous-estimez pas une couche d'ombre. Ajoutez-en un peu sous une carte, elle « flotte » hors du plan ; ajoutez-en un peu à côté d'un bouton, avant même que le doigt ne clique, on sent déjà qu'il est cliquable ; ajoutez-en un peu à un avatar, toute la silhouette devient plus vive. Cela ne vole pas la vedette au contenu, mais dit discrètement au recruteur : cette personne a le sens du détail.
Mais écrire box-shadow à la main est vraiment pénible. Une multitude de paramètres, décalage x, décalage y, rayon de flou, rayon d'étalement, transparence de la couleur, changer une valeur et toute la sensation de la carte change. Avant, pour régler une ombre de carte, j'ai essayé plus de vingt fois, finalement j'ai abandonné et utilisé celle par défaut. Plus tard, j'ai découvert un petit outil appelé « générateur d'ombres CSS », il suffit de faire glisser le curseur pour voir l'effet en temps réel, on ajuste à gauche et on prévisualise à droite, une fois satisfait on copie directement le code. Cette sensation, c'est comme passer d'une vitre de voiture manuelle à une vitre électrique.
Comment l'utiliser concrètement ? Ouvrez l'outil, choisissez d'abord le type d'ombre — ombre portée normale, ombre intérieure, ou superposition multiple. Pour créer cette sensation de flottement haut de gamme, il faut généralement superposer deux ou trois couches : une couche large et légère pour la lumière ambiante, une couche petite et profonde pour l'ombre de contact. N'utilisez pas du noir pur pour la couleur, utilisez du bleu foncé ou du gris foncé, avec une transparence entre 10% et 20%, l'effet sera plus aéré. Donnez un rayon de flou plus grand, un rayon d'étalement plus petit voire négatif, les bords seront plus nets.
Quels endroits dans le portfolio méritent d'être ajoutés ? La carte principale du premier écran, ajoutez une ombre extérieure douce, pour qu'elle se détache du fond. Les vignettes dans la liste de projets, ajoutez une légère ombre intérieure, pour simuler le creux d'un cadre photo. Quand la barre de navigation est collée en haut, ajoutez une fine ombre en bas, pour dire à l'utilisateur « je suis là ». Il y a aussi les fenêtres modales, les menus déroulants, les boutons flottants, ce sont des zones à forte utilisation d'ombres. Mais rappelez-vous un principe : la « personnalité » des ombres dans une page doit être uniforme. Soit toutes des ombres courtes et dures, soit toutes des ombres douces et diffuses, ne mélangez pas.
Certains étudiants craignent qu'en ajouter trop rende sale. En fait, le critère est simple : plissez les yeux, si l'ombre vole la vedette au contenu, c'est trop ; si en fermant les yeux puis en les rouvrant, la page est bien hiérarchisée, avec des priorités claires, c'est bon. L'ombre est au service du contenu, pas pour frimer.
Pour le recrutement d'automne, la compétence est la carte maîtresse, mais le CV et le portfolio sont la brique pour frapper à la porte. Si la brique est un peu plus agréable à regarder, la porte s'ouvre plus vite. Prenez dix minutes pour ajuster les éléments clés de votre portfolio avec le générateur d'ombres CSS, ce n'est pas fatigant, mais quand le recruteur fait défiler l'écran, son doigt pourrait s'arrêter. S'arrêter, c'est seulement alors que vous avez la chance de lui faire voir ce qu'il y a derrière votre code.
N'attendez pas novembre pour regretter de ne pas avoir modifié en septembre. Allez faire glisser le curseur deux fois maintenant, vraiment, c'est plus efficace que d'envoyer dix CV de plus.