Zum Hauptinhalt springen

Design Direction

Im Schritt Design Direction können Sie das visuelle Design Ihres Themes überprüfen, verfeinern und finalisieren, bevor Theme Builder das komplette Theme generiert.

Überblick​

Nach Abschluss des Discovery Interview präsentiert Theme Builder Ihre Design-Richtlinie mit einer Desktop- und mobilen Vorschau. Dadurch sehen Sie genau, wie Ihr Design auf verschiedenen Geräten aussehen wird, bevor Sie sich endgültig für das Theme entscheiden.

Design Direction Komponenten​

1. Farbpalette​

Das Farbschema Ihres Themes umfasst:

  • Primärfarbe — die Hauptmarkenfarbe, die für Buttons, Links und Akzente verwendet wird
  • Sekundärfarbe — eine ergänzende Farbe für Abwechslung
  • Akzentfarbe — eine Hervorhebungsfarbe für wichtige Elemente
  • Neutrale Farben — Grautöne und Weiß für Hintergründe und Text
  • Textfarbe — die primäre Textfarbe für gute Lesbarkeit

2. Typografie​

Schriftarten für:

  • Überschriftenschrift — wird für Seitentitel und Abschnittsüberschriften verwendet
  • Fließtextschrift — wird für Absatztexte und Inhalte verwendet
  • Schriftgrößen — responsive Größenanpassung für verschiedene Bildschirmgrößen
  • Zeilenhöhe — der Abstand zwischen den Zeilen zur Verbesserung der Lesbarkeit
  • Schriftstärken — Variationen wie fett, normal und hell

3. Layout und Abstände​

  • Containerbreite — maximale Breite für den Inhalt
  • Padding und Margins — der Abstand um die Elemente herum
  • Grid-System — das Spaltenlayout für responsives Design
  • Komponentenabstände — der Abstand zwischen UI-Elementen

4. Visuelle Elemente​

  • Button-Stile — Designs für primäre, sekundäre und tertiäre Buttons
  • Karten-Designs — Layouts für Inhaltsblöcke
  • Icons — Icon-Stil und -Größe
  • Rahmen und Schatten — subtile visuelle Tiefe
  • Hover-Effekte — Styling für den interaktiven Zustand

Vorschau-Rendering​

Desktop-Vorschau​

Die Desktop-Vorschau zeigt Ihr Design in voller Breite (typischerweise 1200px oder breiter):

  • Vollständiges Navigationsmenü
  • Komplettes Layout mit allen Spalten
  • Große Typografie und Abstände
  • Alle visuellen Elemente in voller Größe

Mobile-Vorschau​

Die mobile Vorschau zeigt Ihr Design in mobiler Breite (typischerweise 375px):

  • Responsives Navigationsmenü (Hamburger-Menü)
  • Einspaltiges Layout
  • Angepasste Typografie und Abstände
  • Berührungsempfindliche Button-Größen

Responsive Breakpoints​

Theme Builder rendert Vorschauen an diesen Breakpoints:

DeviceWidthPreview
Mobile375pxPortrait-Handy
Tablet768pxQuerformat-Tablet
Desktop1200pxVollbreiten-Desktop
Large Desktop1920pxUltra-Wide-Display

Ihr Design verfeinern​

Anpassungen vornehmen​

Sie können Ihre Design-Richtlinie verfeinern, indem Sie:

  1. Farben anpassen — ändern Sie jede Farbe in der Palette
  2. Schriften ändern — wählen Sie verschiedene Schriftarten aus
  3. Abstände modifizieren — passen Sie Padding und Margins an
  4. Layout aktualisieren — ändern Sie Containerbreiten und Grid-Spalten
  5. Elemente anpassen — bearbeiten Sie Button-Stile, Karten-Designs usw.

Vorschau-Updates​

Änderungen werden in Echtzeit widergespiegelt:

  • Die Desktop-Vorschau wird sofort aktualisiert
  • Die mobile Vorschau wird sofort aktualisiert
  • Alle responsive Breakpoints werden aktualisiert
  • Sie können zwischen den Vorschauen wechseln, um die Änderungen zu überprüfen

Vergleichsansicht​

Vergleichen Sie Ihre Design-Richtlinie mit:

  • Originaldesign — sehen Sie, was sich geändert hat
  • Konkurrenzdesigns — vergleichen Sie mit Inspirationsseiten
  • Vorherigen Versionen — kehren Sie zu früheren Design-Richtlinien zurück

Design Direction Genehmigen​

Sobald Sie mit Ihrem Design zufrieden sind:

  1. Beide Vorschauen überprüfen — stellen Sie sicher, dass Desktop und Mobil gut aussehen
  2. Alle Farben prüfen — stellen Sie sicher, dass Kontrast und Barrierefreiheit gewährleistet sind
  3. Typografie testen — vergewissern Sie sich der Lesbarkeit bei allen Größen
  4. Layout bestätigen — prüfen Sie Abstände und Ausrichtung
  5. Design genehmigen — fahren Sie mit der Theme-Generierung fort

Nächste Schritte​

Nach der Genehmigung Ihrer Design-Richtlinie:

  1. Theme Builder generiert Ihr komplettes Theme
  2. Das Theme wird auf Ihrer WordPress-Seite installiert
  3. Sie können mithilfe des WordPress Customizers weiter anpassen
  4. Fahren Sie mit Hospitality Menus oder anderen Funktionen fort

Best Practices​

  • An echten Geräten testen — verwenden Sie, wenn möglich, echte Handys und Tablets
  • Lesbarkeit prüfen — stellen Sie sicher, dass der Text bei allen Größen lesbar ist
  • Kontrast überprüfen — verwenden Sie Validate Palette Contrast für die Barrierefreiheit
  • Performance berücksichtigen — optimieren Sie Bilder und Schriftarten für die Geschwindigkeit
  • Inhalte planen — stellen Sie sicher, dass das Layout mit Ihren tatsächlichen Inhalten funktioniert

Fehlerbehebung​

Vorschau wird nicht aktualisiert​

  • Die Seite neu laden
  • Browser-Cache leeren
  • Einen anderen Browser ausprobieren
  • Internetverbindung prüfen

Farben sehen anders aus​

  • Monitor-Farbeinstellungen prüfen
  • An verschiedenen Geräten testen
  • Farbkontrast mit Barrierefreiheits-Tools überprüfen
  • Farbsichtigkeitssimulatoren in Betracht ziehen

Typografie-Probleme​

  • Überprüfen Sie, ob die Schriftdateien geladen werden
  • Überprüfen Sie die Schriftgröße bei verschiedenen Breakpoints
  • Mit tatsächlichen Inhalten testen
  • Den Zeilenabstand für die Lesbarkeit berücksichtigen

Verwandte Dokumentation​