Modificare template e design di Kopage: colori, caratteri, intestazione e piè di pagina

Il design determina l'impatto visivo complessivo del tuo sito web Jimdo. Ciò include, tra le cose, il modello o tema utilizzato, i colori, i caratteri, l'intestazione, la navigazione e altri elementi di design.

Nel generatore di siti web classico di Kopage puoi regolare molte di queste impostazioni tramite l'interfaccia utente, senza dover scrivere autonomamente codice CSS o HTML.

In questa guida spieghiamo come sono collegati i diversi settori del design e a cosa dovresti fare attenzione quando modifichi l'aspetto di un sito web Kopage esistente.

Breve spiegazione: Le modifiche al design possono influire su diverse o persino su tutte le pagine del tuo sito web. I singoli testi, le immagini e i blocchi di contenuto vengono invece modificati come contenuti.

Cosa comprende il design di un sito web Jimdo? #

Il design non riguarda solo la scelta di un colore.

Diversi elementi di design determinano insieme come viene percepito il tuo sito web. Tra questi rientrano in particolare:

• Template o tema,
• Colori e schema cromatico,
• Tipi di carattere,
• Intestazione,
• Navigazione e progettazione dei menu,
• Sfondi,
• nonché ulteriori impostazioni globali di progettazione.

Da questi vanno distinti i contenuti veri e propri del tuo sito web. Testi, immagini, moduli o singoli blocchi di contenuto non sono impostazioni di design fondamentali, anche se la loro formattazione ovviamente influisce anch'essa sull'aspetto visivo.

Che cos'è un template o un tema? #

Un template o tema costituisce la base di design del tuo sito web Kopage.

Definisce le proprietà visive fondamentali e ti evita di dover sviluppare completamente ogni pagina e ogni elemento di design da zero.

Puoi usare un design esistente come punto di partenza e poi adattarlo alla tua presenza sul web.

Questo è particolarmente utile per i principianti: invece di dover prima sviluppare un web design completo, puoi concentrarti su colori, caratteri, contenuti e sulla struttura del tuo sito web.

Importante: Un template è una base di design e non un sostituto dei tuoi contenuti. Testi, immagini, struttura delle pagine e navigazione dovrebbero sempre adattarsi alla tua azienda o al tuo progetto.

Quale modello dovrei scegliere? #

Nella scelta, dovresti farti impressionare meno da immagini o testi di esempio e prestare maggiore attenzione alla struttura di fondo.

Un'immagine di esempio può essere sostituita in un secondo momento. È più importante capire se la struttura di base si adatta al sito web che hai in mente.

Fai particolare attenzione a se l'intestazione, la navigazione, la larghezza dei contenuti e il design generale corrispondono alle tue aspettative.

Per il sito web di una piccola azienda, ad esempio, un design chiaro e sobrio può essere più sensato di un template elaborato con molti effetti visivi.

Modificare il template di un sito web esistente #

Su un sito web già configurato, non dovresti trattare il cambio di un template allo stesso modo della scelta del design per un nuovo sito web.

Un template influenza le proprietà di design fondamentali. Perciò, prima di una modifica di design importante, dovresti verificare attentamente quali conseguenze avrà la modifica scelta sul tuo sito web esistente.

Controlla quindi in particolare:

• Home page e sottopagine importanti,
• Intestazione e navigazione,
• Dimensioni dei caratteri e interruzioni di riga,
• Immagini e blocchi di contenuti,
• Piè di pagina,
• nonché la visualizzazione su smartphone e tablet.

Attenzione: Non accettare alcuna opzione per sostituire o sovrascrivere i contenuti esistenti in un sito web esistente senza prima verificare attentamente ciò che questa funzione modifica. Il cambio di design e la sostituzione dei contenuti del sito web sono due operazioni distinte.

Modificare i colori in Kopage #

I colori sono tra gli elementi più importanti di un web design coordinato.

A tal proposito Kopage mette a disposizione diverse opzioni di colore e schemi cromatici. Inoltre, puoi personalizzare l'aspetto adattandolo ai tuoi colori.

Se la tua azienda possiede già un'identità visiva, dovresti utilizzare, se possibile, gli stessi colori di base anche sul tuo sito web.

In genere ti serve solo una tavolozza di colori limitata:

Colore principale
Colore di accento
Colore di sfondo
Colore del testo
eventualmente un colore neutro aggiuntivo

