Migliora i tuoi progetti con i principi di chiusura e figura a terra (parte 2)

Ti sei mai chiesto come si uniscono gli elementi per creare design di successo? Non è un caso che un design accattivante sembri funzionare. Ciò che la maggior parte di questi progetti ha in comune è l'uso dei principi di raggruppamento della Gestalt per organizzare le informazioni che ci aiutano a comprendere le relazioni e le differenze tra gli elementi. Come designer, possiamo utilizzare questi principi per creare il nostro lavoro coinvolgente e di successo.

Cominciamo con il principio di chiusura della Gestalt.

Chiusura

Secondo i Principi universali del design, questo principio afferma che abbiamo la tendenza a percepire un insieme di elementi individuali come un modello unico e riconoscibile, piuttosto che più parti individuali. L'uso della chiusura riduce efficacemente la complessità riducendo gli elementi al minor numero possibile di parti necessarie per completare un oggetto. Fornito di informazioni sufficienti, compileremo le parti mancanti per creare un tutto. Ciò si ottiene attraverso l'uso dello spazio positivo e negativo.

Nell'esempio seguente, le nostre menti completano le linee per formare un cerchio, anche se la forma non esiste. Lo spazio positivo e negativo si combinano per formare la nostra percezione del cerchio.

La chiusura può essere utilizzata per farci percepire oggetti o schemi utilizzando la minor quantità di informazioni. Le nostre menti sono così ansiose di riempire le informazioni mancanti che può essere fatto con pochissimi elementi. Tuttavia, se non forniamo informazioni sufficienti per completare lo schema, non possiamo percepire l'oggetto e la chiusura fallisce, rendendo molto più difficile la formazione del cerchio nella nostra mente. Dai un'occhiata e vedi se riesci a completarlo nella tua mente. È molto più difficile, vero? Non possiamo metterlo insieme ora con la scarsa quantità di informazioni fornite.

Creare una chiusura efficace

Gli esempi sopra sono illustrazioni molto semplici di come percepiamo i modelli per formare la chiusura. In realtà, ci sono molti elementi visivi che possiamo utilizzare per aiutarci a formare una chiusura efficace:

• Spazio positivo e negativo . Come accennato in precedenza, lo spazio positivo e negativo si combinano in chiusura per formare un tutto. Ciò può essere ottenuto cercando le forme nascoste nello spazio negativo di un disegno o all'interno del tipo. Inoltre, la rimozione di elementi dal primo piano può creare forme negative interessanti e, così facendo, semplificare un progetto.
• Contrasto . La chiave per formare la chiusura è creare un forte contrasto tra gli elementi in primo piano e lo sfondo. Come sempre, il bianco e nero crea il miglior contrasto, ma puoi anche sperimentare colori complementari per un forte contrasto.
• Colore . Il colore non solo aggiunge vita a un design, ma può anche essere utilizzato per rafforzare le relazioni, soprattutto se si utilizzano forme astratte per rappresentare le forme.

Tutte le chiusure utilizzano molti, se non tutti, gli elementi visivi di cui sopra. Usarli e sperimentare la riduzione nei tuoi progetti ti aiuterà a scoprire nuove forme. Diamo ora un'occhiata alla chiusura nel mondo reale e vediamo come tutto si unisce.

Chiusura in pratica

Usando la chiusura, possiamo ridurre gli elementi necessari per trasmettere informazioni visive, riducendo la complessità e rendendo i progetti più accattivanti. Uno degli usi più comuni della chiusura è nella progettazione di loghi aziendali, proprio perché la chiusura può semplificare un design per trasmettere rapidamente l'identità di un marchio.

Di seguito si vede il famoso logo che riconosciamo come il pavone della NBC. Confrontando il logo attuale (a destra) con il vecchio logo, puoi vedere che non sono molto diversi. Ma riducendo gli elementi e lavorando con lo spazio negativo, il logo attuale diventa molto più semplificato ed elegante. La chiusura si ottiene con successo utilizzando forme positive strettamente raggruppate come piume, con la nostra percezione del corpo del pavone formata attraverso l'uso dello spazio bianco negativo nel mezzo.

