Aller au contenu

Alzado, studio d’architecture · Architecture

Le site d’un studio d’architecture qui s’apprête à ouvrir

Alzado est un studio d’architecture qui démarre. Un nouveau studio n’a pas des années d’histoire à raconter, mais il a ses premières réalisations, sa façon de travailler et les clients à qui il s’adresse. J’ai fait le site pour cela : laisser parler les photos, donner à chaque projet sa page et faire en sorte que demander un premier rendez-vous ne coûte qu’un clic. Le studio a aimé la proposition et le site sera mis en ligne sur son propre domaine à l’ouverture.

  • Conception de site web
  • Direction artistique
  • Logo
  • Mouvement et transitions
  • Une page par projet
  • Avis Google
  • Référencement technique
En préparation : mise en ligne à l’ouverture du studio
Page d’accueil du site d’Alzado : une maison en béton brut en plein écran, avec le nom du projet, Casa Rocafort, en bas à gauche
La même page d’accueil sur un téléphone, avec le logo et le bouton du menu sur la photo

L’approche

Ce que l’on voulait éviter

Ce qui se répète le plus sur les sites du secteur

  • Un écran de chargement ou un carrousel qu’il faut attendre avant de voir quoi que ce soit.
  • Des projets dans une grille de photos identiques, sans année, sans lieu et sans page propre.
  • Des icônes génériques et des phrases qui pourraient venir de n’importe quelle entreprise.
  • Des avis Google intégrés avec un widget externe plus lourd que la page elle-même.

L’objectif

Qu’un studio sans années d’histoire inspire le savoir-faire dès le premier écran, avec ses premières réalisations au premier plan, et que le site se charge vite sur un téléphone.

Ce qui a été fait

Pièce par pièce, sans rien laisser à moitié

Direction artistique

  • Palette « chaux et cyanotype » : un fond clair presque neutre, de l’encre et un seul bleu de plan technique.
  • Titres en Funnel Display, graisse fine, et texte en Hanken Grotesk, polices hébergées sur le domaine du site.
  • Logo inspiré du repère d’élévation des plans : un cercle coupé par la ligne de sol.
  • Ni cartes, ni ombres, ni coins arrondis : la hiérarchie vient de la taille, de l’espace et des filets.

Projets

  • Grille asymétrique : chaque photo garde ses proportions, jamais quatre identiques à la suite.
  • Une page par réalisation avec fiche technique (type, lieu, année, surface et état), texte et galerie.
  • Filtre par type de projet sans recharger la page.
  • Au survol de la souris, la photo se rapproche, se voile et « Voir le projet » apparaît.

Mouvement

  • Le nom du projet mis en avant sur la page d’accueil monte mot par mot au chargement.
  • Les photos se dévoilent depuis leur côté en apparaissant et se posent avec un léger zoom.
  • Quand on ouvre un projet, sa photo voyage de la grille jusqu’à l’en-tête de sa page.
  • L’en-tête se cache quand on descend et revient quand on remonte. Avec « réduire les animations » activé, seulement des fondus.

Confiance

  • Des avis à la manière de Google, faits à la main : note moyenne, étoiles et cartes, sans widget externe.
  • Les questions fréquentes de ceux qui font construire une maison : honoraires, délais et permis de construire.
  • Le processus en quatre phases, pour que le client sache où il en est.

Contact

  • Un seul appel à l’action sur tout le site : « Demander un premier rendez-vous ».
  • Un formulaire qui signale chaque erreur sur le moment et qui demande confirmation avant de quitter la page s’il est à moitié rempli.

Technique

  • HTML statique et quelques dizaines de lignes de JavaScript : aucune bibliothèque d’animation.
  • Photos en WebP en trois tailles, avec leur espace réservé : la page ne saute pas au chargement.
  • Données structurées du studio, plan du site et pages légales.

En mouvement

Une demi-minute de visite

Voici la page d’accueil à l’arrivée et en faisant défiler : le nom du projet monte mot par mot, les photos se dévoilent depuis leur côté et, quand on ouvre une réalisation, sa photo voyage jusqu’à l’en-tête de la page.

Toutes les animations respectent l’option « réduire les animations » du système : qui l’a activée voit des fondus, pas des déplacements.

Enregistrement du site dans un navigateur d’ordinateur, à vitesse réelle.

Sur téléphone

Pensé pour le pouce

Sur téléphone, le menu s’ouvre en plein écran, les photos gardent leurs proportions et le carrousel d’avis défile du doigt.

Des boutons d’au moins 44 pixels, des textes qui ne débordent pas de l’écran et rien qu’il faille agrandir avec les doigts pour le lire.

Enregistrement du site sur un téléphone émulé, à vitesse réelle.

Confiance

Des avis comme sur Google

Un studio qui démarre vit de ce que racontent ses premiers clients. Les avis s’affichent comme sur Google, avec note moyenne, étoiles et « il y a X mois », mais sans charger aucun widget externe : la page n’est pas plus lourde et ne piste personne.

Avis de clients sur un téléphone : carte avec étoiles, logo Google et flèches pour passer de l’un à l’autre
Les avis sur téléphone : ils défilent du doigt ou avec les flèches.

En chiffres

Ce qu’il y a derrière

Des faits sur le travail, pas des résultats commerciaux : ceux-ci sont publiés quand il y a des données réelles.

