Come avvicinarsi al design per gli sviluppatori

Anche se possono lavorare sugli stessi progetti e prodotti, sviluppatori e designer spesso lavorano separati l'uno dall'altro in silos. Il design è spesso considerato dagli sviluppatori come una cosa secondaria, irrilevante rispetto alla funzionalità di un prodotto.

Questo tipo di pensiero può essere dannoso per il rapporto sviluppatore-designer. Non avere una conoscenza di base del design può trattenere gli sviluppatori nelle loro carriere o impedire loro di perseguire progetti solo perché non hanno un designer a bordo.

Perché gli sviluppatori dovrebbero imparare il design

Sebbene il design e lo sviluppo siano spesso considerati discipline separate, ci sono persone là fuori che le hanno padroneggiate entrambe. Anche se a qualcuno interessa solo essere un designer o uno sviluppatore, non entrambi, è utile imparare almeno le basi dell'altra disciplina.

Ci sono un paio di ragioni per cui gli sviluppatori potrebbero voler imparare la progettazione, o almeno sviluppare una base di base della conoscenza della progettazione.

Prima di tutto, i piccoli team potrebbero non avere un designer dedicato. Inoltre, ci sono sviluppatori là fuori che vogliono affrontare i progetti da soli, che non possono permettersi di assumere un designer (o vogliono spendere i soldi altrove). Imparare a progettare i propri prodotti, almeno abbastanza bene da cavarsela fino a quando un designer non può essere assunto è una risorsa inestimabile.

L'altro grande motivo per cui gli sviluppatori imparano la progettazione è che possono lavorare in modo più efficace con i designer. È incredibilmente frustrante per un designer consegnare un file completamente progettato per un sito Web o un'app che si aspetta sia perfetto per i pixel nel prodotto finito, solo per scoprire che il loro design è stato modificato in modo significativo dallo sviluppatore che lo ha codificato.

Se gli sviluppatori non comprendono le basi del design, possono trascurare piccoli dettagli che rendono un'interfaccia utente particolarmente intuitiva e sabotano involontariamente l'esperienza utente del progetto. Quando i designer inviano tonnellate di correzioni, può mettere a dura prova la relazione sviluppatore-designer, per non parlare del rallentamento del completamento di un progetto.

Al fine di migliorare le relazioni e il lavoro di squadra tra team interdisciplinari, gli sviluppatori si farebbero un favore imparando a vedere i progetti attraverso gli "occhi di un designer" piuttosto che guardarli esclusivamente da una prospettiva di sviluppo: padroneggiare tale abilità migliorerà notevolmente i loro progetti.

Creare una mentalità progettuale

Troppo spesso, gli sviluppatori che imparano a progettare si concentrano troppo sull'estetica dei progetti che amano e vogliono emulare, piuttosto che sui principi sottostanti che supportano tali progetti. Vedono cose come il colore e le dimensioni di un pulsante, un carattere specifico o il modo in cui vengono utilizzati i bordi senza comprendere le ragioni di tali scelte.

Iniziano a spruzzare vernice sulle pareti e decorare lo spazio senza capire lo scopo degli spazi che stanno decorando (o anche assicurandosi che cose come impianti idraulici ed elettrici siano finiti), per così dire.

È importante comprendere e rispettare i principi alla base del motivo per cui i designer prendono le decisioni che prendono. Chiunque sia nuovo al design ha bisogno di una solida conoscenza dei principi e delle teorie che costituiscono un buon design, cose come i Principi della Gestalt e la gerarchia visiva di base, prima di immergersi e iniziare a spruzzare vernice ovunque.

Detto questo, è anche comune per i nuovi designer, indipendentemente dal fatto che abbiano un background nello sviluppo o meno, impantanarsi nella teoria. Trascorrono così tanto tempo imparando e pensando a cose che non riescono mai ad applicare effettivamente ciò che stanno imparando.

Sia i designer che gli sviluppatori tendono ad essere perfezionisti. Ma spingere fuori i progetti prima che siano perfetti (poiché probabilmente non lo saranno mai) è importante per il processo. In particolare, i nuovi designer devono superare le loro insicurezze, mettere in evidenza il loro lavoro e imparare dal feedback che ricevono.

Uno dei modi migliori per imparare davvero il design è provare a ricreare i progetti degli altri. Separare ciò che funziona e ciò che non funziona e capire perché un particolare design è attraente è una delle abilità più preziose che un nuovo designer o uno sviluppatore può apprendere. Dare un tocco unico a un design esistente è comune nel settore (evidenziato dalla funzione "Rimbalzo" di Dribbble).

