Mantienilo semplice, stupido. Questo concetto risale al 1960 quando la US Navy implementò il principio KISS, il quale sostiene che molti sistemi funzionano meglio se sono semplici, piuttosto che complicati. Lo stesso vale per quasi tutti i progetti di design.
La maggior parte dei grafici apprende di KISS all'inizio della loro carriera. Quindi, come puoi farlo? Creare un design semplice è un po 'più complicato di quanto si possa pensare. Ecco sette regole da progettare, che ti aiutano a eliminare tutto il disordine e creare un account meravigliosamente semplice.
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 portare gli utenti a un'azione, escludendo la navigazione e il piè di pagina.
Questo potrebbe essere qualsiasi cosa, da un clic su un link, l'inserimento di informazioni in un modulo, la visione di un video o la riproduzione di un gioco. Ma ogni pagina dovrebbe concentrarsi su una singola azione o conversione da parte dell'utente.
Troppe cose da fare possono sopraffare gli utenti. Possono perdere di vista quali azioni dovrebbero essere completate e potrebbero rendere la scelta meno desiderabile. Pianifica il design in modo che ogni pagina conduca gli utenti a un unico obiettivo. Ogni pulsante azionabile sopra lo scroll e sotto lo scroll sulla stessa pagina dovrebbe fare la stessa cosa. Questa coerenza aiuta gli utenti a capire perché sono 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
Ci sono così tante linee guida di progettazione che raccomandano tre caratteri tipografici per un progetto. Puoi semplificarlo ancora di più con due robuste famiglie di tipi.
Cerca una famiglia di tipi che includa più pesi con molto contrasto tra le opzioni normale, grassetto o nero. Per ancora più talento, scegli una scelta di visualizzazione che includa alcuni caratteri alternativi che puoi usare in titoli di grandi dimensioni.
Quindi tutto ciò che devi fare è mescolare e combinare da un carattere tipografico del corpo e visualizzare caratteri tipografici per ottenere grandi combinazioni di caratteri per l'intero disegno. Utilizza due famiglie di tipi come faresti se selezioni più opzioni con usi specifici per determinati pesi o stili.
Scoprirai che questo 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 persino a destra - qualunque sia l'allineamento che ti piace, attenersi ad esso per tutto il disegno. Ciò include l'allineamento di elementi simili, come caselle di testo ed elementi che non sono uguali ma si incastrano in raggruppamenti.
Adattabile fa un ottimo lavoro con il testo sul dispositivo di scorrimento della homepage. Nonostante il testo con un numero diverso di linee sull'immagine, ciascun titolo si allinea con il pulsante di invito all'azione. Anche la spaziatura tra gli elementi è coerente.
Cosa c'è di più è che questo allineamento coerente trasporta sullo scroll con altre headline e coppie CTA.
L'allineamento corrisponde al flusso del cursore, che si muove 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 oa come spostarsi all'interno di un progetto. Anche le composizioni visive più semplici dovrebbero avere una gerarchia distinta.
Inizia con una visuale dominante. Può essere un'immagine o un video o una visualizzazione di testo o qualsiasi altra cosa che faccia la prima impressione.
Quindi dovrebbe esserci una sorta di testo che informa l'utente del design e del sito Web che stanno tentando di comunicare. Questo è tipicamente sotto forma di un titolo semplice che funziona con il visual dominante.
Terzo è un bit secondario di testo o azione da completare per gli utenti. L'elemento visivo finale è un menu di navigazione. Gli utenti si aspettano di trovare tutti questi elementi e l'occhio è addestrato a muoversi tra gli elementi in questo ordine. Renderlo facile per loro progettando in quel modo.
5. Dare agli elementi un sacco di spazio
Se non lo sai ormai, affidalo alla memoria: lo spazio bianco è tuo amico.
Dai spazio a ogni elemento del design. Lo spazio contribuirà a richiamare l'attenzione sui singoli elementi, occupando lo spazio? quindi non sei tentato di ingombrare la tela e contribuire a creare un design generale che ha il focus.
Il trucco per usare bene lo spazio è la coerenza. Imposta le regole per la quantità di spazio che circonda i singoli elementi o che si adattano tra le righe di testo. Se il design finisce per sembrare troppo sterile, potrebbe essere necessario ridurre leggermente la spaziatura. Saprai che la spaziatura è corretta quando apri il design in modo nuovo e vai direttamente ai luoghi che gli utenti devono vedere per primi. (Non sei sicuro di cosa siano? Torna al numero 4 - Stabilisci la gerarchia.)
6. Amp Up Contrast
Elementi di design ad alto contrasto - dalle scelte cromatiche alle dimensioni degli elementi - possono dare al progetto la giusta dose di finezza visiva di cui ha bisogno, anche nel più minimale dei quadri.
Per una scelta di tendenza, prova una brillante tavolozza di colori a contrasto per attirare l'attenzione dell'utente. I colori audaci renderanno un design semplice più complesso e interessante rispetto a un'opzione in bianco e nero. Per ottenere il massimo dai colori contrastanti, opta per tonalità da posizioni opposte sulla ruota dei colori con saturazioni simili. Se questa opzione è troppo adatta a te, prova altre coppie basate sulla ruota dei colori. (Potresti anche trovare un nuovo preferito inaspettato, come la combinazione viola e verde acqua sopra).
7. Usa icone ed elementi coerenti
La coerenza nel design è uno dei migliori (e peggiori) segreti custoditi del design killer. È una di quelle cose che vengono dimenticate troppo spesso perché i progetti di design sono pieni di più stili di pulsanti o icone di social media che non corrispondono al resto dell'iconografia del sito web.
Gli elementi dell'interfaccia utente non dovrebbero essere un ripensamento.
È importante creare un'icona e un insieme di elementi dell'interfaccia utente e regole e utilizzarli per tutto il progetto nello stesso modo. (Puoi anche acquistare o scaricare un font di icone o un kit di elementi dell'interfaccia utente se non vuoi crearli da zero.)
Scegli un colore per gli elementi, usa la stessa azione o effetto di hover per ciascuno (uno per gli elementi cliccabili e un altro per gli elementi che non lo sono) e gli elementi di dimensione basati sull'utilizzo. (È accettabile avere sia una dimensione dell'icona che un'opzione di dimensioni eccessive per elementi un po 'più grafici).
I distributori automatici di Praticca utilizzano icone sovradimensionate, ad esempio per indicare agli utenti che ci sono più informazioni. A + 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 tutti 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 eseguire la scansione della copia.
Conclusione
Un design semplice non deve essere completamente minimale o mancano elementi divertenti o chicche per l'interfaccia utente. Un design semplice è altamente utilizzabile e intuitivo, consentendo agli utenti di interagire senza domande o istruzioni complicate.
Mentre c'è un posto per siti Web più complessi o interazioni con gli utenti, la maggior parte dei progetti di siti Web può trarre vantaggio dall'approccio KISS. Non pensarci troppo e gli utenti non dovranno neanche.