Couleur

L'ambiance colorée — chaque choix reste lisible, toujours.

Fond

Clair ou sombre.

Police d'écriture

Le style des lettres, pour les titres et le texte.

Coins

L'angle des cadres et des boutons — nets, doux ou arrondis.

Bandeau d'accueil

Le grand visuel tout en haut de la page — ce qu'on voit en arrivant.

Vos prestations

La façon de présenter ce que vous proposez.

Galerie

La façon d'afficher vos photos et vos réalisations.

À-propos

La façon de raconter votre histoire.

Horaires

Horaires et informations pratiques.

Espacement

La largeur du contenu et l'air entre les sections.

Mouvement

L'intensité des animations du site.

Style des animations

La façon dont les éléments apparaissent — franche, douce ou immédiate.

Entrée de page

La façon dont le contenu se met en place au chargement, avant tout défilement.

• Sans animationAucunAucun
• Montée douceMontée douce — Chaque élément monte d'environ 0,85 rem en fondu, décalé de 90 ms sur le précédent — une mise en place calme, jamais spectaculaire.
• Fondu simpleFondu simple — Le contenu apparaît en fondu, sans le moindre déplacement — l'entrée la plus sobre, celle qui laisse toute la place à votre typographie.
• Cascade latéraleCascade latérale — Les éléments glissent depuis la gauche en escalier, l'un après l'autre, dans l'ordre de lecture — une arrivée vivante, qui donne du rythme à votre accroche.
• Rideau qui se lèveRideau qui se lève — Chaque élément est découvert par le bas, comme sous un rideau qui se lève : votre contenu se dévoile, il ne se déplace pas.
• Recul discretRecul discret — Le contenu part très légèrement agrandi et flou, puis se pose net à sa taille — l'impression d'un objectif qui fait la mise au point sur votre message.

Bandeau d'accueil

Le geste d'ouverture du grand visuel — ce que le visiteur voit dans la première seconde.

• Sans animationAucunAucun
• Titre mot à motTitre mot à mot — Chaque mot du grand titre monte sous un masque, décalé de 70 ms sur le précédent — le titre s'écrit devant le visiteur.
• Titre sous rideauTitre sous rideau — Le titre entier se dévoile d'un coup derrière un volet qui remonte, en un geste ample d'une seconde — posé, presque solennel.
• Reflet balayéReflet balayé — Un reflet oblique traverse le bandeau du hero une seule fois, juste après l'ouverture de la page — l'énergie d'une vitrine qu'on éclaire.
• Départ cinémaDépart cinéma — Dès que le visiteur commence à descendre, le hero recule et s'estompe doucement, comme un plan qui s'éloigne pour laisser la page entrer.
• Image révéléeImage révélée — Un volet s'écarte du centre et découvre votre visuel d'ouverture, comme un rideau qu'on tire des deux côtés à la fois.
• Dégradé vivantDégradé vivant — Une nappe aux couleurs de votre site respire très lentement sur le visuel d'ouverture — l'image cesse d'être une photo posée, elle vit.
• Relief 3DRelief 3D — Votre visuel d'ouverture arrive légèrement basculé vers l'arrière puis se redresse, comme une planche qu'on repose à plat devant le visiteur.

Révélation au défilement

La manière dont chaque section entre dans l'écran quand on descend la page.

• Sans animationAucunAucun
• MontéeMontée — La section monte en fondu à son entrée dans l'écran, chaque bloc un peu après le précédent — la révélation de référence.
• Filet qui se traceFilet qui se trace — Un trait fin se trace depuis la gauche en tête de chaque section, comme un souligné qui accompagne la lecture.
• Fondu seulFondu seul — La section apparaît en fondu, sans le moindre déplacement — la révélation la plus discrète du catalogue.
• Glissement latéralGlissement latéral — La section arrive doucement depuis la droite, en fondu, comme une page que l'on avance.
• Échelle douceÉchelle douce — La section s'approche du lecteur en passant d'un format légèrement réduit à sa taille réelle, en fondu.
• Volet verticalVolet vertical — La section se dévoile de haut en bas sous un volet qui se relève, sans que rien ne bouge de sa place.
• Décalage alternéDécalage alterné — Une section sur deux arrive de la gauche, la suivante de la droite : un balancier qui rythme la descente.

