Hoppa till huvudinnehåll

Designriktning

Steget Designriktning låter dig granska, förfina och slutföra din temas visuella design innan Theme Builder genererar det kompletta temat.

Översikt​

Efter att du har slutfört Discovery Interview presenterar Theme Builder din designriktning med förhandsvisning för skrivbord och mobil. Detta låter dig se exakt hur din design kommer att se ut på olika enheter innan du bestämmer dig för temat.

Komponenter i Designriktningen​

1. Färgpraktik (Color Palette)​

Ditt temas färgschema, inklusive:

  • Huvudfärg (Primary color) — huvudvarumärkesfärgen som används för knappar, länkar och accenter
  • Sekundärfärg (Secondary color) — en komplementär färg för variation
  • Accentfärg (Accent color) — en framhävande färg för viktiga element
  • Neutrala färger (Neutral colors) — grått och vitt för bakgrunder och text
  • Textfärg (Text color) — primär textfärg för läsbarhet

2. Typografi​

Typsnittsförslag för:

  • Rubriktypsnitt (Heading font) — används för sidtitlar och sektionsrubriker
  • Brödtexttypsnitt (Body font) — används för styckestext och innehåll
  • Typsnittsstorlekar (Font sizes) — responsiv storlek för olika skärmstorlekar
  • Radavstånd (Line height) — avståndet mellan raderna för bättre läsbarhet
  • Tyngd (Font weights) — fet, normal och ljus variation

3. Layout och avstånd (Layout and Spacing)​

  • Innehållsbredd (Container width) — maximal bredd för innehållet
  • Padding och marginaler (Padding and margins) — avståndet runt element
  • Rutnätssystem (Grid system) — kolumnlayout för responsiv design
  • Komponentavstånd (Component spacing) — avståndet mellan UI-element

4. Visuella element (Visual Elements)​

  • Knappstilar (Button styles) — design för primära, sekundära och tertiära knappar
  • Kortdesign (Card designs) — layouter för innehållsblock
  • Ikoner (Icons) — ikonstil och storlek
  • Gränser och skuggor (Borders and shadows) — subtil visuell djupkänsla
  • Hover-effekter (Hover effects) — styling för interaktiva tillstånd

Förhandsvisning (Preview Rendering)​

Skrivbordsförhandsvisning (Desktop Preview)​

Skrivbordsförhandsvisningen visar din design i full bredd (vanligtvis 1200 pixlar eller bredare):

  • Hela navigeringsmenyn
  • Komplett layout med alla kolumner
  • Stor typografi och avstånd
  • Alla visuella element i full storlek

Mobilförhandsvisning (Mobile Preview)​

Mobilförhandsvisningen visar din design i mobilbredd (vanligtvis 375 pixlar):

  • Responsiv navigering (hamburgermeny)
  • Enkolumnlayout
  • Justerad typografi och avstånd
  • Beröringsvänliga knappstorlekar

Responsiva brytpunkter (Responsive Breakpoints)​

Theme Builder renderar förhandsvisningar vid dessa brytpunkter:

EnhetBreddFörhandsvisning
Mobil375pxPorträtttelefon
Surfplatta768pxLandskapsorienterad surfplatta
Skrivbord1200pxFullbreddsskärm
Stor skärm1920pxUltrawide-skärm

Förfining av din design​

Gör justeringar​

Du kan förfina din designriktning genom att:

  1. Justera färger — ändra vilken färg som helst i paletten
  2. Byta typsnitt — välj olika typsnitt
  3. Modifiera avstånd — justera padding och marginaler
  4. Uppdatera layout — ändra innehållsbredd och rutnätkolumner
  5. Anpassa element — modifiera knappstilar, kortdesign etc.

Uppdateringar i förhandsvisningen​

Ändringar speglas i realtid:

  • Skrivbordsförhandsvisningen uppdateras omedelbart
  • Mobilförhandsvisningen uppdateras omedelbart
  • Alla responsiva brytpunkter uppdateras
  • Du kan växla mellan förhandsvisningarna för att verifiera ändringarna

Jämförelsevyn (Comparison View)​

Jämför din designriktning med:

  • Ursprunglig design — se vad som har ändrats
  • Konkurrenters design — jämför med inspirationssajter
  • Tidigare versioner — återgå till tidigare designriktningar

Godkännande av designriktningen​

När du är nöjd med din design:

  1. Granska båda förhandsvisningarna — verifiera att både skrivbord och mobil ser bra ut
  2. Kontrollera alla färger — se till att kontrasten och tillgängligheten är god
  3. Testa typografin — verifiera läsbarheten i alla storlekar
  4. Bekräfta layouten — kontrollera avstånd och justering
  5. Godkänn designen — gå vidare till tematgenerering

Nästa steg​

Efter att du har godkänt din designriktning:

  1. Theme Builder genererar ditt kompletta tema
  2. Temat installeras på din WordPress-sajt
  3. Du kan fortsätta anpassa med WordPress customizer
  4. Gå vidare till Hospitality Menus eller andra funktioner

Bästa praxis​

  • Testa på riktiga enheter — använd faktiska telefoner och surfplattor om möjligt
  • Kontrollera läsbarheten — se till att texten är läsbar i alla storlekar
  • Verifiera kontrasten — använd Validate Palette Contrast för tillgänglighet
  • Tänk på prestanda — optimera bilder och typsnitt för hastighet
  • Planera för innehåll — se till att layouten fungerar med ditt faktiska innehåll

Felsökning​

Förhandsvisningen uppdateras inte​

  • Uppdatera sidan
  • Rensa webbläsarens cache
  • Testa en annan webbläsare
  • Kontrollera internetanslutningen

Färgerna ser annorlunda ut​

  • Kontrollera skärmens färginställningar
  • Testa på olika enheter
  • Verifiera färgkontrasten med tillgänglighetsverktyg
  • Överväg färgbländningssimulatorer

Typografiska problem​

  • Verifiera att typsnittsfimfilerna laddas
  • Kontrollera typsnittsstorleken vid olika brytpunkter
  • Testa med faktiskt innehåll
  • Överväg radlängden för läsbarhet

Relaterad dokumentation​