Analyser des portfolios

Temps 1 · séance 1 · ~60 min

Les slides du chapitre (PDF)PDF

• Trouver trois à cinq portfolios de développeurs, dont un site sobre et un site audacieux.
• Analyser chaque site avec la grille fournie, en notant ce que vous voyez à l'écran.
• En tirer ce que vous reprenez et ce que vous évitez pour votre propre portfolio.

1. Où chercher#

Vous cherchez des portfolios de développeurs, des personnes qui écrivent du code et montrent les applications qu'elles ont construites. Les sites de designers et d'agences sont souvent superbes, mais une agence vend un style. Votre portfolio, lui, montre des projets qui fonctionnent.

Quatre pistes mènent à des sites proches de votre situation.

• GitHub. Sur le profil d'un développeur dont vous utilisez un outil, l'adresse de son site figure souvent sous sa photo. Une recherche de « portfolio » parmi les dépôts donne aussi des sites, avec leur code.
• LinkedIn. La rubrique « Coordonnées » d'un profil donne souvent l'adresse d'un site personnel. Partez de développeurs juniors de votre région.
• Les listes d'exemples. Des articles réunissent des dizaines de portfolios commentés. Ils servent à repérer des sites, pas à les juger à votre place.
• Les anciens de l'école. Leur site montre ce qu'une personne de votre formation construit dans le même temps que vous. Trois portfolios d'anciens, en ligne : luciepostiaux.com, winga.be et portfolio.elolan.ovh.

Les adresses suivantes sont un point de départ. La recherche reste la vôtre : un site trouvé seul vous apprend davantage qu'un site recopié d'une liste.

Adresse	Ce que vous y trouvez
Scrimba, trente portfolios	une liste commentée par Piero Borrelli (2023)
WeAreDevelopers, mars 2025	six portfolios commentés, avec des conseils de hiérarchie et de cohérence
Catalin Pit, quatorze portfolios	une liste plus ancienne (2021), dont certains sites ont changé ou disparu
Brittany Chiang	un portfolio sobre, centré sur le texte, avec quelques détails soignés
Lee Robinson	un site d'une sobriété extrême, celui d'un développeur expérimenté qui écrit beaucoup
Bruno Simon	un portfolio en 3D où vous conduisez une petite voiture, celui d'un développeur créatif

Choisissez au moins un site sobre et un site audacieux. Un site sobre mise sur le texte, peu de couleurs et une mise en page simple. Un site audacieux prend un parti visible : une couleur franche, une typographie inhabituelle, des animations. La comparaison montre ce que chaque choix apporte au lecteur et ce qu'il lui coûte.

2. La grille en trois volets#

La grille d'analyse est le gabarit fourni pour décrire un portfolio, à raison d'une grille par site. Vous cochez des cases ou vous répondez en quelques mots. Toute la classe utilise la même grille, ce qui permet de comparer les réponses. Elle compte trois volets et un bilan.

Téléchargez la grille d'analyse en WordDOCX, à remplir à l'écran, une copie par site, ou la même grille en PDFPDF à imprimer. L'exemple rempli par le professeurPDF, sur le site d'un développeur, est plus détaillé que votre grille ne doit l'être. En huit minutes, une case cochée et quelques mots suffisent, tant qu'ils décrivent ce qu'on voit à l'écran.

Le contenu révèle ce que l'auteur a choisi de montrer. Combien de projets ont une démo qui s'ouvre ? Quand vous ouvrez un projet, trouvez-vous le contexte, le rôle de l'auteur et ses choix techniques, comme dans la fiche projet du chapitre 1.01 ?

La structure révèle le chemin du lecteur. Que voyez-vous en premier, sans défiler ? Combien de clics faut-il depuis l'accueil pour ouvrir un projet détaillé, et combien pour trouver le contact ?

Le design se voit dans les polices, la palette, les images, la densité, les animations et le mode sombre, et dans leur cohérence d'une page à l'autre. Les captures des projets ont-elles la même taille et le même cadrage ?

