Quando pensiamo al Visual design dobbiamo pensare al modo in cui il nostro sistema percettivo può apprezzare le forme, i colori, gli aspetti visuali di un artefatto.

Questo è il nostro punto di partenza, la nostra premessa proprio perché possiamo andare a incontrare il modo in cui il nostro utente, l’utilizzatore finale del nostro artefatto potrà apprezzare, interpretare le caratteristiche formali del nostro prodotto, della nostra interfaccia naturalmente con l’obiettivo di evitare il sovraccarico informativo, il sovraccarico cognitivo.

Quando ci sono problemi con il Visual design i nostri utenti possono essere tagliati fuori così velocemente che non scopriranno mai tutte quelle scelte intelligenti e fondate dietro alla navigazione o all’incrocio design che proponete.

Jesse James Garrett è uno user experience designer, uno dei fondatori dello studio Adaptive Path che negli ultimi 20 anni ha studiato l’interazione e il visual nell’ambito digitale e che propone già un’integrazione tra tutti questi aspetti.

Forma e funzione

Questo è un tema, una dicotomia, un rapporto dialettico, tra gli aspetti formali, gli aspetti funzionali che da sempre ha toccato architetti, designer e progettisti nel corso degli ultimi due secoli.

Louis Sullivan

Louis Sullivan è uno dei più grandi progettisti e architetti del 1800. Ci propone nel suo modo di concepire la costruzione di un disegno di un edificio, quella che è la legge basica di lavoro ovvero la forma segue sempre la funzione. La funzione è dominante e si progettano gli spazi, ad esempio di un edificio pubblico, per un loro scopo o una loro funzione è la forma ne è una conseguenza. Quando non cambia la funzione, non cambia neppure la forma. La forma deve giustificare esteriormente, esteticamente quella che è la sostanza dell’oggetto stesso.

Il bello e l’utile, Paul Rand

Comunicazioni visive, di qualsiasi tipo, che siano persuasive o informative, dai cartelloni pubblicitari agli annunci di nascita, dovrebbero essere visti come l’incarnazione di forma e funzione: l’integrazione di bello e utile

Paul Rand

Egli è uno dei più importanti graphic design del 1900, anche lui propone questa riflessione su forma e funzione proponendo un’integrazione tra i due quindi non proponendo un rapporto di dominanza dell’uno sull’altro, ma una visione armoniosa, dov’è l’utilità e la bellezza sono coniugate, sono integrate.

È stato più volte dimostrato che la separazione di forma e funzione, di concetto ed esecuzione, verosimilmente non porta alla produzione di oggetti di valore estetico.

Ecco che Paul Rand nei suoi lavori prova in una prospettiva critica e storicistica a verificare cosa succede quando la forma e la funzione, il concetto e la sua esecuzione pratica, sono separati. Propone anche quello che è uno dei principali esempi, invece di integrazione e di realizzazione del bello è che l’opera dei Quaccheri Shakers che nei loro lavori di arte e di strutturazione dei prodotti, e soprattutto come vediamo in queste immagini in ambito domestico dell’interior design, realizzarono questo perfetto equilibrio tra la funzione di un oggetto e la sua forma; la funzione dello sgabello e la forma che supporta poi la gestione, il fatto di poter essere posizionati e messi al loro posto nel loro sostegno. Ecco che Paul Rand quando parla e analizza il lavoro dei Quaccheri Shakers integra questo forma e funzione in un equilibrio perfetto e sostenibile dove le forme sono modellate per raccontare, ma anche in uno spirito di design improntato all’ergonomia anche per suggerire quelle affordance funzionali, quei modi di utilizzo dell’oggetto stesso.

Funzionalismo e decostruzionismo

Possiamo capire il rapporto tra forma e funzione solo partendo dalle radici del funzionalismo e dal decostruzionismo di Frank Gerhy che negli anni 70-80 mette in discussione i canoni stessi del funzionalismo. Prendiamo oggi un esempio eclatante e celebre in architettura da Frank Gerhy che soprattutto negli anni 70-80 prova a sovvertire questa dominanza della funzione sulla forma e come principale artefice del decostruzionismo prova a proporre un approccio che scompone la struttura dell’edificio, la struttura architettonica, per ricomporla. Lo fa proprio perché gli assiomi di design sono eccessivamente semplicistici. Nell’ottica dei decostruzionisti quegli assiomi che hanno guidato il funzionalismo per tutto l’arco del 1800 e metà del Novecento, hanno una caratteristica di eccessiva riduzione di quello che è l’obiettivo del progettista. Sembrano agli occhi di Gerhy schiacciare la creatività, l’innovazione.

Quando la funzione segue la forma cosa succede?