15
pages, une par projet
100
en accessibilité, bonnes pratiques et SEO (Lighthouse, mesuré en local)
44
tests automatiques sur ordinateur et sur téléphone, tous au vert
0
bibliothèque d’animation : le mouvement est en CSS

Plus d’écrans

À quoi ça ressemble

Grille de projets avec des photos de proportions différentes et le texte Voir le projet sur la photo survolée
Grille de projets : chaque photo garde ses proportions. Au survol de la souris, la photo se voile et « Voir le projet » apparaît.
Section Ce que nous faisons, avec une photo à gauche et la liste des services à droite
« Ce que nous faisons » : la photo de gauche change selon le service survolé.
Bande sombre avec les quatre phases du travail numérotées
Le processus en quatre phases, dans la seule bande sombre de la page.
Avis de clients sur une photo d’architecture, avec la note moyenne à gauche et des cartes d’avis à droite
Les avis sur une photo à fond perdu : note moyenne à gauche et cartes à la manière de Google à droite.
En-tête de la page d’un projet avec son nom en grand et la photo de couverture
Chaque projet a sa page : nom, chapeau, fiche technique et galerie.
Pied de page sombre avec le logo sur toute la largeur
Le pied de page, avec le logo sur toute la largeur en guise de signature.

Comment ça s’est passé

Du premier jour à la mise en service

  1. D’abord

    Références et direction

    Des sites de studios d’architecture et d’architecture d’intérieur comme point de départ : ce qui fonctionne et ce qui est en trop. C’est de là que sont venues la palette, les typographies et les règles.

  2. Ensuite

    Structure

    Une grille de douze colonnes, une échelle d’espacements fixe et une page pour chaque chose que cherche celui qui commande un projet.

  3. Puis

    Identité et mouvement

    Logo, avis à la manière de Google et mouvement : des mots qui montent, des photos qui se dévoilent et des transitions entre les pages.

  4. Pour finir

    Audit et tests

    Lighthouse et tests automatiques de chaque parcours : menu, filtre de projets, formulaire, avis et transitions.

Où en est-on

L’état des lieux, sans fard

En préparation : mise en ligne à l’ouverture du studio

Le site est prêt et le studio l’a apprécié. Il sera mis en ligne sur son propre domaine à l’ouverture, avec son logo, ses réalisations, ses photos et ses coordonnées. Il est trop tôt pour parler de résultats et je n’en inventerai pas. Si vous avez un studio d’architecture ou d’architecture d’intérieur, je vous le montre en entier lors du premier rendez-vous.

Un autre projet

Vous pouvez aussi voir

Page d’accueil du site de fita sur un ordinateur : vidéo aérienne de champs et d’une centrale solaire en arrière-plan, le titre « Topographie et cartographie pour les grands projets » (en espagnol) et le bouton Demander une proposition technique

fita · Cartographie par drone · Topographie et cartographie par drone

Site web, SEO et blog pour une entreprise de cartographie par drone

Un site avec une vidéo en page d’accueil, une page par service et par produit cartographique, une version anglaise et un blog avec de nouveaux articles publiés régulièrement. Avec le référencement fait dès le premier jour.

  • Conception de site web
  • SEO et référencement
  • Blog
  • Version anglaise
En ligne depuis le 16 octobre 2026 Voir le cas
Page d’accueil du site de Clotoides sur un ordinateur : le titre « Topographie pour connaître votre propriété et passer à l’étape suivante en confiance » (en espagnol) à côté d’un plan du parcellaire de La Costera en lignes dorées

Clotoides · Topographie · Topographie, Cadastre et Registre foncier

Un nouveau site et du SEO pour une entreprise de topographie déjà présente sur Google

Un nouveau site qui garde les 119 adresses de l’ancien pour ne pas perdre le référencement, avec une carte cadastrale réelle pour chaque zone, une version anglaise et un blog de 74 articles qui continue de grandir.

  • Conception de site web
  • SEO et référencement
  • Blog
  • Migration sans perdre le SEO
En ligne depuis le 17 octobre 2026 Voir le cas
Page d’accueil du site de Sandra de la Casa sur un ordinateur : titre, bouton de prise de rendez-vous et notes Google et Booksy

Sandra de la Casa · Taller de Imagen · Salon de coiffure créateur · Valence

Site web, référencement local et fiche Google pour un salon de coiffure créateur

Elle avait 137 avis et aucun site web. En une semaine : une page par prestation avec son prix, la réservation sur Booksy, la fiche Google complète et une version en anglais.

  • Conception de site web
  • Référencement local
  • Fiche Google
  • QR code pour les avis
En ligne depuis le 30 septembre 2026 Voir le cas
Écran d’accueil de l’application OunFodmap avec le logo d’OunClinic et les boutons pour se connecter et demander un accès

OunClinic · Clinique de nutrition

Une application pour suivre le régime FODMAP, avec un tableau de bord pour la nutritionniste

Application installable pour les patients et tableau de bord en temps réel pour la nutritionniste : 222 aliments, réintroduction automatique, rapports en deux langues et données de santé protégées.

  • Application sur mesure
  • Tableau de bord en temps réel
  • IA appliquée
  • Données de santé
Utilisée à la clinique Voir le cas

Toutes les études de cas

Commencez ici

Quelque chose de similaire pour votre activité ?
Racontez-le-moi en une demi-heure.

Gratuit et sans engagement. Nous repartons avec ce qu’il aurait du sens de faire en premier et, si cela convient, une proposition à prix fixe.