Padroneggiare il rapporto d'oro nel design

Il tuo design sembra quasi giusto, ma qualcosa sembra fuori. La spaziatura sembra imbarazzante. Le proporzioni non funzionano. Regola i margini e l'imbottitura, ma rimane quel fastidioso senso di squilibrio. Il pezzo mancante potrebbe essere il rapporto dorato.

Questo principio matematico ha guidato un grande design per secoli. E i nostri occhi preferiscono naturalmente questi rapporti specifici. La maggior parte dei designer salta i rapporti dorati o applicarli erroneamente a causa di quanto sia difficile rompersi. Tuttavia, con un costruttore di pagine come Divi 5, puoi applicare proporzioni perfette senza calcoli complessi.

Scopriamo di più.

Qual è il rapporto d'oro?

Il rapporto d'oro è uguale approssimativamente

1.618.

Da dove viene? Ottieni questo numero quando si dividono una linea in due parti, in cui la parte più lunga divisa per la parte più breve è uguale all'intera linea divisa per la parte più lunga.

È possibile calcolare il rapporto dorato usando la sequenza Fibonacci. Inizia con 0 e 1. Aggiungili per ottenere 1. Quindi aggiungi 1 e 1 per ottenere 2. Continua ad aggiungere gli ultimi due numeri: 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144. Quando si dividono qualsiasi numero più grande per il numero precedente, ti avvicini a 1.618.

Questo rapporto appare ovunque in natura. Spirali di semi di girasole seguilo. I gusci di Nautilus crescono usando queste proporzioni. Anche il tuo viso probabilmente segue le misurazioni del rapporto d'oro tra le tue caratteristiche. Quando qualcosa segue questo rapporto, il tuo cervello lo riconosce come naturalmente piacevole.

Immagini per gentile concessione: Lucas e Dynamic Wang su Unsplash e Milena Carolina Dos Santos Mangueira

Il simbolo φ (PHI) rappresenta un rapporto matematico unico che gli antichi greci hanno scoperto intorno al 300 a.C. Lo hanno definito la "proporzione divina", credendo che rivelasse uno speciale equilibrio visivo e bellezza.

Perché è importante: dai vecchi edifici al web design

I Greci hanno usato questo rapporto per il tempio del Partenone e le piramidi egiziane seguono queste misurazioni. Artisti come Leonardo da Vinci hanno studiato queste proporzioni per anni. Da Vinci ha disegnato il famoso "vitruuvian Man", mostrando i rapporti dorati nel corpo umano.

Immagine rappresentativa

I designer ben consolidati lo usano ancora. Il logo di Apple utilizza le proporzioni del rapporto d'oro. Il ex logo degli uccelli di Twitter ha seguito queste misurazioni. Le riviste collocano contenuti importanti con punti di rapporto Golden anziché proprio al centro.

Immagini per gentile concessione: Widewalls & Design Shack

Gli scienziati hanno studiato perché alla gente piacciono le forme del rapporto dorato. Le scansioni cerebrali mostrano più attività nelle aree di piacere quando le persone guardano i rettangoli del rapporto dorato. Ciò è inerente agli umani in quanto ciò accade in tutte le culture e secoli.

Il tuo cervello elabora queste proporzioni più velocemente di altri rapporti, il che significa una migliore esperienza dell'utente. Quando le proporzioni del sito Web si allontanano troppo da 1.618, i visitatori si sentono a disagio e lasciano prima.

Il rapporto crea equilibrio senza essere perfettamente uniforme. La simmetria perfetta può sembrare noiosa sui siti Web. Il rapporto Golden offre un'asimmetria sufficiente per creare interesse visivo mantenendo gli utenti di look puliti e professionali che si aspettano.

Perché i tuoi disegni si sentono "off" (e come i rapporti risolvono questo)

Hai appena passato ore a perfezionare il tuo layout. I colori sono giusti. I caratteri lavorano insieme. Ma qualcosa sembra ancora fuori. La barra laterale sembra troppo ampia. L'intestazione sembra un po 'angusta. L'area del contenuto non scorre con il resto.

Questa è un'esperienza comune. Molti designer regolano le dimensioni in base a ciò che sembra giusto nel momento. Forse hai impostato il contenuto principale al 70 percento e la barra laterale al 30 percento. Questi numeri sembrano ragionevoli, ma non sembrano sempre naturali.

I nostri occhi cercano equilibrio e schemi familiari. Quando le proporzioni non sono abbastanza giuste, l'intero design sembra imbarazzante, anche se non puoi spiegare perché. Potrebbe non essere un grosso errore, solo un piccolo dettaglio che ti sconvolge.