Le bilan tient en quatre lignes. « Ce que je reprends » nomme un élément précis, par exemple « la fiche projet qui commence par le problème à résoudre ». « Ce que j'évite » nomme un défaut constaté, par exemple « le texte gris clair, difficile à lire sur le fond blanc ». La note sur cinq donne votre avis d'ensemble, et un mot la justifie.

Tester le mobile#

La question 2.6 vous demande d'afficher le site comme sur un téléphone. Les outils de développement du navigateur s'ouvrent avec la touche F12, comme au chapitre 14 de 5XCOS, ou avec Cmd+Option+I sur macOS. Ils savent simuler un écran plus étroit. Dans Chrome ou Edge, activez la barre d'appareils avec Ctrl+Maj+M, ou Cmd+Maj+M sur macOS. Tapez 375 dans le champ de la largeur, la largeur en pixels d'un téléphone courant. Rechargez la page, faites-la défiler jusqu'en bas et ouvrez le menu.

Notez ce que vous voyez, pas ce que vous supposez. « Le menu doit être pratique sur téléphone » ne se vérifie pas. « À 375 px, le menu se replie derrière un bouton qui l'ouvre » se vérifie, et un camarade peut le constater à son tour.

3. Le déroulé#

Vous travaillez seuls pendant une demi-heure.

1. Trouvez vos sites en sept minutes.
2. Remplissez une grille par site, en huit minutes au plus. Quand le temps est écoulé, passez au site suivant, même si la grille n'est pas finie.
3. Gardez chaque adresse dans votre dossier, avec la date de consultation.

Trois grilles tiennent dans la séance. Si vous visez cinq sites, vous finissez les deux derniers à la maison. Avant la fin, choisissez le site que vous présenterez : celui qui vous a le plus appris, en bien ou en mal.

4. La mise en commun#

La mise en commun dure trente minutes. Une dizaine de personnes présentent un site en deux minutes, projeté au tableau. Les autres ajoutent une ligne : « chez moi aussi » ou « chez moi, au contraire ». Chaque personne qui présente dit ce qui lui plaît, ce qui lui déplaît, et une chose qu'elle reprendra.

Pendant les présentations, le professeur remplit au tableau la page « Mise en commun » de la grille, en trois rubriques. Les structures rencontrées regroupent les pages, leur ordre, ce qu'on voit en premier, la navigation et le mobile. Les choix de contenu qui reviennent portent sur les projets, la façon de les raconter, les informations sur la personne et les liens. Les partis pris de design relèvent la typographie, la palette, les images, la densité et les animations. Chaque ligne note ce qui revient, avec le nombre de sites entre parenthèses.

La classe en dégage ensuite la structure habituelle et conseillée : les pages que presque tous les sites contiennent, dans l'ordre qui a le mieux fonctionné. Elle remplit le dernier tableau de la page, une ligne par page. Au chapitre 1.05, vous recopiez cette structure dans le plan de votre cahier des charges. Vous la comparez aux pages que le gabarit prévoit déjà.

Le tableau rempli est photographié et partagé dans le canal du cours.

5. Ce que vous gardez#

Rangez vos grilles et la photo de la synthèse dans le dossier du devoir de la semaine. Au chapitre 1.05, la structure de la classe et vos lignes « ce que je reprends » guident votre cahier des charges. Au chapitre 1.09, vos sites préférés deviennent les références de votre planche de direction artistique, et vos lignes « ce que j'évite » vos premiers refus.

À retenir#

• Un portfolio de développeur se trouve sur GitHub, sur LinkedIn, dans les listes d'exemples ou chez les anciens de l'école.
• Parmi vos trois à cinq sites, au moins un est sobre et un autre audacieux.
• La grille décrit le contenu, la structure et le design, puis se termine par ce que vous reprenez et ce que vous évitez.
• Chaque réponse de la grille décrit ce que vous voyez à l'écran, sur ordinateur comme à 375 px de large.
• La mise en commun dégage la structure habituelle et conseillée, que vous recopiez dans le plan de votre cahier des charges.