☕ Jacobs Douwe Egberts — Landing page (projet Ă©tudiant)

Conception & intĂ©gration d’une landing page responsive pour une marque de distributeurs de cafĂ© (projet fictif). Objectif : dĂ©montrer une mise en page soignĂ©e, une hiĂ©rarchie claire et de bonnes pratiques HTML5/CSS3.

Projet étudiant Landing page HTML5/CSS3 Responsive Accessibilité
← Retour au portfolio đŸŸ Voir : Champagne & Co
Aperçu de la landing page Jacobs Douwe Egberts (en-tĂȘte)
EntĂȘte du site JDE — bloc d’ouverture + premiers modules.

🎯 Contexte & objectifs

Contexte

  • Projet rĂ©alisĂ© en binĂŽme dans le cadre de la formation Bachelor.
  • Exercice orientĂ© “marketing produit” : capter l’attention & convertir.
  • Livrable attendu : une page d’accueil complĂšte et responsive.
  • Sources : benchmark cafĂ©s/distributeurs, contenus mĂ©dias, personas.

Objectifs

  • Mettre en place un en-tĂȘte persuasif (titre, bĂ©nĂ©fice, appel Ă  l’action).
  • Structurer le contenu (preuves, caractĂ©ristiques, avantages, FAQ).
  • Assurer la compatibilitĂ© multi-Ă©crans & bonnes pratiques SEO on-page.

📩 Livrables principaux

Wireframe & contenu

  • Zoning de la landing (en-tĂȘte → avantages → produits → preuves → appel final Ă  l’action).
  • RĂ©daction/placement des propositions de valeur (arguments diffĂ©renciants) et des micro-preuves de confiance (ex. garanties, entretien).

Intégration front

  • HTML5 sĂ©mantique (header, main, section, footer, aria-*).
  • Grilles CSS & flex pour les blocs clĂ©s.
  • Composants : cartes produit, boutons d’appel Ă  l’action, FAQ accordĂ©on (CSS/JS lĂ©ger).

Design & assets

  • Respect des tons cafĂ©/bruns sur les mĂ©dias JDE + accents verts ponctuels (service/fiabilitĂ©).
  • Visuels optimisĂ©s (poids maĂźtrisĂ©), variantes desktop/tablette/mobile.
  • CohĂ©rence portfolio : l’UI du site reste en bleu (cadre), les mĂ©dias du projet respectent l’identitĂ© JDE.

đŸ‘€ Personas — utilisateur & dĂ©cideur

Persona Utilisateur — EmployĂ© du service technique

Christian — EmployĂ© du service technique

  • Attentes : pause simple & conviviale, disponibilitĂ© de la machine.
  • Freins : perte de temps, options peu claires.
  • RĂ©ponse : ergonomie claire, variĂ©tĂ© de boissons, rapiditĂ©.
Persona DĂ©cideur — Directeur de site

Didier — Directeur de site

  • Attentes : fiabilitĂ©, coĂ»t par tasse, image employeur.
  • Freins : maintenance, engagements non tenus.
  • RĂ©ponse : garanties, SLA clairs, coĂ»ts maĂźtrisĂ©s & transparents.
Comment les personas ont guidé le contenu ?

BĂ©nĂ©fices clairs (rapiditĂ©, variĂ©tĂ©) pour l’utilisateur ; preuves (SLA, coĂ»t/tasse) pour le dĂ©cideur. L’ordre des sections reflĂšte cette double lecture.

Pourquoi un appel à l’action en haut et un autre en bas ?

Le haut capte les convaincus ; le bas convertit aprÚs la phase de réassurance/lecture détaillée.

Comment la marque est respectée ?

Les médias (visuels, maquette) utilisent les codes JDE (bruns/café + touches vertes). La coquille bleue est celle du portfolio pour distinguer les projets entre eux.

Choix design → Impact

Choix
Impact recherché
En-tĂȘte court + bĂ©nĂ©fices visibles
ComprĂ©hension immĂ©diate & orientation vers l’appel Ă  l’action
Blocs réassurance visibles
Rassurer le décideur (SAV, hygiÚne, coûts)
Cartes produits uniformes
Comparaison rapide, perception de gamme
FAQ concise
Lever les freins récurrents sans alourdir la page

📐 Wireframe & Maquette

Wireframe / maquette de la page JDE
Wireframe / maquette — hiĂ©rarchie, zoning et chemin vers les appels Ă  l’action.
Site développé (intégration finale JDE)
Site dĂ©veloppĂ© — intĂ©gration responsive et modules produits.

💬 RĂ©seaux sociaux

LinkedIn — Posts officiels

LinkedIn officiel 1 LinkedIn officiel 2 LinkedIn officiel 3

Analyse rapide

  • Ton sobre et pro ; focus sur les machines et l’usage en entreprise.
  • Visuels orientĂ©s produit & pause conviviale.
  • Peu de texte → nĂ©cessitĂ© de renforcer les propositions de valeur sur la page.

LinkedIn — Mes maquettes

Maquette LinkedIn 1 Maquette LinkedIn 2

Intentions de design

  • Accroches plus visibles (question, bĂ©nĂ©fice clair).
  • Visuels cafĂ© + contexte bureau pour l’identification immĂ©diate.
  • Appel Ă  l’action explicite vers la landing.

Facebook — Posts officiels

Facebook officiel 1 Facebook officiel 2 Facebook officiel 3

Ce que j’en retiens

  • Posts courts, visuels dominants → prioritĂ© Ă  l’image.
  • Mettre en avant la convivialitĂ© & l’instant cafĂ©.
  • Appui sur preuves (entretien, hygiĂšne) en second temps.

đŸ’¶ Budget — estimĂ© vs rĂ©el

Budget estimé
Budget estimĂ© — rĂ©partition des postes.
Budget réel
Budget rĂ©el — ajustements et arbitrages.

L’écart s’explique par du polishing tardif (micro-optimisations) et un temps d’intĂ©gration plus long dĂ» aux itĂ©rations.

📈 RĂ©sultats & apprentissages

1
Landing page complĂšte
100%
Responsive validĂ© (mobile → desktop)
A
Évaluation projet
SEO
Balises & sémantique propres

🔗 Projets liĂ©s

đŸŸ Champagne & Co 🌐 Site Asselin Migani