7 consigli pratici per barare al design

Migliorare i tuoi progetti con tattiche anziché talento.

Ogni sviluppatore web si imbatte inevitabilmente in situazioni in cui devono prendere decisioni di progettazione visiva, che piaccia o no.

Forse la società per cui lavori non ha un designer a tempo pieno e devi implementare l'interfaccia utente per una nuova funzionalità per conto tuo. O forse stai hackerando un progetto laterale e vuoi che appaia meglio di un altro sito Bootstrap.

È facile alzare le mani e dire: "Non riuscirò mai a far sembrare bene questo, non sono un artista!" non richiede uno sfondo nella progettazione grafica.

Ecco sette semplici idee che puoi utilizzare per migliorare i tuoi progetti oggi.

1. Usa il colore e il peso per creare la gerarchia anziché le dimensioni

Un errore comune durante lo stile del testo dell'interfaccia utente si basa troppo sulla dimensione del carattere per controllare la gerarchia.

“Questo testo è importante? Rendiamolo più grande. "

“Questo testo è secondario? Rendiamolo più piccolo ".

Invece di lasciare tutto il sollevamento pesante alla dimensione del carattere da solo, prova a usare il colore o il peso del carattere per fare lo stesso lavoro.

“Questo testo è importante? Rendiamolo più audace ".

“Questo testo è secondario? Usiamo un colore più chiaro ".