Il vero problema è spesso proporzionale. Quando i layout ignorano ciò che sembra equilibrato, il tuo cervello nota. Qualcosa si sente fuori, anche se non riesci a metterci il dito sopra.

In che modo i rapporti sbagliati sabotano l'esperienza dell'utente

Le cattive proporzioni rendono le cose strane. Il tuo cervello si aspetta che certe forme e dimensioni vadano bene insieme. Immagina una sezione di eroi che occupa esattamente la metà dello schermo. Sembra rigido e imbarazzante.

Ora, considera uno che utilizza il 43 percento o il 67 percento dello spazio. Sembra sbilanciato e disordinato.

Questo può danneggiare il tuo sito web. Le persone decidono molto velocemente se si fidano di ciò che vedono. Se la pagina si affaccia, potrebbe pensare che la tua attività sia inaffidabile. Il design disordinato fa credere alle persone che il tuo lavoro non sia buono.

Il rapporto d'oro può aiutare a risolvere questo problema. Invece di rendere la sezione del tuo eroe al 70 percento, prova il 61,8 per cento, lasciando visibile la sezione successiva 38,2 per cento.

Questi numeri non sono casuali. Seguono uno schema speciale chiamato 1.618 che vedi in natura, come nei fiori e nelle conchiglie. I tuoi occhi conoscono questo schema e si sentono calmi quando lo vedono.

Il trucco è come le parti si relazionano tra loro. Tutto sembra giusto se la dimensione della tua intestazione corrisponde alla tua area di contenuto utilizzando il rapporto dorato. Il tuo piè di pagina, il menu e il contenuto iniziano a schierarsi invece di sembrare che stiano combattendo per lo spazio.

Come calcolare le proporzioni del rapporto d'oro

Non hai bisogno di matematica elegante. Ricorda solo 62 e 38. Questi numeri aggiungono fino a 100, quindi funzionano come percentuali.

Dividi qualsiasi spazio dando il 62% alla parte più grande e al 38% alla parte più piccola. Il tuo sito web è largo 1000 pixel. Crea il tuo contenuto principale 620 pixel. Metti la barra laterale a 380 pixel. Rapporto dorato perfetto.

Ho una sezione alta 500 pixel. La tua area principale ottiene 310 pixel. Il resto riceve 190 pixel.

Regole rapide per le parti del sito Web

La sezione degli eroi dovrebbe richiedere circa il 60% di ciò che la gente vede per prima. Il resto va all'anteprima principale dei contenuti. Rendi le carte alte 60% quanto sono larghe. Una scheda larga 300 pixel diventa alta 180 pixel.

I pulsanti funzionano allo stesso modo. Una larghezza di 100 pixel significa un'altezza di 60 pixel. La colonna di testo è larga 600 pixel. Smetti di aggiungere contenuti circa 370 pixel. Quindi aggiungi la tua prossima sezione.

Sembra giusto?

Fai un passo indietro dallo schermo. Le parti dovrebbero sentirsi equilibrate ora. Il tuo occhio scorre senza intoppi da una sezione all'altra. Se continui a fissare un punto, le proporzioni potrebbero essere spente.

I siti Web popolari utilizzano queste stesse divisioni 62/38 ovunque. Inizierai a vedere lo schema una volta che sai cosa cercare. La matematica rimane nascosta, ma l'armonia visiva si distingue immediatamente.

Errori del rapporto dorato comuni che i progettisti fanno

La maggior parte dei designer sa che esiste il rapporto d'oro e vuole usarlo. Ecco dove comunemente lottano.

L'errore più grande è l'applicazione di rapporti in modo casuale senza un sistema. Usi i rapporti dorati per l'intestazione, i terzi per la griglia dei contenuti e le percentuali casuali per il tuo piè di pagina. Scegli un approccio e usalo in modo coerente attraverso il tuo design.

Molti designer rotondano 1.618 a numeri facili come 1.5 o 1.7. Il tuo cervello nota la differenza tra il 62% e il 60% e quel piccolo divario influisce sull'armonia visiva che stai lavorando per creare.

Un altro problema comune è gli elementi del rapporto di mancata corrispondenza. Ad esempio, è possibile creare una sezione di eroi perfettamente proporzionati ma quindi aggiungere una galleria di immagini che utilizza rapporti di spaziatura completamente diversi. La disconnessione visiva rompe il flusso che hai stabilito.