Progettare nel browser

Molti designer resistono alla progettazione direttamente nel browser, poiché generalmente significa che devono essere a proprio agio nello scrivere almeno codice HTML e CSS di base. Questo è il motivo esatto per cui spesso è un'ottima soluzione per gli sviluppatori che si avvicinano alla progettazione: sono già a loro agio nello scrivere codice.

Esistono strumenti che possono aiutare con la progettazione nel browser e possono semplificare la vita sia ai progettisti che agli sviluppatori. Sono disponibili semplici plug-in del browser per qualsiasi cosa, dalla selezione delle tavolozze dei colori all'esplorazione del codice CSS e HTML di un altro sito.

Esistono anche strumenti più complessi come Figma che agiscono come uno strumento di progettazione completo direttamente nel browser. Figma consente ai progettisti di collaborare, inviare risorse alle parti interessate (e persino consentire loro di apportare modifiche al contenuto e alla copia dei progetti) e consente agli sviluppatori di accedere ai progetti effettivi in ​​tempo reale. È un'ottima opzione per gli sviluppatori-designer che desiderano creare progetti e sistemi di progettazione scalabili nel tempo.

Webflow è un'altra opzione per la progettazione nel browser che gli sviluppatori potrebbero amare. Sebbene l'interfaccia di progettazione sia visiva, il codice esportato è CSS e HTML semantico e pulito che gli sviluppatori apprezzeranno (non tutti gli strumenti di progettazione visiva esportano codice pulito). Webflow include strumenti per la progettazione e il layout, nonché strumenti CMS ed eCommerce integrati, nonché opzioni di hosting.

Uso del colore, della tipografia e del layout

Prima di approfondire i principi visivi di colore, tipografia e layout, è importante parlare dell'usabilità di base. Il design esteticamente più gradevole al mondo è inutile se non è utilizzabile.

Uno dei principi di usabilità più importanti è l'idea di coerenza o prevedibilità. I progetti dovrebbero essere sufficientemente prevedibili da consentire agli utenti di comprendere intuitivamente come utilizzarli. Ad esempio, testo sottolineato in blu per collegamenti cliccabili, menu di navigazione completi e ben etichettati, ecc. Anche la spaziatura tra gli elementi, la tipografia e la combinazione di colori dovrebbe essere coerente.

Altri principi di usabilità che dovrebbero essere considerati in ogni progetto di design includono cose come prevenzione degli errori (e messaggi di errore informativi quando si verificano errori), linguaggio familiare (usa il linguaggio a cui le persone sono abituate, piuttosto che "carino" o alternative creative che potrebbero non essere chiare ), flessibilità ed efficienza e un aiuto facilmente disponibile. Nielsen Norman Group ha ulteriori euristiche di usabilità che dovrebbero essere tenute a mente.

Le valutazioni dell'usabilità dovrebbero essere condotte durante tutto il processo di progettazione e sviluppo per assicurarsi che il prodotto funzioni nel modo previsto dal team di progettazione e sviluppo e che gli utenti non siano confusi. Le valutazioni euristiche implicano il confronto di un elenco di principi di progettazione predefiniti che un prodotto dovrebbe seguire con il prodotto reale per vedere dove si verificano le deviazioni (e quindi correggere tali deviazioni).

Una volta che l'usabilità è stata compresa a fondo in relazione al prodotto in questione, i designer-sviluppatori possono passare agli aspetti più visivi del design.

Teoria del colore di base

La teoria del colore è uno degli aspetti più complessi del visual design. Cambiare leggermente le tonalità può cambiare completamente l'impatto visivo e l'effetto emotivo di un colore. È uno dei motivi per cui molti designer che operano nel settore da anni continuano a lottare con il colore.

Sebbene siano stati scritti molti libri sulla teoria del colore, ci sono alcuni principi di base che i designer-sviluppatori possono imparare per iniziare. Combina quelli con uno qualsiasi dei numerosi strumenti di progettazione del colore disponibili e una piacevole tavolozza di colori può essere creata abbastanza facilmente.

Innanzitutto, la differenza tra colori caldi, colori freddi e neutri. I colori caldi includono rosso, arancione e giallo. I colori caldi saranno generalmente vivaci ed energizzanti. I colori freddi includono verde, blu e viola. Questi colori sono generalmente più calmi e rilassanti.

