Back to portfolio
CorporatePublished

Malley Centre

Institutional website for the Malley-Centre strategic development. A substantial project designed by Fabrica with an interactive timeline carousel.

ClientLa Fabrique Malley
Year2022
Agency collaboration

Graphic design and art direction by Fabrica Design. WordPress/Divi development and integration by ark.swiss.

Malley Centre
Context

Project genesis

Malley-Centre is a major urban transformation project at the heart of the Lausanne-Morges metropolitan area. Fabrica Design produced an ambitious design including custom maps for each phase of the project. Our brief: integrate this complex design into WordPress/Divi with a focus on performance and responsive layout.

malley-centre.ch
Malley Centre - Site institutionnel

Malley-Centre — Projet de transformation urbaine

01The challenge

Client problem

How do you integrate an ambitious Fabrica design with an interactive carousel, custom maps and animated images while keeping performance and responsive intact?

Carrousel interactif : afficher les différents états d'avancement du projet avec maps designées par Fabrica

Maps personnalisées : intégrer les visuels cartographiques créés par Fabrica pour chaque phase

Responsive complexe : adapter chaque page et composant custom à tous les écrans

Hero animé performant : optimiser les images animées sans impacter le temps de chargement

Performances globales : maintenir un site rapide malgré les visuels haute qualité

Malley Centre - Site sur iPad
Malley Centre - Site sur mobile
02Our approach

Technical solution

WordPress/Divi integration with premium plugins for the hero, custom development for the carousel and per-page responsive work.

Carrousel états d'avancement : développement sur mesure pour afficher les maps Fabrica avec transitions

Plugins premium : optimisation du hero avec images animées pour des performances maximales

Responsive manuel : ajustements CSS custom page par page pour tous les breakpoints

Compression médias : optimisation des maps et visuels sans perte de qualité

Architecture par secteurs : navigation claire entre les 4 zones du projet

Key decisions

  • Plugins premium pour le hero animé (lazy loading, compression)
  • Développement custom pour le carrousel interactif
  • CSS responsive sur mesure plutôt que Divi natif

Carrousel d'avancement

Un composant interactif présentant les différentes phases du projet de transformation urbaine avec les maps personnalisées designées par Fabrica.

  • Maps Fabrica intégrées pour chaque phase
  • Transitions fluides entre les états d'avancement
  • Navigation entre les 4 secteurs du projet
malley-centre.ch
Malley Centre - Carrousel d'avancement interactif
Features

Key features

Carrousel d'avancement

Composant interactif présentant les différentes phases du projet Malley-Centre avec maps personnalisées designées par Fabrica pour chaque état.

Hero images animées

Images animées immersives en hero grâce à des plugins premium. Lazy loading et compression pour des performances optimales.

Maps personnalisées

Visuels cartographiques créés par Fabrica Design intégrés dans le carrousel. Représentation visuelle de l'évolution du quartier.

Navigation par secteur

Architecture claire présentant les 4 secteurs du projet de transformation urbaine. Chaque zone avec ses spécificités et avancement.

Blog actualités

Section actualités dynamique pour communiquer sur l'avancement du projet. Flux automatisé et gestion autonome par le client.

Responsive sur mesure

Adaptation manuelle de chaque page et composant custom pour garantir une expérience optimale sur mobile, tablette et desktop.

03Results

Project impact

A fast institutional site that tells the story of the urban transformation project and its progress over time.

4
secteurs présentés
carrousel interactif
hero animé optimisé
maps Fabrica intégrées
responsive complet
blog actualités
  • Carrousel interactif des états d'avancement du projet
  • Hero avec images animées optimisé pour les performances
  • Responsive soigné sur chaque page du site
  • Section actualités avec flux automatisé

Navigation par secteurs

Une architecture claire permettant de découvrir les 4 secteurs du projet de transformation urbaine avec leurs spécificités et états d'avancement.

  • 4 secteurs avec fiches dédiées
  • Maps Fabrica pour chaque zone
  • Suivi de l'avancement par secteur
malley-centre.ch/secteurs
Malley Centre - Navigation par secteurs
Technologies

Tech stack

WordPress Divi PHP JavaScript CSS Custom Plugins Premium

Have a similar project?

Let's discuss your needs and create your web solution together.