Pour cette étape du projet, vous devrez réaliser un guide de styles qui vous servira de référence tout au long de votre projet, autant afin de concevoir vos maquettes que lors de la réalisation du site web lui-même.
Chaque membre de l’équipe doit créer son propre guide de styles.
Allez consulter les ressources et références en onglet dans notre équipe Teams pour vous inspirer par des sitewebs qui gagnent les honneurs, pour voir les tendances acutelles etc.
J'insiste notemment sur cet article qui vous aide à coordonner des polices de caractère ensemble.
Matériel
Médias 🖼️
Voici des exemples de guide de style de divers sites web.
Vous devez produire votre guide de style avec Figma.
Pour vous inspirer, vous pouvez regarder les guides de styles en pièce jointe 👆.
Les exemples ne sont qu’à titre indicatif, vous n’avez aucunement à respecter cette mise en page, tant que l’information nécessaire est contenue dans votre document.
Logo
Inclure le logo du client. Vous pouvez aussi le refaire si vous décidez de revoir le brand.
Palette de couleur
Inclure une palette des 5 couleurs principales qui seront utilisées sur le site. L'outil Coolors peut vous aider à générer une palette harmonieuse au besoin.
Afficher un aperçu des couleurs.
Nommez chaque couleur afin d'éviter de la confusion du type: "Le vert… non l'autre vert". Si vous manquer d'inspiration, vous pouvez utiliser l'outil Name that color.
Inclure le code hexadécimal de chacune des couleurs.
Typographie
Pour desktop, inclure 3 niveaux de titres et nommer la police, taille, graisse, couleur et caractéristique de chacun.
Affichez un exemple de texte régulier sous forme de paragraphe. Afin d'éviter d'être distrait par le texte contenu dans le paragraphe, utilisez du Lorem ipsum. Nommez à nouveau la police, taille, graisse ainsi que la couleur utilisée.
Affichez le style d'un lien normal ainsi que lors de sont survole. Nommez à chaque fois la police, taille, graisse ainsi que la couleur utilisée afin de voir la différence entre les deux états.
Répétez les éléments précédents (titres, texte courant et liens textuels) si vous prévoyez changer la taille du texte pour la version mobile en spécifiant la taille de ceux-ci pour la version mobile.
Remise
Remise:
- Une version PDF de votre maquette.
Inclure dans un seul dossier le moodboard (PDF), le guide de styles (PDF) et la maquette (PDF).
Renommez votre dossier de travail 📁 au format suivant:
[nom de famille]_[prénom]_design_582-518MO
ex: ouellet_marie-michelle_design_582-518MO
Compressez ensuite votre dossier de travail en fichier zip 🗜
Remettez dans Devoir
En plus du dossier, remettre lien vers votre fichier Figma en ligne (n'oubliez pas le paramètre: anyone with the link can EDIT), voir procédure ci-bas:
Guide de styles