Graphic Design e Web Design

Agli inizi del 2000, la prestigiosa School of Visual Arts di New York ha eliminato la parola “grafica” dai suoi corsi di design. Dicevano che con la parola “grafica” davano l’idea che i loro corsi fossero legati esclusivamente alla stampa.

Oggi in pochi si definiscono “grafici”, ma «la grafica resta la forma delle maggior parte delle cose»¹. I principi di base del graphic design si applicano a diversi ambiti. Che ci si occupi di identità visiva, di packaging, di comunicazione, di editoria, di interfacce.

I concetti di base sono gli stessi, spesso anche gli strumenti sono gli stessi. Cambia come si usano e applicano questi concetti e strumenti. E cambia quello che viene dopo, come viene prodotto il progetto grafico.

Qualunque sia l’ambito, bisogna confrontarsi con questioni tecniche, legate alle gestione di un layout, l’organizzazione del testo tipografica, l’uso di immagini e colori.

Quando parliamo di progettazione di interfacce, parliamo di un ambito in cui si applicano i principi di base del graphic design. Bisogna disporre e organizzare visivamente gli elementi in uno spazio. Decidere dove inserire pulsati e il testo, valutare quali altri elementi (come foto, illustrazioni, elementi grafici) sono necessari. Nella progettazione di interfacce il designer deve anche decidere cosa succede.

Nel “decidere cosa succede”, il designer sta determinando sia il comportamento (cioè, se un pulsante cambia colore, forma, si sposta sul posto o risponde in altro modo all’input dell'utente) che il flusso (cioè, a quale schermata va l’utente, o quali nuove parti dell’interfaccia sono presentate all’utente).

(In molti casi è necessario cominciare a comporre un layout e a prendere delle decisioni visive, soprattutto).

Facendo una semplificazione possiamo dire che presi insieme, l'interfaccia, il comportamento e il flusso formano l'esperienza dell'utente. Questa è una grossolana semplificazione, ma è un modo ragionevole di comprendere quel termine.²

Parlando di interfacce siamo però ancora nel generico. Le interfacce non sono tutte uguali, un’app si progetta in maniera diversa da un sito web, che si progetta in maniera diversa da un bancomat o una macchinetta per acquistare un biglietto alla stazione. E ancora non tutte le app mobile sono uguali, come non lo sono tutti i siti web.

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. Per un po’ di tempo, dopo la messa online del primo sito web³, 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”.

Tutti i giorni navighiamo decine di siti web diversi, per le operazioni più diverse. Per informarci, per relazionarci, per condividere immagini o post, per controllare l’email, per preparare una presentazione, salvare delle note, guardare un video.

Tutti questi siti che che guardiamo ogni giorno, nel nostro browser, sono fatti della stessa sostanza, sono fatti di HTML-CSS (e JS)⁴, ma si usano, si progettano e si realizzano in maniera diversa.

Restringendo al minimo i campi, potremmo suddividere i siti web in quattro macro-categorie: 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 anche libri.

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 passaggi. Ce ne sono di vario tipo che vendono prodotti fisici o digitali.

Piattaforme

Le piattaforme sono quei siti dove si accede con un account ed è possibile condividere dei contenuti. A seconda del tipo di piattaforma, i contenuti potrebbero essere visti da tutti o solo dai membri. Più passa il tempo più le piattaforme tendono a somigliarsi. Ci sono piattaforme social, di quelle basate sulle relazioni (i social network, vedi Facebook) o di quelle basate sui contenuti (social media, vedi YouTube, il fu Twitter). Ci sono poi piattaforme che permettono di creare e gestire siti web, magari proprio del tipo comunicazione-informazione (come wordpress.com) o del tipo e-commerce. Ci sono le piattaforme di streaming (quelle dove si guardano film e serie tv). Ci sono quelle che fanno da mediatore tra una domanda e un’offerta, che sia un alloggio, dei prodotti, un lavoro.

Prodotti e servizi digitali

I prodotti digitali, assieme alle piattaforme, sono i siti dove passiamo la maggior parte del nostro tempo. Volendo fare una semplificazione, potremmo dire che i prodotti digitali sono quelli che una volta chiamavamo software, e installavamo sul nostro computer. Probabilmente avete familiarità con gli strumenti di Google per scrivere testo, fare calcoli o presentazioni. La versione web, accessibile da un browser, di software come Word o Excel⁵. Uno dei software più usati per progettare interfacce, Figma, si utilizza dal browser.

---

I confini tra queste quattro tipologie non sono netti. Uno dei più noti e-commerce è anche una piattaforma che mette in relazione aziende e cliente. Un sito di informazione-comunicazione ha spesso una sezione per sottoscrivere un abbonamento o acquistare qualche prodotto.

Anche se spesso troviamo tutti sotto lo stesso indirizzo, 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à. Le piattaforme sono anche dei prodotti digitali, Tutte hanno più o meno funzioni “software” per gestire o formattare il testo, manipolare un’immagine, editare un video.

Prendiamo ad esempio Google Docs. Google Docs è un prodotto digitale, e ha un sito web che lo “comunica”, mostra le funzioni e i costi, ha un sito-brochure.

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 si organizza un flusso di azioni e interazioni che permetta all’utente di scrivere un testo, editarlo e condividerlo.

Questa classificazione è generica e per certi versi imprecisa, ma ci dà l’idea del tipo di sito web che si deve progettare. 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.

Capitolo 2: Titolo del Capitolo 2