Un altro logo ben noto che utilizza con successo la chiusura è di FedEx. In questo logo, la chiusura si ottiene con uno spazio bianco negativo, utilizzando le parti della E maiuscola e della x minuscola per formare la familiare freccia in avanti. Il designer ha sperimentato molti disegni, alla fine avvicinando sempre di più le lettere fino a vedere la freccia formarsi tra la e e la x. Ciò dimostra che sperimentare la riduzione dei progetti e cercare gli spazi intermedi può produrre risultati fantastici. Per la storia dietro la creazione del logo, dai un'occhiata al fantastico articolo di Matthew May su Fast Company. Riesci a vedere la freccia nel logo? Non ti mancherà mai da ora in poi!

Gli esempi sopra sono loghi ben noti che usano la chiusura in modi alquanto ovvi. Tuttavia, ci sono loghi meno famosi che usano la chiusura in modo più sottile. Ad esempio, Houzz utilizza la chiusura in modo più concettuale. A prima vista, le forme verdi, nere e bianche possono assomigliare a uno scaffale, parte di un edificio o un motivo a parete, suggerendo di cosa tratta il sito web. Ma uno sguardo più attento rivela anche qualcos'altro. Il desiderio della nostra mente di riempire gli spazi e completare i modelli ci consente di combinare le forme separate in un tutto, formando una H maiuscola nello spazio tridimensionale.

Sebbene la chiusura sia ottima per la creazione di loghi interessanti, può funzionare anche in altri modi. I siti Web possono anche utilizzare lo spazio positivo e negativo nella progettazione delle loro interfacce per produrre una chiusura efficace. Sotto, il logo Uncrate utilizza lo spazio positivo su uno sfondo nero e negativo per formare le lettere del suo logo e creare il marchio del sito. Questo è anche un buon esempio di figure-ground di cui parleremo tra poco.

Utilizzo della chiusura durante la creazione di icone

Le icone sono utili quando abbiamo bisogno di trasmettere un messaggio o rafforzare un concetto all'interno di un piccolo spazio. Devono essere semplici e ridotti ai loro elementi di base per aiutare le persone a capire rapidamente il loro significato. La chiusura funziona bene nella creazione di icone, utilizzando lo spazio positivo e negativo per diminuire la complessità, pur continuando a suggerire forme o oggetti che percepiamo come insiemi, come in questi esempi dal sito web di Noun Project.

Chiusura astratta

La chiusura può diventare piuttosto astratta e permetterci comunque di formare schemi riconoscibili. Uno dei miei usi preferiti della chiusura è nel doodle di Google. Google utilizza spesso la chiusura nei suoi scarabocchi, basandosi sul nostro bisogno intrinseco di riempire le informazioni mancanti per creare un intero oggetto. I doodle di Google dipendono dalla nostra familiarità con il logo di Google che ci consente di leggere l'immagine sottostante nonostante contenga forme molto astratte. Anche in questo caso, il colore aiuta a rafforzare la relazione tra ogni lettera del logo di Google.

Come puoi vedere, usando lo spazio positivo e negativo in modo creativo e riducendo gli elementi nei nostri progetti, possiamo creare alcuni design davvero interessanti con chiusura. Possiamo sfruttare la necessità di riempire le parti mancanti per ridurre la complessità e semplificare i nostri progetti. Successivamente, daremo un'occhiata a come possiamo utilizzare lo spazio positivo e negativo per creare buone relazioni di base.

Figura-Terra

Qual è il principio della figura-fondo? Secondo i principi universali del design , la figura-fondo è lo stato in cui percepiamo gli elementi come oggetti focali o come sfondo. Come la chiusura, la figura-fondo funziona attraverso l'uso dello spazio positivo e negativo. Il campo figura esiste praticamente in tutto ciò che percepiamo visivamente, che si tratti di una scena, una composizione, un sito web, un logo o un'icona.

