Ce projet réunit deux cours — UI Design et Frontend Development — autour d'un mandat commun, comme cela se passe dans un studio ou une agence : une·e designer et une·e développeuse·eur travaillent sur le même produit, avec des responsabilités distinctes mais une vision partagée.
L'enjeu n'est pas uniquement technique. Savoir organiser son travail, communiquer avec un·e collaboratrice·teur, respecter des jalons et documenter ses choix sont des compétences aussi attendues sur le marché du travail que la maîtrise de Figma ou des langages Frontend. Ce mandat est une occasion de les pratiquer dans un cadre proche du réel.
Votre réalisation sera fondée sur une logique modulaire, tant en UI Design qu'en Frontend Development : identifier les constituants élémentaires des composants ainsi que les structures redondantes, rationaliser et harmoniser les langages graphique et technique.
Vous allez concevoir, designer et intégrer le design system d'un média digital pure player : trois cent 60. Ce type de support est particulièrement intéressant pour ce mandat : il repose sur une identité visuelle modulaire, une hiérarchie éditoriale claire, une circulation à de multiples niveaux entre les contenus, et des composants récurrents (cartes d'articles, navigation, variété des articles et des médias, réduction de contenu long…).
<aside> <img src="/icons/light-bulb_blue.svg" alt="/icons/light-bulb_blue.svg" width="40px" />
Ce qu'on entend par "design system"
Un design system, ce n'est pas une maquette. C'est un ensemble de décisions — couleurs, typographies, espacements, composants — formalisées de manière à pouvoir être réutilisées de façon cohérente, adaptative et évolutive, que ce soit dans Figma ou dans le code.
Un design system renforce la collaboration au sein et entre les équipes, facilite la participation de nouveaux membres, et évite la dispersion en de multiples directions.
</aside>
Quelques exemples de médias indépendants pure player à explorer pour vous inspirer :
Pour comprendre ce que peut être un design system bien documenté :
Vous êtes mandaté·es pour concevoir et développer le design system d'un média digital indépendant. Le contenu éditorial — titres, articles, informations connexes, visuels — vous est fourni. Il oriente la thématique et le ton du média. C'est votre point de départ.
<aside> <img src="/icons/package_blue.svg" alt="/icons/package_blue.svg" width="40px" />
Contenu fourni
trois cent 60 - Guide d'utilisation du logo.pdf
Contenus · Média digital trois cent 60
</aside>
Vous réaliserez une recherche préalable de plateformes éditoriales et en dégagerez différentes pistes d’inspiration :
À partir du contenu fourni et de vos recherches, votre travail consistera à définir l'identité globale ainsi que la tonalité visuelle du média et à la formaliser sous deux aspects complémentaires : un design system dans Figma, et son intégration en HTML/CSS.
La ligne éditoriale, le nom du média et les thématiques des articles sont fixés. Il ne s'agit pas d'inventer un média de toutes pièces, mais de lui donner une forme visuelle et technique cohérente. Vous pouvez néanmoins adapter :
A remettre par groupe :
A remettre par groupe :
un lien vers votre repository Github (attention à ce qu’il soit public)
une version .zip de votre code (suite au dernier build, zippez l’ensemble des éléments contenus dans votre dossier de code, y compris les dossiers /nodes_modules, /dist, etc.).
Le dossier doit être nommé selon les conventions d’eikon
<aside>
26_27_IMD3X_FD_DesignSystem_Nom_Prenom (nom et prénom d’une personne du groupe)
</aside>
un lien vers votre site en ligne https://prenom-nom.at-eikon.ch/design-system/
<aside> <img src="/icons/warning_blue.svg" alt="/icons/warning_blue.svg" width="40px" />
Il est attendu que votre site soit responsive (mobile de 360px à 578px et desktop dès 1200px+) et fonctionnel auprès des navigateurs principaux (Firefox, Google Chrome, Safari).
</aside>
A remettre par groupe :
Vous devez designer et coder à minima les composants et pages suivantes:
| Composant / livrable | Solo | Groupe de 2 | Groupe de 3 |
|---|---|---|---|
| Tokens (styles de couleurs, typographie, rythme et espacement, etc). | ✅ | ✅ | ✅ |
| Header + navigation (toggle mobile inclus*) | ✅ | ✅ | ✅ |
| Footer | ✅ | ✅ | ✅ |
| Call to action (boutons principaux et secondaires) | ✅ | ✅ | ✅ |
| Page article (titre, sous-titres, chapô + informations connexes → auteurice, tags, partage) | ✅ | ✅ | ✅ |
| Carte article | ✅ | ✅ | ✅ |
| Carte article (format réduit) | ✅ | ✅ | ✅ |
| Carte article média (vidéo, audio, galerie photo…) | ✅ | ✅ | ✅ |
| Mise en page homepage | ✅ | ✅ | ✅ |
| Sections thématiques homepage (layouts distincts)** | min. 2 | min. 3 | min. 4 |
| Carte article à la une | ✅ | ✅ | |
| Carte reel (dispose d’une section thématique propre) | ✅ | ✅ | |
| Page catégorie / listing | ✅ | ✅ | |
| Section “grand format” (groupement thématique de plusieurs cartes) | ✅ | ✅ | |
| FAQ (Composant accordéon*) | ✅ | ||
| Inscription à la newsletter | ✅ | ||
| Dark mode* | ✅ | ||
| A minima un filtre doit être fonctionnel sur la page de catégorie / listing (par ex. filtre par catégorie) * | ✅ |
** Ces éléments doivent être interactifs et être implémentés via JavaScript et/ou CSS.*
*** Chaque section thématique peut adopter un layout différent. Les cartes définies ci-dessus sont les briques de base à combiner. Le nombre de layouts distincts minimum est indiqué ci-dessus.*
<aside> <img src="/icons/light-bulb_blue.svg" alt="/icons/light-bulb_blue.svg" width="40px" />
</aside>
Ce projet donne lieu à 3 notes. Les coefficients varient selon le rôle déclaré en début de projet : la·le responsable principal·e d'une discipline voit cette note portée à un coefficient de 2, les autres à 1. La responsabilité principale ne signifie pas faire seul·e — elle signifie porter la vision et l'organisation de cette partie.
| --- | --- | --- | --- | --- |
| UI | 2 | 1 | 1 | Cette note évalue la démarche UX et l’élaboration UI du projet : la qualité de la recherche, son exploitation, le design et la structuration en un design system, l’ergonomie (accessibilité), la réutilisation des tokens et des composants. → Évaluation UI Design |
| --- | --- | --- |
<aside> <img src="/icons/checklist_blue.svg" alt="/icons/checklist_blue.svg" width="40px" />
</aside>
| --- | --- | --- |
<aside> <img src="/icons/checklist_blue.svg" alt="/icons/checklist_blue.svg" width="40px" />
</aside>
| --- | --- | --- |