Introduzione alla proporzione

La proporzione ha una lunga storia di definizione della bellezza nell’arte e nel design. Gli antichi egizi usavano un sistema a griglia per la loro arte murale, aiutando a stabilire la scala, la proporzione e ad illustrare la gerarchia. Gli antichi greci erano affascinati dalle proporzioni del corpo umano. Il rapporto aureo fu usato per creare proporzioni “perfette” per la Bibbia di Gutenberg. Non mancano esempi di proporzioni considerate con attenzione.

Oggi, la proporzione vive come un potente principio di design che aiuta a formare coerenza, gerarchia, ritmo e bellezza generale nel design. In questa lezione, parleremo di come usare la proporzione nell’UI Design.

Dimensione vs Scala vs Proporzione

Per trarre vantaggio dalla proporzione nell’UI design, dobbiamo prima capire le differenze tra dimensione, scala e proporzione. Tutti e tre questi termini sono correlati, ma ci sono alcune distinzioni chiare da considerare.

La dimensione è la dimensione effettiva di un elemento, spesso misurata in px, pt, em, rem ecc.

Per esempio, la dimensione di questo logo è 75px alto e 275px largo.

La scala è la dimensione relativa di un elemento, spesso misurata da percentuali o multipli.

Per esempio, un elemento può essere scalato per essere più grande o più piccolo della sua dimensione originale.

La proporzione è la relazione armoniosa tra due o più elementi di scala.

Per esempio, se un elemento aumenta di dimensione, anche gli altri elementi dovrebbero aumentare allo stesso ritmo per rimanere proporzionati.

Proporzione nell’UI Design

Confrontare un logo proporzionato e uno sproporzionato è una cosa, ma probabilmente ti stai chiedendo “Come funziona questo per l’UI Design?” Dopo tutto, con dimensioni dello schermo e dispositivi diversi, non è possibile mantenere una UI proporzionata, giusto? La risposta a questa domanda è “Sì e No.”

Le UI includono tipicamente una combinazione di elementi statici e fluidi.

  • Gli elementi statici rimangono della stessa dimensione, indipendentemente da quanto grande o piccolo sia lo schermo.
  • Gli elementi fluidi scalano ad una percentuale specificata del loro contenitore.

Per definizione, paragonare elementi statici con elementi fluidi non risulterebbe mai in un design proporzionato perché non scalano alla stessa velocità. Tuttavia, gli utenti tipicamente non cambiano dispositivo mentre sperimentano la vostra UI.

Con questo in mente, è possibile usare la proporzione nell’UI Design. Tuttavia, potrebbe non essere il modo in cui ti aspetteresti.

Unità di misura nell’UI Design

Hai probabilmente sentito il termine “pixel” usato più spesso come unità di misura per i prodotti digitali. Questo era generalmente accettabile fino al 2010, quando Apple ha introdotto il Retina Display.

Il Retina Display ha cambiato il nostro modo di pensare alla “dimensione”, inserendo il doppio dei pixel per pollice quadrato del display. Mentre la dimensione di un elemento tra un Retina e non Retina sembra essere la stessa, il numero totale di pixel che compongono quell’elemento è molto diverso. Per esempio, un pulsante che è alto 48px su un display normale sarebbe ora alto 96px su un Retina Display a causa della densità di pixel.

Da allora, molti diversi schermi ad alta densità di pixel (HPD) sono diventati disponibili in molte marche e dispositivi diversi. Fortunatamente, gli schermi HPD sono tipicamente definiti da quanti pixel in più ci stanno per pollice quadrato rispetto al display standard a densità di pixel 1X.

Per esempio, la maggior parte degli schermi può essere descritta come avente una densità di pixel 1X, 2X, o 3X.

Il termine “pixel” è ancora comunemente accettato per descrivere la dimensione di un elemento. Tuttavia, per evitare confusione, molti designer preferiscono usare il termine “punto” o “pt”, che descrive le dimensioni, indipendentemente dalla densità di pixel dello schermo.

Per il resto di questa lezione, useremo i termini “pt” e “px” in modo intercambiabile come unità di misura per descrivere le relazioni tra gli elementi nel nostro design.

Il sistema di griglia 8pt

