Lumaktaw patungo sa pangunahing content

Design Direction

The Design Direction step allows you to review, refine, and finalize your theme's visual design before Theme Builder generates the complete theme.

Overview​

After completing the Discovery Interview, Theme Builder presents your design direction with desktop and mobile preview rendering. This allows you to see exactly how your design will look on different devices before committing to the theme.

Design Direction Components​

1. Color Palette​

Your theme's color scheme, including:

  • Primary color — main brand color used for buttons, links, and accents
  • Secondary color — complementary color for variety
  • Accent color — highlight color for important elements
  • Neutral colors — grays and whites for backgrounds and text
  • Text color — primary text color for readability

2. Typography​

Font selections for:

  • Heading font — used for page titles and section headers
  • Body font — used for paragraph text and content
  • Font sizes — responsive sizing for different screen sizes
  • Line height — spacing between lines for readability
  • Font weights — bold, regular, and light variations

3. Layout and Spacing​

  • Container width — maximum width for content
  • Padding and margins — spacing around elements
  • Grid system — column layout for responsive design
  • Component spacing — distance between UI elements

4. Visual Elements​

  • Button styles — primary, secondary, and tertiary button designs
  • Card designs — layouts for content blocks
  • Icons — icon style and sizing
  • Borders and shadows — subtle visual depth
  • Hover effects — interactive state styling

Preview Rendering​

Desktop Preview​

The desktop preview shows your design at full width (typically 1200px or wider):

  • Full navigation menu
  • Complete layout with all columns
  • Large typography and spacing
  • All visual elements at full size

Mobile Preview​

The mobile preview shows your design at mobile width (typically 375px):

  • Responsive navigation (hamburger menu)
  • Single-column layout
  • Adjusted typography and spacing
  • Touch-friendly button sizes

Responsive Breakpoints​

Theme Builder renders previews at these breakpoints:

DeviceWidthPreview
Mobile375pxPortrait phone
Tablet768pxLandscape tablet
Desktop1200pxFull-width desktop
Large Desktop1920pxUltra-wide display

Refining Your Design​

Making Adjustments​

You can refine your design direction by:

  1. Adjusting colors — change any color in the palette
  2. Changing fonts — select different typefaces
  3. Modifying spacing — adjust padding and margins
  4. Updating layout — change container widths and grid columns
  5. Customizing elements — modify button styles, card designs, etc.

Preview Updates​

Changes are reflected in real-time:

  • Desktop preview updates immediately
  • Mobile preview updates immediately
  • All responsive breakpoints are updated
  • You can switch between previews to verify changes

Comparison View​

Compare your design direction with:

  • Original design — see what changed
  • Competitor designs — compare with inspiration sites
  • Previous versions — revert to earlier design directions

Design Direction Approval​

Once you're satisfied with your design:

  1. Review both previews — verify desktop and mobile look good
  2. Check all colors — ensure contrast and accessibility
  3. Test typography — verify readability at all sizes
  4. Confirm layout — check spacing and alignment
  5. Approve design — proceed to theme generation

Next Steps​

After approving your design direction:

  1. Theme Builder generates your complete theme
  2. The theme is installed on your WordPress site
  3. You can customize further using WordPress customizer
  4. Proceed to Hospitality Menus or other features

Best Practices​

  • Test on real devices — use actual phones and tablets if possible
  • Check readability — ensure text is readable at all sizes
  • Verify contrast — use Validate Palette Contrast for accessibility
  • Consider performance — optimize images and fonts for speed
  • Plan for content — ensure layout works with your actual content

Troubleshooting​

Preview Not Updating​

  • Refresh the page
  • Clear browser cache
  • Try a different browser
  • Check internet connection

Colors Look Different​

  • Check monitor color settings
  • Try on different devices
  • Verify color contrast with accessibility tools
  • Consider color blindness simulators

Typography Issues​

  • Verify font files are loading
  • Check font size at different breakpoints
  • Test with actual content
  • Consider line length for readability