Artdantech

Vue d'ensemble

Dans la FoodTech, l'appétit se crée avant la première bouchée. Un site de restauration qui ne donne pas envie — par sa fluidité, ses animations, sa précision visuelle — échoue avant même que le visiteur ait lu le menu. Ce projet consistait à transformer des maquettes statiques en une expérience mobile-first qui fait saliver dès le premier scroll.

Le projet

Développement mobile-first d'un site vitrine multi-pages : accueil, quatre pages restaurants, animations soignées, responsive complet et styles mutualisés.

Le client

Ohmyfood, startup FoodTech qui étend son activité de New York à Paris. Un site qui doit porter l'énergie de la marque — pas juste afficher un catalogue de menus.

Le problème

Des maquettes Figma riches en intentions visuelles et en micro-interactions, mais aucune implémentation. Le défi : restituer cette richesse sans sacrifier la performance ni la maintenabilité.

L'objectif

Créer une interface fidèle au pixel, fluide sur tous les écrans et suffisamment bien architecturée pour que quatre pages restaurants partagent un système commun — pas quatre copier-coller.

Le vrai test d'un projet comme celui-ci ne se voit pas dans une capture d'écran. Il se ressent : la douceur d'une apparition, la précision d'un hover, le rythme d'un loader. C'est dans ces détails que se joue la perception de qualité.

Résultats concrets

Pixel-perfect du mobile au desktop

L'interface reproduit les maquettes Figma avec une fidélité totale — construite à partir du mobile, puis enrichie progressivement pour tablette et desktop.

Des animations qui créent l'envie

Loader d'entrée, apparitions progressives, cœur favori animé, sélection de plat : chaque interaction a été intégrée pour enrichir l'expérience sans jamais l'alourdir.

4 pages, 1 seul système

Les quatre pages restaurants partagent un template commun et des styles factorisés. Ajouter un cinquième restaurant prend des minutes, pas des heures.

Performance préservée malgré la richesse

Animations GPU-friendly, médias optimisés, styles mutualisés : un site visuellement riche qui reste rapide et léger.

Avant / Après

Axe

Avant

Après

Expérience

Des intentions visuelles dans Figma — belles mais inertes. Le visiteur regarde une image, pas un site.

Une interface vivante, réactive et fluide. Le visiteur explore, interagit, ressent — comme sur un vrai produit FoodTech.

Responsive

Des maquettes séparées par format (mobile, tablette, desktop) sans système unifié. Chaque breakpoint est un monde à part.

Un responsive mobile-first progressif et cohérent. Un seul système, une seule logique — qui s'adapte naturellement à chaque écran.

Animations

Des micro-interactions esquissées dans un prototype Figma, mais ni implémentées, ni documentées, ni testées en conditions réelles.

Des animations intégrées avec précision, optimisées pour la performance, documentées et respectueuses de prefers-reduced-motion.

Maintenabilité

Risque de quadrupler le code : quatre pages restaurants = quatre intégrations distinctes à maintenir séparément.

Un template commun et des styles factorisés en Sass. Seul le contenu varie — le système reste unique et propre.

Le problème

Ce projet se trouvait à l'intersection de quatre exigences qui, prises séparément, sont gérables — mais qui, combinées, demandent une vraie discipline d'exécution.

Fidélité graphique sans rigidité. Les maquettes étaient riches et précises. Les reproduire au pixel ne suffisait pas — il fallait aussi que le système survive à un cinquième, un dixième restaurant sans se dégrader.
Des animations qui servent, pas qui décorent. Le prototype Figma montrait des interactions séduisantes. Le défi : les implémenter avec des performances natives, pas avec des librairies lourdes qui tuent le temps de chargement.
Mobile-first pour de vrai. Pas « on fait le desktop et on réduit ». Un vrai mobile-first où chaque décision de style part du plus petit écran et s'enrichit progressivement.
Quatre pages, un seul code. Dupliquer le code quatre fois aurait été plus rapide. Mais c'est une bombe à retardement pour la maintenance. L'enjeu était de factoriser sans perdre la flexibilité.

C'est dans l'articulation de ces quatre contraintes que se joue la différence entre une intégration et un vrai travail d'ingénierie front-end.

Notre approche

Nous avons commencé par décomposer le projet en briques fondamentales — avant d'écrire la première ligne de CSS.

Analyse — Cartographier avant de construire

Identification des composants récurrents, des tokens graphiques et des comportements d'interaction
Repérage des éléments mutualisables entre les quatre pages restaurants
Définition des variables Sass, des mixins et de la hiérarchie de styles

Construction mobile-first — Du petit écran vers le grand

Base mobile intégrée en premier, sans aucune concession au desktop
Enrichissement progressif via des media queries ciblées
Points de rupture choisis en fonction du contenu, pas en fonction d'une grille arbitraire

Template restaurant — Factoriser sans figer

Un gabarit commun qui absorbe les variations de contenu (titres, images, prix, descriptions)
Des styles partagés qui garantissent la cohérence visuelle entre les quatre pages
Une architecture qui rend l'ajout d'un nouveau restaurant trivial

Animations — Précision chirurgicale

Loader d'entrée avec timing calibré pour créer l'anticipation sans frustrer
Apparition progressive des items de menu — chaque plat entre en scène avec son propre délai
Cœur favori animé en CSS pur — pas de librairie, pas de JavaScript, juste des keyframes maîtrisés
Sélection de plat avec feedback visuel immédiat
Toutes les animations sur transform et opacity uniquement — zéro reflow, zéro jank
Respect natif de prefers-reduced-motion pour l'accessibilité

Accessibilité et performance — Intégrées, pas ajoutées

Structure HTML sémantique avec landmarks et hiérarchie de titres cohérente
Focus visibles et contrastes vérifiés
Médias optimisés et animations GPU-friendly
Validation Lighthouse, Axe et W3C

L'enjeu des animations n'était pas d'en ajouter le plus possible. C'était de leur donner une place juste : suffisamment présentes pour enrichir l'expérience, suffisamment maîtrisées pour ne jamais ralentir le site ni exclure un utilisateur.

Stack technique

HTML5 sémantique
Sass / Dart Sass (architecture modulaire, BEM)
CSS compilé, animations CSS pur
Git / GitHub Pages
Lighthouse, Axe, W3C Validators (qualité)
Chrome DevTools (performance, animation profiling)

Le résultat

Le site ne montre pas des menus. Il donne faim. Chaque animation, chaque transition, chaque apparition de plat est pensée pour créer une micro-émotion — celle qui transforme un visiteur en client qui réserve.

Une intégration pixel-perfect fidèle aux maquettes et au prototype Figma
Un responsive mobile-first complet, fluide et cohérent sur tous les écrans
Quatre pages restaurants construites sur un template commun et des styles factorisés
Des animations soignées, performantes, documentées et accessibles
Une architecture Sass claire, maintenable et prête à accueillir de nouveaux restaurants
Une performance préservée malgré la richesse visuelle du projet

Le site ne se contente pas d'être beau. Il se comporte comme un produit FoodTech crédible — parce que chaque détail technique sert l'expérience au lieu de la freiner.

Ce que ce projet révèle

Ce projet démontre une compétence que beaucoup revendiquent mais que peu maîtrisent réellement : transformer une intention visuelle riche en système d'interface maintenable — avec des animations chirurgicales, un responsive progressif et un code suffisamment propre pour évoluer sans se dégrader.

Si vous avez un projet où le design est ambitieux, où les micro-interactions comptent et où l'expérience mobile est critique — c'est exactement ce niveau de précision que nous apportons.