Ga naar hoofdinhoud

Design Direction

De stap Design Direction stelt u in staat om het visuele ontwerp van uw thema te bekijken, te verfijnen en definitief te maken voordat Theme Builder het complete thema genereert.

Overzicht​

Nadat u het Discovery Interview heeft voltooid, presenteert Theme Builder uw designrichting met een desktop- en mobiele preview rendering. Hiermee ziet u precies hoe uw ontwerp op verschillende apparaten zal worden weergegeven, voordat u zich committeert aan het thema.

Design Direction Componenten​

1. Kleurenpalet​

Het kleurenschema van uw thema, inclusief:

  • Primaire kleur — de hoofdmerkkleur die wordt gebruikt voor knoppen, links en accenten
  • Secundaire kleur — een complementaire kleur voor variatie
  • Accentkleur — een highlightkleur voor belangrijke elementen
  • Neutrale kleuren — grijs- en witgradaties voor achtergronden en tekst
  • Tekstkleur — de primaire tekstkleur voor leesbaarheid

2. Typografie​

Lettertypekeuzes voor:

  • Koptekst lettertype — gebruikt voor paginatitels en sectiekoppen
  • Tekst lettertype — gebruikt voor alinea- en inhoudstekst
  • Lettergroottes — responsieve grootte voor verschillende schermformaten
  • Regelafstand — de afstand tussen de regels voor leesbaarheid
  • Lettergewichten — vet, normaal en licht variaties

3. Lay-out en Afstand​

  • Containerbreedte — de maximale breedte voor de inhoud
  • Padding en marges — de afstand rondom elementen
  • Grid systeem — de kolomindeling voor responsief ontwerp
  • Componentafstand — de afstand tussen UI-elementen

4. Visuele Elementen​

  • Knopstijlen — primaire, secundaire en tertiaire knopontwerpen
  • Card ontwerpen — lay-outs voor inhoudsblokken
  • Iconen — iconenstijl en grootte
  • Randlijnen en schaduwen — subtiele visuele diepte
  • Hover effecten — styling voor interactieve statussen

Preview Rendering​

Desktop Preview​

De desktop preview toont uw ontwerp in volledige breedte (meestal 1200px of breder):

  • Volledig navigatiemenu
  • Volledige lay-out met alle kolommen
  • Grote typografie en afstand
  • Alle visuele elementen in volle grootte

Mobile Preview​

De mobile preview toont uw ontwerp in mobiele breedte (meestal 375px):

  • Responsief navigatiemenu (hamburger menu)
  • Eénkoloms lay-out
  • Aangepaste typografie en afstand
  • Aanraakvriendelijke knopgroottes

Responsieve Breakpoints​

Theme Builder genereert previews op deze breakpoints:

DeviceWidthPreview
Mobile375pxPortret telefoon
Tablet768pxLandschap tablet
Desktop1200pxVolledige breedte desktop
Large Desktop1920pxUltra-wide display

Uw Ontwerp Verfijnen​

Aanpassingen Maken​

U kunt uw designrichting verfijnen door:

  1. Kleuren aanpassen — wijzig elke kleur in het palet
  2. Lettertypen wijzigen — selecteer verschillende lettertypes
  3. Afstand aanpassen — pas padding en marges aan
  4. Lay-out bijwerken — wijzig containerbreedtes en gridkolommen
  5. Elementen aanpassen — wijzig knopstijlen, card ontwerpen, enz.

Preview Updates​

Wijzigingen worden in real-time weergegeven:

  • De desktop preview wordt onmiddellijk bijgewerkt
  • De mobile preview wordt onmiddellijk bijgewerkt
  • Alle responsieve breakpoints worden bijgewerkt
  • U kunt schakelen tussen previews om wijzigingen te verifiëren

Vergelijkingsweergave​

Vergelijk uw designrichting met:

  • Origineel ontwerp — zie wat is veranderd
  • Concurrentieontwerpen — vergelijk met inspiratiesites
  • Eerdere versies — keer terug naar eerdere designrichtingen

Design Direction Goedkeuren​

Zodra u tevreden bent met uw ontwerp:

  1. Beoordeel beide previews — controleer of desktop en mobiel er goed uitzien
  2. Controleer alle kleuren — zorg voor contrast en toegankelijkheid
  3. Test de typografie — verifieer de leesbaarheid bij alle groottes
  4. Bevestig de lay-out — controleer de afstand en uitlijning
  5. Ontwerp goedkeuren — ga verder met de thema-generatie

Volgende Stappen​

Nadat u uw designrichting heeft goedgekeurd:

  1. Theme Builder genereert uw complete thema
  2. Het thema wordt geïnstalleerd op uw WordPress site
  3. U kunt verder aanpassen met de WordPress customizer
  4. Ga verder naar Hospitality Menus of andere functies

Best Practices​

  • Test op echte apparaten — gebruik indien mogelijk echte telefoons en tablets
  • Controleer de leesbaarheid — zorg ervoor dat de tekst leesbaar is bij alle groottes
  • Verifieer het contrast — gebruik Validate Palette Contrast voor toegankelijkheid
  • Denk aan prestaties — optimaliseer afbeeldingen en lettertypen voor snelheid
  • Plan de inhoud — zorg ervoor dat de lay-out werkt met uw daadwerkelijke inhoud

Probleemoplossing​

Preview Updateert Niet​

  • Vernieuw de pagina
  • Wis de browsercache
  • Probeer een andere browser
  • Controleer de internetverbinding

Kleuren Zien Anders Uit​

  • Controleer de monitorkleurensinstellingen
  • Probeer op verschillende apparaten
  • Verifieer het kleurcontrast met toegankelijkheidstools
  • Overweeg kleurenblindheidssimulatoren

Typografische Problemen​

  • Verifieer of de lettertypebestanden laden
  • Controleer de lettergrootte bij verschillende breakpoints
  • Test met daadwerkelijke inhoud
  • Overweeg de regelbreedte voor leesbaarheid

Gerelateerde Documentatie​