I neutri includono bianco, nero, grigio, marrone e beige. L'aggiunta di bianco, nero o grigio a colori caldi o freddi ne altera il significato e l'impatto. Il bianco schiarisce i colori e generalmente rende il loro effetto meno intenso o più positivo (ad esempio, il viola è considerato un colore misterioso e regale, mentre il lilla è spesso associato alla primavera e alla felicità). Il grigio attenua i colori e può ridurne l'impatto. Il nero scurisce i colori e può farli apparire più conservativi (considera il diverso impatto di un colore come il blu brillante rispetto al blu navy).

Una volta che un designer ha una comprensione di base dei significati del colore, può utilizzare strumenti come Coolors, Design Seeds o Colormind per creare una tavolozza finale e coordinata per il suo design.

Utilizzo del colore HSL

Quando un designer pensa ai colori del web, spesso pensa in termini di valori esadecimali. Sebbene questo sia diventato lo standard del settore in termini di colori web, gli sviluppatori potrebbero scoprire che lavorare con i valori di colore HSL ha più senso.

Per la maggior parte delle persone (designer inclusi), i valori esadecimali apparentemente non hanno alcuna correlazione tra loro. Due colori che sembrano molto simili potrebbero avere valori esadecimali completamente diversi. Ad esempio, #68B4D4 e #92C8E0 sono sfumature di blu abbastanza simili (una è semplicemente un po' più luminosa e più chiara dell'altra) eppure i loro valori esadecimali non hanno alcuna correlazione apparente.

I loro valori HSL, tuttavia, mostrano quanto siano strettamente correlati: #68B4D4 diventa HSL (198, 58%, 62%) e #92C8E0 diventa HSL (198, 56%, 73%). Il primo numero della sequenza (198 in questo caso) indica la particolare tonalità. Il secondo numero è la percentuale di saturazione (quanto brillante o vibrante è il colore). Il terzo numero è la percentuale di luminosità (o bianco aggiunto) del colore.

Poiché le correlazioni tra i valori dei colori sono così facilmente visibili con HSL ed esadecimale, gli sviluppatori spesso scoprono che la manipolazione dei colori tramite codice con HSL è significativamente più semplice.

Principi di tipografia

La tipografia è un'altra area che può inciampare anche designer esperti. Ma come la teoria dei colori, ci sono alcuni ottimi strumenti là fuori che possono aiutare.

La gerarchia tipografica è una delle prime cose che un designer-sviluppatore dovrebbe imparare. La relazione tra elementi di tipo diverso in un progetto è fondamentale per rendere quel progetto più utilizzabile.

Per lo meno, un design dovrebbe avere tre livelli di gerarchia tipografica: titoli, sottotitoli e caratteri del corpo. Il titolo dovrebbe essere il più visivamente prominente, i sottotitoli vengono dopo e poi il font del corpo, che dovrebbe essere altamente leggibile.

Molti nuovi designer si concentrano troppo sulla dimensione del carattere nella creazione della loro gerarchia e non abbastanza sullo stile del carattere. A volte, invece di rendere un titolo significativamente più grande di un sottotitolo, ad esempio, un titolo potrebbe essere reso in grassetto o in maiuscolo, mentre il sottotitolo viene lasciato in maiuscolo del titolo e peso normale. Il colore può essere utilizzato anche per distinguere tra sottotitoli e titoli e tra questi elementi e il corpo del testo.

