Jede professionelle Website folgt einem Designsystem.
Das bedeutet: Farben, Schriften, Formen, Abstände und Bildsprache sind aufeinander abgestimmt, damit die Seite wiedererkennbar bleibt.
Auch jedes WordPress-Theme bringt ein eigenes Designsystem mit – oft so konsequent, dass man bestimmte Themes schon am Stil erkennt.
Jetzt geht es darum, diese Prinzipien zu entdecken und zu verstehen, was ein gutes Designsystem ausmacht.
Aufgabe 1 – Beispiele analysieren
Schau dir drei bekannte Websites an: (apple.com, ikea.com, lufthansa.com).
Erstelle eine kurze Powerpoint oder eine Page:
- Welche Farben werden durchgehend verwendet?
- Welche Schriftarten oder Schriftgrößen prägen den Stil?
- Wie wirken Bilder, Buttons, Abstände, Navigation?
Beschreibe kurz, wie diese Elemente gemeinsam einen Wiedererkennungswert schaffen.
Aufgabe 2 – Dein Theme unter der Lupe
Öffne die Website, die du letzte Woche und heute als Theme-Detektiv untersucht hast. Überprüfe, ob dort ein klar erkennbares Designsystem vorhanden ist:
- Wiederholt sich die Farbwelt konsequent?
- Sind Überschriften, Fließtext und Buttons einheitlich gestaltet?
- Gibt es visuelle Regeln für Bilder oder Icons?
Notiere 3-4 Gestaltungselemente, die das Erscheinungsbild bestimmen.
Aufgabe 3 – Mini-Designsystem
Stell dir vor, du würdest selbst ein Theme entwickeln. Erstelle eine kurze Page, nutzte dazu deine Subdomain:
- Primärfarbe + Akzentfarbe
- Schriftarten (Überschrift / Fließtext)
- Grundidee der Bildsprache (z. B. hell, kontrastreich, minimalistisch …)
- Stilrichtung (z. B. modern, verspielt, reduziert)
Optional: Erstelle eine kleine visuelle Skizze oder Farbpalette (z. B. mit canva.com oder coolors.co).
Abschluss – Gesprächsrunde
Kurze Runde am Ende:
- Welche Themes wirken durchdacht und professionell, welche eher uneinheitlich?
- Warum ist Wiedererkennbarkeit im Webdesign so wichtig?