Alcuni designer applicano il rapporto d'oro al testo senza considerare la lettura del comfort. Una lunghezza della linea che segue le proporzioni matematiche perfette potrebbe superare la larghezza di lettura confortevole. La leggibilità ha la priorità sulla precisione matematica.

I web designer spesso trascurano anche la reattività. Le proporzioni desktop che sembrano equilibrate possono sembrare anguste o allungate su schermi più piccoli. I rapporti dorati necessitano di diverse applicazioni tra le dimensioni del dispositivo.

Molti costruttori di pagine default a layout arbitrari che ignorano l'armonia proporzionale. Le griglie a tre colonne standard utilizzano divisioni 33/33/33 anziché rapporti più naturali.

L'errore più limitante è abbandonare l'approccio dopo i tentativi iniziali. I rapporti dorati funzionano meglio se applicati sistematicamente attraverso la struttura del layout, non come regolazioni isolate.

Perché molti costruttori di pagine ignorano i rapporti dorati?

I costruttori di pagine sono cresciuti intorno al programmatore pensando. Gli sviluppatori amano i numeri che si dividono in modo pulito. Dodici colonne, quattro sezioni, cinquanta e giunti.

Molte aziende di costruttori credono davvero che gli utenti dovrebbero controllare le proprie scelte di progettazione. Non vogliono spingere specifiche teorie estetiche su persone che potrebbero preferire approcci diversi. Alcuni designer odiano il rapporto d'oro e preferiscono altri sistemi di proporzione. Perché forzare un principio matematico quando la creatività prospera sulle opzioni?

Il vero problema tecnico è più disordinato della filosofia del design. I rapporti dorati creano strani decimali che si rompono su dispositivi più vecchi. Prova a costruire una griglia reattiva in cui una colonna è larga il 61,8%. Le percentuali pulite come il 25% o il 33% si comportano prevedibilmente su ogni dispositivo.

La maggior parte delle aziende di costruttori di pagine sono iniziate come soluzioni tecniche, non come strumenti di progettazione. Sono costruiti attorno a layout sistematici e logici che funzionano in modo affidabile.

Gli utenti raramente si lamentano delle proporzioni. Si lamentano dei layout mobili rotti e dei tempi di caricamento lenti. Le priorità dell'azienda seguono il feedback degli utenti effettivi, non la teoria del design.

Alcuni costruttori si preoccupano di travolgenti principianti. I nuovi utenti affrontano già dozzine di scelte di layout e l'aggiunta di considerazioni matematiche potrebbero spaventare le persone che desiderano solo qualcosa di pulito e professionale.

Costruire proporzioni perfette con Divi 5

Prima di immergerci nelle nitide-grigliate di come Divi 5 trasforma il design del rapporto d'oro da un mal di testa matematico in semplicità puntuale e clicca, facciamo una breve deviazione e comprendiamo cosa rende Divi la scelta di riferimento per i progettisti di WordPress che desiderano risultati professionali senza l'incubo di codifica.

Cos'è Divi?

Divi è un costruttore di pagine WordPress progettato per le persone che si prendono cura della progettazione visiva senza compromettere le funzionalità.

Puoi trascinare e rilasciare oltre 200 moduli in giro, cambiare testo e scegliere nuovi colori. Tutto accade sulla tua pagina, quindi vedi esattamente ciò che i visitatori vedranno.

Il tema è ricco di oltre 2000 layout pre-realizzati. Questi non sono modelli di base ma progetti completi per ristoranti, fotografi, consulenti e dozzine di altre aziende. Scegli uno che si adatta al tuo stile e personalizza da lì.

Se vendi prodotti online, Divi include oltre 20 moduli realizzati appositamente per i negozi. Le pagine del tuo prodotto appariranno professionali e ti aiuteranno effettivamente a convertire i browser in acquirenti.

Crea siti Web senza mal di testa

Il tema costruttore ti consente di progettare ogni parte del tuo sito. Puoi creare intestazioni personalizzate che corrispondono al tuo marchio, costruire layout di blog unici e persino rendere sorprendenti le tue 404 pagine.

Divi Ai porta la comodità di AI direttamente nella tua tela di design. Puoi generare testo,

Immagini,

codice,

e intere sezioni di pagina usando Divi AI.

Puoi persino modificare le tue foto esistenti semplicemente descrivendo ciò di cui hai bisogno.

Divi Quick Sites risolve il problema con i più grandi sito Web Builders: fissando una pagina vuota senza sapere da dove cominciare. Puoi scegliere tra siti di avviamento professionista, che hanno modelli di siti Web professionali, creati dal nostro team di progettazione e presenta immagini e opere d'arte uniche che non troverai da nessun'altra parte.

