10 Puntatori di progettazione correttiva per sviluppatori

Ecco una situazione che potrebbe esserti familiare: sei uno sviluppatore e costruisci un prototipo per dimostrare qualcosa. Funziona esattamente come lo intendi, ma l'espressione dell'orrore sui volti degli utenti ti dice che c'è qualcosa di sbagliato: la tua demo sembra una schifezza.

Diamo un'occhiata ad alcune semplici linee guida e suggerimenti per aiutare i tuoi demo ad apparire come dovrebbero.

Rilassare

Potresti aver sentito quanto segue: 

"Un buon design, quando è fatto bene, diventa invisibile. È solo quando è fatto male che lo notiamo. "- Jared Spool

Questo è rilevante per tutti i progettisti, ma è particolarmente pertinente per te, come sviluppatore. Stai costruendo una demo; qualcosa che ha l'unico scopo di dimostrare qualcosa. I suoi utenti dovrebbero essere assorti in qualunque compito tu debba organizzare prima di loro, senza reagire al "design".

Puntatore n. 1: Cercando di fare una dichiarazione stilistica, c'è un'alta probabilità che tu ti stia allontanando dal fornire una buona demo. Mantienilo semplice. Continua a farlo funzionare.

Se qualcosa "non sembra giusto", rimuovi i dettagli visivi eventualmente aggiunti (come ombre, bordi, effetti) e torna alla lavagna.

Ora abbiamo questa parola paternalistica di avvertimento, concentriamoci su alcuni suggerimenti più pratici!

Evitare una tavolozza disordinata

Niente è più istantaneo offensivo per gli occhi rispetto alle scarse scelte di colore. In realtà, le decisioni relative ai colori dovrebbero essere indirizzate bene al processo di progettazione dell'interfaccia utente, ma è sempre la tentazione di fare scelte di colore in grassetto all'inizio.

No, chiaramente non è quello che cerchiamo

Se tu fossi un wireframe di un'interfaccia utente, inizieresti nel modo più semplice possibile; con forme, linee e monocromie rudimentali. Una volta stabilito il layout e le relazioni, aggiungerei più dettagli, muovendoti verso una fedeltà più alta fino a quando non inizierai volutamente esplorare il colore. Quindi, alcuni suggerimenti:

pointer # 2: Prendi in considerazione l'idea di diventare monocromatici sulle tue demo. Attaccati a sfumature di grigio (cinquanta?) Finché non sei pronto per usare il colore per aiutare a chiarire le cose.

Anche se lo facciamo Niente altrimenti, questo è un miglioramento

pointer # 3: Come regola generale, evitare colori completamente saturi (es .: colori a piena forza, senza tinta bianca aggiunta). In particolare se visualizzati su uno schermo illuminato, possono essere scomodi da guardare se combinati tra loro.

pointer # 4: Lo stesso vale per il bianco e nero. Evitando gli estremi, attenendosi al nero scuro e al bianco sporco, è meno probabile che gli occhi stanchi dei tuoi utenti.

Vai ancora oltre e aggiungi un tocco di colore ai tuoi neri e grigi. Come disse Ian Storm Taylor nel 2012:

"Le ombre non sono nere"

Le lezioni di Ian dalla scuola d'arte rispecchiano la mia - ricordo che la mia insegnante mi sfidò a trovare un punto nero in A Sunday Afternoon di Georges Seurat, sull'isola di La Grande Jatte.

Spoiler: non ne troverai uno

pointer # 5: Quando aggiungi colori al tuo design monocromatico, fallo uno alla volta. Ogni colore che aggiungi è un invito alla distrazione dell'utente. Abbiamo parlato brevemente di evitare un'alta saturazione, ma non c'è nulla da dire che non è possibile utilizzare una gamma di saturazione di una tonalità. Questo ti darà la varietà e la profondità di cui hai bisogno, senza rischi.

Non complicare la tipografia

Se stiamo parlando di demo e prototipi, non c'è davvero bisogno di andare oltre i font di sistema (vedi Puntatore n. 1). Tuttavia, considera quanto segue:

pointer # 6: Sei in buone mani con sans-serif ("senza" serif). I tipi di carattere Serif sono quelli che hanno i dettagli dove terminano i tratti (un po 'di gergo lì per te).

I Serif possono essere utili per aggiungere personalità a un design, e spesso possono rendere più leggibile un corpo di testo. Tuttavia, non sono tradizionalmente utilizzati nella progettazione dell'interfaccia utente, specialmente in dimensioni più piccole, poiché spesso visualizzano pesi di corsa diversi.

Nota: quando le risoluzioni dello schermo aumentano, la chiarezza migliora e questo argomento ha meno peso.

Roboto e Noto

Google utilizza i Droid Sans "umanisti" nelle loro interfacce Android e, più recentemente, Roboto e Noto. Apple usa San Francisco per la sua gamma di sistemi operativi, e prima Neue Helvetica. Firefox OS utilizza Fira Sans. Nota il tema comune qui? Tutti sans-serif.

pointer # 7: Evita l'ambiguità. Combinazioni di caratteri come O0, aeo, 8B, Il1, 5S, 2Z, 6b e 9g sono talvolta difficili da distinguere, a seconda del tipo scelto. Provali; se fatichi a distinguerli, saresti saggio scegliere un carattere diverso.

Fira Sans (da Firefox OS) è dannatamente chiaro

Stanza da respirare

Whitespace (spazio funzionale) serve il visual designer in molti modi. Aiuta a creare un senso di equilibrio, attira l'attenzione sugli aspetti necessari del design, riduce il carico cognitivo per l'utente (potrei andare avanti). Se l'interfaccia utente è limitata, gli utenti si sentiranno a disagio e riducono la loro capacità di elaborare le attività in modo efficace.

Quando si ha a che fare con molte informazioni, si è tentati di spremere il più possibile, ma quale di questi due esempi trovi più facile a occhio?

Ahi, quel titolo è schiacciato contro la parte superiore della paginaSpazio aggiunto per le celle della tabella e per tutto il resto

pointer # 8: Per quanto riguarda lo spazio respiratorio, "more" è quasi sempre migliore. Aggiungi padding, aggiungi margini, incrementa le altezze delle linee, distribuisci tutto.

pointer # 9: Rendi coerente la tua spaziatura. Usa un'unità standard come base, aggiungendo spazio in incrementi di (ad esempio) 10px. La coerenza è la chiave per creare ritmo e armonia.

Tipo Sans-serif, monocromatico con un colore accento, molto spazio, spaziatura costante

Rendi più facile la tua vita

Non c'è vergogna in questo; lascia che framework come Bootstrap e Foundation facciano il duro lavoro per te. Sono spesso criticati per aver reso i siti di produzione un aspetto generico e privo di fantasia, ma per i prototipi sono assolutamente perfetti, subito fuori dagli schemi. 

Tutte le decisioni che abbiamo discusso finora sono già state fatte per te: tipografia, colori, spaziatura, coerenza e dettagli disordinati come i moduli non puoi sbagliare.

pointer # 10: Stare sulle spalle degli altri. Prendi i modelli Bootstrap esistenti, i modelli Foundation o Material Design Lite, o Skeleton, o Pure CSS, o UIKit, o qualunque dei milioni di framework CSS che desideri! Non abbiate paura di aggiungere i vostri stili in cima, tenendo presente tutti i punti che abbiamo discusso finora.

Da ZURB's Building Blocks

Questi quadri sono tutti molto completi. Assicurati di utilizzare tutti i pezzi di cui hai bisogno; probabilmente incontrerai dei problemi se scegli solo alcuni elementi.

Conclusione

Questo non era destinato a essere un articolo sui concetti di base del design, ma punta invece ad aiutarti a risolvere i problemi che stai riscontrando con i tuoi prototipi. Se sei uno sviluppatore, magari registrando un corso o presentando un prodotto ai clienti o al tuo team, e vuoi veramente che i tuoi demo facciano il loro lavoro, questi suggerimenti dovrebbero portarti sulla strada giusta. Fatemi sapere nei commenti se avete domande specifiche. In bocca al lupo!