Conception de site web de rédaction technique

Conception de site web de rédaction technique pour Quartz

Quartz est présenté comme un espace pour les rédacteurs techniques qui veulent passer du plan au brouillon, à la relecture puis à la publication sans quitter le clavier. La page est un site conceptuel, non la preuve d'un service de production connecté ; sa principale contribution est donc son cadrage éditorial : elle donne un point de vue à un outil spécialisé avant d'énumérer ses capacités.

La phrase d'ouverture occupe un grand titre Instrument Serif aligné à gauche, avec une emphase en italique sur « docs nobody read ». Sa largeur maximale de 16ch transforme la longue proposition en colonne compacte, tandis que le paragraphe d'appui utilise une mesure plus large de 52ch. Sur le fond blanc cassé chaud, le bouton sombre Request access contraste avec l'action plus discrète Read the manual et un badge de raccourci imprimé. Cela met en avant le principe d'écriture, même si ces commandes n'exécutent pas les tâches annoncées de l'espace de travail.

Les tâches prises en charge par la conception

La page répond à plusieurs tâches de site web liées, tout en les rattachant à la prémisse de Quartz. Un visiteur peut comprendre à qui s'adresse le produit, comment son workflow imaginé est ordonné, ce qu'il refuse de devenir et en quoi les offres diffèrent selon le public. Ces tâches passent par des libellés courts et des contrastes répétés plutôt que par une introduction chargée de fonctionnalités.

La page passe de l'écriture au positionnement

La mise en page suit le même ordre que l'histoire du produit. Un grand hero établit la voix, puis la page présente l'éditeur avant de passer par la relecture, l'export, l'historique et les intégrations. Ensuite, la section de contraste énonce ce que Quartz n'est pas, et la section tarifaire traduit la position éditoriale en trois offres propres à chaque public. Cette séquence fait lire la page comme une argumentation plutôt que comme un catalogue.

1. Commencer par l'éditeur

   La première section numérotée est « 01 / OUTLINE », avec le titre « An outline that doubles as a typewriter. » ; son texte mentionne le glisser-déposer des titres, le mode focus et le reste de la page atténué. Ces détails relient structure et concentration, mais restent des comportements d'interaction proposés, non des comportements vérifiés à l'exécution.

2. Élargir au contexte d'équipe

   Les sections suivantes présentent la relecture intégrée au document, l'export Markdown, l'historique des révisions et les intégrations. Les libellés gardent chaque idée compacte, tandis que les descriptions ajoutent des relations concrètes : les commentaires sont ancrés à une ligne, un document est décrit comme lisant et écrivant la même structure .md, et les identifiants de tickets sont présentés comme liés à un panneau latéral. Chaque ajout élargit l'espace de travail imaginé, mais augmente aussi le nombre d'affirmations qu'une vraie implémentation devrait justifier.

3. Conclure par un choix commercial

   Le bandeau tarifaire compare Solo à 9 $ par mois, Studio à 22 $ par siège et par mois, et Press avec « Talk / to us ». Les unités de facturation et les libellés de public différents distinguent un rédacteur, une équipe de documentation et un éditeur. Solo et Press listent chacun quatre fonctionnalités ; Studio en liste cinq et reçoit le badge de recommandation. Press change de sujet avec SSO, auto-hébergement, pipelines d'export et support, plutôt que d'offrir simplement une liste plus longue. Tous les prix et toutes les capacités sont des exemples de positionnement.

Limites visibles de la conception et des capacités

Quartz est un concept marketing, non un espace de rédaction implémenté. Son seul script fait apparaître les sections avec IntersectionObserver ; il ne gère ni les boutons, ni les raccourcis affichés, ni l'édition, les relectures, les exports ou la création de compte. Des liens natifs mènent à Surfaces, What It Isn't et Plans, tandis que Changelog n'a pas de section correspondante et que les liens du pied de page sont des espaces réservés. La page démontre donc un positionnement visuel, non des intégrations fonctionnelles, une synchronisation chiffrée, une publication ou de véritables offres tarifaires. Ces services nécessiteraient une implémentation et des tests distincts.

Attribution de la source

OpenDesign distribue cet exemple dans sa bibliothèque Community. La documentation source crédite Taste Skill by Leonxlnx pour ses orientations de minimalisme éditorial et de rythme spatial : https://github.com/Leonxlnx/taste-skill. Il s'agit d'un crédit de distribution, non d'une affirmation de paternité originale indépendante d'OpenDesign. Le manifeste inclus déclare MIT ; il n'établit pas de droits distincts sur chaque ressource représentée.