Creazione di un sistema di dimensionamento e spaziatura con variabili di progettazione Divi 5

Divi 5 ti dà un modo strutturato per definire, gestire e riutilizzare le decisioni di dimensionamento e spaziatura in tutto il tuo sito. Utilizzando variabili e preset di progettazione, è possibile creare un sistema di progettazione scalabile che sia facile da mantenere, regolare e replicare.

In questo post, ti mostreremo come pensare nei sistemi e ti accompagneremo attraverso una costruzione di un sistema di dimensionamento e spaziatura completo.

Divi 5 è pronto per essere utilizzato su qualsiasi nuovo sito che crei, ma si suggerisce di trattenere i siti esistenti (per ora).

Perché usare un sistema di dimensionamento e spaziatura?

La maggior parte degli utenti Divi desidera coerenza in layout, margini e tipografia. Ma pochi si prendono il tempo per definire questi standard all'inizio. O se lo fai, probabilmente l'hai fatto tramite un tema per bambini fortemente in stile. Ora puoi:

Iscriviti al nostro canale YouTube

1. Definire una variabile numerica una volta (come 16px o morsetto (16px, 4vw, 48px))
2. Assegnalo ai preset del modulo/elemento
3. O preset di gruppi di opzioni (come spaziatura o dimensionamento)
4. Aggiorna la variabile in seguito e vedere le modifiche riflettete in tutto il sito
5. Usa meno CSS in generale per le pagine più sottili

Con altri costruttori di siti, i progettisti tendono a appoggiarsi pesantemente ai framework CSS per applicare una spaziatura e dimensionamento coerenti durante l'utilizzo di un sistema che possono prendere da un progetto all'altro. Con Divi 5, puoi creare il tuo "framework di progettazione" che funzioni all'interno dell'interfaccia utente Divi utilizzando le variabili di progettazione di Divi senza dover toccare una singola riga di codice.

Dimensione dell'elemento, imbottitura e margini

Ogni elemento Web ha tre componenti che influenzano la spaziatura e le dimensioni complessive:

• Dimensione dell'elemento : la dimensione del contenuto principale di un elemento, definita dalla larghezza e dall'altezza.
• Implementazione : spazio aggiunto all'interno di un elemento, aumentando la sua area cliccabile e le dimensioni visive.
• Margine : spazio aggiunto al di fuori di un elemento, allontanandolo da altri elementi.

Esempi pratici per gli elementi Divi

In generale, è così che puoi aspettarti di utilizzare l'imbottitura e il margine in Divi:

• Le sezioni di solito hanno imbottitura superiore e inferiore (non margine) per creare una spaziatura verticale all'interno di una pagina.
• Le righe beneficiano spesso di imbottitura verticale, ma altrimenti consentono ai contenuti di riempire.
• Le colonne si concentrano principalmente sul margine applicato per creare lacune di colonne.
• I moduli usano comunemente un margine inferiore per separare chiaramente gli elementi impilati, ma la quantità di margine dipende dai raggruppamenti visivi.

I valori di spaziatura predefiniti di Divi

I principianti del web design che usano Divi probabilmente non si rendono nemmeno conto che Divi prende alcune decisioni di spaziatura per te. I designer più esperti spesso li regolano per abbinare i loro obiettivi, ma questi impostazioni predefinite consentono alla maggior parte delle persone di iniziare rapidamente i loro progetti.

Queste impostazioni predefinite possono essere utili, ma i designer spesso preferiscono stabilire i propri standard di spaziatura. Se volessi vedere come sarebbe la tua pagina senza l'imbottitura predefinita impostata, puoi farlo:

1. Vai a qualsiasi elemento e trova il gruppo di opzioni di spaziatura nella scheda Design .
2. Aprire il gruppo di opzioni predefinito e impostare l'imbottitura superiore e inferiore su 0 (zero).
3. Salva il preimpostazione OG di spaziatura predefinita per applicarlo in tutto il sito a ogni elemento.

Questo ti mostrerà come sono le tue pagine senza le impostazioni predefinite di Divi. Non sembrerà buono, ma inizierai a vedere cosa devi fare per creare il tuo sistema di progettazione (oppure puoi usare le impostazioni predefinite di Divi e apportare modifiche come ritieni opportuno).

Utilizzando una scala di spaziatura a 8 punti

