Moodboard Design — Levidrat

Inspirations et recommandations pour un site premium haut de gamme

1. Analyse des Concurrents

Voici ce que font les meilleurs sites de menuiserie et cuisiniste premium :

Ligne Roset Inspiration

Couleurs : Palette minimaliste (#f2ede6 beige, #22222c noir, #3d3d3d gris)
Style : Très épuré, photographie pleine page, typographie fine
Leçon : Moins de texte, plus d'images. Le produit est la star.

Roche Bobois Inspiration

Couleurs : Noir (#000) et blanc (#fff) uniquement
Style : Ultra-luxe, sélecteur de pays, galerie photos immersive
Leçon : Le contraste noir/blanc = immédiatement premium

Gautier Inspiration

Couleurs : Vert (#8EBE55), jaune (#FFC700), beige (#e3e0de)
Style : Coloré mais maîtrisé, animations, configurateur
Leçon : Une couleur d'accent vive rend le site mémorable

Offerman Woodshop Inspiration

Style : Storytelling, côté humain, photos d'atelier
Leçon : Raconter l'histoire de l'artisanat crée la connexion émotionnelle

Carpenters Workshop Gallery Inspiration

Style : Scroll-triggered animations, galerie portfolio
Leçon : Les animations au scroll guident le regard sans submerger

D & D Carpentry Inspiration

Style : Photographie haute qualité qui fait le travail
Leçon : De belles photos > tout le reste. Investir dans la photo.

2. Palette de Couleurs Proposée

Évolution de la palette actuelle vers un style plus premium et chaleureux.

Palette Actuelle (à faire évoluer)

Marron Selle
#8B4513
Or
#D4AF37
Bleu Nuit
#2C3E50

Palette Proposée — "Artisanat Moderne" Recommandé

Bois Foncé
#3D2817
Bois Moyen
#8B5E3C
Bois Clair
#C9A87C
Ivoire
#F5F0EB
Noir Charbon
#1A1A1A
Or Antique
#B8860B

Pourquoi cette palette ?

• Bois Foncé (#3D2817) : Remplace le marron "SaddleBrown" par un brun plus profond et élégant, évoquant le noyer et le chêne foncé
• Ivoire (#F5F0EB) : Remplace le blanc pur par une teinte chaude qui rappelle le bois naturel
• Or Antique (#B8860B) : Plus subtil que l'or actuel (#D4AF37), moins "bling-bling", plus authentique
• Noir Charbon (#1A1A1A) : Pour les textes et sections sombres, plus doux que le noir pur

3. Typographie

Actuel

  • Segoe UI (sans-serif) — police système
  • Georgia (serif) — pour les titres secondaires
  • Pas de hiérarchie claire
  • Tailles de police standard

Proposé Recommandé

  • Playfair Display (serif élégant) pour les titres H1/H2
  • Inter ou DM Sans (sans-serif moderne) pour le corps
  • Hiérarchie claire : H1 3em, H2 2em, H3 1.5em, corps 1em
  • Espacement de lettres sur les titres (letter-spacing: -0.02em)
  • Poids de police variés (300, 400, 600, 700)

Aperçu typographique

Artisan LEVIDRAT BOIS & Cie

Menuiserie haut de gamme et rénovation intégrale à Paris et Paris. Quand l'élégance rencontre l'excellence.

→ Avec Playfair Display + Inter, l'effet serait immédiatement plus premium

4. Layout et Expérience Utilisateur

Hero Section À améliorer

• Image plein écran avec overlay sombre
• Titre centré, police large (3.5em+)
• Bouton CTA doré bien visible
• Animation fade-in au chargement

Navigation À améliorer

• Header transparent qui devient blanc au scroll
• Menu simplifié (max 6 items)
• Logo à gauche, CTA "Devis" à droite
• Menu mobile en overlay plein écran

Sections Services À améliorer

• Cards avec photos de réalisations
• Effet hover : zoom photo + overlay
• Icônes minimalistes (SVG line)
• Espacement généreux entre sections

Galerie Réalisations Nouveau

• Grille Masonry (tailles variables)
• Filtres par catégorie (cuisine, SDB, escalier...)
• Lightbox au clic (plein écran)
• Légendes avec type de bois et finition

Animations Nouveau

• Scroll-triggered (AOS ou Intersection Observer)
• Fade-in + slide-up sur les sections
• Compteurs animés pour les statistiques
• Parallax léger sur les images hero

Mobile À améliorer

• Mobile-first design
• Touch-friendly (boutons 44px+)
• Images optimisées (WebP, lazy load)
• Menu hamburger animé

5. Plan d'Action Prioritaire

  1. Typographie — Importer Playfair Display + Inter depuis Google Fonts. Changer les variables CSS. Impact immédiat, effort faible.
  2. Palette de couleurs — Évoluer vers la palette "Artisanat Moderne". Changer les variables CSS :root. Impact visuel majeur.
  3. Hero Section — Refondre la page d'accueil avec image plein écran + overlay + CTA. Première impression = 50% de la conversion.
  4. Animations au scroll — Ajouter AOS (Animate On Scroll) pour les fade-in. Rend le site vivant et moderne.
  5. Cards services — Refondre avec photos + hover effects + overlay. Guide le regard vers les services clés.
  6. Galerie réalisations — Créer une grille Masonry avec filtres et lightbox. Preuve sociale = confiance.
  7. Header intelligent — Transparent → blanc au scroll, menu simplifié. Plus premium, moins encombré.
  8. Optimisation mobile — Audit responsive, touch-friendly, images WebP. 60% du trafic est mobile.

6. Inspirations Visuelles

🏠

Hero Plein Écran

Image de cuisine réalisée + overlay sombre + titre élégant

📐

Espaces Respirants

Beaucoup de blanc/ivoire, marges généreuses, focus sur le contenu

🪵

Textures Bois

Photos macro de veines de bois en arrière-plan de sections

✨

Accents Dorés

Boutons, séparateurs, icônes en or antique (subtil, pas voyant)

📸

Galerie Immersive

Grille de réalisations en Masonry avec lightbox plein écran

🎬

Animations Fluides

Fade-in au scroll, parallax léger, transitions douces

🔨

Storytelling Atelier

Photos de l'atelier, des mains qui travaillent, du bois brut

📱

Mobile Premium

Expérience mobile soignée, gestures naturels, rapidité