Che cosa succede quando la funzione segue piuttosto che determinare la forma e quando è la forma a indicare la strada?

Ce lo mostra proprio Gerhy con dei palazzi che sono celebri, vere e proprie opere d’arte, come il museo Guggenheim di Bilbao, dove la forma esteriore, l’apparenza visuale dell’edificio del museo detta l’equilibrio interno, l’equilibrio di visita delle sale del museo stesso. Nelle sue opere lo vediamo anche nella celebre Walt Disney Concert Hall di Los Angeles dove segue lo stesso approccio di decostruzione dello spazio e ricostruzione in un’armonia di forme nuove. Nel Disney Concert Hall vediamo anche l’impatto all’interno di questo progetto. Gli spazi determinati esternamente riflettono quella armonia degli spazi per la fruizione delle grandi opere, dei grandi concerti dove i volumi che abbiamo visto dall’esterno ospitano e alloggiano i fruitori di una performance musicale come in questo caso con naturalmente al centro la produzione operistica e concertistica e con lo spazio del palco dedicato agli strumenti.

Egli dal suo punto di vista, anch’egli un decostruzionista che prova, piuttosto che a enfatizzare la separazione, a dare risalto a questa unione nei termini anche spirituali tra forma e funzione dove armonicamente l’una supporta la strutturazione dell’altra.

Ma come è possibile questo?

Con l’uso di simboli e l’uso di immagini nel processo progettuale. I simboli con i loro significati, ad esempio il cerchio con quello che è il significato simbolico dell’uso formale degli elementi e le combinazioni tra simboli e immagini. Naturalmente anche il ruolo del contesto di fruizione. Abbiamo visto esempi di strutture anche architettoniche di museo e di sala concerto. Anche la fruizione di un artefatto o di un progetto architettonico, dipende strettamente e prevalentemente anche dal contesto nel quale è situata, non è un caso che proprio i due esempi di Gerhy che abbiamo visto sono stati oggetto anche di progettazione da parte del grande architetto. Tutte entrambe le aree di riferimento. Non soltanto l’edificio, ma anche l’ambiente di riferimento nel quale l’edificio è collocato.

C’è un aspetto fondamentale nel quale Paul Rand pone l’accento: il ruolo dell’umorismo nella comunicazione visiva dove questo equilibrio tra forma e funzione viene anche stimolato, trasformato dal ruolo della creatività e nei termini di Paul Rand del dell’umorismo. Ne abbiamo un esempio nei suoi poster. Ci spostiamo dall’architettura per andare nella comunicazione visiva che è il terreno di Paul Rand con il poster per un dialogo interreligioso (Interfaith Day) che Paul Rand da curato negli anni 40 e negli anni 50. Proprio lo stesso Paul Rand suggerisce questa immagine per raccontare come l’umorismo di una rappresentazione dell’Angelo Incoronato che festeggia questo dialogo tra le diverse fedi e le diverse religioni.

Ecco che sempre l’intuizione è un pensiero creativo che stravolge, ma anche integra questi due aspetti antinomici che sono la forma e la funzione e li risolve in una soluzione progettuale, in un concept.

Elementi e principi del visual design

Elementi del visual design

Tra gli elementi del visual design abbiamo:

1. Linee dritte / curve / geometriche / organiche. Usale per creare divisioni, texture e forme. Le linee sono sicuramente un elemento che consente di definire elementi e simboli. Consente di definire delle forme. Usa linee con colori diversi per creare aree auto contenute.

2. La linea separa traccia, ma definisce anche forme specifiche.

3. Forma negativa, forma positiva. Usa l’area vuota intorno alla forma positiva per creare un effetto figura-sfondo e per dare equilibrio al disegno nel suo complesso. Quando progettiamo e definiamo delle forme su un artefatto grafico, la forma che definiamo è definita positiva perché viene affermata in qualche modo sul foglio, sulla campitura e gli viene conferita una dignità rispetto allo sfondo che in quel momento assume questa valenza di figura negativa, cioè tutto ciò che rimane nella campitura, nel foglio, rispetto alla forma che è stata definita e l’equilibrio tra le forme positive quelle create dal disegnatore e le forme negative è quell’equilibrio tra figura e sfondo che solitamente apprezziamo in qualsiasi percetto che viene proposto alla nostra vista dove abbiamo il primo piano, il secondo piano e dove abbiamo la nostra attenzione visiva che si focalizza su elementi che possono essere posizionati nelle figure o nello sconto e lo vedremo più tardi.