La scala a 8 punti è uno schema di layout in cui i valori di spaziatura sono costruiti usando incrementi di 8. Quindi, invece di usare valori arbitrari come 13px o 27px, si attacca a valori come 8, 16, 24, 32, 40, 48 e così via.

Questo sistema aiuta:

• Mantieni il ritmo verticale e orizzontale usando una rubrica coerente di dimensioni
• Assicurarsi che la spaziatura si accumuli in modo pulito attraverso i punti di interruzione
• Accelerare il processo decisionale (meno scelte = design più veloce)

È possibile utilizzare la scala in PX o REM, a seconda delle preferenze o del tipo di scala. Ad esempio, 16px diventa 1rem quando la dimensione del carattere di base è 16px.

Mockup di una pagina che raggruppa la tua attenzione per selezionare le aree e spinge i visitatori verso il basso con una spaziatura verticale

La spaziatura verticale dice al lettore dove concentrarsi. Gli articoli raggruppati insieme a una spaziatura più stretta sono naturalmente visti come relativi l'uno all'altro. Le cose separate da più spazio indicano una nuova idea.

Come creare un sistema di dimensionamento e spaziatura

Un sistema per le dimensioni e gli spazi è costituito da due cose: l'impostazione di variabili o token che verranno utilizzati in un design e utilizzando costantemente quelle variabili in tutto il design del sito. Ecco come puoi farlo con Divi.

Passaggio 1: creare variabili numeriche nel gestore delle variabili di progettazione

Divi 5 introduce un'interfaccia visiva per la definizione di valori numerici riutilizzabili. Ogni variabile numero include:

1. Un nome facilmente richiamabile (ad es., Gap-sm, text-h1) che non è troppo lungo
2. Un valore numerico o funzione calc () o morsetto ()
3. Un'unità CSS (PX, REM, %, VW, ecc.)

A causa del gestore variabile, non è necessario scrivere variabili CSS in un foglio di stile separato. Si impostano tutti questi nel gestore delle variabili di progettazione e quindi selezionali dai campi di input nel Visual Builder.

Di seguito è riportato un set iniziale completo di variabili numeriche per abbinare un sistema di progettazione a 8 punti. Non devi usarlo, ma ti dà un'idea di ciò che è possibile.

Ed ecco come sembra avere questo compilato nel gestore variabile.

Si noti che questi valori di spaziatura saranno utili nella prossima funzione Flexbox di Divi 5

Passaggio 2: pianificazione del tuo sistema di spaziatura a 8 punti

Le tue pagine conterranno in genere schemi di elementi ripetuti. Cerca gruppi o cluster comuni come:

• Intestazione, paragrafo, pulsante
• Piccola voce, grande voce, paragrafo
• Icona, paragrafo
• Carte contenenti più elementi

Con i tuoi wireframe iniziali (o progetti di segnaposto), avrai l'opportunità di creare potenziali modelli. Creerai anche cose che non si adattano a motivi che dovrai decidere come gestire. Ma questo fa tutto parte della progettazione.

Puoi farlo in Figma o creando direttamente una pagina Wireframe con elementi segnaposto in Divi. Basta ottenere tutto ciò che puoi stabilire su una pagina. Puoi usare un'estensione Chrome chiamata Misure Everything per aiutarti a visualizzare la spaziatura (inizialmente con la spaziatura predefinita di Divi) mentre inizi a regolare quelle.

Per utilizzare l'estensione, attivarla dalla barra degli strumenti di estensione Chrome. Quindi fai clic su un elemento nella pagina che ti interessa, focalizzando lo strumento su quell'elemento. Da lì, sposta il mouse per misurare vari aspetti tra l'elemento attualmente selezionato e altri elementi mentre si libra su di loro.

Passaggio 3: assegnare variabili numeriche ai preimpostazioni del gruppo di opzioni

Con un wireframe di una pagina impostata e una variabile di design in atto, puoi iniziare a apportare modifiche alla spaziatura e al dimensionamento nella tua pagina. Puoi iniziare prima con gruppi di contenuti. Concentriamoci sull'intestazione, il paragrafo e il pulsante nella sezione Hero.

Wireframe con contenuto di segnaposto e dimensionamento del carattere/carattere in posizione

