Invité·e
UI/UX DesignFigmaHTML/CSSJavaScriptWordPressPhotoshopIllustratorAfter EffectsBlenderAstroPremiere ProInDesignTailwind CSSUI/UX DesignFigmaHTML/CSSJavaScriptWordPressPhotoshopIllustratorAfter EffectsBlenderAstroPremiere ProInDesignTailwind CSS
Web DesignLanding PageFigma
Olive Oil
À propos du projet
J'ai réalisé une landing page pour une marque fictive appelé 'Olive Oil' qui vends de l'huile d'olive premium 100% italienne.
Rôle
Web Designer, IntégrateurDurée
Octobre 2023Équipe
Projet individuelOutils
FigmaHTML/CSS
Aperçu Global
Maquette de la landing page premium Olive Oil
Bilan & Apprentissages
- 1Direction artistique premium : typographies, couleurs et mise en page luxueuses
- 2Storytelling visuel au service de la conversion
- 3Intégration HTML/CSS fidèle à une maquette Figma
- 4Hiérarchie visuelle et composition de page
L'essentiel
Comment véhiculer une image de luxe et d'authenticité italienne à travers une simple landing page, tout en incitant à l'achat ?
01Contexte & Défi
Contexte & Brief
Exercice de design : concevoir une landing page premium pour une marque fictive d'huile d'olive italienne haut de gamme. Focus sur la direction artistique et la mise en page.
- Marque fictive : Olive Oil — huile d'olive premium 100% italienne.
- Objectif : créer une landing page qui véhicule le luxe et l'authenticité.
- Focus sur la direction artistique, la hiérarchie visuelle et le storytelling.
- Livrable : maquette Figma + intégration HTML/CSS statique.
02La Problématique
La Problématique
Comment véhiculer une image de luxe et d'authenticité italienne à travers une simple landing page, tout en incitant à l'achat ?
- Traduire visuellement le positionnement premium de la marque.
- Créer une hiérarchie visuelle qui guide l'œil vers l'acte d'achat.
- Raconter une histoire (storytelling) à travers la mise en page.
03Notre Démarche
Démarche & Processus
Un travail de recherche visuelle approfondi suivi d'une conception itérative sur Figma.
- Recherche visuelle : moodboards sur l'univers premium food.
- Sélection de typographies élégantes (serif) et palette naturelle olive/or.
- Wireframe basse fidélité → maquette haute fidélité sur Figma.
- Focus sur la hiérarchie visuelle et le storytelling par sections narratives.
- Intégration finale en HTML/CSS statique.
04La Solution proposée
La Solution
Une landing page au design épuré et luxueux, racontant l'histoire de la marque à travers des sections narratives.
- Typographie serif élégante pour le positionnement haut de gamme.
- Photographies plein cadre mettant en valeur le produit.
- Palette olive et or évoquant l'authenticité et le luxe.
- Mise en page aérée avec sections narratives guidant vers l'achat.
05Mesure des Résultats
Résultats & Apprentissages
Un design validé pour sa qualité esthétique et son impact visuel, intégré en HTML/CSS.
- Design validé pour sa qualité esthétique et son impact visuel.
- Projet intégré en HTML/CSS statique fidèle à la maquette.
- Maîtrise de la direction artistique premium et du storytelling visuel.
- Compétences en conception de landing pages orientées conversion.
Aperçu Global
Bilan & Apprentissages
- 1Direction artistique premium : typographies, couleurs et mise en page luxueuses
- 2Storytelling visuel au service de la conversion
- 3Intégration HTML/CSS fidèle à une maquette Figma
- 4Hiérarchie visuelle et composition de page