Lo sfondo della figura è stabile quando gli oggetti sono distinguibili dallo sfondo e lo sfondo non ha interesse. La figura stabile fornisce un'impostazione per gli oggetti e ci consente di concentrare l'attenzione dove vogliamo. Ad esempio, percepiamo l'immagine qui sotto come un cerchio su uno sfondo. Il cerchio è il fulcro e cattura la nostra attenzione mentre lo sfondo è di scarso interesse. Questo esempio mostra una forte stabilità della figura-suolo poiché la figura ha forma ed è percepita come di fronte, mentre lo sfondo è informe, proseguendo dietro la figura ad una profondità ulteriore.

Quando la figura-fondo non è stabile, come nell'esempio seguente, viene introdotta l'ambiguità percettiva e le relazioni tra gli elementi diventano poco chiare. In questo esempio volutamente semplificato, la figura e il terreno sono reversibili, facendoci alternare nel vedere un oggetto e poi l'altro come la figura e poi il terreno.

Tuttavia, l'ambiguità non è necessariamente una cosa negativa. Questa mancanza di stabilità può essere utilizzata a nostro vantaggio durante la progettazione. Destabilizzare intenzionalmente la relazione figura-suolo può introdurre discordia o tensione, aggiungendo eccitazione e interesse ai nostri progetti. Uno dei miei usi preferiti di questa tensione nelle figure è nella serie di poster di Criminal Underworld di Simon C. Page. Qui, Page destabilizza deliberatamente la figura e il terreno, contrapponendo il principio a se stesso mentre figura e terreno lo combattono per attirare la nostra attenzione, proprio come l'eroe e il cattivo nel poster si combattono l'uno contro l'altro.

Creazione di buone relazioni figura-terra

Ci sono molti elementi visivi che possiamo usare per rafforzare la relazione figura-suolo nei nostri progetti. L'uso di questi elementi può aiutarci a focalizzare l'attenzione dove vogliamo, aiutandoci nella memorabilità di un sito Web o di un altro design:

• Contrasto . Il bianco o il nero, abbinato al colore, come si vede nei poster di Criminal Underworld, crea un contrasto molto forte. Allo stesso modo, i colori complementari sono eccellenti per creare contrasto. Se i colori puri sono troppo intensi, modifica il valore (quanto è scuro o chiaro il colore) per creare un contrasto più efficace.
• Colore . I colori caldi, come gialli, arancioni e rossi, sono percepiti in avvicinamento e possono essere usati per rafforzare la figura. I colori freddi, come viola, blu e verdi, sono percepiti come sfuggenti e possono essere usati per rafforzare il terreno.
• Taglia . Quando un grande elemento riempie la maggior parte del terreno, sarà percepito come la figura. Al contrario, un piccolo elemento all'interno di un grande terreno sarà percepito come la figura.
• Posizione . Gli elementi posizionati nelle zone inferiori saranno percepiti come figure mentre gli elementi posizionati nelle zone superiori saranno percepiti come terra. Questo gioca con la nostra percezione della distanza, poiché percepiamo gli oggetti posizionati nelle aree inferiori per essere più vicini a noi e gli oggetti posizionati nelle aree superiori per essere più lontani.
• Concentrarsi . Gli elementi a fuoco verranno percepiti come figure mentre gli elementi sfocati, sfocati, sbiaditi o colorati verranno percepiti come sfaccettature.

La maggior parte delle buone relazioni figura-fondo vengono create con una combinazione di molti di questi elementi visivi. Successivamente, diamo un'occhiata ad alcuni esempi del mondo reale e vediamo come questi elementi interagiscono per creare figure di successo.

Figura a terra in pratica