Troppi colori diversi fanno sembrare un sito web rapidamente caotico.

Quale colore dovrei usare per pulsanti e link? #

Gli elementi interativi dovrebbero essere facilmente riconoscibili per i visitatori.

Se il tuo colore principale viene utilizzato, ad esempio, per i pulsanti, dovresti mantenere questo utilizzo il più possibile coerente in tutto il sito web.

Un pulsante non dovrebbe essere blu su una pagina, verde su quella successiva e rosso su una terza pagina, a meno che non vi sia un motivo di design per farlo.

Lo stesso vale per i link e gli altri elementi con cui i visitatori possono interagire.

Consiglio pratico: Non usare i colori solo a scopo decorativo. Un colore d'accento ricorrente può aiutare i visitatori a riconoscere più velocemente pulsanti, link e azioni importanti.

Assicurarsi che ci sia un contrasto di colore sufficiente #

Una combinazione di colori può apparire visivamente attraente ed essere comunque poco leggibile.

Particolarmente importante è un contrasto sufficiente tra testo e sfondo.

Scritte chiare su uno sfondo quasi altrettanto chiaro o scritte scure su una superficie molto scura rendono la lettura inutilmente difficile.

Questo riguarda non solo i testi normali, ma anche i pulsanti, la navigazione, i moduli e altri elementi di controllo.

Verifica quindi dopo un cambio di colore non solo se il colore ti piace, ma anche se tutti i testi e le funzioni rimangono ben visibili.

Modificare i caratteri in Kopage #

Anche il carattere tipografico ha una grande influenza sull'effetto di un sito web.

Kopage mette a disposizione diversi caratteri tipografici per la progettazione. In questo modo puoi adattare l'aspetto tipografico al tuo sito web senza dover integrare manualmente font web personalizzati.

Al momento della selezione, la leggibilità dovrebbe essere più importante di un aspetto il più possibile stravagante.

Un carattere decorativo può funzionare, ad esempio, per singoli elementi di design, ma è spesso inadatto per testi continui più lunghi.

Non combinare troppi caratteri tipografici #

Per la maggior parte dei siti web sono sufficienti uno o al massimo due caratteri tipografici ben abbinati.

Una possibile suddivisione è ad esempio:

Titoli → Carattere A
Corpo del testo → Carattere B

Tuttavia, puoi anche utilizzare un'unica famiglia di caratteri per l'intero sito web e distinguere i titoli tramite le dimensioni e lo stile del carattere.

È fondamentale che il design rimanga coerente.

Consiglio pratico: Un carattere ben leggibile e utilizzato in modo coerente appare solitamente più professionale rispetto a diversi font vistosi sullo stesso sito web.

Distinguere i titoli dal testo continuo #

Una buona tipografia aiuta i visitatori a cogliere rapidamente la struttura di una pagina.

Le intestazioni principali dovrebbero distinguersi chiaramente dal normale testo continuo. I sottotitoli strutturano ulteriormente i contenuti più lunghi.

In questo modo non dovresti limitarti ad ingrandire visivamente i titoli, ma utilizzare i formati di intestazione previsti.

Una struttura dei contenuti sensata non è importante solo per la leggibilità, ma aiuta anche i motori di ricerca a comprendere meglio la struttura di una pagina.

Progettare l'intestazione del sito web #

L'intestazione è la parte superiore del tuo sito web e appartiene agli elementi che i visitatori vedono più frequentemente.

A seconda del design utilizzato, lì possono comparire, ad esempio, il logo, la navigazione e altri elementi.

L'intestazione dovrebbe rimanere pulita e trasmettere rapidamente ai visitatori su quale sito si trovano e come raggiungere le sezioni principali.

Un header molto grande con molti elementi può occupare uno spazio inutilmente grande, soprattutto sugli schermi più piccoli.

Usa il logo nell'intestazione #

Se possiedi un logo aziendale o associativo, dovresti utilizzare un file di immagine adatto allo scopo.

Assicurati in particolare che il logo sia sufficientemente nitido e non abbia dimensioni di file inutilmente grandi.

Per i loghi con sfondo trasparente è adatto un formato di immagine che supporta la trasparenza.

Verifica inoltre che il logo rimanga ben visibile sia sullo sfondo dell'intestazione scelto che sui display più piccoli.

Considerare la navigazione e l'intestazione insieme #

La navigazione fa spesso parte dell'header. Per questo motivo, entrambe le aree dovrebbero coordinarsi dal punto di vista del design.