Oppure lascia che Divi AI crei layout personalizzati in base alla descrizione della tua attività.

Questo sito Web generato dall'IA non è solo un wireframe. Conterrà intestazioni, copie e immagini pertinenti per la descrizione. Puoi chiedere a Divi Ai di generare tutte le immagini, usarne una da Unsplash o utilizzare segnaposto in modo da poterle sostituirle da solo.

Puoi persino pre-selezionare i tuoi caratteri e i tuoi colori e lasciare che l'IA corre con loro. E, naturalmente, i siti Web rimangono modificabili proprio come siti Web normali, in modo da poter modificare tutto ciò di cui hai bisogno per i tuoi gusti.

Ottieni Divi

Divi 5: il prossimo passo

La costruzione di siti Web dovrebbe sentirsi naturali, come le idee di disegno sulla carta. Hai una visione e i tuoi strumenti dovrebbero aiutarti a darla vita senza ostacolarsi. Questo è esattamente ciò che ci ha spinto a ricostruire Divi da zero completamente.

Divi 5, disponibile oggi come alfa e pronto per essere utilizzato su nuovi siti Web , rappresenta anni di ascolto di ciò di cui hai bisogno durante la creazione di siti Web. Non sono campane e fischietti o caratteristiche che nessuno usa davvero, ma reali miglioramenti che rendono il tuo lavoro più veloce e più divertente. Abbiamo mantenuto tutto ciò che ami Divi e lo abbiamo portato al livello successivo.

Abbiamo ricostruito tutto da zero utilizzando nuovi strumenti web. Le pagine si caricano più velocemente ora e i controlli funzionano meglio. Puoi mantenere i tuoi progetti uguali in tutto il tuo sito senza lavoro extra.

Cosa è migliorato? Cosa c'è di nuovo?

• La ricostruzione del framework completa si sbarazza dei vecchi cortometraggi. Tutto funziona con un nuovo codice basato su blocchi che si carica più velocemente e funziona meglio.
• La modifica con un clic consente di fare clic su qualsiasi parte della tua pagina per modificarla immediatamente. Niente più caccia per piccole icone o scavare nei menu.
• I punti di interruzione personalizzabili ti danno sette dimensioni dello schermo con cui lavorare invece di tre. Puoi cambiare ognuno per soddisfare le tue esigenze esatte.
• Il supporto delle unità avanzate consente di utilizzare Calc (), Clamp (), Min (), Max () e tutte le nuove unità CSS proprio nel costruttore.
• Le variabili di progettazione consentono di salvare colori, caratteri, dimensioni, immagini, testo e collegamenti in un unico posto. Cambiali una volta e si aggiorneranno ovunque sul tuo sito.
• I preset del gruppo di opzioni ti consentono di salvare e riutilizzare gli stili per bordi, caratteri, ombre e spaziatura. Questi funzionano in diverse parti del tuo sito.
• Le righe nidificate ti consentono di mettere le righe all'interno di altre file. Puoi creare layout complessi senza sezioni speciali.
• I gruppi di moduli combinano diversi moduli in un'unità. Ciò rende i layout complessi più facili da gestire. Puoi anche realizzare i tuoi moduli personalizzati.
• L'area di lavoro multi-pannello ti consente di posizionare i pannelli dove li desideri. Puoi lavorare con diverse impostazioni aperte contemporaneamente.
• La gestione degli attributi fornisce un controllo esatto quando si copiano, incolla e ripristinano stili, contenuti e preset tra parti diverse.
• La modalità leggera/oscura ti consente di scegliere il tema che è più facile per gli occhi mentre lavori.
• Il ridimensionamento della tela ti consente di ridimensionare la tua area di lavoro per vedere come appare il tuo sito su schermi diversi. Non è necessario cambiare le modalità di anteprima.
• I miglioramenti delle prestazioni rendono le pagine di caricare più velocemente, visualizzate più velocemente e sentirsi più fluide quando si sta costruendo.

Prova Divi 5 oggi

Divi 5 è ora disponibile per nuovi progetti di siti Web. Lo abbiamo ricostruito da zero per rendere il tuo flusso di lavoro più veloce e più facile. Scarica l'alfa pubblica e provalo sul tuo prossimo nuovo sito per vedere i miglioramenti. È gratuito per tutti i membri Divi, vecchi e vecchi.

Suggeriamo di usarlo solo per nuovi siti mentre miglioriamo il sistema di migrazione per i siti Divi 4 esistenti. Se stai iniziando fresco, ora è un ottimo momento per provare l'interfaccia aggiornata e prestazioni migliori.

