Aperçu en direct
Page d’accueil de Strata Studio : un dessin sépia d’une maison en béton en terrasses, aux étages vitrés, parmi des oliviers, traversé de fines lignes de repère verticales, sous une navigation sombre en forme de pilule avec un bouton ivoire Enquire ; en bas à gauche, un petit carré argile et les capitales espacées Architecture & Interiors au-dessus du très grand titre blanc Built to weather., et à droite un panneau sombre translucide portant Spaces that feel as good as they look. au-dessus d’un lien See the work
24 / THÈME ASTRO

Strata Studio

Pour une agence qui préfère montrer le dessin.

  • Architecture
  • Architecture intérieure
  • Portfolio d’agence

La vingt-quatrième version Quaeris Design. Une agence d’architecture et d’intérieur portant un portfolio de projets, huit services, une matériauthèque, un processus en cinq étapes, des honoraires publiés, une page carrières et un journal avec personnes et catégories — vingt-trois routes indexables, et toute la démo en ligne, ouverte à l’inspection.

MESURÉ SUR LA DÉMO
2.8 KB
JavaScript
23
Routes indexables
0
Feuilles de style bloquantes
3
Familles de polices
WebP
Images
Astro 7.3
Construit avec

Chaque chiffre provient de astro-design-strata-studio.pages.dev. Ouvrez la démo et vérifiez par vous-même.

Un site publié. TVA comprise ; le travail client relève de la licence studio. Rétractation sous 14 jours, jusqu’au premier téléchargement.

LE BRIEF

À quoi il sert, et à qui il convient.

Une direction visuelle pour une agence d’architecture et d’intérieur qui préfère montrer le dessin plutôt que le décrire. Des chapitres d’encre presque noire alternent avec un papier ivoire chaud, Bricolage Grotesque en graisse forte et serrée pour les titres, Inter pour la lecture et Playfair Display en italique pour un mot à la fois, avec un seul accent argile réservé aux petites marques. La décision qui compte est de mettre le site en page comme une planche de dessin : des lignes de repère courent sur toute la hauteur de chaque page, un index de chapitre courant compte les sections dans la marge gauche, et la navigation flottante comme les repères basculent du clair au sombre à mesure que chaque chapitre défile.

  • Agences d’architecture et d’architecture intérieure
  • Studios de paysage, d’éclairage et de mobilier
  • Entreprises de conception-réalisation et artisans spécialisés
  • Petites agences qui publient leurs honoraires et leur méthode au lieu de les cacher
LE JEU DE PAGES

Les routes que vous obtenez, et d’où elles viennent.

Chaque route ci-dessous est générée à la compilation et servie comme un fichier statique.

Pages

Écrites une fois, modifiées sur place.
  • Accueil
  • Projets
  • Services
  • Matériaux
  • Processus
  • Honoraires
  • À propos
  • Carrières
  • Journal
  • Recherche
  • Contact
  • Mentions légales
  • Plan du site

Collections

Un fichier Markdown devient une route, une entrée d’index et une liste.
  • Projet × 3
  • Article × 3
  • Personne × 2
  • Catégorie × 8

Système

Générées, jamais maintenues à la main.
  • 404
  • sitemap.xml
  • robots.txt
NOTES DE CONCEPTION

Les décisions derrière le style.

01

La page est composée comme une planche.

Quatre lignes de repère courent sur toute la hauteur de chaque page, derrière le contenu, comme une structure et non comme un décor. Chaque section est un chapitre numéroté, et un index courant dans la marge gauche lit le chapitre visible et affiche son numéro sur le total — 03 / 07 — comme une feuille dans un jeu de plans. Une page dont les sections ne portent pas de nom de chapitre s’en passe simplement.

02

L’encre et le papier se relaient.

Les chapitres alternent entre une encre presque noire et un papier ivoire chaud, et chacun déclare sa surface. Au défilement, la navigation flottante en pilule et les lignes de repère lisent cette indication et s’inversent pour rester lisibles sur le chapitre qui passe dessous. Chaque page se termine ensuite sur le même chapitre de clôture : un titre sur deux lignes, dont un mot en italique Playfair, sur un léger voile argile.

03

Un seul accent, employé comme une marque.

L’argile, c’est le petit carré devant chaque surtitre, l’anneau de focus, le soulignement des liens dans le texte et le filet à côté d’une citation — et presque rien d’autre. Les catégories du journal ont leurs propres couleurs, mais désaturées dans la même famille sourde, si bien qu’un sujet se lit comme une étiquette et non comme un second accent.

04

Rien de tiers par défaut.

Identité, formulaire de contact, mesure d’audience et newsletter vivent chacun dans un fichier sous src/config. D’origine, le thème ne livre aucun script tiers, ne dépose aucun cookie et ne demande aucun compte : le formulaire passe par mailto, l’audience et la newsletter sont désactivées. Un service choisi sans sa clé se replie avec un avertissement à la compilation au lieu d’être livré cassé.

PALETTE
  • Encre #0a0a0a Fond de page, le hero et les chapitres d’encre
  • Suie #101010 La seconde surface d’encre, pour la bande des chiffres
  • Papier #f7f5f1 Les chapitres papier
  • Os #f5f4f1 Titres, texte et boutons sur l’encre
  • Graphite #14120f Le texte sur le papier et la navigation sur les chapitres clairs
  • Argile #c08b5c Le seul accent : carrés des surtitres, focus, filets des liens
POLICES
Titrage
Bricolage Grotesque variable, 700 avec un interlettrage serré pour les titres, 300 et 400 en dessous
Texte
Inter de 300 à 600, texte courant et interface
Accent
Playfair Display 400 italique seulement, un ou deux mots à la fois
CE QUI L’ACCOMPAGNE

Sachez ce que vous obtenez.

Une belle capture d’écran n’est qu’un début. Ce sont les détails qui vous aident à choisir.

01 / LES PAGES

Une vue du site entier.

Chaque version liste son jeu de pages, de la page d’accueil aux templates d’article, d’auteur et de catégorie dont votre projet a réellement besoin.

Liste des pages avec chaque version
02 / L’EXPÉRIENCE

Chaque écran compte.

Mises en page pour ordinateur et mobile, navigation, états de focus et interactions, vérifiés aux largeurs que les gens utilisent vraiment plutôt qu’à celle de la capture d’écran.

Comment fonctionne la personnalisation ↗
03 / LA LIVRAISON

Les détails, avant d’acheter.

Le code source, les prérequis d’installation, la licence et les conditions de support sont publiés sur la page du thème, pour que vous puissiez décider avant de dépenser quoi que ce soit.

Contenu exact avec chaque version
TARIFS

Un prix clair. Une offre claire.

Choisissez le design qui convient à votre projet. Une licence couvre un site publié ; le travail livré à des clients relève de la licence studio.

THÈMES À L’UNITÉ EN VENTE

Trouvez le vôtre.

59 € le thème

Une licence, un site publié. Le travail que vous livrez à des clients relève de la licence studio : 399 € pour toute la collection, et un an de tout ce qui paraît ensuite.

Une licence de thème
Un projet publié
Travail pour un client
Licence studio
Mises à jour et support
Indiqués par thème
CE THÈME

Tout ce qui précède, en un téléchargement.

Strata Studio, sous forme de code source Astro complet. Modifiez ce que vous voulez, déployez où vous voulez en statique, et gardez-le.

Un site publié. TVA comprise ; le travail client relève de la licence studio. Rétractation sous 14 jours, jusqu’au premier téléchargement.

AILLEURS DANS LA COLLECTION

Trois autres directions.