Quando si lavora con software di design, come Illustrator, Photoshop, Sketch, XD, Figma ecc. è molto comune per i designer usare griglie o colonne per assistere nei loro sforzi di design. Molti dei principi di design discussi in questo corso possono essere raggiunti con l’aiuto di griglie o colonne, quindi non è una sorpresa che siano uno strumento popolare nella cassetta degli attrezzi del designer.

Tuttavia, c’è una strategia particolare, che funziona eccezionalmente bene per le proporzioni. Questa strategia è conosciuta come 8pt Grid System.

L’8pt Grid System è stato introdotto per la prima volta dalla specifica Material Design di Google. Fortunatamente, è abbastanza facile da capire. Essenzialmente, si vuole usare una griglia composta da quadrati di 8 x 8 pt. Mentre progettate sopra questa griglia, vorrete assicurarvi che tutti gli elementi scattino alla griglia.

Questo risulta in elementi con dimensioni che sono sempre divisibili per 8. Progettando in questo modo, è facile mantenere gli elementi proporzionati, mentre si crea un senso di ritmo verticale in tutto il design.

Perché 8 punti?

Il sistema a 8 punti è il più ampiamente adottato per due ragioni principali:

  • Le dimensioni dello schermo più comuni sono divisibili per 8, rendendo il tuo design molto nitido e chiaro sulla maggior parte dei dispositivi (nessun pixel diviso).
  • La dimensione base raccomandata per i font sul web è 16px. Questo permette agli sviluppatori di scalare gli elementi su una pagina web in unità REM pur rimanendo fedeli al sistema di griglia.

In generale, ci sono più vantaggi per l’utilizzo di 8 punti rispetto a qualsiasi altro numero per la griglia. Tuttavia, è possibile utilizzare un numero come 10pt o 12pt se vi si addice meglio.

Perché non 4 punti?

Le specifiche di Google Material Design raccomandano di utilizzare 4pt per “Componenti più piccoli, come l’iconografia e la tipografia”. Tuttavia, la maggior parte degli elementi dell’UI può ancora essere gestita dal sistema 8pt, quindi è più popolare per iniziare.

Il rapporto aureo

Il sistema 8pt GridSystem ha i suoi chiari vantaggi nel design dell’UI, ma se fai una rapida ricerca su Google per “Proporzione nel design dell’UI” ti ritroverai con una prima pagina piena di risultati riguardanti il rapporto aureo.

Il Rapporto Aureo è 1:1.618 e si crede che sia l’intersezione della matematica e della bellezza estetica. Molti designer ignorano del tutto i sistemi a griglia in favore della creazione di proporzioni con il Rapporto Aureo.

Ci sono molti esempi di come il Rapporto Aureo sia stato usato per tutto, dalla Bibbia di Gutenberg al design del logo dei giorni nostri, alle occorrenze in natura. Tuttavia, ci sono altri che credono che la bellezza del Rapporto Aureo sia semplicemente un mito.

In ogni caso, non si può negare che molti sono innamorati del Rapporto Aureo, quindi vale certamente la pena menzionarlo in questa lezione.

Usare la Razione Aurea nell’UI Design

Nella lezione 4 di questo corso abbiamo discusso che un design non dovrebbe avere più di 3 o 4 livelli di gerarchia in una particolare sezione della UI. Con questo in mente, puoi applicare il Rapporto Aureo nel tuo design seguendo questi semplici passi:

Definire l’altezza di un rettangolo e moltiplicare quel numero per 1,618 per trovare la larghezza. Questo crea un “Rettangolo d’oro”

Nell’esempio sopra, il nostro numero di partenza è 350pt, ma puoi usare qualsiasi numero tu voglia.

Dividi il tuo Rettangolo d’oro in quadrati perfetti. Ogni quadrato perfetto darà come risultato un nuovo e più piccolo rettangolo d’oro.

Continua a dividere il rettangolo d’oro fino ad avere 3-4 diversi quadrati perfetti di diverse dimensioni.

Utilizza la dimensione di ogni quadrato come “segnaposto” per aiutarti a spezzare il tuo layout e comunicare la gerarchia nel tuo design.

In generale, il risultato è un design estetico e proporzionato. Date un’occhiata a questo esempio da Prototypr.io.

Partendo dai vincoli

Ora che abbiamo coperto alcuni metodi per stabilire le proporzioni nell’UI Design, discutiamo alcuni ottimi punti di partenza. Iniziando prima con i vincoli, è più facile costruire la tua UI intorno a quei vincoli.

