denkzone: Webdesign, das klar denkt

Du lernst Layout, Typografie, UI/UX-Logik und saubere Web-Patterns – mit Übungen, Reviews und Portfolio-Ergebnissen.

Weg finden Arbeiten ansehen
Struktur • Feedback • Projekte
Webdesign Workspace mit Struktur

Was du am Ende liefern kannst

  • Landingpage mit sauberem Raster
  • UI-Komponenten: Buttons, Forms, Cards – sinnvoll, nicht überall
  • Typografie-System + Spacing-Regeln
  • UX-Flows: Kontakt/Signup
  • Design-Übergabe: Dev handoff basics
  • Portfolio-Cases mit klarer Story

Interface-Check: Vorher → Nachher

Praxis zeigt Fortschritt: So verwandeln sich chaotische Layouts in klare, überzeugende Designs.

Vorher-Nachher Design Transformation

Die Methode: 4 Zonen

1

Denkzone

Ziel, Nutzer, Message – bevor du ein Pixel setzt.

Übung: Problem-Definition + Zielgruppe
2

Layoutzone

Raster, Hierarchie, Spacing – Struktur vor Deko.

Übung: Grid-System aufbauen
3

UIzone

Komponenten, States, Patterns – konsistent und begründet.

Übung: Component Library starten
4

Proofzone

Testen, Review, Iteration – Design wächst durch Feedback.

Übung: Usability-Test + Fixes

Kurswege ohne Overload

Für wen: Du startest bei Null oder kennst nur Photoshop.

Rhythmus: 1 Prinzip pro Woche, 3–5 Stunden.

  • Wireframe + erste Section
  • Button-States + Form-Logik
  • Responsive Basics
Unverbindlich anfragen

Für wen: Du kennst HTML/CSS, willst Design-Skills.

Rhythmus: 1 Landingpage alle 2 Wochen.

  • Hero + CTA-Optimierung
  • Komponenten-Library
  • Spacing-System
Unverbindlich anfragen

Für wen: Du hast Projekte, aber keine Story.

Rhythmus: 2 Cases in 4 Wochen.

  • Case-Struktur + Narrative
  • Mockups + Context
  • Portfolio-Site
Unverbindlich anfragen

So sieht eine Woche aus

Input
30–45 Min: Prinzip + Beispiele (Video oder Artikel)
Build
2–4 Std: Aufgabe – du baust eine Section oder Komponente
Review
20–30 Min: Feedback + Fix-Liste für nächste Iteration

Review, aber richtig

Unsere Review-Regeln

  • Konkret: Nicht "schöner machen", sondern "CTA-Kontrast erhöhen".
  • Begründet: Warum dieser Fix Sinn macht.
  • Nächster Schritt: Was du sofort tun kannst.
Annotiertes UI Review Beispiel

Toolchain im Kontext

Werkzeuge sind nur dann sinnvoll, wenn du weißt, wofür und wann du sie einsetzt.

Tool / Concept Wofür Wann du es nutzt
Figma Komponenten / Auto-Layout Bei jeder Section
Grid / Raster Ordnung Layoutstart
Design Tokens Konsistenz Nach 2–3 Übungen
Handoff Basics Umsetzung Am Projektende
Usability-Tests Validierung Vor Abschluss

FAQ

Nein. Wenn du bei Null startest, empfehlen wir den "Start (Grundlagen)"-Weg. Du lernst HTML/CSS-Basics parallel zu Design-Prinzipien. Wenn du schon codest, kannst du direkt in "UI & Landingpages" einsteigen.

Rechne mit 3–5 Stunden: 30–45 Min Input, 2–4 Std Build-Phase, 20–30 Min Review. Du kannst flexibel planen – wichtig ist Kontinuität, nicht Geschwindigkeit.

Beides. Wir lehren visuelle Gestaltung (UI) immer im Kontext von Nutzerzielen (UX). Du lernst nicht nur, wie ein Button aussieht, sondern warum er dort steht und wie er funktioniert.

Du sendest deine Übung, wir annotieren sie direkt im Design-Tool oder mit Screenshots. Feedback ist konkret: Was ändern, warum, und wie. Du bekommst eine Fix-Liste für die nächste Iteration.

Jedes abgeschlossene Projekt: Landingpage, UI-Kit, Case Study. Wir helfen dir, nicht nur "schöne Bilder" zu zeigen, sondern die Story dahinter zu erzählen: Problem, Lösung, Entscheidungen.

Erzähl uns kurz dein Ziel

Level, Zeit und Fokus – wir empfehlen dir den passenden Kursweg.

Wobei wir dir helfen

  • Kursweg-Empfehlung basierend auf deinem Level
  • Struktur für Portfolio-Projekte
  • Konkrete nächste Schritte
Designer Workspace