Come utilizzare i rapporti dorati usando Divi 5

Abbastanza detto. Facciamo un'immersione profonda e vediamo come possiamo implementare rapporti d'oro nel tuo sito Web usando Divi 5 e, meglio ancora, come possono essere standardizzati in modo da non dover arrampicarti con la matematica ogni volta che crei una nuova sezione o pagina.

Le variabili di progettazione consentono di salvare e riutilizzare i valori attraverso il tuo sito. Formano il DNA dell'identità visiva del tuo sito. Divi 5 ha sei tipi: colori, caratteri, immagini, stringhe di testo, collegamenti e numeri. Ognuno ha un ruolo specifico:

• Le variabili di colore contengono colori del marchio, sfondi, colori di testo e altre tonalità utilizzate in tutto il sito.
• Le variabili del carattere mantengono i caratteri coerenti per titoli, testo del corpo e elementi speciali.
• Le variabili di immagine archiviano una grafica comune come loghi o motivi di sfondo per un facile utilizzo.
• Le variabili della stringa di testo salvano contenuti riutilizzabili come slogan, contatti e note legali.
• Le variabili di collegamento mantengono gli URL che usi spesso, come i social media o le pagine chiave.
• Le variabili numeriche gestiscono le misurazioni in pixel, percentuali, EMS, REM e unità di visualizzazione e funzionano con funzioni CSS come calc () per mantenere le proporzioni giuste su qualsiasi schermata.

Impostazione delle variabili del rapporto d'oro

Apri la tua dashboard Divi 5 e trova l'icona del gestore variabile nella barra laterale sinistra.

Fare clic per aprire il pannello variabili. Aggiungi i tuoi colori, caratteri, immagini, testi e variabili di collegamento.

Quindi, vai alla scheda Numeri per creare le variabili del rapporto d'oro. Inizia aggiungendo queste variabili numeriche:

Variabili tipografiche

• Dimensione H1: morsetto (47px, 4.7VW, 76px)
  • 47px minimo: anche sui telefoni più piccoli (320 px di larghezza), il tuo H1 rimane abbastanza grande da stabilire la gerarchia. Qualunque cosa più piccola perde l'impatto come intestazione principale.
  • 4.7VW Valore medio: questa unità di larghezza di visualizzazione rende la scala di testo senza problemi. A 1000px di larghezza dello schermo, 4,7VW = 47px. A 1600px, cresce a 75px
  • 76px Massimo: otteniamo questo moltiplicando 18px × 1.618 tre volte (18 × 1.618 × 1.618 × 1.618 = 76.244px)
• Dimensione H2: morsetto (29px, 3,5vw, 47px)
  • 29px minimo: mantiene H2 notevolmente più piccolo di H1 sul cellulare rimanendo leggibile
  • Ridimensionamento da 3,5 VW: ridimensionamento proporzionalmente più piccolo di H1 per mantenere la gerarchia
  • 47px massimo: esattamente 76px ÷ 1.618 = 47.122px
• Dimensione H3: morsetto (18px, 2,9vw, 29px)
  • 18px minimo: corrisponde alla dimensione del testo del corpo sul cellulare per salvare lo spazio verticale
  • 2,9vw ridimensionamento: cresce più delicatamente delle intestazioni più grandi
  • 29px massimo: precisamente 47px ÷ 1.618 = 29.124px
• Dimensione H4: morsetto (14px, 2,2vw, 22.4px): continua a dividere ~ 29px ÷ 1.618 = 17.994px, ma impostiamo il minimo su 22,4 px per la leggibilità
• Dimensione H5: morsetto (13px, 1,8 VW, 18px): la nostra dimensione del carattere di base di 18px si adatta perfettamente alla scala qui
• Dimensione del testo del corpo: morsetto (16px, 1,6VW, 18px): base 18px standard da cui derivano tutti i calcoli

La funzione CLAMP () consente al testo di ridimensionare senza intoppi tra gli schermi. Ci vogliono tre valori: la dimensione più piccola per i telefoni, il valore medio per il ridimensionamento e il più grande per i desktop. Usiamo la larghezza di Viewport (VW) nel mezzo perché fa crescere gradualmente il testo man mano che gli schermi diventano più grandi. Nessun salto improvviso tra le dimensioni.