Nota che a questo punto, vorrai già una prima bozza della tua tipografia. Ciò include caratteri, dimensionamento del carattere e spaziatura dell'altezza/lettera della linea. Senza questo, è molto probabile che riescali a tutte le dimensioni una volta stabilito il tuo sistema tipografico.

Esempio di opzioni di dimensionamento tipografico impostate come variabili numeriche

Ora, vogliamo valutare quale spaziatura predefinita viene applicata nel design. Per fare questo, puoi guardare il grafico prima nel post e confrontarlo con ciò che stiamo succedendo all'interno della sezione Hero. Ovviamente, c'è una sezione (n. 1) e due righe (#2 e#3). Per ora, imposteremo la riga di riga predefinita/imbottitura inferiore su zero.

Successivamente, abbiamo due opzioni per la spaziatura delle sezioni: possiamo impostare l'imbottitura a zero e capirla in seguito, oppure possiamo impostare un po 'di imbottitura preliminare e inferiore nella predefinire degli elementi predefiniti per sembrare qualcosa del genere:

• Desktop : imbottitura superiore e inferiore impostata su Space-XXXL
• Tablet : imbottitura superiore e inferiore impostata su Space-XXL
• Mobile : imbottitura superiore e inferiore impostata su Space-XL

Ma quello che fai dipende interamente da te e dalle variabili di progettazione di spaziatura che finisci per impostare (o usare le impostazioni predefinite se preferisci adottarle come proprio). Cosa abbiamo in questo momento (con imbottitura di riga predefinita impostata su zero e imbottitura a sezione personalizzata):

Passaggio 4: spaziatura del modulo

La prossima cosa da fare è lavorare sulla spaziatura tra i moduli all'interno di sezioni/righe. La chiave è scegliere un modo coerente per applicare la spaziatura ai moduli.

Hai opzioni, puoi dividere la spaziatura in diversi modi:

• Applicare la spaziatura al margine-top
• Applicare la spaziatura a margine-bottom
• Applicare la spaziatura uniforme tra margine-top e margine-bottom

È importante ricordare che molti moduli hanno un fondo di margine applicato per impostazione predefinita, quindi ti consiglio di andare con quella convention e iniziare lì quando si imposta il paradigma di spaziatura. Per cominciare, è possibile impostare i margini superiore/inferiore su zero per vedere come appare la spaziatura tra i moduli senza impostazioni predefinite.

All'interno di questa sezione, abbiamo applicato 0px al margine superiore e in basso per vedere tutti questi moduli senza spaziatura predefinita

Ora, possiamo iniziare ad assegnare variabili di progettazione di spaziatura al fondo a margine di questi moduli per creare un sistema di spaziatura. Inizieremo con l'intestazione e il testo del corpo.

Quando inizi a vedere modelli con la spaziatura del modulo, potresti voler aggiungere queste scelte di spaziatura ai preset di elementi predefiniti. E poiché è necessario creare regole di spaziatura per elementi che si discostano, è possibile creare preset di elementi personalizzati. Nuovi elementi utilizzeranno da lì il preimpostazione predefinita, ma puoi selezionare rapidamente un preimpostazione di elementi personalizzati per varie situazioni.

Come userai Divi 5 per il dimensionamento e la spaziatura?

Creare un sistema di spaziatura e dimensionamento di cui sei soddisfatto di praticare i fondamentali e appoggiarti agli strumenti a portata di mano. Divi 5 sta per creare il sistema di progettazione di fatto per i siti Web WordPress. Colpisce il punto debole per avere molta flessibilità, ma è facile avvolgere la testa.

Se non hai mai preso in considerazione la creazione di sistemi di progettazione, Divi ti consente di pensarci da una variabile di progettazione e un livello preimpostato, non solo a livello di singolo modulo o elemento. Questo ti aiuta ad applicare costantemente le decisioni di progettazione di base agli elementi più velocemente che mai.

Proverai il sistema a 8 punti o hai in programma altre cose? Inoltre, questa è la prima volta che stai pensando alla spaziatura predefinita di Divi? Rende la progettazione con Divi Automatic, ma per i designer professionisti, potresti voler cambiare alcune di quelle impostazioni predefinite per ottenere la tua visione perfetta per i pixel.

Divi 5 è pronto per essere utilizzato su qualsiasi nuovo sito che crei.