4. Volume. Usatelo per mostrare la ricca pienezza di tutte e tre le dimensioni, degli elementi su schermi bidimensionali. Il volume è quella caratteristica che ci consente di conferire la profondità e di lavorare sulla tridimensionalità degli oggetti anche nei nostri artefatti su display grafici o su poster dove l’oggetto stesso del nostro lavoro è bidimensionale. Il volume ci consente di lavorare in una prospettiva spaziale, ma anche storica nel racconto che facciamo e di conferire un peso anche una materialità agli oggetti che andiamo a disegnare alle forme che abbiamo disegnato e dalla nostra forma bidimensionale del quadrato possiamo naturalmente realizzare cubi e parallelepipedi di diversa costruzione.

5. Luminosità. Usala per impostare il rapporto tra luminosità e oscurità tipicamente attraverso una fonte di luce per creare ombre e luci. Ecco che la luminosità e il contrasto tra ombria e luce è un altro attributo che accoppiato ai volumi, alla realizzazione dei volumi, ci dà la possibilità di conferire una priorità agli oggetti che abbiamo disegnato e alle forme.

6. Il colore. Usalo per impostare il tema è il tono e attirare l’attenzione.

7. La texture. Usalo per definire la superficie di un oggetto. Colore e texture vanno a caratterizzare, soprattutto i riempimenti ma anche i tratti delle forme che si disegnano e danno quel carattere, quella valenza, quel significato ai volumi e alle forme che dicevamo.

I quattro principi di base del Visual Design

1. Prossimità. È la legge che ci fa pensare agli oggetti che hanno la relazione e sono organizzati in gruppi.

2. L’allineamento. Ogni elemento ha una connessione visuale con gli altri.
Prossimità e allineamento sono i primi due principi che vedremo. La prossimità è quella regola che ci fa avvicinare e costruire dei raggruppamenti spaziali per conferire dei caratteri di somiglianza o di appartenenza a una medesima classe. L’allineamento ci consente invece di creare delle connessioni visuali e di creare gruppi armonici dentro a uno spazio.

3. La gerarchia. Gli elementi sono organizzati in un ordine strutturale.

4. Il contrasto. Differenziare significativamente oggetti che non sono similari.

Come per la prossimità andiamo a caratterizzare la somiglianza, con la gerarchia e il contrasto andiamo a dare un ordine e a differenziare con la gerarchia tramite dei livelli e delle dipendenze di una classe di oggetti ad esempio a rispetto a una voce e vedremo l’esempio dei menu di navigazione e nel contrasto dove si vuole esplicitamente marcare la differenza e quindi lavorare su una forma, sul colore, sul posizionamento nello spazio proprio per definire una differenza marcata tra due oggetti.

Prossimità

La prossimità è come abbiamo detto quella strategia che ci consente di definire delle somiglianze. nei nostri progetti di interfaccia dove vengono posizionati, gli uni gli altri come nella toolbar in alto nell’esempio che abbiamo messo, hanno un medesimo ruolo dentro all’interfaccia. quelli che vediamo in questa parte della toolbar nella parte sinistra possono determinare diverse modalità di visualizzazione dell’interfaccia, lo zoom, l’incremento dello zoom stesso o la vista a tutto schermo. Il play di una presentazione, ad esempio, piuttosto che quelle caratteristiche di variabili da poter manipolare: le immagini, i testi dei grafici e tabelle e così via. Ma la prossimità non viene usata nel Visual design solo con elementi grafici, ma anche per definire dei corpi di testo come quando articoliamo titoli e sottotitoli e li affianchiamo, ad esempio, a dei bottoni specifici come per scaricare, ad esempio, la versione Android o iPhone dii un app. Naturalmente possono esserci diverse strategie per realizzare la prossimità. A volte la definizione dei contorni e sfondi, a volte con delle linee di separazione che servono a raggruppare gli elementi.

Allineamento

L’allineamento conferisce un ordine, conferisce una facilità di lettura dall’alto verso il basso o da sinistra verso destra e ci consente di percepire delle forme in maniera unitaria e univoca, ma anche come abbiamo visto nel corso degli anni 80 e come riportato anche in questo esempio l’allineamento pone anche dei seri problemi di usabilità. È quello che è successo, ad esempio, nelle elezioni dove si sono realizzati problemi di lettura per gran parte degli americani dovuti proprio alla difettosa gestione degli allineamenti e alla difficoltà di ricondurre i forellini da utilizzare per esprimere il proprio voto alla corrispondenza con il candidato per cui con estrema difficoltà si poteva leggere, interpretare il forellino per votare Buchanan o Gore. Naturalmente questo esempio è proposto anche in letteratura. Bruce Tognazzini ne ripropone in qualche modo una revisione una secondo un’applicazione lineare del principio di allineamento si ha una rispondenza diretta e univoca tra il forellino e la riga di lettura e la riga di alloggiamento del nome del candidato. Questo caso nel rispetto alle elezioni americane è molto celebre e trovate in rete più risorse e critiche a questo tipo di problema di usabilità.