Sul desktop, ci atteniamo a perfetti rapporti dorati. Gli schermi mobili necessitano di piccole regolazioni per mantenere il testo leggibile. Calcoli puri potrebbero suggerire 11px per alcuni titoli, ma ciò sforza gli occhi dei tuoi visitatori. Impostare minimi pratici come 14px preserva l'armonia visiva del rapporto d'oro, garantendo al contempo che tutti possano leggere comodamente i tuoi contenuti. Le relazioni proporzionali rimangono intatte; Si sono appena spostati leggermente per leggibilità.

Variabili di spaziatura

Ogni valore moltiplica il precedente con esattamente 1.618:

• Spazio XS: morsetto (8px, 1vw, 10px)
  • Perché 10px Base: questa è la più piccola comoda imbottitura di target touch sul cellulare. La saggezza del settore raccomanda 44 px di obiettivi minimi e imbottitura 10px su tutti i lati, oltre a contenuti ti portano lì. Più piccolo di 10px rende gli elementi angusti.
  • Perché 8px minimo: su telefoni sotto 360 px di larghezza, anche 10px possono sentirsi troppo spaziosi. Scendiamo a 8px per massimizzare lo spazio dei contenuti mantenendo gli elementi distinguibili.
  • Perché 1VW: cresce proporzionalmente la spaziatura e ti dà esattamente 10px con larghezza dello schermo 1000px
• Spazio piccolo: morsetto (13px, 1,6VW, 16.18px): ideale per l'imbottitura dei pulsanti e la spaziatura del campo.
• Medium spaziali: morsetto (21px, 2,6VW, 26.18px): ottimo per la spaziatura tra blocchi di contenuto correlati.
• Spazio grande: morsetto (34px, 4.2VW, 42.36px): crea spazio per respirare tra le sezioni principali durante il ridimensionamento con le dimensioni dello schermo.
• Spazio XL: morsetto (55px, 6.8VW, 68.54px): ottimo per l'imbottitura superiore/inferiore su sezioni di eroi e blocchi principali. Le sezioni di eroi richiedono un'imbottitura sostanziale anche sul cellulare. Sotto 50px, Hero Content si sente angusta contro i bordi.
• Spazio xxl: morsetto (89px, 11vw, 110.89px): utilizzare con parsimonia. Forse per sezioni speciali che necessitano di un percorso drammatico.

Variabili di layout

• Larghezza della colonna primaria: 61,803%
  • Come lo otteniamo: Dividi 1 per 1,618 = 0,61803 (o 61,803%)
  • Usa questo per la tua area di contenuto principale in un layout a due colonne
• Larghezza della colonna secondaria: 38,197%
  • Utilizzare per la colonna della barra laterale nella stessa riga
  • Derivato dal 100% - 61,803% = 38,197%
• Larghezza massima del contenitore: 1165px
  • Il testo diventa difficile da leggere quando le righe si estendono oltre i 72 caratteri,
    • e assumendo 10px come dimensione minima del testo, la larghezza di lettura ottimale (720px) × Golden Ratio (1.618) = 1165px
  • Applica alla tua sezione principale o riga che contiene i tuoi contenuti
• Rapporto di altezza dorata: CALC (100% / 1.618)
  • Questo può essere usato come valore nelle altezze per i gruppi di moduli/moduli, come immagini, caselle di invito all'azione, sezioni di eroi, schede dei membri del team, ecc.
  • Ciò creerebbe rettangoli invece di quadrati o forme casuali. Il tuo cervello trova queste proporzioni naturalmente attraenti, come una foto perfettamente incorniciata.
  • Come lo otteniamo? Il rapporto dorato afferma che se larghezza = 1,618, allora altezza = 1. Quindi se larghezza = 100%, allora altezza = 100%÷ 1,618 = 61,8%. Questa formula fa quella matematica automaticamente.

Salva queste variabili nel gestore variabile di Divi 5. Quindi, usali ovunque facendo clic sull'icona delle variabili accanto ai campi di larghezza, altezza o larghezza massima. Dopo l'impostazione iniziale, non è necessaria alcuna matematica. Inoltre, nessuna di queste etichette variabili è fissa; Puoi scambiare le etichette con qualcosa che ha senso.

Creazione di una sezione di eroi con rapporti dorati

Costruiamo una sezione Hero per la pagina di destinazione di un libro, ispirata a uno dei progetti della collezione del sito di avviamento, utilizzando le variabili del rapporto d'oro che abbiamo appena creato. E questa è la parte divertente. Puoi prendere quelle variabili accuratamente calcolate e guardare come influenzano una vera sezione di eroi.

Inizia creando una nuova sezione in Visual Builder di Divi 5. Imposta l'altezza usando la variabile del rapporto di altezza dorata. Questo rende naturale per il tuo cervello riconoscere come piacevole.

