7 regole per la creazione di un design semplice
Mantenerlo semplice, stupido. Questo concetto risale al 1960 quando la Marina americana ha implementato il principio KISS, che sostiene che la maggior parte dei sistemi funzionano meglio se sono semplici, piuttosto che complicati. Lo stesso vale per praticamente qualsiasi progetto di design.
La maggior parte dei graphic designer viene a conoscenza dei KISS all'inizio della loro carriera. Quindi come puoi farlo? La creazione di un design semplice è un po 'più complicata di quanto si possa pensare. Ecco sette regole da progettare, che ti aiutano a eliminare tutto il disordine e creare un account meravigliosamente semplice.
Esplora risorse di progettazione
1. Imposta un obiettivo per pagina
L'inizio di un design semplice inizia con un obiettivo per il progetto e obiettivi specifici per ogni pagina del sito Web. Ogni pagina dovrebbe condurre gli utenti a un'azione, esclusi navigazione e piè di pagina.
Potrebbe trattarsi di qualsiasi cosa, facendo clic su un collegamento, inserendo informazioni in un modulo, guardando un video o giocando. Ma ogni pagina dovrebbe concentrarsi su un'azione o conversione di un singolo utente.
Troppe cose da fare possono sopraffare gli utenti. Possono perdere di vista quali azioni dovrebbero essere completate e potrebbero fare la scelta meno desiderabile. Pianifica il design in modo che ogni pagina conduca gli utenti a un unico obiettivo. Ogni pulsante attivabile sopra lo scorrimento e sotto lo scorrimento sulla stessa pagina dovrebbe fare la stessa cosa. Questa coerenza aiuta gli utenti a capire perché si trovano sul tuo sito e cosa dovrebbero fare; la semplicità di queste scelte rende il design semplice e accattivante.
2. Attenersi a due famiglie di tipi
Esistono così tante linee guida di progettazione che raccomandano tre caratteri tipografici per un progetto. Puoi ottimizzarlo ancora di più con due famiglie di tipi robusti.
Cerca una famiglia di tipi che includa più pesi con un sacco di contrasto tra le opzioni normali e grassetto o nero. Per un tocco ancora maggiore, optare per una scelta di visualizzazione che include alcuni caratteri alternativi che è possibile utilizzare in titoli di grandi dimensioni.
Quindi tutto ciò che devi fare è mescolare e abbinare da un carattere tipografico corpo e visualizzare il carattere tipografico per ottenere grandi combinazioni di caratteri per l'intero disegno. Utilizzare due famiglie di tipi come si farebbe se si selezionassero più opzioni con usi specifici per determinati pesi o stili.
Scoprirai che ciò può aiutarti a creare una tavolozza tipografica altamente leggibile e facile da usare, facile da gestire e con coerenza visiva.
3. Utilizzare l'allineamento coerente
A sinistra, al centro o anche a destra - qualunque allineamento ti piaccia, attenersi a tutto il design. Ciò include l'allineamento di elementi simili, ad esempio caselle di testo ed elementi che non sono simili ma si incastrano in gruppi.
Adattabile fa un ottimo lavoro con il testo sul dispositivo di scorrimento della homepage. Nonostante il testo con diversi numeri di linee sull'immagine, ogni titolo si allinea con il pulsante di invito all'azione. Anche la spaziatura tra gli elementi è coerente.
Inoltre, questo allineamento coerente si estende sullo scorrimento con altre coppie di titoli e CTA.
L'allineamento corrisponde al flusso del cursore, che si sposta anche in una direzione complementare. Gli allineamenti a sinistra e al centro sono le opzioni più comuni quando si tratta di elementi di testo perché sono i più leggibili. Con testo più lungo, l'allineamento a sinistra è l'opzione preferita.
4. Stabilire la gerarchia
Gli utenti non dovrebbero pensare a cosa guardare o come muoversi attraverso un design. Anche le composizioni visive più semplici dovrebbero avere una gerarchia distinta.
Si inizia con un aspetto dominante. Può essere un'immagine o un video o un display di testo o qualsiasi altra cosa che farà una prima impressione.
Quindi dovrebbe esserci una sorta di testo che dice all'utente ciò che il design e il sito Web stanno cercando di comunicare. Questo è in genere sotto forma di un semplice titolo che funziona con la vista dominante.
Il terzo è un bit secondario di testo o azione che gli utenti devono completare. L'elemento visivo finale è un menu di navigazione. Gli utenti si aspettano di trovare tutti questi elementi e l'occhio è addestrato a muoversi attraverso gli elementi in questo ordine. Rendilo facile per loro progettando in quel modo.
5. Offri agli elementi molto spazio
Se non lo conosci ormai, affidalo alla memoria: lo spazio bianco è tuo amico.
Dai a ogni elemento del design molto spazio. Lo spazio consentirà di attirare l'attenzione sui singoli elementi, occupare lo "spazio" in modo da non essere tentati di ingombrare la tela e contribuire a creare un design generale che si concentri.
Il trucco per usare bene lo spazio è la coerenza. Imposta le regole per la quantità di spazio che circonda i singoli elementi o si adatta tra le righe di testo. Se il design sembra troppo sterile, potresti dover ritirare leggermente la spaziatura. Saprai che la spaziatura è corretta quando apri il design e vai direttamente nei punti che desideri vengano visualizzati per primi dagli utenti. (Non sei sicuro di cosa siano? Torna al n. 4 - Stabilisci la Gerarchia.)
6. Amp Up Contrast
Gli elementi di design ad alto contrasto - dalle scelte di colore alla dimensione degli elementi - possono dare a un progetto la giusta finezza visiva di cui ha bisogno, anche nel più minimale dei framework.
Per un'opzione di tendenza, prova una tavolozza di colori contrastanti per attirare l'attenzione dell'utente. I colori audaci renderanno un design semplice più complesso e interessante di un'opzione in bianco e nero. Per sfruttare al massimo il colore contrastante, optare per tonalità da posizioni opposte sulla ruota dei colori con sature simili. Se quell'opzione è troppo per i tuoi gusti, prova altre coppie basate sulla ruota dei colori. (Potresti persino trovare un nuovo preferito inaspettato, come la combinazione viola e verde acqua sopra).
7. Utilizzare icone ed elementi coerenti
La coerenza nel design è uno dei migliori (e peggiori) segreti del design killer. È una di quelle cose che vengono dimenticate troppo spesso poiché i progetti di design sono pieni di stili di pulsanti multipli o icone di social media che non corrispondono al resto dell'iconografia del sito Web.
Gli elementi dell'interfaccia utente non devono essere ripensati.
È importante creare un'icona e un set di elementi dell'interfaccia utente e regole e utilizzarli nello stesso modo nel progetto. (Puoi anche acquistare o scaricare un font icona o un kit di elementi dell'interfaccia utente se non vuoi crearli da zero.)
Scegli un colore per gli elementi, usa la stessa azione al passaggio del mouse o l'effetto per ciascuno (uno per gli elementi selezionabili e un altro per gli elementi che non lo sono) e dimensiona gli elementi in base all'utilizzo. (È accettabile avere sia una dimensione dell'icona che un'opzione sovradimensionata per gli elementi che sono un po 'più grafici.)
I distributori automatici Praticca utilizzano icone di grandi dimensioni, ad esempio, per indurre gli utenti a sapere che ci sono più informazioni. Un + si trova all'interno di un'icona colorata. Tutte e tre le icone sono identiche a parte il colore. Fanno tutti la stessa cosa al passaggio del mouse e agiscono allo stesso modo quando un utente fa clic. La stessa icona viene utilizzata più piccola in tutto il sito per avviare nuovi bit di contenuto e aiutare gli utenti a scansionare la copia.
Conclusione
Un design semplice non deve essere completamente minimale o privo di elementi divertenti o chicche di interfaccia utente. Un design semplice è altamente utilizzabile e intuitivo, consentendo agli utenti di interagire senza domande o istruzioni complicate.
Mentre esiste un posto per siti Web più complessi o interazioni dell'utente, la maggior parte dei progetti di siti Web può trarre vantaggio dall'approccio KISS. Non pensarci troppo e gli utenti non dovranno neanche.