Profondeur au défilement

L'impression de plans multiples : ce qui est loin bouge moins vite que ce qui est près.

• Sans animationAucunAucun
• Nappe qui glisseNappe qui glisse — Une nappe de couleur du thème dérive lentement derrière le contenu au fil du défilement — le fond respire, le texte reste net.
• Parallaxe d'imageParallaxe d'image — Vos visuels de fond défilent plus lentement que le texte posé dessus : l'image paraît lointaine, la page gagne du relief.
• Sections empiléesSections empilées — Chaque section reste posée en haut de l'écran pendant que la suivante monte par-dessus, comme des cartes qu'on empile.
• Sortie en compactionSortie en compaction — La section qui quitte l'écran par le haut recule et s'estompe doucement, au lieu de disparaître d'un coup.
• Profondeur étagéeProfondeur étagée — Deux plans de fond défilent à deux vitesses différentes : la page prend une vraie épaisseur, comme un décor de théâtre.

Survol

La réponse d'un élément quand la souris passe dessus — jamais sur un écran tactile.

• Sans animationAucunAucun

• Atelier

  En savoir plusÉlévationÉlévation — La carte se soulève légèrement et son ombre s'étend au passage de la souris — la réponse la plus sobre du catalogue.

• Atelier

  En savoir plusCartes en reliefCartes en relief — La carte bascule très légèrement en trois dimensions et se soulève, comme une fiche qu'on incline vers soi.

• Atelier

  En savoir plusZoom d'imageZoom d'image — L'image se rapproche doucement à l'intérieur de son cadre, qui ne bouge pas d'un pixel — la matière se donne à voir.

• Atelier

  En savoir plusBordure vivanteBordure vivante — Un filet de votre couleur d'accent parcourt le bord de la carte d'un coin à l'autre, puis reste allumé tant que la souris est là.

• Atelier

  En savoir plusSoulignement qui courtSoulignement qui court — Le trait sous un lien se trace de la gauche vers la droite, dans votre couleur d'accent.

• Atelier

  En savoir plusVoile de couleurVoile de couleur — Un voile teinté de votre couleur monte sur l'image pendant que le titre remonte au premier plan.

• Atelier

  En savoir plusFlèche qui avanceFlèche qui avance — Une flèche accompagne vos boutons d'action et avance d'un cran au survol — un signal de direction, pas une décoration.

Pointeur et tactile

Un élément qui suit le doigt ou la souris en continu — la signature la plus vivante du catalogue.

• Sans animationAucunAucun
• Lueur de bougieLueur de bougie — Une nappe chaude suit le pointeur avec un léger retard, s'allume au mouvement et s'estompe au repos, en vacillement discret.
• Halo douxHalo doux — Un halo net accompagne le pointeur, sans retard ni vacillement — la version sobre de la lueur, pour les univers clairs.
• ProjecteurProjecteur — Un large disque de netteté suit le pointeur, tandis que le reste de la page passe très légèrement en retrait — l'attention se pose là où va la souris, sans jamais gêner la lecture.
• Boutons aimantésBoutons aimantés — Les boutons et les liens proches du pointeur se penchent de quelques pixels vers lui, puis reprennent leur place.

Ambiance de fond

Une matière discrète qui vit derrière le contenu, sans jamais le concurrencer.

