Aperçu en direct
Page d’accueil d’Ailleurs : une photographie pleine page d’un lac de montagne dans les Dolomites sous les mots GO BEYOND composés en capitales blanches condensées et grasses
02 / THÈME ASTRO

Ailleurs

Pour les lieux qui valent le détour.

  • Éditorial
  • Journal
  • Photographie

La deuxième version Quaeris Design. Un journal d’escapades portant trois destinations, un journal avec auteurs et catégories, et un en-tête WebGL qui sait quand ne pas s’exécuter — avec toute la démo en ligne, ouverte à l’inspection.

MESURÉ SUR LA DÉMO
17.9 KB
JavaScript
18
Routes indexables
0
Feuilles de style bloquantes
2
Familles de polices
AVIF / WebP
Images
Astro 7.3
Construit avec

Chaque chiffre provient de astro-design-ailleurs.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 les publications qui vivent de la photographie. Papier, encre et forêt profonde, un titrage condensé composé sur toute la largeur de la page, et des filets fins à la place des cartes. La page d’accueil s’ouvre sur un paysage que l’on traverse en défilant au lieu de le survoler — une scène en profondeur qui ne se charge que là où la machine peut la porter, avec une image fixe comme repli honnête partout ailleurs.

  • Magazines indépendants et revues éditoriales
  • Photographes de paysage et de voyage
  • Destinations, lodges et guides qui vendent un lieu
  • Quiconque dont les photographies sont l’argument
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
  • Escapades
  • À propos
  • Support
  • Contact
  • Confidentialité

Collections

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

Système

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

Les décisions derrière le style.

01

La traversée est une expérience pour ordinateur, à dessein.

Faire défiler l’en-tête anime une scène en profondeur Three.js à travers la photographie. Sur un téléphone, la même scène coûtait environ 39 secondes de thread principal en 4G lente : elle n’y est donc pas dégradée, elle n’est jamais téléchargée. L’image fixe sert aussi de repli pour les mouvements réduits et pour les machines sans WebGL, et elle a été conçue pour tenir seule.

02

Un seul composant possède chaque image.

Les photographies arrivent dans la page par un unique composant Photo, si bien que formats, largeurs responsives et indications de chargement vivent dans un seul fichier. Une intégration de compilation fait ensuite échouer la compilation si quoi que ce soit est livré dans un autre format qu’AVIF ou WebP, ce qui fait du contournement de ce composant une erreur plutôt qu’une habitude.

03

Quatre fichiers de configuration, pas un rechercher-remplacer.

Identité, formulaire de contact, analytics et newsletter ont chacun leur fichier. Choisissez un prestataire, oubliez sa clé, et la compilation le dit et se replie, au lieu de livrer un formulaire qui poste dans le vide ou un bandeau de consentement pour un outil qui ne pose aucun cookie.

04

Une catégorie vide n’a pas d’URL.

Huit catégories sont définies ; les trois qui contiennent un récit sont les trois qui deviennent des pages. Un contenu mince dilue un sitemap, aussi la liste des routes est-elle générée à partir de ce qui a réellement été écrit plutôt que de ce qui a été déclaré.

PALETTE
  • Papier #f5f5f1 Fond de page
  • Encre #192220 Texte et filets
  • Forêt #202b27 Bandes sombres et pied de page
  • Violet #7353cc L’unique accent
POLICES
Titrage
Barlow Condensed Graisse 600, composé pleine largeur
Texte
DM Sans Graisses 400 et 500
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.

Ailleurs, 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.