P1.1b LP - Design

Design de la landing page

Voir des inspirations de Landing Pages: sur Dribbble.

Travail individuel pour la personne qui est désignée à la page promotionnelle (landing page) LP. Vous devez quand même collaborer avec votre co-équipier pour vous assurer que vos styles s'alignent bien ensemble.

Voici un exemple de ce qui est attendu à peu près, comme design pour la section "Héros" et 2 exemples de la section "Fonctionnalités" 👇

Section Héros Section Fonctionnalités: 1er exemple Section Fonctionnalités: 2e exemple

À l'aide de Figma tu dois concevoir la section héros et la section fonctionnalités de la page promotionnelle (landing page). Suivre le système de grille Bootstrap (12 colonnes). Voici un gabarit qui peut vous aider à démarrer pour aligner vos éléments le long de la grille.

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.

Maquette Figma: Ne faire que la maquette de la version desktop, largeur maximale de 1320px. Barre de navigation: S'en tenir au style de barre de navigation Bootstrap, avec votre typo et vos couleurs. Secton héros: Styliser votre section héros avec votre typo et vos couleurs. Vous n'avez pas beaucoup de choix créatif à faire, ça doit sensiblement ressembler à la démo ci-haut. Secton héros: Créer un cadre pour accueillir le design de l'app mais laisser l'intérieur vide. Il peut avoir l'air d'un cadre de téléphone mobile ou encore un cadre plus simplifié comme dans l'exemple fourni ci-haut. Section fonctionnalités: Design la section fonctionnalité. Tu peux t'inspirer des 2 exemples de section fonctionnalités ci-haut ou la présenter autrement en allant t'inspirer des exemples Bootstrap. Il y aura 6 fonctionnalités. Pour l'instant, peux utiliser du Lorem Ipsum comme texte. Couleurs: Assures-toi d'alterner de couleur de fond, de section en section pour bien les diviser visuellement. N'hésite pas à utiliser beaucoup de marge et d'espaces blancs. Il est déconseillé d'utiliser des couleurs très vives pour l'arrière-plan d'un site. Tiens-toi en à des couleurs très claires ou très foncées et sobres. Tu pourras utiliser les couleurs plus vives de la palette de couleurs pour des éléments graphiques ponctuels dans ta page comme le menu, les liens, les boutons, les icônes etc. 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.