• Sans animationAucunAucun
• Matière impriméeMatière imprimée — Une trame de grain très discrète se resserre au fil du défilement — la matière d'un beau papier, jamais un motif qui s'impose.
• Nappes coloréesNappes colorées — Deux voiles aux couleurs de votre site se croisent très lentement en arrière-plan, comme une aquarelle qui respire.
• Rayons douxRayons doux — De larges faisceaux de lumière obliques traversent le fond en glissant — une clarté de fin d'après-midi, très atténuée.
• Trame géométriqueTrame géométrique — Une trame fine de lignes régulières respire derrière vos contenus — la rigueur tranquille d'un beau papier millimétré.
• Dégradé animéDégradé animé — Le fond glisse sans fin entre trois teintes de votre palette, sans jamais de rupture visible.

Micro-interactions

Le retour immédiat que donne un bouton, un champ ou une pastille quand on agit dessus.

• Sans animationAucunAucun
• Votre nomJ'acceptePanier 2Appui enfoncéAppui enfoncé — Le bouton s'enfonce très légèrement sous le doigt puis reprend sa place — l'accusé de réception le plus direct.
• Votre nomJ'acceptePanier 2Rebond douxRebond doux — Le bouton s'enfonce net puis dépasse un rien sa position au relâchement avant de se stabiliser, comme un ressort.
• Votre nomJ'acceptePanier 2Onde à l'appuiOnde à l'appui — Une onde circulaire part du bouton au moment où on le presse et se dissipe en une demi-seconde.
• Votre nomJ'acceptePanier 2RemplissageRemplissage — La couleur d'accent remplit le bouton de la gauche vers la droite au survol, le libellé restant parfaitement lisible.
• Votre nomJ'acceptePanier 2Champ qui s'activeChamp qui s'active — Le champ souligne son libellé et éclaircit sa bordure dès qu'on s'y place ou qu'on l'a rempli.
• Votre nomJ'acceptePanier 2Coche validéeCoche validée — La coche se trace d'un trait dès que la case est cochée — la confirmation se voit sans se lire.
• Votre nomJ'acceptePanier 2Pastille qui pulsePastille qui pulse — La pastille du panier pulse une fois quand elle apparaît — un accusé de réception, pas une décoration.

Galerie et médias

La façon dont les photos et les réalisations se dévoilent et se comportent.

• Sans animationAucunAucun
• Tuiles en cascadeTuiles en cascade — Les tuiles s'assemblent l'une après l'autre à l'entrée de la galerie dans l'écran — la planche se compose sous les yeux du visiteur.
• Mosaïque alternéeMosaïque alternée — Les tuiles arrivent en quinconce : une sur deux monte du bas, l'autre descend du haut. Le croisement donne son rythme à la planche.
• Volet photoVolet photo — Chaque photo se dévoile sous un volet qui s'écarte du centre vers les bords, l'image restant parfaitement immobile. Le plus sobre de ces gestes.
• Zoom lentZoom lent — Les photos zooment très lentement et en continu dans leur cadre, à la manière d'un documentaire — dix-huit secondes par aller-retour, sans jamais de saccade.
• Apparition diagonaleApparition diagonale — Les tuiles apparaissent en vague : chacune arrive du coin haut gauche et se pose, la suivante juste après — un balayage qui traverse la galerie.
• Cadre qui s'ouvreCadre qui s'ouvre — Le cadre s'ouvre depuis son centre vers ses quatre bords et l'image, d'abord légèrement agrandie, se repose exactement à sa place.

Transitions de page

Le passage d'une page du site à la suivante, sans rechargement visible.

• Sans animationAucunAucun
• Fondu croiséFondu croisé — L'ancienne page s'efface pendant que la nouvelle apparaît — la navigation ne clignote plus, elle enchaîne.
• Glissement horizontalGlissement horizontal — La nouvelle page entre par la droite pendant que la précédente recule vers la gauche — vos visiteurs sentent qu'ils avancent dans votre site.
• Montée de pageMontée de page — La nouvelle page monte depuis le bas et se pose sur la précédente, qui reste visible en dessous.
• Volet de couleurVolet de couleur — Un volet de la couleur de votre site traverse l'écran et découvre la nouvelle page derrière lui.
• Zoom entrantZoom entrant — La nouvelle page arrive en très léger zoom arrière, comme si l'on entrait dedans.