10 cheat code per la progettazione di interfacce utente

Probabilmente suppongo che la maggior parte di noi abbia iniziato nella progettazione dell'interfaccia utente con la minima conoscenza o nulla. Ma anche se le probabilità erano contro di noi all'inizio, ci siamo fatti strada attraverso numerosi libri e articoli di design per capire come funzionano i colori, la tipografia, il layout ecc. Ricordo come è stato affermato in Make Technology, una società guidata da UX, che il Design non può essere semplicemente spiegato con colori, forme e testo. È un processo che ha un "Perché" dietro, che ogni volta che creiamo un testo più grande, aggiungiamo un'ombra o cambiamo il colore, ci deve essere una ragione per cui le cose devono essere.

Pertanto, in questo articolo, condividerò un elenco di cose che ho imparato da diverse aziende, designer, cose che ho imparato nel progettare interfacce utente e nuove scoperte che ho trovato lungo la strada:

* Dichiarazione di non responsabilità: i seguenti esempi di "Non" forniti non significano necessariamente che siano sbagliati. È la nostra base su come possiamo migliorare da una buona soluzione di progettazione a una molto migliore

1. Questo testo è importante, ingrandiscilo!

Di fronte a contenuti che richiedono una gerarchia di caratteri, ingrandire il testo per dare enfasi e importanza di solito non risolve il problema, proprio come quello qui sotto:

La gerarchia dei caratteri non riguarda solo le dimensioni dei caratteri da piccole a grandi. Si tratta del giusto mix di dimensioni, pesi e colori che crea contrasto. Maggiore contrasto, meglio è.

Ci scusiamo se la foto è in formato a bassa risoluzione ️

Quindi, come posso creare un migliore contrasto?

  • Non utilizzare un tipo di peso con caratteri di dimensioni diverse per creare contrasto e gerarchia.
  • Invece, usa uno stile più audace e più scuro per i contenuti primari o più piccolo e leggero per i contenuti secondari (meno importante).
  • Crea tre tipi di colori del testo che variano da scuro a chiaro (vedi esempio sotto). Di solito uso il mio colore di base come colore del corpo del testo.
  • Non abbiate paura di applicare grandi lacune di carattere ai vostri articoli (ad esempio intestazione 24px, testo del corpo 16px, metap 10px ecc.). Distanza maggiore = migliore contrasto.
  • Controlla Modularscale un calcolatore online che puoi usare per creare una migliore gerarchia dei caratteri.
  • Ricorda, il contrasto è = taglia + peso + colore.
  • Infine, assicurati di controllare il suo rapporto di contrasto. È possibile utilizzare questo calcolatore per verificarne l'accessibilità.
dal mio colore di base, vado dal più scuro ai titoli ai più chiari per i contenuti accessori.

2. Non creare più sfumature di nero

Non rendere la vita difficile spostando il selettore di colori su e giù per produrre diverse sfumature di testo nero su sfondo bianco.

Sappiamo tutti che l'uso del colore nero del testo (# 000) provoca affaticamento degli occhi ai lettori, e quindi la nostra soluzione è quella di creare varianti più scure in alternativa. Invece di scegliere il colore per 3 o più valori esadecimali, possiamo usare il nero con opacità diverse come soluzione:

