Guide de styles communs
Consultez les modèles communs de mise en page et les exemples de composantes Bootstrap. Vous pouvez aussi consulter des thèmes Bootstrap pour vous inspirer et voir à quel point c'est personnalisable.
Tester votre palette ici.
Ce n'est pas un projet de design, alors ne passez pas 20h sur cette partie du projet. Je vous offre simplement l'opportunité de personnaliser un peu le style de base de Bootstrap.
P1.1a et P1.1b combinés ne valent que 3% de votre session alors ne mettez pas tous vos efforts là dessus.
Aller sur un site de palette de couleurs tels que Coolors (voir les ressources dans le wiki du cours pour la liste des outils de palettes de couleurs) Vous devez choisir une palette de 5 couleurs. Votre palette doit contenir au moins une couleur très foncée et une couleur très pâle qui servira de couleur de texte et d'arrière-plan de base. Les autres couleurs vous permettront de d'ajouter des accents de couleur au besoin (boutons, liens, navigation, cadre du pied de page, etc). Pour plus d'info sur les palettes de couleurs sur un site web consulter cet article de 99 designs et cet article de canva.
Aller sur un site de typo (polices de caractère) afin de choisir 1 à 2 typos pour le texte de votre projet (voir les ressources dans le wiki du cours pour la liste des sites où aller chercher des typos gratuites). Si vous en choisissez 2, ce sera une pour les titres et une très distincte et plus lisible pour les petits caractères pour le contenu textuel courant. Mais l'idéal pour un petit projet c'est de se concentrer sur une seule famille de typo qui comporte plusieurs niveaux de graisse.
Choisir le logo de l'événement sélectionné ou en redessiner un autre, comme un re-branding. Je laisse ceci entre vos mains, c'est à vous de voir.
Créer la version favicon de votre logo. Format carré 32px x 32px en fichier PNG avec fond transparent. Assurez vous que le logo ait une belle apprence même si le format de l'image est très petit. Au besoin vous pourrez créer une variation alternative du logo pour améliorer sa visibilité en format favicon.
Remise
Un dossier compressé en .zip contenant :
- un export .png de la maquette Figma de la landing page (LP)
- un export .png de la maquette Figma de de l'application mobile (APP)
- le logo du festival (le logo original ou le logo redessiné)
- le favicon du festival en format .png format 32px X 32px
- un guide de styles, créé dans Figma, exporté en .png, qui démontre:
- les 5 couleurs de votre palette, ainsi que leurs codes hexadécimaux ou leurs valeurs RGB
- une démo de votre police de caractère sélectionnée et le nom de cette typographie
Bien nommer votre dossier [vosdeux_nomsdefamille]_P1-1_582-424MO. Le fichier .zip devra aussi porter ce nom.
Remise dans l'onglet Devoirs de l'équipe Teams Optimisation Web avant le cours. Une seule remise par équipe.
P1.1b - Design+Styles (équipe)