Aggiungi la tua variabile Space XL all'imbottitura superiore e inferiore. Ciò fornisce abbastanza spazio per la respirazione sul cellulare mentre si espande in modo appropriato sul desktop.

Per lo sfondo della sezione, hai due opzioni principali utilizzando le variabili di design:

Opzione 1: sfondo a colore solido

• Fai clic sul campo colore di sfondo e seleziona la variabile di colore primaria dal discesa. Questo mantiene la sezione del tuo eroe coerente con l'identità del tuo marchio. Se il tuo colore primario è troppo leggero per il contrasto di testo, usa invece la variabile di colore secondario. Assicurati che qualunque colore tu scelga fornisca un contrasto sufficiente affinché il tuo testo rimanga leggibile. Tenendoti al passo con la nostra ispirazione, aggiungeremo un gradiente di sfondo e colori primari con una fermata del 72% e a 90 °.

Opzione 2: sfondo dell'immagine

• Applica la variabile dell'immagine Hero (se ne hai creato una) attraverso il campo Immagine di sfondo. Fai clic sull'icona delle variabili accanto all'impostazione dell'immagine di sfondo e seleziona la variabile dell'immagine salvata. Quando si utilizzano immagini di sfondo, aggiungere una sovrapposizione per la leggibilità del testo. Imposta il colore di sovrapposizione sulla variabile di colore primario e regola l'opacità al 40-60%. Questo oscura l'immagine abbastanza da rendere il testo bianco nitido e leggibile.
• Puoi anche usare la tua variabile di colore secondaria per la sovrapposizione se contrasta meglio l'immagine di sfondo scelta.

Creazione del layout a due colonne

Aggiungi una riga con due colonne.

Impostare la larghezza della colonna sinistra sulla variabile della larghezza della colonna primaria e la colonna destra sulla variabile della larghezza della colonna secondaria. Accenderemo anche l'opzione "Equalize Column Heights". Quindi, la variabile di larghezza massima del contenitore verrà applicata per mantenere il contenuto leggibile su schermi più grandi. Ciò impedisce alle righe di testo di allungare troppo, specialmente su schermi più ampi.

Abiliteremo inoltre "Utilizzare la larghezza della grondaia personalizzata" e impostarla su 1. Questo ci aiuterà a utilizzare le distanze del rapporto d'oro tra i nostri moduli.

Applicare la variabile media dello spazio a destra della prima colonna e l'imbottitura sinistra della seconda colonna per aggiungere spazio di respirazione tra le colonne. Questo crea sufficiente separazione tra le colonne senza farle sentire disconnessi.

La colonna più grande manterrà il tuo messaggio principale e il tuo invito all'azione. La colonna più piccola può contenere una semplice immagine di eroe o rimanere vuota per un design pulito e focalizzato sul testo.

Impostazione della tipografia che scorre

Nella tua colonna principale, aggiungi due moduli di intestazione.

Impostare il primo su H5 e applicare la variabile di dimensioni H5. In questo esempio, questo modulo di testo trasporta il contenuto "autore più venduto". Useremo anche il colore secondario per questo testo e applicheremo uno stile di carattere maiuscolo. Applicheremo anche il carattere del corpo al testo per renderlo distintivo e aumentare il suo peso in grassetto.

Imposta il secondo su H1 e applica la variabile di dimensioni H1. Questo diventa il tuo titolo principale. In questo esempio, useremo il nome dell'autore, che è stato aggiunto in precedenza, come variabile di design. Se sei a corto di idee, puoi usare Divi Ai per aiutarti con un ottimo testo.

Di seguito, aggiungi un modulo di testo per il tuo paragrafo di supporto. Applicare la variabile della dimensione del testo del corpo e la variabile di colore. Mantieni questo a 2-3 frasi che spiegano la proposta di valore principale. Per questo esempio, aggiungeremo una breve introduzione al nostro autore. Puoi anche usare Divi Ai per aiutarti con la copia qui.

Spazzare questi elementi usando il mezzo di spazio come margine tra il titolo e il paragrafo.

Quindi, aggiungi un modulo pulsante sotto il testo. Applica i tuoi colori. Stiamo usando la variabile di design del colore primario e il testo del pulsante.

Aggiungi il tuo spazio medio variabile a sinistra e a destra e spazio piccolo nella parte superiore e inferiore per le dimensioni del pulsante. Questo crea un pulsante proporzionale al tuo testo senza essere sovradimensionato. Usa il tuo spazio grande variabile come margine superiore per separarlo dal paragrafo.