L'esempio della figura di terra nella serie di poster di Criminal Underworld sopra mostra il principio in uno stato instabile, in cui figura e terra si combattono per attirare l'attenzione. La figura instabile funziona bene quando ci sono pochi elementi e il design è semplice. Tuttavia, questo potrebbe non essere necessariamente l'uso desiderato del principio durante la progettazione di siti Web, sebbene ciò dipenda dal contenuto e dal contesto del sito Web. I siti web devono trasmettere informazioni complesse ed essere comunque chiari e utilizzabili. Con una figura stabile, possiamo guidare l'attenzione dove vogliamo ed evitare qualsiasi ambiguità del messaggio che stiamo cercando di comunicare.

Dai un'occhiata all'esempio seguente dal sito Web di Apple Music. Molto probabilmente, il tuo sguardo è attratto dall'immagine dello smartphone, che, insieme alla copia a sinistra, sono gli elementi della figura. Mentre lo sfondo inizia a lottare per la nostra attenzione, gli elementi della figura vengono migliorati attraverso l'uso di molteplici elementi visivi. In primo luogo, la figura è rafforzata attraverso la copia di grandi dimensioni e le grandi dimensioni dello smartphone. Posizionare lo smartphone nella parte inferiore dello schermo aiuta anche a portare avanti la figura. La figura è ulteriormente migliorata tingendo di nuovo l'animazione video sullo sfondo, facendo retrocedere il terreno. Infine, il contrasto tra lo schermo luminoso e lo sfondo scuro fornisce una buona separazione tra la figura e il terreno.

Nell'esempio successivo, dal sito Web di Naya, la dimensione della figura è l'elemento visivo più forte utilizzato per creare un buon sfondo della figura. Qui percepiamo la donna (e il suo cappello molto grande!) come una figura mentre riempie la maggior parte del terreno. Inoltre, l'uso di un colore freddo sullo sfondo, così come l'uso intelligente di elementi sovrapposti, aiuta ad aiutare lo sfondo ad allontanarsi. Infine, come nell'esempio di Apple Music, c'è un buon contrasto che separa il primo piano dallo sfondo.

Infine, l'ottimo contrasto tra figura e terreno è il punto di forza del sito web di R/m Design School. Qui, il menu mostra un forte contrasto, usando il colore brillante e il nero per separare la figura dal suolo. Inoltre, il colore caldo viene utilizzato per rafforzare la percezione della figura che viene verso di noi. Non vuoi solo allungare la mano e prendere quelle tessere rosse!

Conclusione

Capire come usare la chiusura e la figura di fondo ti aiuterà a costruire forti relazioni e differenze tra gli elementi nei tuoi progetti.

• Guarda lo spazio negativo tanto quanto lo spazio positivo per scoprire forme interessanti;
• Gioca con la rimozione di elementi in primo piano e usa invece lo spazio negativo per formare forme;
• Infine, mescola elementi visivi come contrasto, colore, dimensione, posizione e messa a fuoco per creare relazioni figura-suolo stabili e instabili.

Ora che sai come utilizzare questi due principi nel tuo lavoro, vai avanti e crea i tuoi progetti accattivanti e di successo!

Nella terza e ultima parte di questa serie, ci concentreremo sui principi della continuazione e del destino comune, che implicano il movimento, sia implicito che animato, per creare relazioni.

Risorse e buone letture

• "Principi Gestalt" su Scholarpedia.
• Principi universali di design rivisti e aggiornati: 125 modi per migliorare l'usabilità, influenzare la percezione, aumentare l'attrattiva, prendere decisioni di progettazione migliori e insegnare attraverso il design di William Lidwell, Kritina Holden e Jill Butler. Pub Rockport, 2010.
• Visualizzazione delle informazioni: percezione per il design di Colin Ware. Altro, 2012.

Lettura correlata su SmashingMag: Link

• Principi di progettazione: percezione visiva e principi della Gestalt
• Elementi di collegamento e separazione tramite contrasto e somiglianza
• Equilibrio compositivo, simmetria e asimmetria
• Come migliorare il flusso di lavoro della posta elettronica con un design modulare