Prova a rispettare due o tre colori:

  • Un colore scuro (ma non nero) per il contenuto principale (come il titolo di un articolo)
  • Un grigio per il contenuto secondario (come la data di pubblicazione di un articolo)
  • Un grigio più chiaro per i contenuti ausiliari (forse l'avviso di copyright in un piè di pagina)

Allo stesso modo, due pesi dei caratteri sono in genere sufficienti per il lavoro dell'interfaccia utente:

  • Un normale peso del carattere (400 o 500 a seconda del carattere) per la maggior parte del testo
  • Uno spessore del carattere più pesante (600 o 700) per il testo che si desidera enfatizzare

Stai lontano dai pesi dei caratteri inferiori a 400 per il lavoro dell'interfaccia utente; possono funzionare per titoli di grandi dimensioni ma sono troppo difficili da leggere a dimensioni inferiori. Se stai pensando di utilizzare un peso più leggero per de-enfatizzare del testo, utilizza invece un colore più chiaro o una dimensione del carattere più piccola.

2. Non utilizzare il testo grigio su sfondi colorati

Rendere il testo un grigio più chiaro è un ottimo modo per ridimensionarlo su sfondi bianchi, ma non è così bello su sfondi colorati.

Questo perché l'effetto che stiamo effettivamente osservando con il grigio su bianco è un contrasto ridotto.

Rendere il testo più vicino al colore di sfondo è ciò che effettivamente aiuta a creare la gerarchia, non rendendolo grigio chiaro.

Esistono due modi per ridurre il contrasto quando si lavora con sfondi colorati:

1. Ridurre l'opacità del testo bianco

Usa il testo bianco e riduci l'opacità. Ciò consente al colore di sfondo di sfocare un po ', sottolineando il testo in un modo che non si scontra con lo sfondo.

2. Seleziona a mano un colore basato sul colore di sfondo

Funziona meglio della riduzione dell'opacità quando lo sfondo è un'immagine o di un motivo o quando la riduzione dell'opacità rende il testo troppo opaco o sbiadito.

Scegli un colore che abbia la stessa tonalità dello sfondo, regolando la saturazione e la luminosità fino a quando ti sembra giusto.

3. Offset le tue ombre

Invece di utilizzare grandi valori di sfocatura e diffusione per rendere più evidenti le ombre delle scatole, aggiungi un offset verticale.

Sembra molto più naturale perché simula una fonte di luce che brilla dall'alto come siamo abituati a vedere nel mondo reale.

Questo vale per le ombre dell'inserzione che potresti usare anche su pozzetti o input di moduli:

Se sei interessato a saperne di più sul design delle ombre, le Linee guida per la progettazione dei materiali sono un primer fantastico.

4. Usa meno bordi

Quando è necessario creare una separazione tra due elementi, provare a resistere immediatamente raggiungendo un bordo.

Mentre i bordi sono un ottimo modo per distinguere due elementi l'uno dall'altro, non sono l'unico modo e l'utilizzo di troppi di essi può rendere il tuo design occupato e ingombra.

La prossima volta che ti ritrovi a raggiungere un confine, prova invece una di queste idee:

1. Usa un'ombra a forma di scatola

Le ombre box fanno un ottimo lavoro nel delineare un elemento come farebbe un bordo, ma possono essere più sottili e raggiungere lo stesso obiettivo senza essere così distraenti.

2. Utilizzare due colori di sfondo diversi

Dare agli elementi adiacenti colori di sfondo leggermente diversi è di solito tutto ciò che serve per creare una distinzione tra di essi. Se stai già utilizzando colori di sfondo diversi oltre a un bordo, prova a rimuovere il bordo; potresti non averne bisogno.

3. Aggiungi spazio extra

Quale modo migliore per creare separazione tra elementi se non semplicemente aumentare la separazione? Distanziare ulteriormente le cose è un ottimo modo per creare distinzione tra gruppi di elementi senza introdurre alcuna nuova interfaccia utente.

5. Non far saltare in aria le icone che devono essere piccole

Se stai progettando qualcosa che potrebbe utilizzare alcune icone di grandi dimensioni (come forse la sezione "caratteristiche" di una pagina di destinazione), potresti istintivamente prendere un set di icone gratuito come Font Awesome o Zondicons e aumentare le dimensioni fino a soddisfare le tue esigenze.

Dopotutto sono immagini vettoriali, quindi la qualità non ne risentirà se aumenti le dimensioni, giusto?

Mentre è vero che le immagini vettoriali non peggiorano in termini di qualità quando aumenti le loro dimensioni, le icone che sono state disegnate a 16-24 px non avranno mai un aspetto molto professionale quando le fai esplodere fino a 3 volte o 4 volte la loro dimensione prevista. Mancano di dettagli e si sentono sempre sproporzionatamente "grossi".

Se hai solo icone piccole, prova a racchiuderle in un'altra forma e a dare alla forma un colore di sfondo:

Ciò consente di mantenere l'icona effettiva più vicina alle dimensioni previste, pur mantenendo lo spazio più ampio.

Se hai il budget, puoi anche utilizzare un set di icone premium progettato per essere utilizzato a dimensioni più grandi, come Heroicons o Iconic.

6. Usa i bordi accentati per aggiungere colore a un design blando

Se non sei un graphic designer, come aggiungi quel tocco di stile visivo alla tua interfaccia utente che altri design ottengono da splendide fotografie o illustrazioni colorate?

Un semplice trucco che può fare una grande differenza è aggiungere bordi accenti colorati a parti della tua interfaccia che altrimenti sembrerebbero un po 'insipide.

Ad esempio, accanto a un messaggio di avviso:

... o per evidenziare gli elementi di navigazione attivi:

... o anche nella parte superiore dell'intero layout:

Non è necessario alcun talento di progettazione grafica per aggiungere un rettangolo colorato all'interfaccia utente e può fare molto per rendere il tuo sito più "progettato".

Hai difficoltà a scegliere i colori? Prova a scegliere da una tavolozza limitata come la ricerca del colore di Dribbble per evitare di sentirti sopraffatto dalle infinite possibilità di un tradizionale selettore di colori.

7. Non tutti i pulsanti richiedono un colore di sfondo

Quando ci sono più azioni che un utente può intraprendere su una pagina, è facile cadere nella trappola della progettazione di quelle azioni basate esclusivamente sulla semantica.

Frame come Bootstrap in qualche modo incoraggiano questo dandoti un menu di stili semantici da scegliere ogni volta che aggiungi un nuovo pulsante:

“È un'azione positiva? Rendi il pulsante verde. "

"Questo cancella i dati? Rendi il pulsante rosso. "

La semantica è una parte importante della progettazione dei pulsanti, ma esiste una dimensione più importante che viene comunemente dimenticata: la gerarchia.

Ogni azione su una pagina si trova da qualche parte in una piramide di importanza. La maggior parte delle pagine ha solo una vera azione primaria, un paio di azioni secondarie meno importanti e poche azioni terziarie usate di rado.

Quando si progettano queste azioni, è importante comunicare il loro posto nella gerarchia.

  • Le azioni primarie dovrebbero essere ovvie. I colori di sfondo solidi e ad alto contrasto funzionano perfettamente qui.
  • Le azioni secondarie dovrebbero essere chiare ma non importanti. Gli stili di contorno o i colori di sfondo a basso contrasto sono ottime opzioni.
  • Le azioni terziarie dovrebbero essere rilevabili ma discrete. Lo stile di queste azioni come collegamenti è di solito l'approccio migliore.

"Che dire delle azioni distruttive, non dovrebbero essere sempre rosse?"

Non necessariamente! Se l'azione distruttiva non è l'azione principale nella pagina, potrebbe essere meglio darle un trattamento con pulsanti secondari o terziari.

Salva lo stile grande, rosso e grassetto per quando l'azione negativa è effettivamente l'azione primaria nell'interfaccia, come in una finestra di dialogo di conferma:

Ti piace questo post? Abbiamo appena pubblicato un libro!

L'interfaccia utente di refactoring prende tutto ciò che sappiamo sulla progettazione e lo raggruppa in un unico pacchetto completo, tra cui un libro, screencast, una galleria di componenti, risorse progettate su misura e altro ancora.

Finora sono state raccolte da oltre 6000 persone e il feedback è stato sorprendente.

Se sei interessato, vai a RefactoringUI.com/book per saperne di più e scaricare un campione.