02— MÖGLICHER ARBEITSUMFANG

Lücken im Entwurf klären

Vor der Umsetzung prüfe ich den Ablauf auf fehlende Lade-, Leer-, Fehler- und Erfolgszustände. Offene Entscheidungen werden mit Design oder Product Management geklärt.

Wiederverwendbare Komponenten entwickeln

Ich setze responsive React- und TypeScript-Komponenten um und nutze ein vorhandenes Designsystem, wenn es eines gibt. Für wiederkehrende Muster gelten einheitliche Abstände, Schriften, Zustände und Verhaltensweisen.

Daten und Produktlogik anbinden

Ich verbinde das Interface mit Daten und berücksichtige Validierung, Berechtigungen und Fehlerfälle. Geprüft wird mit realistischen Inhalten.

Wichtige Abläufe testen

Ich prüfe Tastaturbedienung, Bildschirmgrößen und Browserverhalten. Automatisierte Browsertests kommen dort hinzu, wo sie wichtige Nutzerwege absichern.

03— ZUSTÄNDE AUSSERHALB DES IDEALFALLS

EINE KOMPONENTE BRAUCHT MEHR ALS DEN IDEALFALL.

Die Bedienelemente funktionieren mit Maus und Tastatur. Dieselbe Komponente deckt Laden, fehlende Daten, Fehler und eine erfolgreiche Antwort ab.

if (status === "loading") return <ProjectSkeleton />;

Dies ist eine kleine funktionierende Komponente auf der Seite, kein Screenshot. Sie nutzt native Buttons, gibt den gewählten Zustand aus und durchläuft beim erneuten Versuch erst den Ladezustand.

04 / REACT-FRONTEND-ENTWICKLUNG

DIE ÜBERGABE ENDET, WENNDAS INTERFACEIM BROWSER FUNKTIONIERT.

Viele Entscheidungen entstehen erst während der Umsetzung. Wenn Designurteil und Code nah beieinander liegen, lassen sich diese Fragen klären, ohne dass wichtige Details verloren gehen.

05— PROJEKTE

INTERFACES ALS FUNKTIONIERENDE SOFTWARE

01 / 2026

Bridagency

Design · Frontend · Full-Stack

Ein zweisprachiges Webprodukt mit 23 Planungsschritten, proportionaler Budgetlogik und Browserprüfungen vor dem Start.

Fallstudie lesen

02 / 2025

Plox

Produktdesign · Full-Stack

Ein soziales Produkt mit Pixel-Editor im Browser und wiederverwendbaren Mustern für Entdecken, Erstellen und Teilen.

Fallstudie lesen

03 / 2026

Medienkundig

Nutzerforschung · Produktdesign · Full-Stack

Ein Produkt mit Astro, React und Supabase sowie Accessibility-Checks und Tests wichtiger Browserabläufe.

Fallstudie lesen

06— FAQ

HÄUFIGE FRAGEN

Ja. Ich richte mich nach vorhandener Architektur, Konventionen und Komponentenbibliothek. Bevor ich neue Muster vorschlage, sehe ich mir an, wie das Team Änderungen entwickelt und veröffentlicht.

07 / KONTAKT

MÖCHTEN SIE EIN FRONTEND-PROJEKT BESPRECHEN?

Technischen Kontext senden