510 Diviso Disegni del sito web

Design unico di siti web divisi per una sezione in due parti coerente

Il design di siti web divisi (Split) si concentra su come una sezione in due parti si inserisce nel linguaggio visivo di un sito più ampio. Il blocco stesso è suddiviso in due metà collegate, accostando comunemente un'immagine di forte impatto a un titolo, testo e un pulsante.

La prospettiva del web design non impone a ogni pagina di replicare lo stesso layout diviso. La sezione deve invece seguire gli stessi principi di colore, tipografia, spaziatura, stile delle immagini e gerarchia che rendono armonioso il resto del sito.

Adattare il blocco diviso al linguaggio visivo del sito web

Una sezione divisa può adottare un trattamento visivo sulla home page e uno differente in una pagina interna, continuando a far parte del medesimo design system del sito web.

Ad esempio:

• una metà con immagine scura può affiancare un'area di testo chiara, utilizzando entrambe la medesima palette di progetto;
• un'immagine editoriale di grandi dimensioni può combinarsi con la tipografia definita nel sistema di caratteri del sito;
• un blocco asimmetrico può seguire il medesimo ritmo di spaziatura applicato in altre sezioni;
• una CTA può adottare lo stesso stile di pulsante presente nel resto del sito.

Il Grid Element di Nicepage consente di impostare la struttura sottostante a due aree all'interno della sezione.

Bilanciare contrasto e coerenza

Le due metà devono differenziarsi a sufficienza da rendere evidente la composizione divisa, senza tuttavia dare l'impressione di provenire da siti web non correlati.

Il trattamento delle immagini, il colore di sfondo, l'allineamento del testo, le spaziature e il peso visivo possono variare tra i due lati. La coerenza nasce da regole di progettazione condivise, non dal rendere identiche entrambe le metà.

Usare il design system del sito per valorizzare la sezione

Le impostazioni del sito di Nicepage supportano i colori del tema attraverso una combinazione di colori globale, mentre le combinazioni di caratteri e gli stili tipografici aiutano a mantenere un trattamento del testo coerente in tutte le pagine del progetto.

Una sezione divisa può sfruttare queste impostazioni condivise dando al contempo risalto a uno dei due lati. Il design system supporta il blocco, senza richiedere che il pattern diviso diventi un motivo obbligatorio e ripetuto su tutto il sito.

Mantenere la flessibilità del layout diviso tra le diverse pagine

Pagine diverse possono adottare composizioni divise differenti in base ai propri contenuti. Una home page può richiedere un blocco di immagini e introduzione più esteso, mentre una pagina di servizi o portfolio può optare per una sezione in due parti più discreta e con proporzioni diverse.

Ciò che deve rimanere coerente è il linguaggio visivo complessivo del sito: tipografia, relazioni cromatiche, stile delle immagini, logica delle spaziature e trattamento delle CTA.

Domande frequenti sul design di siti web divisi

I colori del sito possono rimanere coerenti tra le varie pagine in Nicepage?

Sì. I colori del tema possono essere configurati nelle impostazioni del sito e applicati tramite una combinazione di colori globale a tutte le pagine di un progetto Nicepage.

Posso usare i Google Fonts all'interno della tipografia del sito web?

Sì. Nicepage include i Google Fonts utilizzabili negli ambienti di modifica supportati, tra cui le Desktop Applications, il plugin per WordPress e l'estensione per Joomla.

Tutte le sezioni divise devono apparire identiche all'interno del sito web?

No. Pagine diverse possono variare il posizionamento delle immagini, le proporzioni e la densità dei contenuti, condividendo comunque le stesse regole generali per tipografia, colore, spaziatura e gerarchia visiva.

Adottare un design di sito diviso impone l'uso del layout diviso per l'intero sito?

No. La struttura divisa è un pattern di sezione. Puoi utilizzarla dove opportuno, mentre il resto del sito può impiegare altri layout coerenti con lo stesso design system.

Integrare il blocco diviso nel design system del sito web

Scegli una sezione divisa adatta ai tuoi contenuti, quindi personalizza immagini, testi, pulsanti, proporzioni e comportamento responsive nell'editor Nicepage. Applica la tipografia, i colori, le spaziature e lo stile visivo definiti per il sito affinché il blocco risulti distintivo senza disconnettersi dal resto del sito web.