Portfolio Factory: produire des maquettes visuelles pour des portfolios web. Il existe divers outils pour créer son portfolio en ligne, dont Cargo et Readymag (ainsi que Wix, Squarespace etc)…

Cependant, “on n’est jamais aussi bien servi que par soi-même”. Beaucoup d’élèves préfèrent créer leur propre design, qui sera plus original, plus moderne, plus épuré que ce qu’offrent les plateformes.

Dans ce projet, chaque élève devient directeur artistique et conçoit un design pour un site web portfolio (maquette visuelle réalisée avec Figma).

Dans un deuxième temps, ces maquettes seront développées (avec WordPress) par des élèves des classes ID432 et ID441, dans la suite de ce semestre. Cela permettra de les utiliser pour créer un portfolio web personnel facilement. Ces modèles seront disponibles pour les élèves Eracom.

Contraintes

  • Réaliser la maquette au format desktop (1440 px de large) et mobile (390 px de large).
  • Utiliser des fontes sous licence libre / open source. Doivent être disponibles/licenciées pour un usage web, en vue du développement WordPress.
  • Échelle typographique à définir et documenter : H1, H2, H3, Body, Caption/Legend (tailles + graisses).
  • Couleur: Contraste texte/fond conforme WCAG AA minimum (lisibilité).

Evaluation finale

Format du rendu:

Figma

  • Un document Figma qui comporte les écrans demandés.
  • Le document Figma est organisé en pages distinctes:
  • Cover : nom de l’élève, classe, année, titre du modèle, vignette de présentation
  • Une recherche, un choix de références et inspirations, avec un commentaire expliquant les choix.
  • Une petite charte graphique comportant au minimum: les typographies (tailles/graisses), les couleurs (codes HEX).
  • Modèle Homepage (page d’accueil).
  • Modèle Détail d’un projet.
  • Modèle de page “À propos / contact”.
  • Modèle liste / grille des projets (navigation par catégorie).

Page imprimée

Fournir également une page imprimée (A4 horizontal) montrant une page du template. Doit comporter en petit en bas à droite le nom du template, et le nom de l’élève.

Date du rendu: Jeudi 24 septembre 2026 à la fin du cours.

Critères:

  • Concept et direction artistique (2pt).
  • Hiérarchie visuelle & UX (2pt) : Lisibilité, parcours utilisateur, mise en avant des projets, navigation intuitive
  • Adaptation responsive (mobile) (1pt): Qualité de la déclinaison mobile — pas un simple rétrécissement, mais une vraie réflexion d’adaptation.
  • Rigueur technique Figma (2pt): Organisation du fichier, utilisation de styles, nommage des calques et frames — prêt pour la passation.
  • Présentation / soutenance (1pt): Capacité à présenter et justifier ses choix de direction artistique.

Total des points: 8

Barème

8 pts = 6
7 pts = 5,5
6 pts = 5
5,5 pts = 4,5
5 pts = 4
4 pts = 3,5
3 pts = 3
2 pts = 2,5
1,5 pts = 2
1 pt = 1,5
0 pt = 1