Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. Design Theory
Webdesign

10 punti per i rimedi del design per gli sviluppatori

by
Length:ShortLanguages:

Italian (Italiano) translation by Mirko Pizii (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.

no clearly not
No, chiaramente non cosa faremo dopo

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.

Anche se facciamo nient'altro, questo è un miglioramento

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.

detail from a sunday afternoon on the island of la grande jatte
Spoiler: non troverai uno

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.


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).

These are serifs

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.

Roboto Noto
Roboto & Noto

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.

Fira Sans from Firefox OS is pretty darn clear
Fira Sans (da Firefox OS) è maledettamente chiaro

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?

cramped ui
Ouch-questo titolo è schiacciato contro la parte superiore della pagina
added space
Spazio aggiunto per le celle della tabella e intorno all'intera cosa

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.

consistent grid
Spaziatura di tipo sans-serif, monocromatica con un accento di colore, un sacco di spazio, spaziatura coerente

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.

From ZURBs building blocks
Da blocchi di compilazione di ZURB

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!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.