← Portfolio
HTML forms builder dashboard

Form logic,
made visible.

Ein Interface-System, das komplexe Formularlogik in einen ruhigen, verständlichen Workflow übersetzt — ohne den Nutzer zwischen Builder, Preview und Code zu verlieren.

RolleUX/UI & Interface DesignFokusWorkflow · Design SystemOutputHigh-fidelity prototype
S SableApplication form Saved
Desktop / 720 px
CONTACT / 01

Let’s start a
conversation.

Tell us a little about your project and we’ll get back to you.

First nameChantal
Last nameJost
Email addresshello@studio.de
Project typeSelect an option ⌄Selected
Your messageTell us what you have in mind...
＋ Select
Meine Rolle

UX/UI Design des HTML-Forms-Builder-Dashboards und Aufbau des visuellen Systems.

Herausforderung

Feldlogik, Konfiguration, Preview und Export in einem verständlichen Arbeitsbereich verbinden.

Ergebnis

Ein skalierbares Interface vom Drag-and-drop bis zum validierten HTML-Export.

01 / Interface brief

Powerful enough
for logic. Quiet enough
for focus.

Form-Builder wachsen schnell zu überladenen Werkzeugkästen. Die eigentliche Designaufgabe war deshalb nicht, mehr Funktionen sichtbar zu machen — sondern Entscheidungen genau im richtigen Moment anzubieten.

ChallengeKomplexität reduzierenDesign principleProgressive disclosureCore interactionCanvas + properties
02 / Core experience

One canvas.
One clear flow.

Die Oberfläche folgt dem mentalen Modell der Nutzer: links auswählen, in der Mitte gestalten, rechts präzisieren. Die Preview bleibt dabei immer die visuelle Wahrheit.

S Application formUndo   Redo
Apply / 2026

Work with us.

We care about the work and the people behind it.

Name
Email
＋Drop a field hereor click to add
Form settings
Structure5 fields›1 step›
After submitSuccess message›Notification email›
✓Valid HTMLNo issues found
01＋

Add

Felder per Drag-and-drop aus einer klar sortierten Bibliothek hinzufügen.

02◇

Shape

Inhalte, Zustände und Validierung direkt am ausgewählten Feld konfigurieren.

03◉

Preview

Formular und Responsive-Verhalten ohne Kontextwechsel live prüfen.

04↗

Export

Sauberes HTML übernehmen oder den fertigen Form-Embed veröffentlichen.

03 / Design system

A restrained system
with useful contrast.

Anthrazit strukturiert die Arbeitsfläche, Weiß hält den Canvas lesbar und warmes Gold markiert nur das, was gerade relevant ist: Auswahl, Fokus und primäre Aktionen.

Core palette
#171816#C8A766#F4F2EC#FFFFFF
TypographyBuild with clarity.

Interface labels stay compact. Content stays generous.

Inter / 14 px / 150%
Field states
DefaultType here...
FocusedSelected field
ErrorPlease enter an email
Action hierarchy
04 / Outcome

Less interface.
More control.

Das Ergebnis ist kein dekoratives Dashboard, sondern ein belastbares Arbeitswerkzeug: visuell ruhig, logisch aufgebaut und konsequent vom Erstellen bis zum Export gedacht.

  • Klare Informationsarchitektur
  • Skalierbares Komponenten-System
  • Direktes visuelles Feedback
  • Responsive Arbeitsmodi