Up QVT

Dix directions pour le site d’Up QVT

Chaque version est un site complet de six pages, avec une fiche détaillée par formation. Même contenu, même marque, dix partis pris. Le ton reprend celui du flyer : sobre, à la première personne, sans emphase.

6 pages par version5 fiches formation Carte du périmètre réelPhoto affichée une seule fois Un message par section

Première série — dix directions sobres

01

Sobre La valeur sûre

Blanc, filets fins, typographie large. Rien qui distraie du propos.

Accueil · Interventions · Formations · 5 fiches · À propos · Contact
Ouvrir 02

Dossier Registre documentaire

Numérotation, filets, chasse fixe pour les métadonnées. Le sérieux d’un document technique.

Accueil · Interventions · Formations · 5 fiches · À propos · Contact
Ouvrir 03

Atelier Chaleureux

Fond os, respiration large, courbes douces. Le plus accueillant.

Accueil · Interventions · Formations · 5 fiches · À propos · Contact
Ouvrir 04

Cartographie Le territoire d’abord

La carte du périmètre porte la page d’accueil. Pour qui cherche un intervenant proche.

Accueil · Interventions · Formations · 5 fiches · À propos · Contact
Ouvrir 05

Chaîne Industriel

Acier, bandeaux pleine largeur, tableaux denses. Parle le langage de l’atelier.

Accueil · Interventions · Formations · 5 fiches · À propos · Contact
Ouvrir 06

Cercle La géométrie du logo

Anneaux, rayons généreux, cartes très arrondies. Reprend les mains du logo.

Accueil · Interventions · Formations · 5 fiches · À propos · Contact
Ouvrir 07

Terrain Sombre

Navy profond, fort contraste, or en repère. La seule version sombre.

Accueil · Interventions · Formations · 5 fiches · À propos · Contact
Ouvrir 08

Presse Éditorial

Très grande typographie, colonnes de lecture, filets fins. Se lit comme un dossier de presse.

Accueil · Interventions · Formations · 5 fiches · À propos · Contact
Ouvrir 09

Grille Suisse

Grille stricte, alignements durs, or en accent unique. Le plus systématique.

Accueil · Interventions · Formations · 5 fiches · À propos · Contact
Ouvrir 10

Cinétique Animation maximale animation forte

Titre qui se compose mot à mot, fond en parallaxe, jauge de lecture, révélations en cascade, carte qui se trace.

Accueil · Interventions · Formations · 5 fiches · À propos · Contact
Ouvrir

Seconde série — cinq partis pris audacieux

Architecture de page différente à chaque fois, pas seulement une palette : volets horizontaux, aplat de couleur pleine page, photo en ouverture, chiffres à l’échelle du titre, fond animé.

11

Dépliant Le flyer, déplié

Le site reprend la forme de l’objet d’origine : des volets qui défilent à l’horizontale, comme on ouvre un 3-volets. Navigation par volet, chacun avec son fond.

Accueil · Interventions · Formations · 5 fiches · À propos · Contact
Ouvrir 12

Champ d’or L’aplat du flyer, en grand

Le jaune plein du volet FORMATIONS pris à pleine page, en alternance avec le navy. Typographie énorme, contraste maximal. Le geste le plus franc, et il vient du flyer.

Accueil · Interventions · Formations · 5 fiches · À propos · Contact
Ouvrir 13

Plein cadre La photo au premier plan animation forte

La seule vraie photo du dossier, traitée en duotone navy/or avec grain, portée en ouverture. Puis un enchaînement épinglé au scroll pour les quatre interventions.

Accueil · Interventions · Formations · 5 fiches · À propos · Contact
Ouvrir 14

Nombres Typographie brute animation forte

Les chiffres réels du dossier portés à l’échelle du titre : 2005, 100 km, 5 formations. Compteurs animés au scroll, tableau dense, aucun chiffre inventé.

Accueil · Interventions · Formations · 5 fiches · À propos · Contact
Ouvrir 15

Nuit Cinématique animation forte

Navy très sombre, anneaux du logo animés en fond, or en lumière. Photo en duotone, révélations en cascade. La plus spectaculaire.

Accueil · Interventions · Formations · 5 fiches · À propos · Contact
Ouvrir

Troisième série — animation forte

Une déclinaison claire de « Nuit », puis cinq versions bâties autour d’un seul moment animé chacune : anneaux pilotés au défilement, maillage vivant, volets qui balaient, séquence épinglée, halo mobile. Le mouvement porte sur le décor — le texte reste lisible même si l’animation ne joue pas.

16

Jour La 15, en clair animation forte

Même architecture et mêmes anneaux animés que « Nuit », transposés sur fond clair. Pour qui trouve le sombre trop tranché.

Accueil · Interventions · Formations · 5 fiches · À propos · Contact
Ouvrir 17

Orbite Anneaux pilotés au scroll animation forte

Trois anneaux concentriques fixes en fond ; leurs satellites tournent en fonction du défilement. Le décor bouge, jamais le texte.

Accueil · Interventions · Formations · 5 fiches · À propos · Contact
Ouvrir 18

Trame Maillage vivant animation forte

Un maillage technique en fond, qui glisse et respire au défilement. Fond sombre, titre composé mot à mot par translation.

Accueil · Interventions · Formations · 5 fiches · À propos · Contact
Ouvrir 19

Coupe Volets qui balaient animation forte

Chaque titre de bloc est balayé par un volet de couleur qui se retire. Le texte est déjà là ; c’est le volet qui bouge.

Accueil · Interventions · Formations · 5 fiches · À propos · Contact
Ouvrir 20

Flux Séquence épinglée animation forte

La section « Interventions » se fige et défile latéralement pendant qu’on descend. Une seule séquence, pas d’effet ailleurs.

Accueil · Interventions · Formations · 5 fiches · À propos · Contact
Ouvrir 21

Halo Lumière mobile animation forte

Une source de lumière dorée descend avec le défilement et éclaire les blocs au passage. Fond sombre, photo en duotone.

Accueil · Interventions · Formations · 5 fiches · À propos · Contact
Ouvrir

Sur librairies de composants

Cinq propositions supplémentaires bâties en React + Tailwind avec shadcn/ui, Magic UI et React Bits — les animations viennent de composants éprouvés plutôt que de CSS écrit à la main. Voir les 5 versions React →

Croisement

Une version née du mélange de deux autres, à votre demande.

22

Cadran Mix 16 + 20 animation forte

Les anneaux de « Jour » deviennent la jauge de la séquence épinglée de « Flux ». Un seul mécanisme : l’arc se remplit pendant que la piste avance. Site clair, avec un chapitre sombre au centre.

Accueil · Interventions · Formations · 5 fiches · À propos · Contact
Ouvrir