Usando il modo in cui gli umani elaborano le informazioni visive nel web design
La progettazione di siti Web e interfacce utente è diventata molto più semplice negli ultimi anni. Ci sono così tanti strumenti che è possibile utilizzare che rendono inutile iniziare da zero durante lo sviluppo di interfacce utente (controlla la nostra nuova compilazione UI). Ma non sono qui per discutere della morte del web design.
Invece, quello che farò è cercare di spiegare i concetti base, basati sulla psicologia, dietro la pletora di strumenti di visual design (dai kit CSS di base ai temi premium più avanzati). Non li userai, ma li capirai anche tu. Sono fiducioso che ciò renderà anche più facile modificare quelli esistenti con successo.
Diamo un'occhiata a come la mente e il corpo umano lavorano quando si tratta di elaborare informazioni visive e come questa conoscenza viene interpretata nella progettazione per il web.
I principi dell'organizzazione percettiva
Secondo la psicologia della Gestalt, il tutto è diverso dalla somma delle sue parti. I seguaci di questa scuola di pensiero affermano che ci sono alcuni principi su come la mente umana raggruppa gli oggetti. Queste non sono semplici teorie, bada bene, ma fatti concreti sull'organizzazione dei gruppi visivi.
Di seguito troverai alcune delle leggi e gli usi più popolari e noti di questi principi. Potresti anche essere in grado di trovare nuove idee per il tuo prossimo progetto.
Legge di similarità
Il primo principio afferma che piccoli oggetti simili sono percepiti come un gruppo, piuttosto che più istanze di quello stesso piccolo oggetto. La somiglianza potrebbe essere basata su forma, colore, sfumature o qualche altra qualità. Questo principio è alla base di disegno del modello così come molti disegni geometrici e minimalisti.
Ad esempio, questa immagine mostra un logo circolare anziché triangoli separati. La forma triangolare nella parte inferiore dell'aquila ci fa pensare che anche la forma sia parte dell'immagine.
Probabilmente hai anche utilizzato questa legge inconsapevolmente quando ne hai creati alcuni, scatole di contenuti con le stesse dimensioni per il tuo sito web. Se desideri dimostrare che determinati elementi di contenuto hanno la stessa importanza o condividi informazioni simili, creare una forma specifica solo per quello scopo. In questo modo, l'utente associa immediatamente quella particolare forma a una particolare area di informazioni.
Legge di prossimità
Secondo questa legge oggetti che sono più vicini a vicenda sono considerato appartenente allo stesso gruppo. Gli stessi quadrati, se resi l'uno accanto all'altro in prossimità stretta e regolare, creano un senso di raggruppamento.
Questo principio è stato utilizzato in larga misura sul web ultimamente, specialmente quando si lavora con loop di contenuti, per esempio. su blog e negozi online.
È possibile raggruppare immediatamente il titolo, l'immagine in primo piano, i metadati e l'estratto, anche senza bordi o sfondi. Potresti essere in grado di eliminare linee e colori non necessari dal tuo design per renderlo più minimalista, ma ancora completamente comprensibile.
Per tua comodità, citerò anche Wikipedia che afferma:
Legge di buona forma
Conosciuto anche come Legge di Pragnanz o Good Gestalt, questa legge afferma che tendiamo a raggruppare gli oggetti insieme se essi forma un modello semplice, regolare e ordinato. La nostra mente cerca di separare forme complesse e percettivamente difficili in molti gruppi di forme semplicemente comprensibili; questo ha portato al importanza della concisione.
Questa è anche una delle possibili ragioni del successo di progettazione basata sulla griglia e questo ha reso le strutture web basate su tabelle e frame (per fortuna cose d'epoca oscura del design) così popolari.
Se si tiene a mente questo principio, probabilmente non si arriverà alla creazione di un sito Web pieno di forme complesse di blocchi di contenuti che sarebbero collegati in mente tramite le altre leggi di cui sopra. Comunque, puoi raggruppa i tuoi oggetti insieme in un modo interessante, per esempio. in forma di diamante o aquilone, dal momento che sono ancora percepiti come forme ordinate e concise.
Teoria dei colori, percezione e utilizzo
La visione del colore e la percezione del colore è in gran parte soggettivo basato su come reagisce il cervello degli spettatori alle onde luminose riflesse da oggetti o forme colorate. La regola è che persone diverse, anche senza menomazioni visive, vedono lo stesso oggetto con colori diversi (potresti ricordare il vestito).
Proprietà del colore
Ancora ci sono tre proprietà oggettive del colore; colore, valore e intensità.
colore è il nome del colore indicato su una ruota dei colori o in un arcobaleno. Ci sono sei (o dodici, a seconda di chi stai parlando) tonalità di base: rosso, arancione, giallo, verde, blu e viola.
Giallo, blu e rosso primario, sono arancio, verde e viola secondario tonalità; inoltre, ci sono terziario tinte che sono le miscele dirette di due tinte primarie e secondarie (ad esempio giallo verde o rosso violetto).
Valore è la leggerezza o oscurità del colore, indicato come alto valore per colori chiari o basso valore per i colori scuri.
Intensità si riferisce a luminosità o oscurità di un colore; ciò significa che un colore con la stessa tonalità e lo stesso valore può ancora essere attenuato o illuminato cambiando l'intensità e creando diversi output di colore.
La più alta intensità di ogni colore è la tonalità che mostrano sulla ruota dei colori (vedi sotto), mentre la più bassa è il colore grigio.
Contrasti di colore
Riferendosi alle suddette leggi di somiglianza, le menti dei percettori creano gruppi di piccoli oggetti che vedono sulla base di proprietà simili e diverse - spesso colori.
Quando hai scelto la tavolozza dei colori per il tuo sito web, soprattutto se scegli un approccio minimalista o se progetti un'area di testo pesante, ad es. blog o annunci, dovresti essere consapevoli dei diversi contrasti di colore questo potrebbe aiutarti a trovare i valori cromatici giusti per il miglior risultato.
Ci sono 7 contrasti di colore secondo Johannes Itten, anche se ne menzionerò solo 3.
1. Contrasto di tonalità
Giallo, rosso e blu a piena intensità sono contrasti diretti e vividi. I colori secondari fanno una distinzione meno netta, ma funzionano ancora, proprio come fanno i colori terziari, sebbene nessuno dei due produca come risultati fantastici come con le tonalità primarie.
2. Contrasto complementare
Due colori sono in contrasto complementare se mescolati insieme creano un grigio neutro. Questi sono anche chiamati coppie strane. Se sono adiacenti, aumentano la vividezza e l'intensità, mentre mescolati insieme si annullano a vicenda. Ogni colore ha uno e solo uno complementare; sulla ruota dei colori, le coppie sono diagonalmente opposte l'una all'altra.
3. Contrasto chiaro-scuro
Se vuoi sperimentare con un sito web a un colore, utilizzando valori diversi della stessa tonalità potrebbe produrre risultati fantastici. Spesso utilizzato nel web design minimalista, puoi anche produrre ottimi risultati basati sul contrasto chiaro-scuro se vuoi fornire opzioni di colore per il tuo utente. Questo contrasto viene anche utilizzato per la progettazione in scala di grigi.
Se vuoi seguire i 4 contrasti di colore rimanenti, puoi trovarli qui.
Creazione di tavolozze e controllo dei contrasti
Conoscere la teoria è grandiosa, interpretare le tue idee è un'altra cosa. Non ti devi preoccupare, il web offre un grande supporto per le tue esigenze di manipolazione del colore. Ci sono una miriade di strumenti che ti aiutano a creare modelli di colori personalizzati basati su regole di contrasto del colore, ad es. Paletton o Adobe Kuler.
Per scopi web, potresti voler controllare i contrasti che hai scelto di usare su webAIM, sul sito di Jonathan Snook o scaricare un'istanza del Color Contrast Analyzer di The Paciello Group qui.
Conclusione
Quando inizi a lavorare con un nuovo tema o inizi a modificare quelli esistenti, prova a pensare ai principi di percezione per organizzare i tuoi contenuti e ricorda di prendere in considerazione le regole del colore quando dai al tuo disegno la forma e la tinta finali.
Nota dell'editore: Questo post ospite è scritto per Hongkiat.com da Marton Fekete. Marton è uno sviluppatore di siti ungherese recentemente collegato a WordPress. È un appassionato di redesign e uno scrittore di contenuti freelance a cui piace giocare a giochi di ruolo nel suo tempo libero.
