Remise 2 Design

Cette page ne concerne que la remise 2 - Design

Pour consulter les intructions complètes du projet, veuillez vous référer à

Projet Portfolio - Infos générales

Design de votre portfolio dans Figma

Tip

Si vous n’avez jamais travaillé avec Figma, il est possible d’utiliser un autre logiciel de design de votre choix.

• Veuillez réaliser votre design dans le même fichier Figma que votre moodboard.
  • Organisez vos cadres dans l’espace de travail afin que le tout soit clair et bien structuré.
  • N’oubliez pas de nommer correctement chaque cadre.
  • Si ce n'est pas encore fait, veuiller bien nommer votre fichier Figma nomfamille_prenom_portfolio. ??? question "Comment renommer un fichier Figma?"

• Votre design doit être aligné avec votre moodboard remis le 17 septembre (inspirations visuelles, palette de couleurs, typographies, images de sites qui vous inspirent), c'est votre référence pour appuyer vos choix graphiques.
• Concevoir la page d’accueil (page principale de votre portfolio).
• Si vous prévoyez avoir des pages distinctes pour chaque projet, concevez également le design d’une page type de projet.
• Pour les blocs de texte, utilisez du faux texte comme Lorem ipsum.
• Pour les titres de sections, afin de bien identifier la structure et la hiérarchie de l’information, inscrivez les vrais titres qui apparaîtront dans la version finale de votre portfolio web.
• Système de couleurs et de typographies : appliquez judicieusement votre palette de couleurs ainsi que votre choix de une ou deux polices de caractère, avec leurs usages (titres, textes courants, boutons, etc.).
• Grille et mise en page : définissez une grille (colonnage, marges, espacement) afin d’assurer une cohérence visuelle sur l’ensemble de vos sections et de vos pages.
  • Si vous prévoyez utiliser Bootstrap pour l’intégration HTML+CSS de votre portfolio, alignez vos éléments selon le système de 12 colonnes.
    • Exemple : une section occupant le quart de la page correspond à .col-3 et peut être placée à côté d’une autre section occupant les trois quarts restants, soit .col-9.
    • Lien vers le contenu de cours de Web 3 qui couvre le système de grille Bootstrap
  • Au besoin, pour vous guider, vous pouvez utiliser un de ces template Figma comme point de départ:
    • Bootstrap 5 Grid System For 3 Devices
    • ou
    • Bootstrap V5 Layout Grid System Fixed & Fluid
• Version mobile: en plus d'une version desktop préparez une maquette mobile adaptée aux petits écrans pour montrer que votre design est responsive.
• Ne réalisez pas de prototype interactif ni d’animations dans Figma. Vous pouvez le faire pour vous-même si vous le souhaitez, mais ce n’est pas requis pour la remise du 24 septembre.

Remise

Date

📅 Mercredi 24 septembre, avant le cours

Où remettre

• Dans le Devoir de Web 5 sur Teams

Quoi remettre

• Lien vers ton fichier Figma qui devrait inclure à la fois le moodboard et le design version desktop et version mobile. Le fichier Figma doit être nommé nomfamille_prenom_portfolio
• Des fichiers PDF exportés de tous les frames bien nommés dans Figma (moodboard, accueil-desktop, accueil-mobile et si applicable page-projet-desktop et page-projet-mobile)