Nel mio esempio sopra, ho usato il nero come colore principale (# 000) e ne ho ridotto l'opacità a seconda di dove verrà applicato (ad es. Contenuto primario, contenuto secondario, ecc.)

3. Fai i calcoli per capire i colori

La maggior parte di noi fa schifo nel scegliere le giuste combinazioni di colori e ogni volta che vediamo un disegno con una tavolozza di colori ben orchestrata, ci chiediamo "Come ha fatto la F?" (Proprio come quello sotto):

tratto da momoandspirits

Fino a quando ho imparato che comprendere i colori non è solo per coloro che hanno il dono del design sin dall'inizio dei tempi, che una semplice aggiunta e sottrazione in Tonalità, Saturazione, Luminosità (HSB) farà la magia (per questo useremo HSB formula anziché RGB). Puoi facilmente sbarazzarti del noioso bianco su sfondi colorati e trasformarlo in un'opera di Picasso come quella qui sotto:

Quindi, da dove viene l'aggiunta e la sottrazione in HSB?

Due approcci per comprendere i colori

In realtà ci sono due approcci che possiamo fare e, come possiamo vedere, entrambe le opzioni hanno lo stesso colore di base # B9F4BC (sfondo del cerchio) ma differisce quando si tratta di cartelle e strisce di colore. All'inizio, ricorda sempre che il primo numero corrisponde a Tonalità, seguito da Saturazione e, infine, Luminosità.

Opzione A

Opzione A

Nell'opzione A, possiamo vedere che abbiamo mantenuto il valore di Tonalità 123 per tutte le forme (cerchio, cartella, striscia) mentre Saturazione e Luminosità sono dove avviene il cambiamento.

Ora, mentre ci concentriamo sulla saturazione della base che è 24 e la sua luminosità, 96, entrambi i valori sono cambiati quando abbiamo creato un verde più scuro per la cartella. Da Saturazione di 24 è diventato 40 (incremento di +16) e da Luminosità di 96 è diventato 82 (decremento di -14), il che ci mostra che un cambiamento di saturazione sia incrementale che decrementale necessita di una regolazione inversamente proporzionale alla luminosità, in ordine per creare un buon contrasto (viceversa). E la stessa cosa è successa in Strip, usando Saturazione e luminosità della cartella come valore di base, siamo passati da 40 a 44 (incremento di +04) e siamo diminuiti da 82 a 75 (decremento di -07) per Luminosità. alla formula:

Valore più scuro = Incremento in Saturazione è un decremento in Luminosità
Valore più chiaro = il decremento della saturazione è un incremento della luminosità

Questa formula mi ha aiutato ogni volta che mi chiedo quali colori giusti dovrei usare nei miei progetti. Ho imparato che il miglior punto di partenza è avere un colore di base e, da lì, iniziare le regolazioni in Saturazione e Luminosità mantenendo lo stesso valore di Tonalità.

Opzione B

Opzione B

Nell'opzione B, viene ancora applicato lo stesso principio (la formula che avevamo sopra) ma i valori di tonalità cambiano. E le terminologie RGB e CMY che passavamo in passato in vari materiali di design, ora avranno senso per noi.

RGB sta per rosso, verde e blu, mentre CMY è ciano, magenta e giallo. Queste terminologie non hanno avuto importanza per me quando ho iniziato, fino a quando non mi sono imbattuto in questa scoperta sull'uso di RGB e CMY per le combinazioni di colori.

Ora nell'Opzione B, se vogliamo avere una variazione più scura del colore di base, tutto ciò che dobbiamo fare è spostare il nostro selettore di colori nella direzione in cui si trova l'RGB più vicino nella nostra tavolozza dei colori o spostarlo nella direzione di CMY per variazione più leggera. Per esempio:

Color Picker

Poiché vogliamo creare una variazione più scura del nostro colore di base # B9F4BC (sfondo del cerchio) che deve essere applicato nella nostra icona Cartella, dobbiamo spostare il nostro selettore di colori nella direzione in cui si trova il RGB più vicino (che è blu in questo Astuccio). Ma se vogliamo avere una versione più leggera della nostra Cartella, sposteremo il nostro selettore a sinistra, vicino a CMY (in questo caso Giallo).

* Più spesso RGB porta a variazioni più scure e CMY per una più chiara

Dopo aver spostato il selettore colore sulla variazione desiderata, ora applichiamo la formula nell'opzione A, che ci porta ad avere questa combinazione di colori:

Rosso, verde, blu (RGB) + opzione A formula = variazione più scura
Ciano, Magenta, Giallo (CMY) + Opzione A formula = Variazione più chiara

4. Usa la spaziatura per separare i gruppi

Sii un generoso donatore di spazio

Oltre ad aggiungere una linea tra due gruppi per mostrare la separazione, utilizzare uno spazio generoso tra di essi è una soluzione migliore e più semplice.

Come afferma la Legge di prossimità:

Gli oggetti vicini o vicini l'uno all'altro tendono a essere raggruppati insieme.

Dal mio esempio sopra, il mio obiettivo è creare una separazione tra il mio titolo e il suo scrittore usando un ampio spazio tra loro che è 24px.

5. Usa i colori per separare le righe

Colori come separatori

Fare interfacce di riga potrebbe essere noioso a volte progettare, poiché richiede solo la duplicazione del componente per n volte. Ma dal lato utente, leggerli può essere difficile specialmente se non c'è una grande distinzione tra una riga e l'altra. Quindi, oltre all'utilizzo delle linee, l'aggiunta di uno sfondo colorato nelle righe può essere molto utile per gli utenti nella lettura e sarà anche più divertente fare per noi designer

6. Moltiplicare invece di rilasciare il testo dell'ombra

Design dell'intestazione

È piuttosto impegnativo progettare componenti di intestazione o aggiungere testo su un'immagine specialmente se lo sfondo dell'immagine sarà dinamico (o può essere modificato di volta in volta).

Di solito la soluzione comune per il testo con sfondo di immagine dinamica è l'aggiunta di ombreggiatura, ma non aiuta la leggibilità dell'utente. Aggiunge più disordine visivo attorno alle lettere e alle parole perché riempiono gli spazi tra loro.

Per alcuni, la sovrapposizione di colore bianco / nero è la soluzione che è un trucco utile per questo tipo di disegni. Ma recentemente ho scoperto di usare Moltiplica come strumento di fusione per un riempimento sfumato.

Specifiche per le opzioni di fusione Moltiplica

Farlo è molto più semplice che creare uno sfondo nero sull'immagine e ridurne l'opacità. Inoltre, avendo la scala di grigi, l'altra parte dell'immagine mantiene il suo colore naturale e rende la parte in cui si trova il testo un po 'più scura, per la leggibilità del testo.

7. Lunghezza della linea

La cosa comune che molti designer fanno è allungare la lunghezza della linea in modo che possa adattarsi al suo contenitore. Tuttavia, ciò crea affaticamento degli occhi per i nostri utenti, diversamente da avere 45-65 caratteri per riga, l'ideale.

Se ti sei mai imbattuto nel dilemma di abbreviare la lunghezza per renderla ideale, ma risulterà in un grande spazio bianco sul lato destro come quello sotto:

con grande spazio bianco a destra

Non esitare a farlo e allinea l'intero centro della colonna di testo al relativo contenitore, in modo da poter rimuovere lo spazio bianco.

contenuto centrato

8. Non reinventare la ruota

Ciò che rende incoerente una progettazione è quando non è basato su componenti. È quando ti sei reso conto che hai creato 5 tipi di interfaccia per schede, 10 pulsanti, 5 stili di titolo per titoli ecc.

Prima di iniziare a creare un'interfaccia per un contenuto specifico, prova a dare un'occhiata ai tuoi progetti precedentemente creati, perché potresti vedere un modello che puoi riciclare e usare.

Invece di reinventare la ruota e creare un'altra carta per un gruppo artistico (esempio sopra), possiamo usare la carta articolo e sostituirla con il contenuto del gruppo artistico. Ciò farà risparmiare tempo ai progettisti e renderà coerente l'interfaccia.

9. Usa i colori del marchio come accenti

Di solito pensiamo che i colori del marchio debbano occupare una grande parte dei nostri colori dell'interfaccia. Stiamo attraversando un momento difficile in cui mostrare i sorprendenti colori del marchio giallo neon, arancione e rosa del nostro cliente nel nostro layout pulito e minimalista. La risposta? usali come colori di accento.

10. Appendi i proiettili

Infine, se stai creando un design di elenco come quello sopra, fai in modo che i punti elenco, glifi o il numero si trovino sul margine per evidenziare l'elenco. Ciò renderà il flusso di leggibilità dell'utente ininterrotto e più leggibile.

C'è ancora un lungo elenco di fogli di progettazione che vorrei aggiungere, ma per ora spero che questi 10 consigli di progettazione ti aiuteranno a creare interfacce di progettazione. Inoltre, sentiti libero di aggiungere i tuoi cheat code nelle risposte

Questo articolo è ispirato da 7 consigli pratici per barare al design e da tonnellate di articoli di design che ho letto :)

Altre storie da me

Per qualsiasi domanda, chiamami a mhariellmosqueriola@gmail.com

giphy