ERACOM — ID441 — S5 — Design d’interfaces 5 [email protected]

Objectif

Comprendre la structure et les éléments constitutifs d’un design system, en utilisant un design system existant.

Consignes

Tout d’abord, analysez la page d’accueil du site digitec.ch et identifiez les éléments UI qui la composent (boutons, texte, menu, etc.). Analysez aussi comment ces éléments se répètent et sont regroupés pour construire la page d’accueil. Mettez en page les résultats de votre analyse.

Deuxièmement, en utilisant le design system de Figma, créez des maquettes visuelles dont l’architecture est identique à celle du site digitec.ch.

Mise en place

1. Allez dans le projet CP-INT5 Design System - Projet 1 - Figma System et faites une copie du fichier Figma System qui s’y trouve.
2. Renommez le fichier Nom_Prénom_1_Figma_System.

Partie 1 – Analyse

1. Allez sur la page d’accueil du site digitec.ch et prenez des captures d’écran (cmd+shift+4) des éléments de base de l’interface (= les atomes) et des éléments plus construits (= les molécules et les organismes). Pour vous aider : l’élément peut-il fonctionner seul ou non ? Quels éléments ont tendance à se répéter sur la page ?
2. Importez ces captures d’écran dans Nom_Prénom_1_Figma_System, sous la page Digitec – Analyse.
3. Par comparaison et analyse, regroupez ces captures d’écran puis organisez-les proprement, avec des titres, selon (au moins) les catégories suivantes:

• Éléments de base (atomes)
  • Buttons
  • Icons
  • Typography toutes les tailles et graisses différentes)
  • Iconography (images, avatars)
  • Autre ?
• Modules (molécules)
  • Cards (présentant différentes compositions de cartes)
  • Search bar
  • Testimonals (likes)
  • Autre ?
• Sections (organismes)
  • Header
  • Footer
  • Main
  • Menu (Sidebar)
  • Autre ?

→ Pour les éléments qui se répètent, mettez max 3 éléments dce type

Partie 2 – Composition

1. Dans Nom_Prénom_1_Figma_System, allez à la page Digitec – Maquette.