La combinazione di diversi tipi di carattere può anche confondere molti designer, eppure è un modo comune per creare una gerarchia visiva. Includono la scelta di caratteri complementari (gli opposti spesso si attraggono, ma in una certa misura, il modo in cui i caratteri si combinano deve essere determinato in base all'istinto che viene affinato nel tempo), la scelta di caratteri appropriati (non utilizzare Comic Sans su un documento legale, per esempio, o un carattere di visualizzazione per il tipo di corpo che non sarà leggibile con dimensioni più piccole) e creando contrasto tra i caratteri tipografici (non usarne due molto simili).

Un altro modo semplice per combinare i caratteri consiste nel selezionare i caratteri da famiglie di caratteri grandi. Ci sono anche famiglie là fuori che includono versioni display, serif e sans serif che funzionano bene insieme (come Mrs Eaves e Mr Eaves, Fedra o Museo e Museo Sans). Questo può essere il modo più semplice per iniziare a sperimentare davvero con la combinazione di caratteri poiché sono progettati per avere un bell'aspetto insieme.

Quando si lavora con gerarchie tipografiche più grandi (come l'aggiunta di H1, H2, H3, H4, ecc.), è importante seguire un qualche tipo di ragione nella scala tipografica. La sequenza di Fibonacci è una possibile scala da cui partire, sebbene esistano altre scale tipografiche consolidate.

Una scala comune utilizzata sia nella tipografia (e generalmente nei layout di progettazione) è composta da 4, 8, 16, 24, 36, 48, 72, 108, ecc. Queste figure possono essere combinate in vari modi per creare un design con un aspetto visivo gradevole proporzioni (ad esempio, un carattere di 24 pixel combinato con un'altezza della linea di 36 pixel).

Principi di layout di base

Dall'inizio del Web, ci sono alcuni modelli di layout che sono emersi come "standard". Gli esempi includono la navigazione principale in alto, la barra laterale sinistra o destra con informazioni aggiuntive o opzioni di navigazione e il contenuto del corpo che occupa il resto dello spazio.

Sebbene ci siano deviazioni precise da questo layout di base (non la navigazione in alto, nessuna barra laterale, due barre laterali, ecc.), Questa è spesso una scommessa abbastanza sicura quando si crea un nuovo layout. La deviazione da questo schema di base dovrebbe essere fatta solo con uno scopo, specialmente da designer-sviluppatori nuovi e inesperti.

La creazione di un design prevedibile , questo di solito significa coerente , fa molto per l'usabilità di un prodotto. Deviare da ciò che un utente si aspetta di vedere quando utilizza un prodotto dovrebbe essere fatto solo quando i guadagni di usabilità sono maggiori delle perdite.

È meglio non utilizzare titoli blu in grassetto da 72 pixel su una pagina e poi titoli rossi da 36 pixel su un'altra per lo stesso tipo di contenuto, poiché la coerenza del layout è fondamentale. Allo stesso modo, la spaziatura (padding) tra il titolo e il corpo del testo che è di 36 pixel in una sezione e quindi di 32 pixel in un'altra creerà un'incoerenza visiva. Anche se una persona potrebbe non capire immediatamente perché la differenza è stridente, lo sentirà.

Simile alla scala tipografica sopra menzionata, la spaziatura degli elementi su una scala di 4, 8, 16, 24, 36, 48, 72 o 108 pixel creerà un design visivamente piacevole. È una buona idea usare abbastanza spazio tra gli elementi, dare loro spazio per respirare; i designer più recenti spesso evitano gli spazi bianchi e possono finire con progetti che sembrano disordinati e travolgenti.

Alcuni potrebbero chiedersi perché la scala è distanziata così com'è. Perché c'è solo una differenza di 4 pixel tra i primi due numeri, ma un salto di 36 pixel tra gli ultimi due? Il motivo è semplice: su piccola scala, un aumento di 4 pixel è facilmente identificabile (8 pixel sono due volte più grandi di 4, che possono essere facilmente individuati). Ma con numeri più grandi, la differenza tra 72 pixel e 76 pixel non è facilmente visibile. Differenze maggiori sono più facili da vedere all'aumentare delle taglie.

La spaziatura coerente è una delle ragioni per cui gli approcci alla progettazione basati su griglia sono diventati così popolari. Iniziare con una griglia (generalmente 12, 16 o 24 colonne) offre ai progettisti una struttura in cui lavorare che manterrà tutto coerente. Le grondaie integrate tra le colonne aiutano anche a garantire che i diversi elementi di design e il contenuto al loro interno abbiano un po' di respiro.

Conclusione

Designer e sviluppatori allo stesso modo dovrebbero concentrarsi sull'espansione delle proprie competenze al fine di promuovere la propria carriera. Il tempo che gli sviluppatori dedicano all'apprendimento dei principi di base del design farà risparmiare tempo in futuro quando lavoreranno con i designer o creeranno i propri prodotti.

La comprensione dei principi di base del design (principi di usabilità, teoria del colore, tipografia, layout e UX) renderà gli sviluppatori più bravi nello sviluppo . Quando riescono a capire perché i designer fanno le scelte che fanno, gli sviluppatori possono lavorare meglio con i designer per creare prodotti davvero eccezionali.

Ulteriori letture sul blog di Toptal Design:

• I principi del design e la loro importanza
• Quanta codifica dovrebbero sapere i designer?
• Uno spettro di possibilità: la guida ai colori dell'interfaccia utente Go-To
• Potenzia la tua UX con questi principi di progettazione dell'interazione di successo
• Design Foundations: una guida alla gerarchia visiva (con infografica)