Il testo del pulsante dovrebbe utilizzare la variabile della dimensione del testo del corpo per mantenere la coerenza con il testo del paragrafo. Applicheremo anche la variabile di progettazione del collegamento pulsante che abbiamo aggiunto in precedenza.

Styling la colonna a destra

La colonna destra può contenere qualsiasi cosa, da un'immagine a una forma di onboarding. Se si utilizza un'immagine nella colonna più piccola, mantienila semplice. Una foto del tuo team, del tuo ufficio o di un'illustrazione pulita funziona bene. Non pensare troppo al posizionamento dell'immagine: centralo normalmente all'interno della colonna. Per questo esempio, includeremo la variabile di progettazione dell'immagine di un libro recente. E aggiungi anche un'ombra della scatola per farlo risaltare.

Adatteremo anche la larghezza dell'immagine per essere di circa il 90%, quindi sembra più allineata.

Per la consulenza siti Web, a volte lasciare la colonna giusta vuota crea un aspetto più pulito e più professionale che si concentra piena sul tuo messaggio.

Il risultato

Quello che segue è il risultato:

Usa il ridimensionamento della tela di Divi 5 per testare l'aspetto del tuo eroe attraverso diverse dimensioni dello schermo. Le funzioni di clamp () nelle variabili dovrebbero gestire automaticamente la reattività.

Mentre le variabili del rapporto d'oro forniscono un'eccellente armonia proporzionale, potresti aver bisogno di piccoli aggiustamenti in base al tuo contenuto specifico. I titoli lunghi potrebbero richiedere un testo leggermente più piccolo. Gli slogan brevi e incisivi potrebbero gestire dimensioni più grandi. Alcuni stili di marca richiedono una spaziatura più stretta o più libera.

La bellezza delle variabili di design è che queste modifiche richiedono solo due clic. Apri il gestore variabile, regola la dimensione H1 o lo spazio grande variabile e osserva il turno applicare istantaneamente attraverso l'intero sito.

Il tuo H1 dovrebbe rimanere prominente ma leggibile su dispositivo mobile (minimo 47px). La tua spaziatura dovrebbe sembrare generosa ma non eccessiva su qualsiasi dimensione dello schermo. La divisione a due colonne ti offre un layout classico e professionale che funziona bene per le aziende di servizio in cui la fiducia e la chiarezza sono più che elementi di design appariscenti.

Mantenimento di rapporti dorati in sito con preset del gruppo di opzioni

Le variabili di progettazione gestiscono i numeri, ma i preset del gruppo di opzioni assicurano che siano utilizzate in modo coerente nell'intero sito.

Costruisci la tua prima sezione usando le variabili che abbiamo creato. Ottieni la tipografia, la spaziatura e il layout esattamente bene. Quindi fai clic sull'icona preimpostato accanto a ciascun gruppo di stile (tipografia, spaziatura, bordo, ecc.) E salvali come preset del gruppo di opzioni.

Questo crea blocchi di design riutilizzabili che contengono già le proporzioni del rapporto d'oro. Invece di iniziare da zero, applica questi preset ogni volta che aggiungi una nuova sezione o modulo.

Quando è necessario regolare le proporzioni in tutto il sito, modificare la variabile una volta. Ogni preimpostazione che utilizza IT si aggiorna immediatamente nell'intero sito. Nessuna caccia attraverso le singole pagine per apportare modifiche.

I tuoi rapporti d'oro rimangono coerenti senza il lavoro manuale.

Matematica al bellissimo design, Divi 5 lo rende facile

Quella sensazione fastidiosa quando i layout sembrano "quasi bene" alla fine ha senso. Non stavi essendo esigente: il tuo cervello stava raccogliendo relazioni proporzionali che si sentivano fuori.

I rapporti dorati ti danno un punto di partenza affidabile, ma la maggior parte dei costruttori ti fa fare i conti ogni volta. Le variabili di progettazione di Divi 5 cambia completamente. Calcola una volta le proporzioni 1.618, salvale come variabili, quindi fai clic per applicarle ovunque sul tuo sito.

Hai bisogno di regolare la spaziatura su cinquanta pagine? Modificare una variabile invece di modificare ogni pagina singolarmente. Vuoi una tipografia coerente che segue i rapporti dorati? Imposta i tuoi valori di clemp () una volta e osservali ridimensionare perfettamente su tutti i dispositivi.

La matematica funziona ovunque, ma Divi 5 in realtà rende pratico usare in modo coerente.