Lukas Schneider Digital
Leistungen/Webdesign & UX

Webdesign & UX

Design, das führt.
Lange bevor Code entsteht.

Zuerst kläre ich, wer die Seite benutzt und was diese Person dort erledigen will. Daraus ergeben sich Struktur und Nutzerführung. Die Optik kommt danach.

Wie das läuft

Drei Phasen bis zur Übergabe.

Je später eine Änderung kommt, desto teurer wird sie. Deshalb in dieser Reihenfolge.

Konzeption & Struktur

Wer benutzt die Seite, und was sucht diese Person dort? Daraus ergibt sich, welche Seiten es braucht und wie sie zusammenhängen.

  • Zielgruppe
  • Seitenstruktur und Wege durch die Seite
  • Prioritäten

UX & Wireframes

Wireframes in Figma, noch ohne Farbe und Bilder. So geht es im Feedback um die Anordnung und nicht um Blautöne. Änderungen kosten hier fast nichts.

  • Wireframes in Figma
  • Klickbarer Prototyp
  • Feedbackrunde

Visuelles Design

Typografie, Farben und Komponenten auf Basis eines Designsystems. Ein Button sieht auf der neunten Unterseite genauso aus wie auf der Startseite.

  • Designsystem
  • Layouts für Desktop und Handy
  • Übergabe an die Entwicklung

Berufserfahrung

Gelernt habe ich das in einem Produktteam bei 1&1.

Dort habe ich als Werkstudent im UX-Team an der Self-Service-App für Kundinnen und Kunden mitgearbeitet.

Mitgenommen habe ich eine Gewohnheit: Designentscheidungen so festzuhalten, dass andere darauf aufbauen können. Daran hängt, ob ein Jahr später noch alles zusammenpasst.

Komponenten-Redesign in einem bestehenden Design-System
Screens für App Store und Google Play
Review-Zyklen mit der Entwicklung

1&1 Telecommunication SE

UX-Designer (Werkstudent), Digital Experience

Im Produktteam fragt irgendwann jemand aus der Entwicklung nach dem Zustand, an den beim Entwurf niemand gedacht hat. Seitdem denke ich ihn mit.

FigmaDesign SystemsUX ResearchKomponentenApp Store Screens

Zwei Wege

Einzelleistung oder aus einer Hand.

Als Einzelleistung

Nur das Design, den Rest macht ihr.

Ihr entwickelt selbst oder habt jemanden dafür und braucht ein Designkonzept mit sauberen Figma-Dateien.

  • Wireframes und klickbarer Prototyp
  • Visuelles Design mit Komponenten
  • Dateien, die die Entwicklung direkt nutzen kann

Als Teil des Gesamtprojekts

Empfohlen

Design und Entwicklung laufen ineinander.

Die Entwicklung schließt direkt an. Rückfragen zu Zuständen, die im Entwurf fehlen, klären sich im selben Kopf.

  • Design, Entwicklung und Launch am Stück
  • Ein Ansprechpartner
  • Was im Design entschieden wird, landet so im Code

Häufige Fragen

Was oft gefragt wird.

Ja, Figma ist das primäre Werkzeug für Wireframes, Komponenten und das Designsystem. Der Vorteil: du siehst das Design, bevor eine Zeile Code geschrieben wird, kannst Feedback geben und das Ergebnis bleibt für dich dauerhaft nutzbar.

Ja. Alle Designdateien gehören nach Projektabschluss dir. Du kannst sie selbst weiternutzen, erweitern oder an andere Entwickler weitergeben.

Ja, ausdrücklich. Manchmal wird nur das Designkonzept gebraucht, weil die Entwicklung intern oder durch ein anderes Team passiert. Das ist ein vollwertiger Auftrag.

Wireframes zeigen Struktur und Nutzerführung ohne visuelles Finish: schwarz-weiß, ohne Farben und ohne Branding. Das finale Design baut darauf auf, mit Typografie, Farben, Komponenten und Detailgestaltung. Beide Phasen gehören zusammen.

Kick-off und Briefing → IST-Analyse (wenn vorhanden) → Wireframes zur Strukturierung → Feedback-Runde → visuelles Design → Feinschliff und Übergabe. Der genaue Umfang richtet sich nach dem Projekt.

Nächster Schritt

Schreibt kurz, was ihr vorhabt.

Im Gespräch klären wir, ob Design allein reicht oder die Frage woanders liegt. Kein Pitch, kein Angebot auf Druck.

Antwort in der Regel innerhalb von 1–2 Werktagen