Forze invisibili dimensioni, contrasto e equilibrio

Questo è il secondo di una serie di articoli in tre parti sulle "forze invisibili" nel design. Nell'articolo precedente abbiamo appreso come l'allineamento può essere utilizzato per creare direzione e concentrazione. In questo articolo, scopriremo come lavorare con le modifiche alle dimensioni può creare contrasto e equilibrio e aiutare i tuoi progetti a comunicare in modo più chiaro.

Le cose più grandi sembrano più importanti

È ovvio che quando si rende un elemento più grande, tende a sembrare più importante degli elementi più piccoli.

Ma, questo deve essere considerato insieme ad altri fattori che influenzano la gerarchia visiva. Ad esempio, questi due elementi assumono lo stesso livello di importanza, perché hanno le stesse dimensioni:

Se mai, vedresti l'elemento principale prima di vedere l'elemento inferiore.

Ma se rendi l'elemento inferiore più grande dell'elemento superiore, sembrerà più importante.

Tuttavia, altre cose come il peso visivo (stai usando un font in grassetto o chiaro), o il contrasto di colore, possono invertire gli effetti di dimensioni maggiori.

In questa illustrazione, l'elemento più leggero sembra meno importante, anche se è più grande.

Ma semplicemente dando alla stessa illustrazione uno sfondo scuro, ora l'elemento più leggero (e più grande) è dominante, grazie al fatto che contrasta lo sfondo più che l'elemento più piccolo.

Apporta modifiche alle dimensioni significative

Soprattutto quando si progetta per i piccoli schermi dell'età di oggi, si dovrebbero usare le modifiche alle dimensioni con lo scopo. Non serve a rendere un font più grande e, quindi, occupare spazio prezioso sullo schermo, se non è necessario.

Ogni volta che è possibile, puoi usare i fattori sopra menzionati per modificare la tua gerarchia visiva, ma prima o poi devi rendere una cosa più grande di un'altra. Basta non farlo a casaccio.

Guarda questi diversi elementi, ognuno più grande del precedente.

Ora, che ti legge più chiaramente: quel layout o questo?

Gli elementi del secondo esempio sono dimensionati in base a una scala variata. Ogni dimensione del carattere si riferisce alla dimensione successiva più piccola con la stessa relazione matematica che si riferisce alla dimensione più grande.

Le dimensioni dei tipi nella scala varia hanno una relazione proporzionale l'una con l'altra. Le proporzioni aiutano a rendere parti dei tuoi disegni come se fossero insieme.

Puoi vedere le proporzioni in azione nel logo MailChimp.

Ciascuno dei cerchi che compongono le caratteristiche dello scimpanzè si relazionano tra loro per un fattore di 0,75. Il cerchio che compone l'area del ventre è, a titolo di esempio, 0,75 della dimensione del cerchio che costituisce il corpo. Hicks Design, l'azienda che ha progettato questo logo, lo ha fatto apposta!

Non essere ingannato da Fools 'Gold

Molti di voi stanno probabilmente pensando al cosiddetto "Golden Ratio" che ottiene un sacco di hype. Il rapporto aureo è all'incirca 1: 1,618. Sì, lo scimpanzé sarebbe ancora attraente se fosse basato sulla sezione aurea, ma non sarebbe oggettivamente più attraente. Nonostante il clamore, non ci sono prove che il Golden Ratio sia più attraente di altri rapporti popolari come .75, o .67.

Per illustrare ciò, una volta ho interrogato la mia mailing list su quale dei suddetti rettangoli hanno trovato più attraente. Uno di questi è un quadrato, un altro è un rettangolo .75, un altro è un rettangolo .67 e un altro è un rettangolo "Golden". Quale rettangolo ti sembra più attraente?

Ecco i risultati del sondaggio:

  • in alto a sinistra (quadrato): 8%
  • in alto a destra (rettangolo 3: 4): 29%
  • in basso a sinistra (rettangolo 2: 3): 37%
  • in basso a destra ("Golden" Ratio): 25%

Come potete vedere, il cosiddetto rettangolo d'oro si è comportato molto bene, ma non si è rivelato il rettangolo più attraente.

Il rettangolo 2: 3 ha vinto in questo caso, ma non leggere troppo. Il punto è che qualsiasi cosa, dal Golden Ratio al 3: 4, sarà più attraente di un quadrato.

Puoi usare questa conoscenza per rendere bella la tua tipografia, e risparmia tempo se lavori con una scala variata preimpostata per la tua tipografia.

Ad esempio, queste sono le dimensioni dei caratteri che uso sempre. Ogni dimensione è circa 0,75 della dimensione della dimensione precedente (con un piccolo arrotondamento).

Un vantaggio secondario di lavorare con una scala .75 anziché con la sezione aurea è che la matematica è molto più facile da fare nella tua testa: che cos'è il 75% di 16? Facile! Qual è il 61,8% di 16? errr.

Conclusione

Pensando alle dimensioni delle modifiche che apporti, i tuoi disegni appariranno più chiari e più chiari, e pur essendo più utilizzabili e convertendo meglio. Se si utilizza una scala varia, è possibile realizzare progetti eccezionali più velocemente!

Attacca l'ultimo articolo di questa serie, in cui impareremo come plasmare la pagina attraverso l'allineamento e il dimensionamento, e a pensare al tuo spazio bianco, aiuta a dare ai tuoi disegni ancora più chiarezza.