Mobile First Design

La frase “Mobile First” è stata coniata da Luke Wroblewski nel suo libro con lo stesso titolo. Il termine ha guadagnato popolarità tra i designer come un modo per combattere l’impulso di stipare più cose in un’interfaccia utente semplicemente perché c’era un ampio spazio per farlo.

Concentrandosi prima sul design mobile, i designer devono lavorare intorno ai vincoli dei dispositivi mobili e concentrarsi su ciò che conta davvero. Di conseguenza, l’esperienza dell’utente rimane coerente tra i vari dispositivi, poiché lo scopo principale dell’UI rimane al centro dell’attenzione.

Dimensione del carattere

Come già detto, la dimensione predefinita del carattere per il testo sul web è 16px per la maggior parte dei principali browser. Qualsiasi cosa più piccola di questa può innescare alcuni comportamenti inaspettati di zoom sui dispositivi mobili Apple. Di conseguenza, si raccomanda generalmente di lasciare 16px come dimensione di base dei caratteri e di specificare le altre dimensioni dei caratteri (titoli, testo piccolo, didascalie, etichette ecc.) di conseguenza.

Possiamo definire queste dimensioni dei caratteri con proporzione in mente seguendo le specifiche di Google Material Design e scegliendo dimensioni con incrementi di 4pt, come la guida di stile di Bootstrap per le dimensioni dei caratteri.

Nota: incrementare la dimensione del tuo carattere in base al rapporto aureo non è raccomandato in quanto le differenze tra ogni dimensione del carattere sarebbero troppo grandi. Per esempio, iniziando con una dimensione di base del carattere di 16 e moltiplicando ogni livello di intestazione per 1,618 si otterrebbe un’intestazione H1 di 177,4 pts, che sarebbe molto difficile da leggere.

Dimensione del pulsante

Un altro fattore limitante da considerare è la precisione del metodo di input che viene utilizzato nel tuo progetto. In questo caso particolare, ci riferiamo a dita, pollici, cursori e penne stilo.

Dita e pollici sono molto più ampi e meno precisi dei cursori o delle penne stilo. Con questo in mente, è importante assicurarsi che le dimensioni dei pulsanti, degli input, delle icone o di altri punti di contatto siano scelte attentamente per tenere conto di queste limitazioni.

Il Material Design di Google raccomanda che i punti di contatto su mobile non siano meno di 48pt di altezza e 48pt di larghezza con non meno di 8pt tra loro.

Larghezza del contenuto

Il contenuto è fluido, il che significa che riempie tutto lo spazio orizzontale e verticale che gli è possibile. Nonostante questa caratteristica, è buona pratica definire una larghezza minima e massima per il tuo contenuto.

Una larghezza minima del contenuto può essere determinata dalla larghezza minima dello schermo che il tuo progetto supporterà. La risoluzione dello schermo più piccola che la maggior parte dei designer supporta è 320px (cioè a 1X) di larghezza. Tuttavia, dovreste scegliere la vostra larghezza minima basandovi sui dati reali degli utenti, se siete in grado di ottenerli. Google Analytics è un buon posto dove cercare questo tipo di dati.

Mentre la larghezza del contenuto può riempire tutto lo schermo che gli viene dato, generalmente non è raccomandato di permettere al tuo contenuto di estendersi più di 52 caratteri per linea. Questo suggerirebbe che la larghezza massima del tuo contenuto può essere determinata utilizzando il testo del corpo reale alla sua dimensione normale del carattere e trovando una larghezza di contenuto confortevole che si adatti a questo intervallo.

Conclusione

In conclusione, la proporzione è un utile principio di design. Pur avendo una combinazione di elementi statici e fluidi, un’interfaccia utente proporzionata può ancora essere ottenuta usando un sistema a griglia 8pt, il rapporto aureo o un altro metodo. Quando iniziate a definire le dimensioni degli elementi, è pratica comune iniziare con i vostri vincoli, come il dispositivo, la dimensione del carattere, la dimensione del pulsante e la larghezza del contenuto. Dopo che le dimensioni di base sono definite, è molto più facile scalare gli elementi di conseguenza.

Prossima lezione
Principi del design: Spazio bianco

Lezione precedente
Principi di design: Enfasi

Feedback

Come può essere migliorata questa lezione? Per favore lascia il tuo feedback qui sotto!