Numero #061 – Produrre siti web #2 27/06/2022

Nel primo numero, di questa serie, abbiamo provato ha suddividere i siti web per tipologia (comunicazione/informazione, e-commerce, piattaforme digitali, prodotti/servizi digitali). Nel secondo, abbiamo visto quali sono le opzioni per produrre un sito web di informazione/comunicazione. In questo terzo numero parleremo delle altre tipologie.


Per ricevere Dispenser.Design via email iscriviti qui.


Produrre siti web #2

Nel produrre un sito web di comunicazione/informazione, l’obiettivo principale è organizzare i contenuti, per renderli comprensibili e accattivanti. Per produrre un’e-commerce, oltre all’organizzazione dei contenuti, è necessario definire il flusso di azioni relativo alla vendita di un prodotto. Azioni che vanno dall’aggiungere un prodotto nel carrello, al pagamento, dalla visualizzazione di un ordine alla sua gestione (spedizioni, rimborsi).

Come per i siti di comunicazione/informazioni, anche con gli e-commerce le opzioni sono tante quanto le necessità. Potrei scaricare e installare, su un mio spazio web, un CMS come Magento o PrestaShop. Potrei ancora usare WordPress, nella sua versione e-commerce, aggiungendo WooCommerce. Potrei usare uno dei site-builder citati nel numero precedente. Tutti hanno un modulo e-commerce più o meno sofisticato, con il quale è possibile vendere pochi prodotti o centinaia.

Potrei affidarmi a servizi o piattaforme orientate alla creazione di negozi online. Il più noto è diffuso è Shopify, che come logica e approccio è simile a Wordpress.com: mi creo un account, scelgo un tema (o ne realizzo uno) e sono online. Non c’è bisogno d’installare niente1 o acquistare uno spazio web. Oltre Shopify ci sono piattaforme di vario tipo, che si muovono nella stessa direzione (vedi BigCommerce, nato un paio di anni dopo2) o che provando nuove strade, più moderne e headless3 (vedi Swell)4.

Che sia Hugo, Jekyll o Gastby5, tutti i CMS statici permettono di aggiungere un plugin o d’integrasi con qualche servizio esterno6.

Se ho esigenze molto specifiche, come quella di vendere un file (PDF, eBook, video, font) o licenze software, potrei affidarmi a piattaforme come Gumroad, Lemon Sqeezy o Sellfy, pensate con quell’intento. Se devo vendere dei corsi potrei affinarmi a Podia o Teachable7. Se devo vendere abbonamenti al mio sito, blog, rivista o newsletter potrei usare Memberful, Chargebee o affidarmi a servizi che integrano la sottoscrizione a pagamento, come Substack, Revue o Ghost.

Per tutte queste tipologie potrei voler realizzare tutto da zero, per poter gestire il tutto con un mio Wordpress, un mio Shopify, un mio Memberful. In pratica un mio servizio o prodotto digitale8.


Piattaforme, servizi e prodotti digitali

Con la produzione di piattaforme, servizi e prodotti digitali9 le cose cominciano a cambiare. Si passa dal progettare e realizzare l’equivalente di una brochure, un magazine o un catalogo, al progettare e realizzare un software.

L’obiettivo principale non è più quello di organizzare contenuti, ma quello di definire un flusso di azioni e interazioni che permetta all’utente di utilizzare il sito, più che leggerlo. Utilizzarlo per compiere le azioni “semplici” di una piattaforma social, come condividere un contenuto (testo, foto, video) e modificare la propria pagina profilo. Oppure utilizzarlo per compiere azioni più complesse, come quella d’impaginare un documento con Google Docs, creare delle slide con Pitch, gestire un blog con Wordpress, creare un corso con Teachable.

Nel secondo articolo di questa serie avevo anche condiviso un schema, che ripropongo.

Quando si producono siti per le prime due tipologie (comunicazione/informazione ed e-commerce) si cerca spesso una soluzione tecnologica affidabile. Qualcosa di solido, abbastanza maturo e che non dia l’idea che possa scomparire dall’oggi al domani.

Quando si producono siti per le altre due tipologie (piattaforme e servizi digitali) si cerca invece qualcosa di diverso. Si cerca qualcosa di più “nuovo”, spesso, per ragioni intrinseche al progetto, che vuole essere in qualche modo innovativo. Innovativo nel flusso, nelle funzioni, nelle interazioni, nella presentazione dell’interfaccia (oltre che chiaramente nel tipo di prodotto/servizio che si vuole realizzare).

Anche per queste due tipologie di siti le soluzioni sono tante quanto le necessità. Soluzioni legate a framework (PHP, JS, CSS), server (AWS, Google Cloud, Vercel), database (Mongo, Redis, MySQL), workflow. Quest’ultimo inteso come la serie di processi che permettono di passare da un prototipo a un prodotto finito.

