Es herrscht Uneinigkeit darüber, was ein UI-Entwickler eigentlich ist. Die eine Hälfte des Internets ordnet die Rolle dem Design zu, die andere der Entwicklung, und Stellenanzeigen bedienen sich bei beiden. Unsere Position ist einfacher: Ein UI-Entwickler ist ein Front-End-Entwickler, der zudem über fundiertes UI-Design-Wissen verfügt. Nicht das eine oder das andere. Sondern beides.
Das ist wichtig, denn die Übergabe vom Design zum Code ist der Punkt, an dem die Qualität der Benutzeroberfläche schleichend verloren geht. Eine Designdatei deckt nur das ab, was jemand explizit gezeichnet hat; alles Weitere wird vor Ort von der Person entschieden, die gerade die Werkzeuge bedient. Ein UI-Entwickler vereint beide Kompetenzen, sodass eine Entscheidung ohne Übergabe direkt von der Absicht in die Umsetzung fließt. Bei Projekten, die primär aus Interfaces bestehen, bedeutet das: eine Einstellung statt zwei.
Dieser Artikel richtet sich an zwei Zielgruppen. Wenn Sie entscheiden müssen, ob Sie diese Rolle finanzieren sollen, springen Sie direkt zu Wann man einen UI-Entwickler statt eines Designers und eines Front-End-Entwicklers einstellt. Wenn Sie selbst in diesem Bereich tätig sind, sind die Definition, die Fähigkeiten und die angewandten Prinzipien für Sie bestimmt.
Ein UI-Entwickler ist jemand, der die Benutzeroberfläche einer Webanwendung konzipiert und entwickelt. Um zu verstehen, was das genau bedeutet, müssen wir drei Begriffe voneinander abgrenzen, die oft synonym verwendet werden: UX, UI und Front-End.
Sowohl bei UI als auch bei UX ist das Ziel die bestmögliche Nutzererfahrung. Dieses Ziel ist nicht alleiniges Eigentum von UX-Designern, ungeachtet dessen, was im Organigramm steht.
Der Unterschied liegt im Themenbereich. UX befasst sich damit, wie sich eine Erfahrung anfühlt und was der Nutzer daraus mitnimmt: Sie bildet auf kognitiver Ebene ab, wie jemand auf ein Ziel zusteuert. UI-Design übersetzt diese Landkarte in etwas Sichtbares und kümmert sich um Look-and-Feel, Layout, Markenrichtlinien und Barrierefreiheit.
UX-Design ist also eng mit Nutzerforschung und Informationsarchitektur verknüpft. UI-Design ist eng mit dem grafischen Layout verbunden.
UI-Entwickler nehmen die Vorgaben und Visionen aus der UX-Forschung und stellen sicher, dass die Nutzer die Navigationselemente haben, die sie benötigen, um ihr Ziel zu erreichen. Menüs, Schaltflächen, Farben, Schriftgrößen, Illustrationen, Texte – alles wird gemäß den Designkonzepten erstellt. Das wirft die nächste Frage auf: Was unterscheidet UI vom Front-End?
Manche sagen, ein UI-Entwickler entwirft das Produkt. Andere sagen, das Design gehört auch zum Aufgabenbereich des Front-End-Entwicklers, zusammen mit der Programmierung, die es zum Leben erweckt. Bei Imaginary Cloud sind wir der Meinung, dass es eine Mischung aus beidem ist: Ein UI-Entwickler ist ein Front-End-Entwickler mit Kenntnissen in UI-Prinzipien und -Konzepten. Dieses Wissen ermöglicht es ihnen, ein Projekt zu vereinfachen, anstatt nur das umzusetzen, was ihnen vorgegeben wird.
Die beiden zu unterscheiden ist wirklich schwierig, da beide daran arbeiten, wie eine Website oder App auf dem Gerät des Nutzers erscheint. Ein UI-Entwickler strebt eine Interaktion zwischen Nutzer und Computer an, die einfach und intuitiv bleibt. Deshalb lohnt es sich, fundierte Designfähigkeiten und ein Gespür für die Wirkung grafischer Elemente zu entwickeln.
Front-End-Entwickler tun etwas Ähnliches, wenn auch nicht ganz dasselbe: Sie integrieren visuelle Elemente in Websites und Apps und ermöglichen es den Nutzern durch die Implementierung von Designs mittels Programmiersprachen, zu interagieren und zu navigieren.
Ein UI-Entwickler ist also eine Mischung aus beiden Welten. Programmierkenntnisse, kreatives Design und fundiertes Wissen über die zugrunde liegenden Konzepte und Prinzipien.
UI-Entwickler sind weder Designer noch Front-End-Entwickler. Ihre Arbeit liegt genau dazwischen und konzentriert sich auf eine Schnittstelle, die funktioniert und das tatsächliche Nutzerverhalten widerspiegelt – nicht das, was laut Spezifikation eigentlich passieren sollte.
Zu den wichtigsten Aufgaben dieser Rolle gehören:
Jeder dieser Schritte erfordert ein Auge fürs Detail und Kreativität, die stets im Einklang mit Funktionalität, Nutzerverhalten und Geschäftszielen steht.
Für den Auftraggeber ist dies eine Entscheidung über die Teamzusammensetzung, keine Debatte über Berufsbezeichnungen.
Die Kosten der Lücke zwischen Design und Code. In einem klassischen Team entscheidet ein Designer, wie eine Oberfläche aussehen und funktionieren soll, übergibt eine Datei und prüft anschließend das Ergebnis. Jedes Detail, das dem Designer zwar klar war, aber nicht auf der Arbeitsfläche – dem Canvas im Design-Tool, auf dem der Bildschirm entworfen wird – festgehalten wurde, wird zu einem Korrekturkommentar. Jeder Kommentar bedeutet eine zusätzliche Abstimmungsrunde zwischen zwei Personen. Ein UI-Entwickler verkürzt diesen Prozess, da die Person, die die Oberfläche umsetzt, genau weiß, warum sie so spezifiziert wurde. Die Entscheidung muss nicht erst kommuniziert werden.
Die Auswirkungen auf die Markteinführungszeit. Fällt die Übergabe weg, entfällt auch eine Warteschlange. Besonders profitiert davon Arbeit, die hauptsächlich aus Oberflächen besteht: eine Marketing-Website, ein Onboarding-Prozess, ein internes Tool oder ein MVP – also eine erste Version, die dazu dient, eine Produktidee mit echten Nutzern zu testen, statt ein vollständiges Produkt zu liefern.
Das Lieferrisiko. Das Risiko bei der Trennung der Rollen besteht nicht darin, dass die Oberfläche am Ende hässlich aussieht. Es besteht darin, dass responsives Verhalten bei Zwischengrößen, Cursor-Zustände, Fokusreihenfolge (die Reihenfolge, in der man sich durch Drücken der Tab-Taste durch eine Seite bewegt – wichtig für die Navigation per Tastatur und Screenreader) und Ladefeedback in keiner statischen Designdatei spezifiziert sind. Zurück zum Bauvergleich: Was in den Plänen nicht eingezeichnet ist, entscheidet jemand, während er das Werkzeug in der Hand hält. Ein Front-End-Entwickler mit UI-Verständnis entscheidet bewusst. Wer dieses Verständnis nicht hat, entscheidet nach dem Zufallsprinzip.
Drei Fragen klären die Entscheidung. Dies ist der Check, den wir bei Imaginary Cloud vor der Besetzung von Interface-Projekten durchführen.
1. Wie überschaubar ist die Oberfläche? Zählen Sie die verschiedenen Bildschirme und Zustände, die eine Person gleichzeitig im Blick behalten muss. Eine Marketing-Website, ein Onboarding-Prozess oder ein internes Tool sind für eine Person gut zu bewältigen. Ein Produkt mit vielen Oberflächen, die alle konsistent bleiben müssen, hingegen nicht.
2. Besteht bereits eine Design-Vorgabe? Wenn es bereits eine Marke, eine Komponentenbibliothek oder ein Design-System gibt, innerhalb dessen gearbeitet werden kann, geht es um die getreue Umsetzung – genau das ist die Aufgabe eines UI-Entwicklers. Wenn die gestalterische Richtung erst noch gefunden werden muss, ist das in erster Linie eine Design-Aufgabe.
3. Wie tiefgreifend muss die Produktforschung sein? Wenn sich offene Fragen zum Produkt durch das Verhalten der Oberfläche beantworten lassen, kann dies eine Person allein leisten. Wenn jedoch dedizierte Nutzerforschung, Testrunden und ein gepflegtes Design-System erforderlich sind, benötigen Sie eine Vollzeit-Design-Funktion.
Überschaubare Oberfläche, klare Vorgaben, Fokus auf Umsetzung statt Forschung: Stellen Sie einen UI-Entwickler ein. Wenn zwei oder mehr Antworten dagegen sprechen, ist das der Punkt, an dem Sie sowohl einen Designer als auch einen Front-End-Entwickler einstellen sollten. Die hybride Rolle eliminiert eine Übergabe. Sie ersetzt jedoch keine Design-Funktion, und wer Ihnen etwas anderes erzählt, will Ihnen nur ein X für ein U vormachen.
Nehmen Sie Eurofound, die EU-Agentur, deren Datenbank zur Plattformökonomie ein benutzerfreundliches Frontend benötigte. Die Vorgabe war eng gesteckt: eine funktionierende Schnittstelle innerhalb von sechs Wochen, basierend auf einem bestehenden Styleguide und ohne fest zugewiesenen Designer. Einer unserer Frontend-Entwickler übernahm stattdessen die Designentscheidungen intern, wandte den Styleguide von Eurofound für eine visuelle Konsistenz an und stimmte sich bei Fragen mit unseren eigenen Designern ab. Dieselbe Person entwickelte das Django-Backend, das die Inhalte aus der bestehenden Datenbank abrief, verknüpfte das Frontend damit und fügte Kategoriefilter sowie eine Freitextsuche hinzu, damit sich die Nutzer durch Tausende von Dokumenten bewegen konnten, ohne den Überblick zu verlieren. Das ist die hybride Rolle in der Praxis: ein begrenzter Umfang, ein bereits festgelegter Designrahmen und die Priorisierung der Umsetzung gegenüber neuer Recherche. Genau der Fall, in dem eine Person mit beiden Kompetenzen eine Übergabe überflüssig macht, anstatt dass zwei Personen diese über eine Datei hinweg aushandeln müssen. Es ist auch das, was es einem Frontend-Entwickler ermöglicht, eine Designfrage direkt bei der Implementierung zu klären, anstatt die Arbeit zurückzugeben.
Lesen Sie diesen Abschnitt zweimal, wenn Sie jemanden einstellen möchten. Er dient gleichzeitig als Leitfaden dafür, worauf Sie bei einem Kandidaten achten sollten.
Gute UI-Entwickler sind sowohl mit Design- als auch mit Webentwicklungskompetenzen bestens vertraut. Idealerweise beherrschen sie Grafikdesign-Tools wie Figma, das heute bei den meisten Interface-Projekten führend ist und als Basis für Design-Systeme dient: eine gemeinsame Bibliothek aus Komponenten und Regeln, die für Konsistenz auf jedem Bildschirm sorgt. Sketch ist vor allem auf dem Mac noch im Einsatz, und Adobe XD werden Sie in älteren Dateien antreffen. Da Adobe XD jedoch nur noch im Wartungsmodus läuft, sollten Sie es als Legacy-Software betrachten und nicht für neue Projekte verwenden.
Zudem benötigen sie fundierte Kenntnisse in Webtechnologien: HTML, CSS und JavaScript.
Darüber hinaus ist es hilfreich, AJAX (der ältere Begriff für das Aktualisieren von Seitenteilen ohne Neuladen, heute meist über die browserinterne Fetch-API gelöst), jQuery (eine JavaScript-Bibliothek zur Vereinfachung der DOM-Manipulation, die Ihnen vor allem bei der Wartung bestehenden Codes begegnen wird) und JSON (das Textformat, das die meisten APIs für den Datenaustausch nutzen) zu verstehen. Ebenfalls nennenswert sind aktuelle Tools wie MUI (ehemals Material UI), eine React-Komponentenbibliothek zur Umsetzung von Googles Material Design, CodePen sowie Sass, ein CSS-Präprozessor, der Variablen und wiederverwendbare Blöcke ermöglicht. Sass wird in der Syntax SCSS geschrieben, die auch in den weiter unten folgenden Beispielen verwendet wird.
Dann gibt es noch den Teil, den kein Kurs abdeckt. Ein ästhetisches und intuitives Gespür für visuelle Gestaltung lässt sich nicht einfach erlernen; es erfordert Übung und konstruktive Kritik. Designkonzepte und Prinzipien zu Farben, Typografie, Mustern und Abständen ermöglichen es einem Entwickler, die Perspektive des Nutzers vorwegzunehmen, anstatt sie nur zu erraten.
UI-Entwickler sorgen nicht nur für eine ansprechende Optik, sondern machen Produkte so intuitiv, dass der Nutzer gar nicht erst über das Interface nachdenken muss. Das erfordert Empathie. Empathie ist es, die es einem UI-Entwickler ermöglicht, sich in die Lage des Nutzers zu versetzen und zu verstehen, was dieser erreichen möchte.
Ehrlich gesagt neigen UI-Entwickler dazu, Perfektionisten zu sein, wenn es um das Aussehen und die Funktion geht. Sie wissen genau, wie viel Unterschied ein „scheinbar unwichtiges“ Detail ausmachen kann. Genau in diesen Details beweist sich der Wert dieser Rolle. Deshalb hat ein guter UI-Entwickler einen einzigartigen Blick für das Wesentliche.
Da die Rolle sehr vielseitig ist, gibt es verschiedene Einstiegswege. Ein Studium im Bereich Grafikdesign vermittelt die gestalterischen Grundlagen: Designprinzipien, Branding und User Research. Ein Informatikstudium mit Schwerpunkt Front-End liefert das technische Fundament, einschließlich Programmiersprachen, Informatikkonzepten und einem Verständnis dafür, wie die verschiedenen Rollen in einem Webentwicklungsteam ineinandergreifen.
Beide Wege lassen jeweils die Hälfte der Arbeit offen. Wer vom Grafikdesign kommt, muss programmieren lernen. Wer aus der Entwicklung kommt, muss sich Designprinzipien aneignen. Für beides ist keine formale Ausbildung zwingend erforderlich: Kurse und Zertifizierungen – ob online oder vor Ort – sind fokussierter und werkzeugspezifischer. Gerade ihr praktischer Ansatz hilft dabei, schon ab der ersten Woche ein Portfolio aufzubauen.
Unabhängig von der Ausbildung ist das Portfolio der entscheidende Nachweis. Das gilt gleichermaßen für diejenigen, die eines erstellen, wie für diejenigen, die eines bewerten.
Ein starkes Portfolio zeigt vor allem das zugrunde liegende Denken. Warum wurde dieses Layout gewählt und nicht ein anderes? Welche Einschränkungen erforderten einen Kompromiss? Was würde der Entwickler heute anders machen? Ein schwaches Portfolio zeigt lediglich fertige Bildschirme, ohne zu erklären, wie man dorthin gelangt ist. Wenn Sie Ihr eigenes Portfolio zusammenstellen, holen Sie sich ehrliches Feedback von anderen UI-Entwicklern, aber auch von fachfremden Personen – denn Letztere reagieren als Nutzer und nicht als Kollegen.
Die Benutzeroberfläche ist das Erste, womit ein Nutzer in Berührung kommt. Wenn sie nicht ansprechend und intuitiv ist, verlassen Nutzer das Produkt möglicherweise, bevor sie überhaupt die Funktionen entdecken. Deshalb ist es für Frontend-Entwickler so wichtig, UI- und Designprinzipien zu beherrschen.
Der Nutzen ist dabei keineswegs abstrakt. Bei einem Projekt von Imaginary Cloud führte allein die Verbesserung der Benutzeroberfläche dazu, dass die App-Nutzung des Produkts verdreifacht wurde.
Ein Verständnis für Design verbessert zudem die Zusammenarbeit zwischen Entwicklern und UI/UX-Designern, da beide Seiten die Beweggründe hinter bestimmten Entscheidungen nachvollziehen können. Aktuelle Fachbücher zu lesen und zu beobachten, wie andere Oberflächen Probleme lösen, ist der effizienteste Weg, um sich dieses Wissen anzueignen. Als Frontend-Entwickler helfen Ihnen UI-Grundlagen dabei:
UI-Prinzipien werden meist auf das Design bezogen, und es gibt zahlreiche Leitfäden dazu. Die folgenden drei stammen aus etablierten Quellen: Jakob Nielsens zehn Usability-Heuristiken für die Nielsen Norman Group, Ben Shneidermans acht goldene Regeln für das Interface-Design [editor note: add a verified link to a primary Shneiderman source before publishing]sowie die gesammelten Listen auf principles.design. Betrachten wir sie stattdessen aus der Perspektive der Entwicklung und schauen uns an, was ein Frontend-Entwickler dazu beiträgt.
Konsistenz steht fast ganz oben auf jeder Liste für UI-Design. Die gesamte Plattform muss einheitlich wirken, damit der Nutzer ein präzises mentales Modell des Produkts aufbauen und schnell erfassen kann, welche Möglichkeiten ihm zur Verfügung stehen. Im Design zeigt sich dies durch einheitliche Formen, Farbpaletten und eine definierte Typografie.
Konsistenz ist auch der Schlüssel zu einer reibungslosen Implementierung, da sie die Wiederverwendung von Elementen, Verhaltensweisen und Designs ermöglicht. Schwierig wird es jedoch bei unterschiedlichen Fenstergrößen.
Werte einmalig mit SCSS-Variablen und Mixins definieren
Wenn Sie die Möglichkeit haben, SCSS anstelle von herkömmlichem CSS zu verwenden, nutzen Sie sie. Variablen erlauben es Ihnen, einen Wert, der an fünfzig Stellen verwendet wird, zu ändern, ohne jede einzelne suchen zu müssen und Angst haben zu müssen, eine zu übersehen. Weisen Sie den gewünschten Wert einer Variablen zu und verwenden Sie diese dann überall dort, wo Sie ihn benötigen. Ideal für Farbpaletten, Typografie und komplexere Dinge wie Schatten oder Verläufe.
// _variables.scss
$colour-primary: #0f62fe;
$colour-text: #1a1a1a;
$font-body: "Inter", sans-serif;
$shadow-card: 0 2px 8px rgba(0, 0, 0, 0.12);
.button {
background: $colour-primary;
font-family: $font-body;
box-shadow: $shadow-card;
}Um mehr als nur einen einzelnen Wert wiederzuverwenden, nutzen Sie @mixin und @include. Definieren Sie den Stilblock einmal mit @mixin und wenden Sie ihn dann mit @include auf jedes Zielelement an.
@mixin card-surface {
background: #ffffff;
border-radius: 8px;
padding: 24px;
box-shadow: $shadow-card;
}
.pricing-card {
@include card-surface;
}
.testimonial-card {
@include card-surface;
text-align: center;
}Breakpoints und relative Einheiten verwenden, damit Layouts bei jeder Breite stabil bleiben
Bei der Umsetzung eines Designs neigt man dazu, die exakten Vorgabewerte oder ähnliche Werte zu übernehmen. Zunächst sieht alles korrekt aus. Doch sobald man das Fenster schmaler zieht, bricht das Layout zusammen: Inhalte werden abgeschnitten oder an Stellen verschoben, die so nicht beabsichtigt waren.
Beginnen Sie mit Breakpoints, also den Fensterbreiten, bei denen ein Stylesheet zu einem anderen Regelsatz wechselt. Sie ermöglichen es, Komponenten ab einer bestimmten Größe neu zu gestalten, wodurch Sie eine Desktop- und eine Mobilversion einer Seite erhalten, ohne das HTML duplizieren zu müssen.
Für die Größen dazwischen sollte die Struktur flexibel gestaltet sein. Nicht jeder nutzt den Browser im Vollbildmodus. Verwenden Sie anstelle von exakten Breiten lieber relative Längeneinheiten, die die Größe eines Elements im Verhältnis zu seinem Container oder dem Viewport bestimmen, anstatt sie in festen Pixeln anzugeben. Wenn ein Design eine 2000px breite Seite vorsieht, bei der ein Element 1400px einnimmt und an jeder Seite 300px Rand hat, verwenden Sie stattdessen eine Breite von 70 % und Ränder von 15 %.
Bootstrap, ein CSS-Framework, hilft in beiden Fällen, da sich seine Spaltenklassen an die jeweils verfügbare Breite anpassen. Der Unterschied lässt sich leicht selbst nachvollziehen: Erstellen Sie dasselbe Layout zweimal, einmal mit prozentualen Breiten und einmal mit festen Pixelwerten, und ziehen Sie dann das Fenster schmaler. Die prozentuale Version passt sich an und behält ihre Proportionen bei. Die feste Version behält ihre Maße bei und verliert das Layout, wodurch Inhalte aus dem Sichtfeld gedrängt oder in die falsche Zeile verschoben werden.
Die Effizienz eines Systems wird meist an der Zeit gemessen, die ein Nutzer für eine Aufgabe benötigt, sowie an der Anzahl der erforderlichen Klicks. Vertraute Begriffe, klar definierte Ebenen und eine sinnvolle Struktur führen den Nutzer schneller ans Ziel. Das UI/UX-Design spielt dabei die Hauptrolle bei der Orientierung. Als UI-Entwickler gibt es jedoch gezielte Maßnahmen, mit denen Sie Klicks einsparen können.
Formularbeschriftungen mit Eingabefeldern verknüpfen
Beim Ausfüllen von Formularen klicken Nutzer häufig auf den Namen des Eingabefelds, das label, anstatt auf das Feld selbst. Ist das Label nicht mit dem Eingabefeld verknüpft, bleibt dieser Klick wirkungslos und der Nutzer muss erneut klicken. Beheben Sie dies, indem Sie eine id für das Eingabefeld und ein for-Attribut für das Label definieren.
<label for="email">Email address</label>
<input type="email" id="email" name="email">Das erste Feld automatisch fokussieren, um einen Klick zu sparen
Bleiben wir bei Formularen: Wenn der Hauptzweck einer Seite die Eingabe von Informationen ist, erleichtern Sie dem Nutzer die Arbeit erheblich, wenn das erste Feld bereits ausgewählt ist. Durch das automatische Fokussieren des ersten oder wichtigsten Feldes sparen Sie einen Klick. Dies funktioniert auf dem Desktop ebenso wie auf Mobilgeräten, wo sich zudem direkt die Tastatur öffnet.
Manche Nutzer werden das Feld trotzdem antippen. Doch bei Anmeldeseiten entfällt so ein zusätzlicher Schritt bei einem Vorgang, den Menschen ständig wiederholen. Das autofocus-Attribut fokussiert das Eingabefeld beim Laden der Seite. Dasselbe lässt sich mit JavaScript erreichen, indem das Element über seine ID ausgewählt und .focus() aufgerufen wird (in älteren Codebasen funktioniert dies auch mit jQuery).
<input type="email" id="email" name="email" autofocus>
document.getElementById("email").focus();Den gesamten Bereich klickbar machen
Wenig ist für Nutzer frustrierender als ein Bereich, der klickbar aussieht, auf den aber nur der Text reagiert. Dies kommt häufig in mobilen Menüs vor und ist ein Grund für Nutzer, die Seite zu verlassen. Wenn Sie einen großen Button mit kleinem Text haben, erwartet der Nutzer, dass der gesamte Button die Aktion auslöst, nicht nur der Bereich, auf dem der Text steht.
Bei einer Menüzeile wird dies deutlich: Umschließen Sie nur das Label mit dem Anker-Tag, muss der Nutzer genau die Wörter treffen. Lassen Sie den Anker hingegen die gesamte Zeile ausfüllen, reagiert die gesamte Zeile. Setzen Sie den Link innerhalb des Listenelements auf display: block, damit er die volle Breite und Höhe einnimmt.
Weißraum nutzen, um Zusammengehöriges zu gruppieren
In einer Benutzeroberfläche sollten Elemente, die sich gleich verhalten, auch gleich aussehen. Zusammengehörige Elemente sollten beieinander stehen, während unzusammenhängende Elemente getrennt bleiben. Neben Typografie, Farbe und Form ist Weißraum das entscheidende Mittel, um diese Nähe zu vermitteln. Zudem lässt er die Seite atmen und reduziert die Informationsdichte, was dem Nutzer die nächste Entscheidung erleichtert.
Sie gestalten selbst? Betrachten Sie Weißraum als unsichtbare Begrenzung. Wo Sie das Bedürfnis nach einer Trennlinie zwischen zwei Abschnitten verspüren, reicht meist ein wenig Abstand aus.
Wenn Sie das Design eines anderen umsetzen, respektieren Sie die Proportionen und Abstände, denn sie wurden bewusst gewählt. Verwenden Sie relative Längeneinheiten, damit die Proportionen bei variabler Breite erhalten bleiben, und setzen Sie exakte Höhenwerte ein. Ein Außenabstand von 47px ist genau das – nicht 45px oder 50px. Seien Sie vorsichtig, wenn Sie einem Element, dessen Nachbar bereits Abstände besitzt, Margin oder Padding hinzufügen: Rechnen Sie nach, damit der Zwischenraum genau dort landet, wo er beabsichtigt war.
Nutzer müssen wissen, was sie tun können, was sie gerade tun und was sie bereits getan haben. Geben Sie Rückmeldung zum Systemstatus, wenn eine Aktion abgeschlossen ist oder etwas länger als gewöhnlich dauert. Was auch immer passiert, informieren Sie den Nutzer. Lassen Sie niemanden über das Ergebnis seiner eigenen Aktion im Unklaren.
Verwenden Sie den Cursor, den der Nutzer erwartet
Cursor-Symbole sind Standards, mit denen wir täglich umgehen. Ein bestimmter Cursor signalisiert eine bestimmte Art von Aktion – genau deshalb führt ein unerwarteter Cursor in die Irre. Klickbar bedeutet Zeigefinger. Ziehbar bedeutet eine offene Hand, die sich beim Greifen schließt. Prüfen Sie den Cursor bei benutzerdefinierten Elementen und nutzen Sie die HTML-Elemente, für die diese Eigenschaften bereits definiert sind.
Nutzen Sie Animationen, um den Systemstatus anzuzeigen
Animationen sind nicht dazu da, Dinge hübscher zu machen. Bei kleinen Elementen sorgen sie für Kontinuität, verdeutlichen Aktionen und Fortschritt. Ein Nutzer erinnert sich eher an das, was er gerade getan hat, wenn er die Veränderung schrittweise verfolgen konnte, anstatt sie abrupt zu sehen.
Ein-/Aus-Schalter sind das deutlichste Beispiel. Springt der Schalter bei einem Klick einfach nur um, fragt sich der Nutzer, ob er wirklich geklickt hat und in welchem Zustand sich der Schalter zuvor befand. Animieren Sie den Übergang, damit der Vorgang sichtbar wird.
Animationen sind auch das Mittel, um über Prozesse zu informieren, die im Hintergrund ablaufen. Wenn eine Aktion etwas Zeit in Anspruch nimmt, zeigen Sie einen Ladekreis oder einen Fortschrittsbalken anstelle einer leeren Seite, damit die Wartezeit als laufender Prozess und nicht als Fehler wahrgenommen wird.
Wenn Sie in der Front-End-Entwicklung arbeiten, suchen Sie das Gespräch mit dem UI/UX-Designer. Es gibt fast immer Vorschläge, die es nie aufs Papier geschafft haben und deren Umsetzung nur wenig Aufwand erfordert. Wenn Sie bei einer bestimmten Aufgabe nicht weiterkommen, gehen Sie mit den Optionen, die Sie sehen, zurück an das Design-Team. So lassen sich Einschränkungen und Design-Absichten gemeinsam lösen, anstatt getrennt voneinander. Partizipatives Design ist eine strukturierte Methode, um diesen Austausch zu führen.
Sie designen alleine? Bitten Sie trotzdem einen UI/UX-Designer um eine Überprüfung. Er wird erkennen, was nicht stimmig ist, ob die Größenverhältnisse passen und welche Alternativen Sie bisher nicht in Betracht gezogen haben.
Ein UI-Entwickler ist weder ein reiner Front-End-Entwickler noch ein Designer, sondern eine Mischung aus beidem. Die eigentliche Frage hinter diesem Artikel ist also eine Personalentscheidung. Unser Interface Ownership Test liefert die Antwort: Wenn es um einen begrenzten Oberflächenbereich geht, die Designvorgaben bereits stehen und die Umsetzung wichtiger ist als tiefgreifende Recherche, spart ein UI-Entwickler die Übergabe zwischen Design und Code, die bei einem Team aus Designer und Front-End-Entwickler ständig gepflegt werden muss. Ein Produkt, das jedoch kontinuierliche Design-Recherche und die Pflege eines Design-Systems parallel zur Vollzeit-Implementierung erfordert, braucht beide Rollen – daran lässt sich auch mit keinem Test etwas ändern.
Das eigentliche Risiko besteht nicht darin, sich für die falsche Option zu entscheiden. Das Problem ist, die Rollen aufzuteilen und dann nicht zu bemerken, dass sich niemand um responsives Verhalten, Fokus-Reihenfolgen oder Lade-Feedback kümmert und diese Aspekte einfach nur standardmäßig umgesetzt werden.
Selbst wenn Sie Front-End-Entwickler bleiben, machen sich Design-Kenntnisse bezahlt. Konsistenz, Bedienungseffizienz und Transparenz verändern nicht nur das Aussehen einer Anwendung, sondern auch, was ein Nutzer damit erreichen kann – und implementiert werden diese Dinge im Front-End ohnehin, ob sie nun explizit spezifiziert wurden oder nicht.
Nein, auch wenn sich die beiden Bereiche stark überschneiden. Ein Front-End-Entwickler implementiert eine Schnittstelle. Ein UI-Entwickler implementiert sie nicht nur, sondern bringt auch das Designwissen mit, um zu entscheiden, wie sie sich verhalten soll. So werden Entscheidungen, die in einer Designdatei offen bleiben, bewusst und nicht zufällig getroffen. Bei Imaginary Cloud betrachten wir einen UI-Entwickler als einen Front-End-Entwickler mit UI-Prinzipien, nicht als eine separate Disziplin.
Ja. HTML, CSS und JavaScript sind Kernbestandteile der Rolle, ebenso wie Tools wie Sass und Komponentenbibliotheken wie MUI. Ein UI-Entwickler, der die Schnittstelle nicht ausliefern kann, ist ein UI-Designer.
Design-Seite: Farbe, Typografie, Abstände, Muster, Barrierefreiheit und ausreichend Verständnis für User Research, um UX-Ergebnisse lesen zu können. Entwicklungs-Seite: HTML, CSS, JavaScript sowie nützliche Ergänzungen wie Sass, AJAX, jQuery und JSON. Unter beidem liegt Empathie für den Nutzer und ein Auge fürs Detail, denn genau hier beweist die Rolle ihren Wert.
Machen Sie den Interface-Ownership-Test: Wie abgegrenzt ist die Oberfläche, gibt es bereits eine Designvorgabe und wie viel Forschungstiefe benötigt das Produkt? Eine abgegrenzte Oberfläche, vorhandene Vorgaben und der Fokus auf Ausführung statt Forschung sprechen für einen UI-Entwickler, was ideal für Marketing-Websites, Onboarding-Prozesse, interne Tools oder ein MVP ist. Wenn zwei oder mehr Antworten in die andere Richtung weisen, sollten Sie beide Rollen besetzen.
Für das Design: In erster Linie Figma, wobei Sketch noch verbreitet ist und Adobe XD meist nur für Altdaten genutzt wird – in der Regel mit einem Design-System, um die Konsistenz der Bildschirme zu wahren. Für die Implementierung: HTML, CSS und JavaScript sowie Sass, MUI, CodePen und die Chrome DevTools.
In der Praxis ja, und oft standardmäßig statt auf explizite Anweisung. Fokusreihenfolge, Cursor-Zustände, die Verknüpfung von Labels und Eingabefeldern, Kontraste und das Verhalten bei variierenden Viewport-Breiten werden während der Implementierung festgelegt. Ein UI-Entwickler, der die UI-Prinzipien beherrscht, trifft diese Entscheidungen bewusst.
Zwischen UX-Design und Front-End-Engineering, im Austausch mit beiden. Die Rolle nimmt die Vorgaben aus der UX-Forschung auf, trifft die UI-Entscheidungen und setzt diese um. Deshalb ist die Kommunikation mit Designern sowie Front-End- und Backend-Entwicklern ein fester Bestandteil der Arbeit und kein Zusatzaufwand.
Sie überlegen, wie Sie Ihre Front-End- und Designarbeit strukturieren sollen? Sehen Sie sich an, wie wir das bei unseren Fallstudienumgesetzt haben, oder sprechen Sie mit uns.
Webentwickler mit einer besonderen Liebe zum Frontend. Mutter von Katzen. In meiner Freizeit versuche ich, den Planeten zu retten, indem ich umweltfreundliche Alternativen teile.
Alexandra Mendes ist Senior Growth Specialist bei Imaginary Cloud und verfügt über mehr als 3 Jahre Erfahrung in der Erstellung von Texten über Softwareentwicklung, KI und digitale Transformation. Nach Abschluss eines Frontend-Entwicklungskurses erwarb Alexandra einige praktische Programmierkenntnisse und arbeitet nun eng mit technischen Teams zusammen. Alexandra ist begeistert davon, wie neue Technologien Wirtschaft und Gesellschaft prägen. Sie liebt es, komplexe Themen in klare, hilfreiche Inhalte für Entscheidungsträger umzuwandeln.
People who read this post, also found these interesting:
.webp)