Gerarchia

Gerarchia. Come dicevo prima, il principio della gerarchia è utilizzato soprattutto in ambito web per andare a determinare quelle dipendenze tra oggetti che non si pongono sul medesimo piano di priorità e di importanza, ma che si discostano gli uni dagli altri perché alcuni occupano un ruolo di rilievo e determinano poi la strutturazione di quelli che soggiacciono a loro. Questo lo vediamo in tutte le nostre esperienze quotidiane con i programmi software dove le voci di primo livello dei menu fly out sono quelli a tendina che si aprono da ad esempio e file, fdit, form, view, help dei nostri normali comandi di primo livello di software di edit dei testi e delle immagini. Per andare aprire ad esempio il secondo livello della tendina della voce file. E poi le eventuali voci di terzo livello e quella gerarchia che abbiamo visto prima in termini astratti viene realizzata concretamente. Può essere discriminata non soltanto i fly out a menu, ma anche con tutte quelle strutture grafiche dove per la relazione che si realizza tra le voci più in alto e quelle più in basso, quindi la riga di headline come Camerama, come pure in questo caso le voci nel menu laterale dove sono raggruppati tutti i prodotti, le fotocamere, le lenti, gli accessori. Ecco che le strategie utilizzate per determinare la gerarchia, sono quelle della prossimità, sono quelle della spazzatura e della definizione dei titoletti in grassetto. Questo ci dà la possibilità senza bisogno di avere una vera e propria struttura navigabile di avere tutta la navigazione esposta e organizzata gerarchicamente.

Contrasto

Il contrasto. Un elemento deve essere distinto dagli altri per cui se ne varia la forma, se ne varia il colore, si pone l’accento su una delle caratteristiche formali che sia il posizionamento o il distanziamento. Lo possiamo fare attraverso la variazione, ad esempio, in un font di una dimensione del titolo. Lo possiamo fare variando il colore, ampliando le distanze tra gli elementi. Lo possiamo fare variando il colore dello sfondo di un elemento in un’interfaccia come in tutti quegli esempi dove abbiamo un messaggio di Alert o di errore che tipicamente ha un tratto distintivo che utilizza il colore rosso che sia lo sfondo, che sia applicato al titolo o al button o all’ombreggiatura. Con queste modalità riusciamo a catturare l’attenzione dell’utilizzatore verso un elemento specifico a cui viene conferito contrasto rispetto a tutti gli altri.

Altri principi del Visual Design

Unità

L’unità. Usala per stabilire l’armonia tra gli elementi della pagina in modo che sembrino appartenere l’uno all’altro e gli utenti non siano distratti da layout caotici, ad esempio disallineati. L’unità è un in una stretta relazione con il principio dell’allineamento e con la necessità di costruire delle buone forme come direbbero gli psicologi gestaltisti.

Gestalt

La Gestalt. Usa i principi della buona forma per guidare il modo in cui gli utenti percepiscono e interpretano il tuo design.

Equilibrio

L’equilibrio. Usalo per distribuire gli elementi in modo uniforme. È quel principio che anche ci fa richiamare il rapporto tra forma positiva e forma negativa che dicevamo prima dove, al fine di realizzare un artefatto armonioso, ance le forme negative devono avere i loro spazi, ad esempio il distanziamento, gli spazi vuoti in una tavola, in un layout.

Scala

La scala. Usa questo per enfatizzare gli elementi e per stabilire l’importanza o la profondità di una composizione.

Dominanza

La dominanza. Usala le dimensioni di un oggetto, come il colore, per farlo risaltare. Ecco dominanza e contrasto hanno aspetti di convergenza perché anche dominanza come principio ci porta a pensare a un oggetto che sovrasta gli altri che si propone diverso, differente dagli altri e ugualmente la scala.

Linguaggi visual di interfaccia

1. Skeumorphism. Il design imita la forma di un oggetto e le sue affordances. È stato uno dei principali linguaggi soprattutto negli anni 90 quando l’elettronica di consumo si è diffusa e si è diffuso l’uso degli smartphone alla fine anni 90 inizio anni 2000.

2. Flat design: Design iconico e minimalista che richiede di essere appreso

3. Material design: Design secondo la metafora del reale con interfacce con una tridimensionalità e profondità dei materiali reali.

4. Neumorphic / neumorphism: Recupero di alcuni attributi dello Skeumorphism per un minimalismo orientato alle forme tridimensionali e all’uso delle ombreggiature.

In copertina Foto di Joanna Kosinska su Unsplash

fonte uninettuno