--- title: 'UI Design Ratzeburg: barrierefrei mit System' url: 'https://janraap.de/leistungen/webdesign/ui-design' markdown: 'https://janraap.de/leistungen/webdesign/ui-design.md' date: '2026-09-09' description: 'UI-Designer aus Ratzeburg: intuitive Benutzeroberflächen mit System, barrierefrei und auf deine Ziele ausgerichtet. KI als Werkzeug, nicht als Ersatz.' taxonomy: category: - webdesign tag: - ux - barrierefreiheit - ki --- UI-Design · Barrierefrei · Mit System # Benutzeroberflächen, die deine Nutzenden gerne bedienen ![](https://janraap.de/images/9/5/2/4/9/952498c8969440e597c36255c030533ddfa0f962-ui-design.webp) Ich gestalte Interfaces, die nicht nur gut aussehen, sondern funktionieren: mit System, barrierefrei, auf deine Ziele ausgerichtet. KI ist dabei Werkzeug, kein Ersatz. [ Projekt anfragen ](https://janraap.de/kontakt) ## Meine Schwerpunkte ### In Komponenten gedacht Buttons, Formularfelder und Cards entstehen als wiederverwendbare Bausteine, mit allen Zuständen. Das bleibt konsistent und lässt sich später leicht erweitern. ### Barrierefrei nach WCAG Kontraste ab 4,5:1, sichtbarer Tastaturfokus, Klickflächen ab 44 Pixeln. Ich plane das von Anfang an mit, statt es nach dem Launch nachzurüsten. ### KI als Werkzeug KI liefert in Sekunden Varianten, kennt aber deine Nutzenden nicht. Ich nutze sie für schnelle Konzeptskizzen und treffe die Entscheidungen selbst. ## Was UI-Design leistet Ich bin Jan Raap, selbstständig seit 2007, mit Fokus auf digitale Oberflächen. UI-Design, kurz für User Interface Design, ist die Gestaltung der sichtbaren Oberfläche: alles, was deine Nutzenden sehen und womit sie interagieren. Wenn du eine App öffnest und sofort weißt, wo du klicken musst. Wenn ein Formular zeigt, welches Feld noch fehlt. Diese Details entscheiden, ob eine Oberfläche angenehm oder frustrierend ist. Oft wird UI mit UX verwechselt: UX-Design plant die gesamte Nutzererfahrung, also den Grundriss. UI-Design gestaltet die konkrete Oberfläche, also die Einrichtung der Räume. Ich mache UI und übernehme bei kleineren Projekten beide Rollen. ## KI als Werkzeug, nicht als Ersatz KI-Tools liefern in Sekunden komplette Interface-Vorschläge. Das ist nützlich, hat aber eine Grenze: KI kennt deine Nutzerpsychologie, deine Ziele und deinen Marktkontext nicht. Das Ergebnis wirkt deshalb oft generisch und austauschbar. Typische Lücken, die ich regelmäßig sehe: zu kleine Klickflächen, schwache Kontraste, eine Informationshierarchie, in der alles gleich wichtig wirkt, und eine Oberfläche, die für eine junge Zielgruppe gebaut ist, obwohl die eigentliche Kundschaft 60+ ist. Ich nutze KI für schnelle Konzeptvarianten, für Stimmungsbilder und für Fleißarbeit. Die Entscheidungen treffe ich: warum eine Klickfläche groß genug für den Finger sein muss, warum Fehler rot und Erfolge grün signalisiert werden, warum deine Oberfläche anders aussehen darf als die der Konkurrenz. Wenn du bereits mit KI experimentiert hast und das Interface nicht rund läuft, prüfe ich es auf Schwachstellen, Barrierefreiheit und Zielerreichung und sage dir, was sich lohnt. ## Warum UI-Design über Erfolg entscheidet Eine unklare Navigation, schwer lesbare Schrift oder ein schlecht platzierter Button kosten dich Anfragen. Das wirkt auch nach innen: höhere Support-Last, weil Leute nicht finden, was sie suchen, und langsamere Weiterentwicklung, weil ohne klares System jedes neue Feature von vorn beginnt. Barrierefreiheit gehört dazu. Seit 2025 verlangt das Barrierefreiheitsstärkungsgesetz von vielen Anbietern barrierefreie Anwendungen. Das ist sinnvoll, nicht nur Pflicht: gute Kontraste, klare Struktur und eine Bedienung per Tastatur helfen allen. Ich plane das von Anfang an mit, nach den [WCAG 2.1 AA-Richtlinien](https://janraap.de/wissen/glossar#glossar-wcag). Ablauf ## So arbeite ich Mein Ablauf ist über Jahre gewachsen und nachvollziehbar. Optional steht am Anfang eine kurze KI-Phase, in der ich schnell Richtungen durchspiele, als Diskussionsgrundlage, nicht als fertiges Design. 1. ### Analyse - Wer deine Nutzenden sind und was sie wollen - Wo sie heute abbrechen - Vorhandene Daten fließen ein 2. ### Konzept - Interaktionskonzept als Wireframes - Schwarz-weiße Skizzen ohne Farbe - Erst die Funktion, dann die Optik 3. ### Visuelles Design - Farben, Typografie und Icons - Wiederverwendbare Komponenten - Dokumentiert in einem Design-System 4. ### Übergabe - Designs, Assets und Design-Tokens - Saubere Struktur für dein Entwicklungsteam - Oder ich setze es selbst um, vom Design bis zum Code ## Was ich konkret gestalte Ich denke in Komponenten, nicht in Einzelseiten. Jeder Button, jedes Formularfeld, jede Card wird als wiederverwendbarer Baustein angelegt: konsistent, schnell erweiterbar und einfach zu pflegen. Bei größeren Projekten entsteht daraus eine vollständige Komponentenbibliothek. Dazu gestalte ich jeden Zustand eines Elements: normal, hover (Maus drüber), aktiv, Fokus (Tastatur), deaktiviert, ladend und die Rückmeldung nach einer Aktion. Solche kleinen Rückmeldungen, Micro-Interactions, geben Nutzenden das Gefühl von Kontrolle. Mobil zuerst ist Standard. Für jede Bildschirmgröße kläre ich, welche Information am wichtigsten ist und wie sich die Navigation ändert. Barrierefrei heißt konkret: Kontraste von mindestens 4,5:1 (AA-Standard), klare Fokus-Indikatoren, verständliche Fehlermeldungen und Klickflächen von mindestens 44 mal 44 Pixeln. ## Aus der Praxis Bei der comdirect habe ich an einem modularen UI-System für die Banking-Apps gearbeitet: jede Funktion als eigene Komponente, klare Hierarchien und Farben als Statussignal. Mehr dazu in der [Referenz](https://janraap.de/referenzen/comdirect). Für W1-Media entstand ein Theme-System: Die Grundkomponenten bleiben gleich, Farben und Details passen sich je Verlag an. Neun Verlage nutzen dasselbe System und sehen trotzdem eigenständig aus, neue Features entstehen nur einmal. Mehr dazu in der [Referenz](https://janraap.de/referenzen/w1-media). ## Warum mit mir Ich gestalte und entwickle, also übersetze ich zwischen Design und Technik und plane nur, was sich auch umsetzen lässt. Bei jedem Schritt frage ich, was die Oberfläche erreichen soll: Schönes Design ist gut, Design, das dein Ziel trifft, ist besser. ## Bereit für dein UI-Projekt? Lass uns in einem kostenlosen Erstgespräch über deine Ziele sprechen. [ Projekt anfragen ](https://janraap.de/kontakt) ## Weiterführende Informationen - ### [Alle Leistungen im Überblick](https://janraap.de/leistungen) Zurück zur Übersicht aller Webdesign- und Marketing-Leistungen. - ### [Frontend-Entwicklung](https://janraap.de/leistungen/webdesign/frontend-entwicklung) Entwurf und Code von mir: von der Oberfläche bis zur fertigen Umsetzung. - ### [Ratgeber Screendesign](https://janraap.de/wissen/screendesign) Woher der Begriff kommt, wie die Konzeption abläuft und woran du einen tragfähigen Entwurf erkennst. --- ## Navigation - Parent: [Webdesign für kleine und mittlere Unternehmen](https://janraap.de/leistungen/webdesign.md) - Previous: [Frontend-Entwicklung für Agenturen: Vue.js & Nuxt](https://janraap.de/leistungen/webdesign/frontend-entwicklung.md) - Next: [WordPress-Website erstellen lassen Ratzeburg](https://janraap.de/leistungen/webdesign/wordpress-komplettloesung.md)