Il principio della Gestalt Teoria del design per i web designer

Il modo in cui le persone vedere i nostri disegni hanno un forte impatto sul senso che li tolgono. Il principio della Gestalt esamina questo fenomeno; In quanto tale, è uno dei principi fondamentali che ogni web designer dovrebbe considerare quando si muove attraverso il processo di progettazione. Esamineremo anche come la comprensione di Gestalt migliorerà il tuo flusso di lavoro!

Teoria del design e Web design

Cercare di trovare un design buono e creativo può sembrare facile per qualcuno che ha frequentato una scuola di design, ma per il 90% dei web designer che non hanno mai frequentato alcun corso di design o scuola provenienti principalmente dallo sviluppo o in generale dal design sfondi. La domanda rimane ... cosa definisce veramente un buon web design? È solo talento? Una persona che possiede qualche tipo di occhio "speciale" che sa cosa funziona e cosa no? Oppure c'è una logica e una metodologia scientifica dietro a tutto ciò che può guidare i progettisti, i critici e persino i clienti a proporre un grande design.

Questo fa parte di una serie di articoli di teoria del design che ti guideranno attraverso i principi di base del processo di progettazione. Ci concentreremo sulle idee fondamentali più importanti che possono fare grandi differenze nel design finale.

Il principio della Gestalt

Gestalt è una parola tedesca che significa "essenza o forma della forma completa di un'entità", e questa singola definizione può essere una delle regole più importanti del design.

Più spesso, i designer tendono a concentrarsi sui dettagli del web design piuttosto che sull'aspetto generale. Si concentrano su bordi curvi, ombre, caratteri ... ecc. Tutto ciò che è buono, ma potrebbe non fare alcuna differenza se il cliente non apprezza il design a prima vista, ciò che la maggior parte delle persone non capisce è che il cervello prima vede il forma generale di qualsiasi progetto, quindi inizia a concentrarsi su e vedere i dettagli ...

Dai un'occhiata a questa immagine di esempio ...

Ad una prima occhiata vedresti un paio di teste di vecchi, ma guardando più da vicino inizi a vedere i dettagli (che alcune persone potrebbero anche non notare all'inizio) che compongono queste immagini e inizi a vedere un'immagine completamente diversa.

Ora proviamo qualcosa per vedere come i dettagli non contano davvero, dai un'occhiata a questi 2 esempi:

A prima vista queste 2 immagini possono sembrare identiche; tuttavia ci sono 5 sottili differenze nei dettagli che hanno un impatto minimo sull'intero "design"

  1. L'uccello nero in alto a sinistra sta guardando nella direzione opposta
  2. L'uomo sul sombrero (cappello) di sinistra è diverso
  3. Il bastone da passeggio dell'uomo è capovolto e un po 'più scuro
  4. I mattoni del pavimento in basso a destra sono più grandi nella seconda immagine
  5. La donna sta guardando nella direzione opposta

Ora nessuno di questi cambiamenti ha avuto alcun impatto sull'aspetto complessivo dell'immagine ... vediamo un altro esempio comune:

Queste sono 2 versioni di Volkswagen Beetle, i modelli del 1937 e del 1973 e, nonostante diversi importanti cambiamenti nei dettagli del design in oltre 4 decenni, il design rimane essenzialmente lo stesso. Questo è dovuto al modo in cui funziona il nostro cervello, vediamo le immagini intere e definiamo l'intera forma molto più veloce e più facile di vedere o notare cambiamenti nei dettagli.

Se guardiamo l'immagine sopra che raffigura un cane dalmata annusando il terreno all'ombra degli alberi a strapiombo. Il cane non viene riconosciuto identificando per prima cosa le sue parti (piedi, orecchie, naso, coda, ecc.) E quindi inferendo il cane da quelle parti componenti. Invece, il cane è percepito come un tutto, tutto in una volta.

Lo stesso accade per ogni singolo design di un sito Web che creiamo, il design non è mai percepito identificando le sue parti (Intestazione, Navigazione, Contenuto, pulsanti, schede ... ecc.), Il design è percepito come un tutto a prima vista.

Quando sono tornato al college, uno dei miei professori ha riassunto questo in una frase semplice, ha detto "se vedi un disegno, come questo, poi decidi di lavorare sulla regolazione dei dettagli, allora sai che è un buon design, ma se tu inizia a regolare prima per cercare di farti piacere ... poi sai che è un cattivo design ... non sprecare il tuo tempo a cercare di aggiustarlo ... basta cambiarlo nel suo complesso ", questo professore ha capito la chiave magica in qualsiasi progetto ... noi vedere le cose nel loro complesso, non come la somma delle sue parti.

Chiedete a chiunque nel mondo di disegnare il Big Ben o la Torre Eiffel o le Piramidi di Giza ... sarebbero tutti d'accordo sulla forma complessiva di ogni punto di riferimento, perché tuttavia in modo diverso potremmo vedere questi punti di riferimento (visita, in foto, in un film, in un brochure di viaggio ... ecc.) vediamo tutti la stessa forma di definizione.

Applicazione del principio di Gestalt al flusso di lavoro Web Design

Di seguito sono riportati alcuni esempi Web e le rispettive sagome di layout. La vista silhouette è ciò che il cervello identifica come forma della pagina. Provare a cambiare qualcosa di diverso dalla forma principale risulterà, più o meno, nello stesso disegno ... e tornare al tuo cliente con lo stesso design dopo che hanno richiesto delle modifiche farà sentire al cliente che nulla è stato fatto.

... il design sembrerà lo stesso finché non cambierai la Gestalt strutturale.

Rimarrai sorpreso dal numero di designer che commettono questo errore e ti chiedi perché il cliente odia ancora un design o non sente che nulla è stato modificato o aggiunto, anche se hanno lavorato instancabilmente per migliorare i singoli elementi.

Va bene, diamo un'occhiata ad alcuni disegni e alle loro sagome:

Di solito, attenersi al design sicuro e generalmente quadrato (come nei 4 layout in basso degli esempi sopra) si tradurrà in un design ordinario, niente di molto creativo. Prova a sperimentare sempre con la "scatola di contenimento" del tuo disegno. Prova a ruotare la scatola di alcuni gradi o tagliando e modificando uno degli angoli ... tutto ciò contribuisce all'unicità e alla creatività del tuo design.

Si dovrebbe sempre iniziare con il contenitore, o il guscio strutturale generale di un disegno; Dimentica i dettagli e i singoli componenti per ora.

Quando ciò è fatto e tu e il cliente siete soddisfatti della struttura, prendete i vostri wireframe e iniziate a lavorare sui dettagli. Rimarrai sorpreso dal numero di volte in cui un design finisce come un wireframe ben colorato quando parti da dentro. Ho visto diversi designer lavorare prima sull'intestazione e sulla navigazione, poi iniziare a deporre i componenti, e prima che tu te ne accorga, hai una pagina ben confezionata e colorata che è piena di contenuti che possono essere da una prospettiva di usabilità ben posizionata e corretta, tuttavia dal punto di vista del design non sarebbe mai creativo o risaltare.

Pensa al tuo design come una nocciolina ricoperta di cioccolato, se inizi con la nocciolina, dall'interno verso l'esterno, lo strato esterno che tutti vedono (lo strato di cioccolato) dipenderà sempre dalla forma dell'arachide e avrai poco controllo sul risultato.

Tuttavia, se tratti il ​​tuo design come un uovo di cioccolato, lavorando prima sul layer esterno e plasmandolo come desideri, adattando il tuo contenuto interno alla shell, allora non importa cosa lo riempia, il design essere sempre la forma a uovo che intendevi.