Skip to main content

Designretning

Steget Designretning lar deg gjennomgå, forfine og ferdigstille det visuelle designet til temaet ditt før Theme Builder genererer det komplette temaet.

Oversikt​

Etter at du har fullført Discovery Interview, presenterer Theme Builder designretningen din med forhåndsvisning for både desktop og mobil. Dette lar deg se nøyaktig hvordan designet ditt vil se ut på forskjellige enheter før du forplikter deg til temaet.

Designretningskomponenter​

1. Fargepalett​

Temaets fargeskjema, inkludert:

  • Primærfarge — hovedmerkevarefargen som brukes til knapper, lenker og aksenter
  • Sekundærfarge — komplementærfarge for variasjon
  • Aksentfarge — fremhevelsesfarge for viktige elementer
  • Nøytrale farger — gråtoner og hvitt for bakgrunner og tekst
  • Tekstfarge — primærarbeidsfarge for lesbarhet

2. Typografi​

Skrifttypevalg for:

  • Overskriftsskrifttype — brukes til sidetitler og seksjonsoverskrifter
  • Brødtekstskrifttype — brukes til avsnitts- og innholdstekst
  • Skriftstørrelser — responsiv størrelse for forskjellige skjermstørrelser
  • Linjehøyde — avstanden mellom linjene for bedre lesbarhet
  • Skriftvekter — utgaver som fet, normal og lys

3. Layout og avstand​

  • Innholdsbredde — maksimal bredde for innholdet
  • Padding og marger — avstand rundt elementer
  • Rutenett (Grid system) — kolonneoppsett for responsivt design
  • Mellomrom mellom komponenter — avstand mellom UI-elementer

4. Visuelle elementer​

  • Knappestiler — design for primære, sekundære og tertiære knapper
  • Kortdesign — oppsett for innholdsblokker
  • Ikoner — ikonstil og størrelse
  • Bokser og skygger — subtil visuell dybde
  • Hover-effekter — styling for interaktive tilstander

Forhåndsvisning​

Desktop-forhåndsvisning​

Desktop-forhåndsvisningen viser designet ditt i full bredde (vanligvis 1200 piksler eller bredere):

  • Full navigasjonsmeny
  • Komplett layout med alle kolonner
  • Stor typografi og avstand
  • Alle visuelle elementer i full størrelse

Mobil-forhåndsvisning​

Mobil-forhåndsvisningen viser designet ditt i mobilbredde (vanligvis 375 piksler):

  • Responsiv navigasjon (hamburger-meny)
  • Én-kolonners layout
  • Justert typografi og avstand
  • Berøringsvennlige knappestørrelser

Responsivt bruddpunkt​

Theme Builder genererer forhåndsvisninger ved disse bruddpunktene:

EnhetBreddeForhåndsvisning
Mobil375 pikslerPortretttelefon
Nettbrett768 pikslerLandskapnettbrett
Desktop1200 pikslerFullbredde desktop
Stor desktop1920 pikslerUltra-bred skjerm

Forbedring av designet ditt​

Gjennomføre justeringer​

Du kan forbedre designretningen din ved å:

  1. Justere farger — endre hvilken som helst farge i paletten
  2. Endre fonter — velge forskjellige skrifttyper
  3. Modifisere avstand — justere padding og marger
  4. Oppdatere layout — endre innholdsbredder og rutenettkolonner
  5. Tilpasse elementer — endre knappestiler, kortdesign, osv.

Oppdateringer i forhåndsvisningen​

Endringene reflekteres i sanntid:

  • Desktop-forhåndsvisningen oppdateres umiddelbart
  • Mobil-forhåndsvisningen oppdateres umiddelbart
  • Alle responsive bruddpunkter oppdateres
  • Du kan bytte mellom forhåndsvisningene for å bekrefte endringene

Sammenligningsvisning​

Sammenlign designretningen din med:

  • Opprinnelig design — se hva som har endret seg
  • Konkurrentdesign — sammenlign med inspirasjonsnettsteder
  • Tidligere versjoner — gå tilbake til tidligere designretninger

Godkjenning av designretning​

Når du er fornøyd med designet ditt:

  1. Gjennomgå begge forhåndsvisningene — bekreft at både desktop og mobil ser bra ut
  2. Sjekk alle farger — sørg for kontrast og tilgjengelighet
  3. Test typografien — bekreft lesbarhet i alle størrelser
  4. Bekreft layouten — sjekk avstand og justering
  5. Godkjenn designet — fortsett til tema-generering

Neste steg​

Etter at du har godkjent designretningen din:

  1. Theme Builder genererer ditt komplette tema
  2. Temaet installeres på WordPress-nettstedet ditt
  3. Du kan fortsette å tilpasse ved hjelp av WordPress Customizer
  4. Fortsett til Hospitality Menus eller andre funksjoner

Beste praksis​

  • Test på ekte enheter — bruk faktiske telefoner og nettbrett hvis mulig
  • Sjekk lesbarhet — sørg for at teksten er lesbar i alle størrelser
  • Verifiser kontrast — bruk Validate Palette Contrast for tilgjengelighet
  • Vurder ytelse — optimaliser bilder og fonter for hastighet
  • Planlegg innhold — sørg for at layouten fungerer med ditt faktiske innhold

Feilsøking​

Forhåndsvisningen oppdateres ikke​

  • Oppdater siden
  • Tøm nettleserens hurtigbuffer (cache)
  • Prøv en annen nettleser
  • Sjekk internettforbindelsen

Fargene ser annerledes ut​

  • Sjekk fargeinnstillingene på monitoren
  • Prøv på forskjellige enheter
  • Verifiser fargekontrast med tilgjengelighetsverktøy
  • Vurder fargeblinde simulatorer

Typografiske problemer​

  • Verifiser at skrifttilene lastes
  • Sjekk skriftstørrelsen ved forskjellige bruddpunkter
  • Test med faktisk innhold
  • Vurder linjelengden for lesbarhet

Relatert dokumentasjon​