Il menu deve essere ben leggibile e non dovrebbe essere sovraccarico di un numero eccessivo di voci principali.

Se il tuo sito web ha molte pagine, puoi strutturare i contenuti con sottopagine o sottomenu.

Ti spiegheremo come organizzare la struttura di pagine e menu su Gestire pagine, navigazione e sottomenu in Kopage.

Progettare il footer #

Il piè di pagina si trova in fondo a un sito web e viene spesso visualizzato su più pagine o su tutte le pagine.

Lì possono essere inseriti, a seconda della struttura, ad esempio informazioni di contatto, elementi di navigazione aggiuntivi o altre informazioni ricorrenti.

Anche in questo caso vale la regola: meno è spesso meglio. Il footer dovrebbe fornire informazioni utili e non trasformarsi in una seconda homepage sovraccarica.

Quando modifichi i contenuti del footer globale, controlla successivamente diverse pagine del tuo sito web.

Utilizzare correttamente gli sfondi #

I colori di sfondo e le immagini di sfondo possono separare visivamente le singole aree di un sito web.

Tuttavia, dovrebbero supportare il contenuto e non distrarre da esso.

Con le immagini di sfondo, devi prestare particolare attenzione alla leggibilità del testo sovrastante. Una foto movimentata dietro un lungo blocco di testo può compromettere notevolmente la leggibilità.

Anche la dimensione del file di un'immagine di sfondo dovrebbe essere presa in considerazione, poiché immagini unnecessarily grandi possono aumentare il tempo di caricamento di un sito web.

Personalizzare i blocchi di contenuto #

Oltre alle impostazioni di design globali, puoi anche influenzare la visualizzazione delle singole aree di contenuto.

Ciò consente, ad esempio, di evidenziare visivamente una determinata sezione senza modificare l'intero tema del sito web.

Questa distinzione è importante:

Modifica del design globale
→ influenza l'aspetto visivo fondamentale

Personalizzazione del blocco di contenuto
→ riguarda una specifica area di contenuto

Spieghiamo in dettaglio come sono strutturati e modificati i blocchi di contenuto su Creare contenuti con Kopage: modifica di blocchi di contenuto, testi e immagini.

Immagini come parte del design #

Anche la selezione delle tue immagini influisce notevolmente sull'aspetto visivo.

Cerca di utilizzare uno stile visivo il più possibile uniforme. Qualità d'immagine, formati o stili fortemente diversi possono risultare disordinati anche con un buon template.

Inoltre, non dovresti caricare immagini inutilmente grandi. Per un normale sito web, una foto non deve essere fornita nelle dimensioni originali di una fotocamera moderna.

Tratteremo la gestione delle immagini, nonché le gallerie e gli slider, sotto Creare immagini, gallerie fotografiche e slider in Kopage.

Controlla il design su smartphone e tablet #

Kopage lavora con design di siti web responsivi. Ciononostante, dovresti controllare la tua grafica su diverse dimensioni dello schermo.

È importante effettuare un controllo sui display più piccoli, soprattutto dopo modifiche a intestazione, navigazione, dimensioni dei caratteri, immagini o blocchi di contenuti estesi.

Fai attenzione, ad esempio, a se:

• andare a capo nei titoli in modo sensato,
• I testi rimangano ben leggibili,
• le immagini vengano visualizzate correttamente,
• i pulsanti siano facilmente utilizzabili,
• e la navigazione continui a funzionare in modo chiaro.

Puoi trovare una guida dettagliata all'indirizzo Design Responsive: ottimizzare il sito web Kopage per smartphone e tablet.

Design e ottimizzazione per i motori di ricerca #

Il web design e la SEO non sono argomenti completamente separati.

Una struttura della pagina chiara, contenuti leggibili, intestazioni utilizzate correttamente e una navigazione comprensibile non solo aiutano i visitatori, ma creano anche una base migliore per i motori di ricerca.

Le decisioni di design pulite, tuttavia, non sostituiscono l'ottimizzazione per i motori di ricerca.

Trattiamo quindi titolo della pagina, metadati e altre impostazioni SEO separatamente alla voce SEO con Kopage: titolo della pagina, metadati, URL e ottimizzazione per i motori di ricerca.

Personalizzazioni CSS #

Per la normale progettazione di un sito web Jimdo non sono necessarie conoscenze di CSS.

