Migliorare i Tuoi Disegni Con I Principi di Chiusura E Di Figura-sfondo (Parte 2)

Circa L’Autore

Jon era un visual designer per molti anni prima di fare il salto di interaction design., Ha un master in Human-Computer Interaction presso la DePaul …Più aboutJon↬

Vi siete mai chiesti come gli elementi si uniscono per creare progetti di successo? Non è un caso che il design avvincente sembra funzionare., Ciò che la maggior parte di questi progetti hanno in comune è l’uso di principi di raggruppamento gestalt per organizzare le informazioni che ci aiuta a capire le relazioni e le differenze tra gli elementi. Come designer, possiamo usare questi principi per creare il nostro lavoro coinvolgente e di successo.

Iniziamo 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 singoli elementi come un unico modello riconoscibile, piuttosto che più parti individuali., L’utilizzo della chiusura riduce efficacemente la complessità riducendo gli elementi al minor numero possibile di parti necessarie per completare un oggetto. Fornito con informazioni sufficienti, riempiremo le parti mancanti per creare un intero. Ciò è ottenuto 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 modelli utilizzando la più piccola quantità di informazioni. Le nostre menti sono così desiderosi di riempire le informazioni mancanti che può essere fatto con pochissimi elementi. Tuttavia, se non forniamo informazioni sufficienti per completare il modello, allora non possiamo percepire l’oggetto e la chiusura fallisce, rendendo il cerchio molto più difficile da formare nella nostra mente. Date un’occhiata e vedere se è possibile completare nella vostra mente. E ‘molto piu’ difficile, vero?, Non possiamo abbastanza mettere insieme ora con la scarsa quantità di informazioni fornite.

Creazione di una chiusura efficace

Gli esempi sopra riportati sono illustrazioni molto basilari di come percepiamo i modelli per formare la chiusura. In realtà, ci sono molti elementi visivi che possiamo usare 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., Questo 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, in tal modo, semplificare un disegno.
• Contrasto. La chiave per formare la chiusura sta creando 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 contrasto forte.
• Colore., Il colore non solo aggiunge vita a un design, ma può anche essere usato per rafforzare le relazioni, specialmente se si usano forme astratte per rappresentare le forme.

Tutta la chiusura utilizza molti se non tutti gli elementi visivi di cui sopra. L’utilizzo di questi e la sperimentazione di riduzione nei vostri disegni vi aiuterà a scoprire nuove forme. Diamo ora un’occhiata alla chiusura nel mondo reale e vediamo come tutto viene insieme.

Closure In pratica

Utilizzando closure, possiamo ridurre gli elementi necessari per trasmettere informazioni visive, riducendo la complessità e rendendo i progetti più coinvolgenti., 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.

Visto di seguito è il famoso logo che riconosciamo come il pavone 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 è ottenuta con successo utilizzando forme strettamente raggruppate e positive come piume, con la nostra percezione del corpo del pavone formata attraverso l’uso dello spazio bianco negativo nel mezzo.

Un altro logo ben riconosciuto che impiega chiusura con successo è da FedEx., In questo logo, la chiusura è ottenuta con uno spazio bianco negativo, utilizzando le parti della E maiuscola e della x minuscola per formare la nota freccia in avanti. Il progettista ha sperimentato con molti disegni, alla fine tirando le lettere sempre più vicino insieme fino a quando vide la freccia che si forma tra la e e x. Questo dimostra che la sperimentazione di riduzione nei vostri disegni, e alla ricerca di spazi in mezzo, può produrre risultati fantastici. Per la storia dietro la creazione del logo, controllare grande articolo di Matthew May a Fast Company. Riesci a vedere la freccia nel logo?, Non ti mancherà mai d’ora in poi!

Gli esempi sopra riportati sono loghi ben noti che usano la chiusura in modi un po ‘ ovvi. Tuttavia, ci sono loghi meno famosi che usano la chiusura in modo più sottile. Ad esempio, Houzz impiega la chiusura in modo più concettuale. A prima vista, le forme verdi, in bianco e nero possono assomigliare a una mensola, parte di un edificio o a un modello di 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 permette di combinare le forme separate in un tutto, formando una H maiuscola nello spazio tridimensionale.

Mentre la chiusura è 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 figura-terra che entreremo in breve.

Usare la chiusura quando si creano icone

Le icone sono utili per 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 suggerendo forme o oggetti che percepiamo come interi, come in questi esempi dal sito web del progetto Noun.,

Chiusura astratta

La chiusura può diventare abbastanza astratta e ci permette ancora di formare modelli riconoscibili. Uno dei miei usi preferiti di chiusura è nel doodle di Google., Google impiega chiusura spesso nei suoi scarabocchi, basandosi sulla nostra intrinseca necessità di compilare le informazioni mancanti per creare un intero oggetto. Google doodles dipendono dalla nostra familiarità con il logo di Google che ci permette di leggere l’immagine qui sotto nonostante contenga forme molto astratte. Qui, 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 disegni, possiamo creare alcuni disegni 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 usare lo spazio positivo e negativo per creare buone relazioni figura-terra.

Figure-Ground

