Sito web
Design di Sito per Technical Writing
Quartz è un design di sito per il technical writing che trasforma il concept di uno spazio di lavoro editoriale in un percorso mirato dalla bozza alla pubblicazione.
Pensato per
- Team di technical writingPresenta un flusso di lavoro mirato per stesura, revisione e pubblicazione.
- Pagine prodotto per la documentazioneSpiega un prodotto di scrittura specializzato senza dispersione di funzionalità generiche.
- Concept SaaS editorialiModella il posizionamento del prodotto attorno a una precisa filosofia di pubblicazione.
- Flussi di lavoro centrati sulla tastieraMostra come interazioni mirate sostengano chi scrive e dà valore alla struttura.
Punti salienti
- Hero editorialeUn'apertura sobria inquadra il prodotto attorno alla qualità della scrittura.
- Sequenza del flusso di lavoroCinque celle numerate collegano stesura della scaletta, revisione, esportazione, cronologia e integrazioni.
- Confini del prodottoI confronti tra ciò che fa e non fa rendono il posizionamento insolitamente specifico.
- Struttura dei pianiTre piani pensati per tipi di pubblico collegano i prezzi al contesto del team.
Galleria
1 / 4
Design del sito Quartz per technical writing
Quartz è presentato come workspace per technical writer che vogliono passare da outline a bozza, revisione e pubblicazione senza staccare le mani dalla tastiera. La pagina è un sito concept e non la prova di un servizio di produzione collegato, quindi il suo contributo più forte è l'impostazione editoriale: dà a uno strumento specializzato un punto di vista prima di elencarne le funzionalità.
La frase d'apertura sta in un grande titolo Instrument Serif allineato a sinistra, con enfasi in corsivo su “docs nobody read”. La larghezza massima di 16ch trasforma la lunga proposta in una colonna compatta, mentre il paragrafo di supporto usa una misura più ampia di 52ch. Sulla tela bianco caldo, il pulsante scuro Request access contrasta con l'azione più discreta Read the manual e con un badge di scorciatoia stampato. Questo dà priorità alla premessa di scrittura, anche se questi controlli non eseguono le attività del workspace pubblicizzate.
Compiti supportati dal design
La pagina risponde a diversi compiti di un sito collegati tra loro, ma li tiene legati alla premessa di Quartz. Chi visita può capire a chi si rivolge il prodotto, come è ordinato il flusso di lavoro immaginato, che cosa rifiuta di diventare e come i piani differiscono per pubblico. Questi compiti sono comunicati con etichette brevi e contrasti ripetuti, non con un'introduzione densa di funzionalità.
Spiegare un flusso di scrittura
La fonte nomina cinque fasi: “OUTLINE”, “REVIEW”, “EXPORT”, “HISTORY” e “STACK”. Questa sequenza permette di seguire il percorso proposto, dalla definizione di un documento al suo collegamento con gli strumenti circostanti. Il compromesso è che la pagina descrive una narrazione lineare; chi cerca capacità non correlate deve attendere le sezioni successive.
Rendere memorabili i confini del prodotto
Le coppie “DOESN'T” e “DOES” trasformano il posizionamento in confronti visibili. “Auto-generate three-column landing pages” è contrapposto al pubblicare ciò che l'autore ha scritto, mentre la sincronizzazione di database è contrapposta alla scrittura di Markdown su disco. Il linguaggio barrato rende attive visivamente le esclusioni, ma dà anche al concept un tono volutamente netto.
Abbinare i piani ai pubblici
“Solo”, “Studio” e “Press” sono introdotti come contesti organizzativi diversi e non come semplice scala di prezzi. La pagina associa Solo a un singolo autore, Studio a team di documentazione fino a dodici persone e Press a editori e grandi organizzazioni. Così la struttura dei piani è leggibile ancora prima di studiare gli elenchi di funzionalità.
La pagina passa dalla scrittura al posizionamento
Il layout segue lo stesso ordine della storia del prodotto. Un grande hero stabilisce la voce, poi la pagina introduce l'editor prima di passare a revisione, export, cronologia e integrazioni. Dopo, la sezione di contrasto dichiara che cosa Quartz non è, e quella dei prezzi traduce la posizione editoriale in tre offerte per pubblici specifici. La sequenza fa leggere la pagina come un'argomentazione più che come un catalogo.
Partire dall'editor
La prima sezione numerata è “01 / OUTLINE”, con il titolo “An outline that doubles as a typewriter.” Il testo menziona il trascinamento dei titoli, la modalità focus e il resto della pagina attenuato. Questi dettagli collegano struttura e concentrazione, ma restano comportamenti di interazione proposti e non verificati in esecuzione.
Estendersi al contesto del team
Le sezioni successive introducono revisione inline, export Markdown, cronologia delle revisioni e integrazioni. Le etichette mantengono ogni idea compatta, mentre le descrizioni aggiungono relazioni concrete: i commenti sono ancorati a una riga, si descrive un documento che viene letto e scritto mantenendo la stessa struttura .md, e gli ID dei ticket sono mostrati in relazione a una barra laterale. Ogni aggiunta amplia il workspace immaginato, ma aumenta anche il numero di affermazioni che un'implementazione reale dovrebbe sostanziare.
Chiudere con una scelta commerciale
La fascia dei prezzi confronta Solo a $9 al mese, Studio a $22 per postazione al mese e Press come “Talk / to us”. Le diverse unità di fatturazione e le etichette di pubblico distinguono un singolo autore, un team di documentazione e un editore. Solo e Press elencano ciascuno quattro funzionalità; Studio ne elenca cinque e riceve il badge di raccomandazione. Press sposta il tema su SSO, self-hosting, pipeline di export e supporto, invece di offrire semplicemente un elenco più lungo. Tutti i prezzi e le capacità sono posizionamento di esempio.
Confini visibili di design e capacità
Quartz è un concept di marketing, non un workspace di scrittura implementato. Il suo unico script rivela le sezioni tramite IntersectionObserver; non gestisce pulsanti, scorciatoie mostrate, editing, revisioni, export o creazione di account. I link nativi raggiungono Surfaces, What It Isn't e Plans, mentre Changelog non ha una sezione corrispondente e i link del footer sono segnaposto. La pagina dimostra quindi un posizionamento visivo, non integrazioni funzionanti, sincronizzazione cifrata, pubblicazione o reali offerte di prezzo. Tali servizi richiederebbero implementazione e test separati.
Attribuzione della fonte
OpenDesign distribuisce questo esempio nella sua libreria Community. La documentazione della fonte attribuisce a Taste Skill by Leonxlnx le indicazioni di minimalismo editoriale e ritmo spaziale: https://github.com/Leonxlnx/taste-skill. Questo è un credito di distribuzione, non una dichiarazione di paternità originale indipendente di OpenDesign. Il manifest incluso dichiara MIT; non stabilisce diritti separati su ogni risorsa raffigurata.
Come creare un design di sito per il technical writing in OpenDesign
Definire la cornice editoriale
Parti da un hero ampio e a colonna stretta per un workspace di technical writing. Usa una proposta di valore lunga, un paragrafo di supporto sobrio e due azioni con intenti diversi, seguendo lo schema “Request access” e “Read the manual” di Quartz. Mantieni l'obiettivo della pagina centrato su scrittura e pubblicazione, senza presentare una generica dashboard software.
Prompt suggeritoCrea un sito marketing unico e continuo per Quartz, un workspace di technical writing a scopo illustrativo. Usa una tela calda #FBFBFA, testo display Instrument Serif con enfasi in corsivo, testo corrente Inter Tight e metadati JetBrains Mono. Aggiungi una barra di navigazione fluttuante, un titolo hero allineato a sinistra largo 16ch e un paragrafo di supporto largo 52ch, un pulsante scuro Request access e un'azione più discreta Read the manual. Costruisci una griglia editoriale a sei colonne con cinque celle numerate per outline, review, export, history e integrations; le prime due occupano due righe e i chip chiari sono limitati alle etichette di categoria. Fai seguire tre affermazioni accoppiate Doesn't/Does e tre piani di esempio: Solo $9/month, Studio $22/seat/month con un'etichetta di raccomandazione e Press Talk/to us. Mantieni le lunghezze degli elenchi di funzionalità a quattro/cinque/quattro e trattamenti distinti per le azioni. Sotto gli 880px impila griglia e prezzi. Usa animazioni di comparsa locali con supporto per la riduzione del movimento ed etichette chiare per i segnaposto di navigazione. Mostra testo di scorciatoie e flusso di lavoro senza dichiarare editing, pubblicazione, integrazioni, sincronizzazione cifrata, account o servizi backend. Mantieni Taste Skill by Leonxlnx come upstream delle indicazioni di design e OpenDesign come distributore Community. Questo è un brief di ricreazione suggerito, non il prompt originale.
Costruire la narrazione in cinque parti
Organizza la storia principale del prodotto in cinque sezioni numerate: outline, review, export, history e stack. Dai a ogni sezione una relazione osservabile, come commenti ancorati a una riga o Markdown che entra ed esce mantenendo la stessa struttura. Mantieni scorciatoie da tastiera e riferimenti alle integrazioni come dettagli di concept visibili, non come prova di comportamento implementato.
Rifinire confini e piani
Aggiungi una composizione accoppiata “DOESN'T” e “DOES” perché le esclusioni del prodotto siano leggibili quanto le sue promesse. Concludi con le colonne Solo, Studio e Press, che conservano la progressione di pubblico della fonte, i formati di prezzo, l'ordine delle funzionalità e le differenze tra le azioni. Verifica che titoli serif lunghi, etichette compatte ed elenchi di funzionalità restino leggibili quando le colonne si impilano.
Esporta e ottieni un link di condivisione
Esporta il design completato, quindi usa Condividi in OpenDesign per ottenere un link di condivisione. Apri il link in una finestra del browser separata e verifica che la versione prevista e le sue risorse siano disponibili prima di inviarlo.
Design di siti web per studi di design AI
Il design del sito web dello studio di design AI di OpenDesign trasforma il concept di uno studio local-first in una landing page editoriale che rende competenze, esperimenti e metodo facili da consultare.
Sito web
Progettazione di siti web per infrastrutture AI
Un concept di landing page per un'infrastruttura AI dai toni morbidi, con metriche di runtime d'esempio, schede delle funzionalità annidate, movimento discreto e un unico invito commerciale.
Sito web
Design di sito web per tour notturno di Bianjing
Un viaggio notturno interattivo attraverso un’immaginaria Bianjing dell’epoca Song, che combina una città fluviale persistente, poesia, lanterne e un ritmo narrativo multilingue articolato per capitoli.
Sito web
Design di sito web per rivista brutalista
Design di sito web per rivista brutalista trasforma un numero dalla forma cartacea in un sistema di lettura web leggibile, abbinando una tipografia audace a una struttura editoriale misurata.
Sito web