Se tuttavia desideri effettuare personalizzazioni molto individuali e possiedi le relative competenze, Kopage offre opzioni per codice proprio.

Dovresti applicare tali modifiche solo quando il risultato desiderato non può essere raggiunto in modo sensibile tramite le normali funzioni di design.

Attenzione: Il codice CSS o JavaScript personalizzato può influenzare l'aspetto o la funzione del tuo sito web. Utilizza codice personalizzato solo se comprendi le sue conseguenze.

Trattiamo l'uso di codice proprio separatamente in Utilizzare HTML, CSS e JavaScript personalizzati in Kopage.

Errori comuni nella progettazione di un sito web #

Molti problemi di design non derivano dalla mancanza di funzioni, ma da troppe idee di design utilizzate contemporaneamente.

Esempi tipici sono troppi colori, diversi caratteri tipografici differenti, intestazioni molto grandi, immagini di sfondo poco leggibili o pulsanti progettati in modo incoerente.

Anche un frequente cambiamento tra diversi stili di design all'interno dello stesso sito web rende difficile un aspetto uniforme.

Cerca quindi di stabilire alcune regole di base per il design e di mantenerle in tutto il sito web.

Definire un semplice design system #

Per questo non ti serve un manuale di design professionale.

Già alcune decisioni fondamentali aiutano a rendere il sito web coerente:

Colore principale
Colore d'accento
Colore del testo
Colore di sfondo

Carattere per i titoli
Carattere per il corpo del testo

Stile dei pulsanti
Stile delle immagini
Spaziatura tra le sezioni di contenuto

Se usi queste basi in modo coerente, il sito web risulta generalmente molto più sobrio e professionale.

Gestire le modifiche di design in modo controllato #

Su un sito web esistente, è consigliabile non modificare contemporaneamente template, colori, caratteri, header e tutti i blocchi di contenuto.

Lavora meglio passo dopo passo.

Modifica ad esempio prima i colori e controlla il risultato. Dopodiché puoi regolare la tipografia e verificare di nuovo.

Ciò ti consente di riconoscere più facilmente quale modifica è responsabile di un risultato inatteso.

Consiglio pratico: Dopo una modifica importante del design, non limitarti a controllare la homepage. Apri anche le pagine secondarie tipiche, i moduli di contatto, le sezioni del blog o altre funzioni utilizzate.

Quando non dovrei cambiare il template? #

Se sei soddisfatto della struttura di base del tuo sito web e desideri modificare solo colori, caratteri o singoli elementi di design, un cambio completo di template potrebbe non essere affatto necessario.

Verifica quindi prima se riesci a ottenere il risultato desiderato tramite le impostazioni di design esistenti.

Più un sito web esistente è esteso, più è importante apportare modifiche fondamentali in modo controllato.

Cosa dovrei verificare dopo una modifica al design? #

Dopo modifiche importanti, si consiglia un breve controllo di qualità.

Controllare la homepage
        ↓
Controllare le sottopagine importanti
        ↓
Testare la navigazione
        ↓
Testare link e pulsanti
        ↓
Controllare i moduli
        ↓
Verificare la visualizzazione su smartphone
        ↓
Aprire il sito web nel browser

In questo modo capisci subito se il nuovo design funziona anche al di fuori dell'area appena modificata.

Cosa succede dopo il design? #

Una volta definito il design di base del tuo sito web, puoi dedicarti ai contenuti effettivi delle pagine.

Per questo motivo i Content Blocks giocano un ruolo centrale. Con essi costruisci le singole sezioni delle pagine e combini testi, immagini e altri elementi.

Si prosegue quindi con Creare contenuti con Kopage: modifica di blocchi di contenuto, testi e immagini.

Riepilogo #

Il design di un sito web Kopage consiste in diverse aree collegate tra loro. Il template o il tema costituiscono la base visiva, mentre colori, caratteri, intestazione, navigazione e altre impostazioni concretizzano l'aspetto.

Nel caso di un nuovo sito web puoi definire queste basi in anticipo. Nel caso di un sito esistente, invece, dovresti apportare le modifiche più importanti gradualmente e controllare successivamente diverse pagine.

Distingui inoltre tra impostazioni di design globali e la progettazione di singoli contenuti. Non ogni modifica estetica richiede un cambio dell'intero template.

Un buon design per la home page non nasce dalla presenza del maggior numero possibile di effetti, colori e font, ma da un layout chiaro e uniforme che funzioni bene su desktop, tablet e smartphone.