Web Design

Briefing

Sur base du design ci-dessous, vous devrez le reproduire le plus fidèlement possible, tout en y appliquant la charte graphique fournie dans le dossier de ressources (typographies, couleurs, boutons, etc.), en utilisant les techniques et notions vues au cours.

Design

Consignes

• Créer un nouveau fichier Figma (pas à la suite d'un autre document)
• Dans une frame Desktop > Desktop 1440x1024, pouvant être agrandie uniquement en hauteur si besoin.
• Mise en place d'une grille de 12 colonnes (count), 96px de marges (margin) et 32px de gouttières (gutter)
• Le contenu textuel et imagé doit être strictement identique au design fourni.

Remise

La remise se fait via teams pour le 17 août 23h30 au plus tard, où vous mettrez votre fichier au format ".fig" dans le dossier dans lequel vous avez été invité.

• Votre fichier figma doit être nommé nom-prenom_classe_2526_web-design.fig

Critères d'évaluation

• ⚠️ Respect des consignes
• Mise en place et usage de la grille d'alignement.
• Utilisation appropriée des techniques (auto-layout, composant, etc.).
• Gestion typographique (taille, hauteur de ligne, alignement, etc.).
• Fidélité du design desktop et cohérence avec la charte graphique
• Mise en place des éléments boutons
• Création et utilisation d'au moins un composant, propriété(s) et variant(s) souhaités.
• Aucune triche, usage de l'IA non autorisé : tolérance zéro

Répartition des points

• Respect des consignes et nomenclature /2
• Alignements et respect de la grille /5
• Techniques utilisées /4
• Fidelité du design /3
• Cohérence charte graphique & technique /3
• Gestion typographique /3

Ressources

Dossier

Vous trouverez dans ce dossier toute les ressources nécessaires pour mener à bien votre examen (design, charte graphique, textes, images et le briefing).

Liens utiles