Passa al contenuto principale

Direzione del Design

Il passaggio Direzione del Design ti permette di rivedere, affinare e finalizzare il design visivo del tuo tema prima che Theme Builder generi il tema completo.

Panoramica​

Dopo aver completato l'Intervista di Scoperta (Discovery Interview), Theme Builder ti presenta la direzione del design con la visualizzazione di anteprima per desktop e mobile. Questo ti permette di vedere esattamente come apparirà il tuo design su diversi dispositivi prima di impegnarti con il tema.

Componenti della Direzione del Design​

1. Palette Colori​

Lo schema colori del tuo tema, che include:

  • Colore primario — colore principale del brand utilizzato per pulsanti, link e accenti
  • Colore secondario — colore complementare per variare
  • Colore d'accento — colore di evidenziazione per elementi importanti
  • Colori neutri — grigi e bianchi per sfondi e testo
  • Colore del testo — colore principale del testo per la leggibilità

2. Tipografia​

Selezione di font per:

  • Font per titoli — utilizzato per i titoli delle pagine e gli intestazioni delle sezioni
  • Font per il corpo del testo — utilizzato per i paragrafi e i contenuti
  • Dimensioni del font — dimensionamento reattivo per diverse dimensioni dello schermo
  • Interlinea — spaziatura tra le righe per la leggibilità
  • Pesature del font — variazioni grassetto, regolare e leggero

3. Layout e Spaziatura​

  • Larghezza del contenitore — larghezza massima per i contenuti
  • Padding e margini — spaziatura attorno agli elementi
  • Sistema a griglia — layout a colonne per un design reattivo
  • Spaziatura dei componenti — distanza tra gli elementi dell'interfaccia utente (UI)

4. Elementi Visivi​

  • Stili dei pulsanti — design per pulsanti primari, secondari e terziari
  • Design delle schede (Card) — layout per blocchi di contenuto
  • Icone — stile e dimensionamento delle icone
  • Bordi e ombre — profondità visiva sottile
  • Effetti al passaggio del mouse (Hover effects) — stile per lo stato interattivo

Visualizzazione Anteprima (Preview Rendering)​

Anteprima Desktop​

L'anteprima desktop mostra il tuo design a larghezza intera (tipicamente 1200px o superiore):

  • Menu di navigazione completo
  • Layout completo con tutte le colonne
  • Tipografia e spaziatura ampie
  • Tutti gli elementi visivi a grandezza naturale

Anteprima Mobile​

L'anteprima mobile mostra il tuo design a larghezza mobile (tipicamente 375px):

  • Navigazione reattiva (menu hamburger)
  • Layout a colonna singola
  • Tipografia e spaziatura adattate
  • Dimensioni dei pulsanti adatte al tocco

Punti di interruzione reattivi (Responsive Breakpoints)​

Theme Builder genera anteprime a questi punti di interruzione:

DispositivoLarghezzaAnteprima
Mobile375pxTelefono in verticale
Tablet768pxTablet in orizzontale
Desktop1200pxDesktop a larghezza intera
Desktop grande1920pxSchermo ultra-ampio

Affinare il Design​

Effettuare Modifiche​

Puoi affinare la tua direzione del design facendo quanto segue:

  1. Regolare i colori — cambia qualsiasi colore della palette
  2. Cambiare i font — seleziona caratteri diversi
  3. Modificare la spaziatura — regola padding e margini
  4. Aggiornare il layout — cambia larghezze dei contenitori e colonne della griglia
  5. Personalizzare gli elementi — modifica stili dei pulsanti, design delle schede, ecc.

Aggiornamenti dell'Anteprima​

Le modifiche vengono riflesse in tempo reale:

  • L'anteprima desktop si aggiorna immediatamente
  • L'anteprima mobile si aggiorna immediatamente
  • Tutti i punti di interruzione reattivi vengono aggiornati
  • Puoi passare tra le anteprime per verificare le modifiche

Vista di Confronto​

Confronta la tua direzione del design con:

  • Design originale — vedi cosa è cambiato
  • Design dei concorrenti — confronta con siti di ispirazione
  • Versioni precedenti — torna a direzioni di design precedenti

Approvazione della Direzione del Design​

Una volta che sei soddisfatto del tuo design:

  1. Rivedi entrambe le anteprime — verifica che desktop e mobile siano a posto
  2. Controlla tutti i colori — assicurati contrasto e accessibilità
  3. Testa la tipografia — verifica la leggibilità in tutte le dimensioni
  4. Conferma il layout — controlla spaziatura e allineamento
  5. Approva il design — procedi alla generazione del tema

Prossimi Passaggi​

Dopo aver approvato la direzione del design:

  1. Theme Builder genera il tuo tema completo
  2. Il tema viene installato sul tuo sito WordPress
  3. Puoi personalizzare ulteriormente usando il customizer di WordPress
  4. Procedi a Hospitality Menus o altre funzionalità

Best Practices​

  • Testare su dispositivi reali — usa telefoni e tablet reali se possibile
  • Verificare la leggibilità — assicurati che il testo sia leggibile in tutte le dimensioni
  • Verificare il contrasto — usa Validate Palette Contrast per l'accessibilità
  • Considerare le prestazioni — ottimizza immagini e font per la velocità
  • Pianificare i contenuti — assicurati che il layout funzioni con i tuoi contenuti effettivi

Risoluzione dei Problemi (Troubleshooting)​

L'anteprima non si aggiorna​

  • Aggiorna la pagina
  • Cancella la cache del browser
  • Prova un browser diverso
  • Controlla la connessione internet

I colori sembrano diversi​

  • Controlla le impostazioni colore del monitor
  • Prova su diversi dispositivi
  • Verifica il contrasto dei colori con strumenti di accessibilità
  • Considera i simulatori di daltonismo

Problemi di tipografia​

  • Verifica che i file font vengano caricati
  • Controlla la dimensione del font a diversi breakpoint
  • Testa con contenuti reali
  • Considera la lunghezza delle righe per la leggibilità