Qual è il principio di figure-ground? Secondo i principi universali del Design, la figura-terra è lo stato in cui percepiamo gli elementi come gli oggetti di messa a fuoco o lo sfondo. Come la chiusura, la figura-terra funziona attraverso l’uso dello spazio positivo e negativo. Figura-terra esiste praticamente in tutto ciò che percepiamo visivamente, se una scena, una composizione, un sito web, un logo o un’icona.,

Figure-ground è stabile quando gli oggetti sono distinguibili dallo sfondo e lo sfondo non ha alcun interesse. Stabile figura-terra fornisce un ambiente per gli oggetti e ci permette di focalizzare l’attenzione dove vogliamo. Ad esempio, percepiamo l’immagine qui sotto come un cerchio su uno sfondo. Il cerchio è il fuoco e tiene la nostra attenzione mentre lo sfondo è di scarso interesse. Questo esempio mostra una forte stabilità figura-terra come la figura ha forma ed è percepito di essere di fronte, mentre lo sfondo è informe, continuando dietro la figura ad una profondità ulteriore.,

Quando la figura-terra 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 tra 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-terra può introdurre discordia o tensione, aggiungendo eccitazione e interesse ai nostri progetti. Uno dei miei usi preferiti di questa tensione in figura-terra è nella serie di poster Criminal Underworld di Simon C. Page. Qui, Page destabilizza deliberatamente la figura e il terreno, contrapponendo il principio a se stesso mentre la figura e il terreno combattono per la nostra attenzione, proprio come l’eroe e il cattivo nella battaglia del poster l’uno contro l’altro.,

Creazione di buone relazioni figura-terra

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

• Contrasto., Bianco o nero, abbinato al colore, come si vede nei manifesti della malavita criminale, crea un contrasto molto forte. Allo stesso modo, i colori complementari sono eccellenti per creare contrasto. Se i colori puri sono troppo intensi, modificare il valore (quanto scuro o chiaro è il colore) per creare un contrasto più efficace.
• Colore. I colori caldi, come i gialli, le arance e i rossi, sono percepiti come si avvicinano e possono essere usati per rafforzare la figura. I colori freddi, come viola, blu e verdi, sono percepiti come sfuggenti e possono essere utilizzati per rafforzare il terreno.
• Dimensioni., 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 aree inferiori saranno percepiti come figura mentre gli elementi posizionati nelle aree 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.
• Messa a fuoco., Gli elementi che sono a fuoco saranno percepiti come figura mentre gli elementi che sono fuori fuoco, sfocati, sbiaditi o colorati, saranno percepiti come terra.

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

Figura-terra In pratica

L’esempio di figura-terra nella serie di poster di Criminal Underworld sopra mostra il principio in uno stato instabile, dove figura e terra si combattono per l’attenzione. Figura instabile-terra funziona bene quando ci sono pochi elementi e il design è semplice. Tuttavia, questo potrebbe non essere necessariamente l’uso desiderato del principio quando progettiamo siti web, anche se ciò dipende dal contenuto e dal contesto del sito web. I siti web devono trasmettere informazioni complesse ed essere ancora 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 qui sotto dal sito Web di Apple Music. Molto probabilmente, il tuo occhio è attratto dall’immagine dello smartphone, che, insieme alla copia a sinistra di esso, 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 più elementi visivi. In primo luogo, figura è rafforzata attraverso grande copia e le grandi dimensioni dello smartphone., Il posizionamento dello smartphone nella parte inferiore dello schermo aiuta anche a portare la figura in avanti. La figura è ulteriormente migliorata colorando indietro l’animazione video in background, causando terra a ritirarsi. Infine, il contrasto tra lo schermo luminoso e lo sfondo scuro fornisce una buona separazione tra figura e terra.

Nel prossimo esempio, dal sito web di Naya, la dimensione della figura è l’elemento visivo più forte utilizzato per creare una buona figura-terra. Qui, percepiamo la donna (e il suo cappello molto grande!) come figura come lei riempie la maggior parte del terreno. Inoltre, l’uso di un colore fresco sullo sfondo, così come l’uso intelligente di elementi sovrapposti, aiuta ad aiutare lo sfondo recedere. Infine, come l’esempio di Apple Music, c’è un buon contrasto che separa il primo piano dallo sfondo.,

Infine, l’eccellente contrasto tra figura e terreno è il punto di forza del sito web di R / m Design School. Qui, il menu presenta un forte contrasto, utilizzando colori brillanti e nero per separare la figura da terra. Inoltre, il colore caldo viene utilizzato per rafforzare la percezione della figura che viene verso di noi. Non si desidera solo per raggiungere e afferrare quelle piastrelle rosse!,

Conclusione

Capire come utilizzare la chiusura e la figura-terra vi aiuterà a costruire forti relazioni e le differenze tra gli elementi nei vostri disegni.,

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

Ora che sapete come utilizzare questi due principi nel vostro lavoro, andare avanti e creare i propri disegni coinvolgenti e di successo!,

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

Risorse e buone letture

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

• Principi di Progettazione: Percezione Visiva E I Principi Della Gestalt
• Collegamento E di Elementi di Separazione Attraverso il Contrasto E Somiglianza
• Equilibrio Compositivo, la Simmetria E l’Asimmetria
• Come Migliorare la Tua Email Flusso di lavoro Con Design Modulare

(ml, da, og, jb, il)