Numero #059 – Siti web 21/02/2022

In passato abbiamo parlato spesso di prodotti digitali e di UX/UI design legato ai prodotti digitali. Con questo nuovo numero allarghiamo l’orizzonte, facendo un passo indietro, parlando di tutte le tipologie di siti web.


Per ricevere Dispenser.Design via email iscriviti qui.


Siti web

Un sito web è un insieme di pagine web collegate tra di loro. Pagine web raggiungibili con un indirizzo web (URL), attraverso un browser. E fin qui ci siamo, quasi. Per un po’ di tempo, dopo la messa online del primo sito web1, la definizione era abbastanza precisa. Poi le attività che si potevano svolgere in un sito web sono aumentate. I siti web sono diventati “servizi” e “prodotti”.

Gmail, Figma, la Repubblica, Amazon o Facebook sono tutti siti web, sono tutti fatti di HTML-CSS (e JS)2, ma si usano, si progettano e si realizzano in maniera diversa.

Volendo provare a suddividere i siti web per tipologia me ne vengono in mente quattro: i siti di comunicazione/informazione, i siti e-commerce, le piattaforme digitali, i prodotti/servizi digitali.

Comunicazione/Informazione

I siti di comunicazione/informazione sono quei siti che perlopiù si leggono. Possono essere i siti di giornali e riviste, o i blog. Ma anche i siti-brochure, quelli che parlano di un’azienda, di una persona o di un prodotto. Sono i siti personali, di uno studio o un’agenzia. In questa tipologia potremmo inserire guide o libri come quello di Jeremy Keith, Resilient Web Design, o quello di Frank Chimero, Shape of design. Potremmo ancora aggiungere progetti come quello di Nicholas Rougeaux, che ha raccolto, organizzato e messo online le 2.242 illustrazioni di un libro del 1800 sui minerali in Gran Bretagna.

E-Commerce

I siti di e-commerce sono dei cataloghi di prodotti. Ogni prodotto ha la propria pagina-scheda, con info e descrizioni, acquistabile con pochi click. A parte il più famoso di tutti, ce ne sono tanti, che vendono prodotti fisici o digitali.

Lo so, sto scrivendo delle cose scontate, ma a volte ripeterle aiuta a metterle a fuoco meglio. Nel momento in cui scrivo queste prime descrizioni, mi accorgo che i confini sono meno netti di quanto sto provando a fare. Un sito di comunicazione/informazione può essere anche un e-commerce, o meglio potrebbe avere un modulo e-commerce. Il sito di Repubblica, come quello di tanti altri giornali, vende l’accesso ai suoi contenuti. Dal sito-libro di Frank Chimero posso acquistare la versione cartacea.

Piattaforme

Le piattaforme sono quei siti dove si accede con un account ed è possibile condividere dei contenuti. A seconda del tipo di piattaforma quesi contenuti possono essere visti da tutti o solo dai membri. Più passa il tempo più le piattaforme tendono a somigliarsi. Facebook è una piattaforma di quelle social, del tipo di social basato sulle relazioni (social network). È una piattaforma anche Wordpress.com, che con il tempo ha inglobato alcune delle dinamiche social, il follow o il like, ma un tipo di social basato sui contenuti, più social media. In mezzo a questi due possibili estremi ci sono cose come Twitter, YouTube, Instagram (che ormai funziona anche sul web).

Prodotti digitali

Ci sono poi i prodotti digitali. Assieme alle piattaforme, sono i siti dove passiamo la maggior parte del nostro tempo. In più di qualche numero abbiamo affrontato la questione relativa al digital product design. Poco sopra ho citato Figma, ma se vi occupate di design conoscete di sicuro anche Miro o Mural. Probabilmente usate cose tipo Mailchimp o Google Docs. Sono siti web, ma sono soprattutto dei software.

Anche se spesso troviamo tutti sotto lo stesso dominio, raggiungibili attraverso un browser, stiamo visitando cose diverse. Google Docs è un prodotto, che ha un sito-brochure che ne descrive le caratteristiche e le funzionalità.

Anche qui i confini non sono così netti, le piattaforme sono in parte anche dei prodotti digitali. Tutte hanno funzioni per gestire il testo, manipolare le immagini o modificare una sequenza video.


Il punto di questa suddivisone di siti web (sicuramente imprecisa) è quella di definire la destinazione d’uso del proprio design, per progettare in maniera più consapevole.

Il sito-brochure di Google Docs si progetta in maniera diversa da Google Docs prodotto. Hanno sicuramente dei punti in comune, ma si parte da considerazioni diverse. Nel primo caso l’obiettivo è organizzare dei contenuti, per renderli comprensibili e accattivanti. Nel secondo caso quello di organizzare un flusso di azioni e interazioni che permettano all’utente di scrivere un testo, editarlo e condividerlo.

Se si lavora a un prodotto digitale è molto probabile che si lavorerà a quasi tutte le tipologie. Di sicuro ci sarà un sito che presenta il prodotto, le funzioni e le applicazioni d’uso. Ci sarà una guida all’uso di quel prodotto, un blog. Potrebbero esserci una sezione con dinamiche social (vedi Figma Community), potrebbe esserci un’e-commerce di prodotti (fisici o digitali).

Aver chiaro la destinazione d’uso del proprio design, aiuta a progettare in maniera più consapevole e aiuta anche a organizzare il lavoro e le fasi.


  1. È il sito che parlava del progetto WorldWideWeb di Tim Barnes-Lee. Ora è ospitato e archiviato all’interno del W3C ↩︎

  2. Almeno la parte visibile su un browser. ↩︎


Un altro esempio di sito di comunicazione/informazione è questa guida introduttiva al mestiere di progettista digitale, realizzata dal blog collettivo UXDesign.cc, con le illustrazioni di Michela Picchi.


Inque →

Il primo numero della rivista letteraria di Dan Crowe e Matt Willey (Pentagram, ex NY Times Magazine). Il primo dei dieci previsti, con cadenza annuale.

Presenti in questo primo numero: Margaret Atwood, Max Porter, Joyce Carol Oates, Ocean Vuong, Tom Waits, Ben Lerner.


Principi di design →

Una raccolta, open source, di principi e metodi di progettazione.

Principi e metodi di design

Le illustrazioni del NY Times →

La consueta raccolta del New York Times con le illustrazioni più interessati apparse sul loro giornale (cartaceo e online).

Le illustrazioni del NY Times

Libri di grafica →

Sul blog della casa editrice Unit Editions, le letture in corso di Matt Lamont (che tra le altre cose gestisce Design Reviewed).

Libri di grafica

Arteria →

Arteria è un carattere tipografico della type foundry francese Typofonderie. È un carattere condensed, ispirato alle insegne dei negozi italiani e alla loro tradizione di caratteri in legno.

Arteria è disponibile in nove pesi e lo si può vedere in uso nel mini-sito dedicato.