Il workflow è sempre importante, ma in questo caso ha un ruolo ancora più decisivo. Il prodotto digitale è di per sé qualcosa che non finisce mai. La messa online è solo una fase del processo. È come se avessimo a che fare con un organismo vivente, che dobbiamo sempre seguire, monitorare, supportare. I passaggi tra designer e sviluppatori sono più continui e costanti; le modifiche, i ripensamenti (senza esagerare) e le iterazioni sono il modo in cui viene costruito un prodotto.

I servizi e prodotti digitali vivono anche fuori dal browser, spesso in app su uno smartphone. La produzione di un’app è simile a quello che si fa per il web. Oltre alla soluzione tecnologia (legata al web, ibrida o nativa) bisogna considerare il sistema operativo in cui verrà installata l’app. I due più diffusi sono iOS e Android e ognuno ha un suo modo di ragionare e funzionare10. Gli utenti (noi) sono abituati a quel funzionamento e quando un’app di discosta troppo da quella logica si sentono disorientati.


I siti web di queste quattro tipologie sono tutti accessibili attraverso un browser. Sono tutti fatti di HTML-CSS-JS, ma, come abbiamo visto, ognuno si produce in maniera diversa. Ognuno richiede un processo diverso, perché sono entità diversa. Aver chiara la finalità aiuta a stabilire, in maniera più coerente, l’insieme di operazioni che determinano il cosa fare prima, dopo e durante.


  1. Come per Wordpress, per ampliare le funzionalità di Shopify è possibile installare plugin di terze parti. ↩︎

  2. Piccola curiosità. Anche Amazon per un periodo ha realizzato un servizio simile. Si chiamava Webstore. Lanciato nel 2010 e chiuso poi nel 2015. Chiuso quando gli altri due competitor, Shopify e BigCommerce, hanno cominciato a raccogliere tantissimi soldi e hanno alzato e accelerato il ritmo dell’evoluzione e dell’innovazione. A quel punto, probabilmente, Amazon ha preferito dedicarsi ad altro. ↩︎

  3. In realtà anche Shopify e BigCommerce hanno soluzioni headless. Si parla sistema “headless” quando il back-end (la gestione) è separata dal front-end (il sito visibile a tutti). ↩︎

  4. Nell’ultimo anno ho approfondito molto le dinamiche e il funzionamento di servizi digitali che operano in questo ambito, lavorando a un piattaforma e-commerce italiana: Live Cartel↩︎

  5. Come nel precedente post ne segnalo un paio per indicare un’intera categoria. Per una lista più dettagliata e approfondita vi rimando al sito di Jemstack  ↩︎

  6. Gli stessi Shopify e BigCommerce possono essere integrati con questi CMS statici. ↩︎

  7. Ormai lo sapete, ne cito solo un paio per questioni di spazio, ma ce ne sono anche molti altri. ↩︎

  8. Segnalo, per tutti, Chorus, un CMS realizzato da gurppo editoriale VOX Media, per la gestione dei loro siti. ↩︎

  9. Sulla definizione di servizi e prodotti vi rimando a questo articolo di ClearLeft dal titolo Are you designing a product or a service?, sintetizzato in questo schema↩︎

  10. Sia Apple che Google, in questi anni, hanno messo a disposizione di designer e sviluppatori linee guide sempre più precise e esaustive su come progettare al meglio un’app per i loro sistemi operativi. ↩︎


Prima di produrre qualcosa è utile definire il cosa, il come e il perché. Per una panoramica più approfondita, a tema product design, vi segnalo la guida di Design Better dal titolo Principles of Product Design.


Sociotype Journal →

Una rivista di cultura e società che è anche uno type specimen.

Progettata dallo studio inglese Socio, il primo numero contiene dieci saggi, sette articoli di immagini e uno specimen tecnico di ventotto pagine dedicato a uno dei loro caratteri, il Gestura, utilizzato per impaginare la rivista.


Page collective →

Una raccolta di pagine web, suddivise per elementi (cards, carousel) e tipologia di prodotti (e-commerce, productivity).

Page collective

Human Interface Guidelines →

Le nuove linee guide per la progettazione di app per le piattaforme Apple.

Human Interface Guidelines

Big Type →

Un libro dedicato ai progetti grafici dove la tipografia ha il ruolo da protagonista.

Big Type

Ghost →

I font umanisti sono fuori moda da così tanto tempo che potrebbero tornarci, da un momento all’altro.

Nell’attesa, la type foundry Sharp ha realizzato Ghost. Un carattere tipografico che si ispira ai primi umanisti, come il Johnston di Edward Johnston (realizzato all’epoca per la metropolitana di Londra), l’Antique Olive e l’Optima di Herman Zapft.

È disponibile in cinque pesi (da lite a extra bold), con relativo corsivo.