Hop til hovedindhold

Designretning

Trinnet Designretning giver dig mulighed for at gennemgå, forfine og færdiggøre dit temas visuelle design, før Theme Builder genererer det komplette tema.

Oversigt​

Efter du har gennemført Discovery Interview, præsenterer Theme Builder din designretning med rendering af forhåndsvisning på desktop og mobil. Det giver dig mulighed for at se præcis, hvordan dit design vil se ud på forskellige enheder, før du beslutter dig for temaet.

Komponenter i designretning​

1. Farvepalette​

Dit temas farveskema, inklusive:

  • Primær farve — hovedbrandfarve, der bruges til knapper, links og accenter
  • Sekundær farve — komplementær farve for variation
  • Accentfarve — fremhævelsesfarve til vigtige elementer
  • Neutrale farver — gråtoner og hvide nuancer til baggrunde og tekst
  • Tekstfarve — primær tekstfarve for læsbarhed

2. Typografi​

Skrifttypevalg for:

  • Overskriftsskrift — bruges til sidetitler og sektionsoverskrifter
  • Brødtekstskrift — bruges til afsnitstekst og indhold
  • Skriftstørrelser — responsiv skalering til forskellige skærmstørrelser
  • Linjehøjde — afstand mellem linjer for læsbarhed
  • Skriftvægte — fede, normale og lette variationer

3. Layout og afstand​

  • Containerbredde — maksimal bredde for indhold
  • Padding og margener — afstand omkring elementer
  • Gittersystem — kolonnelayout til responsivt design
  • Komponentafstand — afstand mellem UI-elementer

4. Visuelle elementer​

  • Knapstile — primære, sekundære og tertiære knapdesigns
  • Kortdesigns — layouts til indholdsblokke
  • Ikoner — ikonstil og -størrelse
  • Kanter og skygger — subtil visuel dybde
  • Hovereffekter — styling af interaktiv tilstand

Rendering af forhåndsvisning​

Desktop-forhåndsvisning​

Desktop-forhåndsvisningen viser dit design i fuld bredde (typisk 1200px eller bredere):

  • Fuld navigationsmenu
  • Komplet layout med alle kolonner
  • Stor typografi og afstand
  • Alle visuelle elementer i fuld størrelse

Mobil-forhåndsvisning​

Mobil-forhåndsvisningen viser dit design i mobilbredde (typisk 375px):

  • Responsiv navigation (hamburgermenu)
  • Layout med én kolonne
  • Justeret typografi og afstand
  • Berøringsvenlige knapstørrelser

Responsive breakpoints​

Theme Builder renderer forhåndsvisninger ved disse breakpoints:

EnhedBreddeForhåndsvisning
Mobil375pxTelefon i portrætformat
Tablet768pxTablet i landskabsformat
Desktop1200pxDesktop i fuld bredde
Stor desktop1920pxUltrawide-skærm

Forfining af dit design​

Foretag justeringer​

Du kan forfine din designretning ved at:

  1. Justere farver — ændr en hvilken som helst farve i paletten
  2. Ændre skrifttyper — vælg andre skrifttyper
  3. Tilpasse afstand — juster padding og margener
  4. Opdatere layout — ændr containerbredder og gitterkolonner
  5. Tilpasse elementer — ændr knapstile, kortdesigns osv.

Opdateringer af forhåndsvisning​

Ændringer afspejles i realtid:

  • Desktop-forhåndsvisningen opdateres straks
  • Mobil-forhåndsvisningen opdateres straks
  • Alle responsive breakpoints opdateres
  • Du kan skifte mellem forhåndsvisninger for at bekræfte ændringer

Sammenligningsvisning​

Sammenlign din designretning med:

  • Oprindeligt design — se, hvad der er ændret
  • Konkurrentdesigns — sammenlign med inspirationssites
  • Tidligere versioner — vend tilbage til tidligere designretninger

Godkendelse af designretning​

Når du er tilfreds med dit design:

  1. Gennemgå begge forhåndsvisninger — bekræft, at desktop og mobil ser godt ud
  2. Tjek alle farver — sørg for kontrast og tilgængelighed
  3. Test typografi — bekræft læsbarhed i alle størrelser
  4. Bekræft layout — tjek afstand og justering
  5. Godkend design — fortsæt til temagenerering

Næste trin​

Efter godkendelse af din designretning:

  1. Theme Builder genererer dit komplette tema
  2. Temaet installeres på dit WordPress site
  3. Du kan tilpasse yderligere ved hjælp af WordPress customizer
  4. Fortsæt til Hospitality Menus eller andre funktioner

Bedste praksis​

  • Test på rigtige enheder — brug faktiske telefoner og tablets, hvis det er muligt
  • Tjek læsbarhed — sørg for, at tekst er læsbar i alle størrelser
  • Bekræft kontrast — brug Validate Palette Contrast for tilgængelighed
  • Overvej ydeevne — optimer billeder og skrifttyper for hastighed
  • Planlæg efter indhold — sørg for, at layoutet fungerer med dit faktiske indhold

Fejlfinding​

Forhåndsvisning opdateres ikke​

  • Opdater siden
  • Ryd browsercache
  • Prøv en anden browser
  • Tjek internetforbindelsen

Farver ser anderledes ud​

  • Tjek skærmens farveindstillinger
  • Prøv på forskellige enheder
  • Bekræft farvekontrast med tilgængelighedsværktøjer
  • Overvej simulatorer for farveblindhed

Typografiproblemer​

  • Bekræft, at skrifttypefiler indlæses
  • Tjek skriftstørrelse ved forskellige breakpoints
  • Test med faktisk indhold
  • Overvej linjelængde for læsbarhed