() translation by (you can also view the original English article)
Ecco una situazione che può esserti familiare: sei uno sviluppatore e generi un prototipo per dimostrare qualcosa. Funziona proprio come intendi farlo, ma gli sguardi dell'orrore sui volti degli utenti ti dice che qualcosa è sbagliato: la tua demo sembra uno schifo.
Guardiamo alcune semplici linee guida e suggerimenti per aiutare la tua demo ad essere bella come dovrebbe.
Rilassarsi
Potresti aver sentito ciò che segue:
"Buon design, quando è fatto bene, diventa invisibile. È solo quando è fatto male che lo notiamo."- Jared Spool
Questo è importante per tutti i designer, ma è particolarmente pertinente per te, come sviluppatore. Stai costruendo una demo; qualcosa che è solamente inteso per dimostrare qualcosa. I suoi utenti dovrebbero essere assorbiti in qualunque attività che stai presentando a loro, non reagire al "design".
Punto #1: Cercando di fare una dichiarazione stilistica, c'è un'alta probabilità che in realtà ti stia spostando più lontano dall'offrire una buona demo. Mantieni le cose semplici. Concentrati solo nel farlo funzionare.
Se qualcosa "non si mostra bene", rimuovi eventuali dettagli visivi che hai aggiunto (ad esempio box-shadow, bordi, effetti) e torna al tavolo da disegno.
Ora abbiamo quella paternalistica parola di avvertimento da parte, concentriamoci su alcuni puntatori più pratici!
Evita una palette disordinata
Nulla è più istantaneamente offensivo agli occhi di scelte cromatiche povere. In realtà, le decisioni di colore dovrebbero essere affrontate anche nel processo di progettazione dell'interfaccia utente, ma si è sempre tentati di fare scelte di colore spesso all'inizio.
Se tu stessi facendo un prototipo all'interfaccia utente, avresti cominciato nel più semplice possibile; con forme rudimentali, linee e monocromatico. Una volta che il layout e le relazioni sono state depositate al momento, sarebbe necessario aggiungere più in dettaglio, fino a quando non è in ultima analisi, iniziare a esplorare espressamente il colore in movimento verso una maggiore fedeltà. Ecco allora, alcune indicazioni:
Punto #2: Considera la monocromia andando sulla tua demo. Mantieniti alle tonalità di grigio (cinquanta?) fino a quando si è pronti ad usare il colore per aiutare a chiarire le cose.
Punto #3: Come regola generale, evita colori completamente saturi (vale a dire: colori alla massima potenza, con nessun colore bianco aggiunto). Specialmente quando viene visualizzato su uno schermo illuminato, possono essere non confortevoli da guardare quando combinati con un altro.
Punto #4: Lo stesso è vero di bianco e nero. Evitando gli estremi, attacca nero e bianco, permetterai di evitare che gli utenti abbiano occhi stanchi.
Vai ancora oltre e aggiungi un tocco di colore ai tuoi neri e grigi. Come Ian Storm Taylor ha detto indietro nel 2012:
"Le ombre non sono nere"
Le lezioni di Ian dalla scuole d'arte rispecchiano le mie – mi ricordo la mia insegnante che mi sfidò a trovare un punto nero nell'opera di Georges Seurat ne una domenica pomeriggio sull'isola della Grande Jatte.
Punto #5: Quando aggiungi colori al tuo disegno monocromatico, fallo con uno alla volta. Ogni colore che si aggiunge è un invito alla distrazione dell'utente. Abbiamo parlato brevemente su come evitare alta saturazione, ma non c'è niente da dire che non è possibile utilizzare una gamma di saturazioni di una tonalità. Che vi darà la varietà e la profondità necessaria, senza rischi.
Teoria del coloreColore per l'attenzione e la profondità in 60 secondi
Teoria del colore6 linee guida di colore per principianti per il Web
Non complicare la tipografia
Se stiamo parlando di demo e prototipi non c'è davvero alcun bisogno di andare oltre usando i font di sistema (Vedi punto #1). Di nuovo, considera quanto segue:
Punto #6: Sei in buone mani con sans-serif ("senza" serif). I caratteri Serif tipografici sono coloro che hanno i dettagli dove i tratti terminano (alcuni gergo per voi).
Serif può essere utile per aggiungere personalità al design, e spesso rendono il corpo di testo più facile da leggere. Ma non sono tradizionalmente usati nella progettazione dell'interfaccia utente, soprattutto alle dimensioni più piccole, come gran parte del tempo che essi visualizzano vari spessori delle tracce.
Nota: come aumentano la risoluzione dello schermo, migliora la chiarezza, e questo argomento detiene meno peso.
Google fa uso dello "umanista" Droid Sans nelle loro interfacce Android e più recentemente Roboto e Noto. Apple usa San Francisco per la loro gamma di sistemi operativi e prima di Neue Helvetica. Firefox OS utilizza Fira Sans. Noti il tema comune qui? Tutti sans-serif.
Punto #7: Evita ambiguità. Combinazioni di caratteri come O0, aeo, 8B, Il1, 5S, 2Z, 6b e 9g sono a volte difficili da distinguere, a seconda del tipo scelto. Provali; Se è difficile distinguerli, sarebbe saggio scegliere un carattere diverso.
Spazio per respirare
Lo spazio vuoto (spazio funzionale) serve la finestra di progettazione visiva in molti modi. Ti aiuta a creare un senso di equilibrio, richiama l'attenzione per gli aspetti necessari del design, riduce il carico cognitivo per l'utente (potrei andare avanti). Se l'interfaccia utente è angusta, farà rapidamente sentire a disagio gli utenti riducendo la loro capacità di elaborare le attività in modo efficace.
Quando si tratta di un sacco di informazioni, si è tentati di spremere tanto nel possibile, ma quale di questi due esempi trovi più semplice al tuo occhio?
Punto #8: Dove lo spazio di respiro è "di più", è quasi sempre meglio. Aggiungi spaziatura, aggiungi margini, spingi la line-height, spargi tutto.
Punto #9: Rendi coerente la spaziatura. Utilizzare un'unità standard come base, l'aggiunta di spazio con incrementi di (per esempio) 10px. La coerenza è la chiave per creare il ritmo e l'armonia.
Rendere la vita più facile
Non c'è nessuna vergogna in esso; lascia che quadri come Bootstrap e Foundation facciano il lavoro duro per voi. Essi sono spesso criticati per rendere i siti web produzione di aspetto generico e privo di fantasia, ma per i prototipi sono assolutamente perfetti, direttamente fuori dalla scatola.
Tutte le decisioni che abbiamo discusso finora sono già state fatte per te: tipografia, colori, spaziatura, coerenza, e per particolari più difficili come moduli non potete sbagliare.
Punto #10: Sali sulle spalle degli altri. Prendi modelli esistenti di Bootstrap, modelli Foundation, o Material Design Lite, o Skeleton, o Pure CSS, o UIKit o qualunque dei milioni framework CSS! Non abbiate paura di aggiungere stili personalizzati sulla parte superiore, tenendo presente tutti i punti che abbiamo discusso finora.
Questi framework sono tutti molto completi. Assicurati di utilizzare tutti i pezzi di cui che hai bisogno; probabilmente incorrerai in problemi se scegli selettivamente pochi elementi.
Conclusione
Questo non è inteso ad essere un articolo di fondamenti di progettazione, ma invece ha lo scopo di aiutarvi a ridurre eventuali problemi che si verificano con i vostri disegni del prototipo. Se sei un sviluppatore – forse la registrazione di un corso, o che presenta un prodotto ai clienti o la tua squadra – e vuoi veramente che la tua demo faccia il suo lavoro, questi punti dovrebbero metterti sulla strada giusta. Fatemi sapere nei commenti se avete domande specifiche. Buona fortuna!
