User Interface Design ist der Prozess der Planung und Gestaltung von Websites, die ein Benutzer sieht und mit denen er interagiert. Dies wird als Schnittstelle oder Interface bezeichnet. Der Aufbau einer funktionierenden, logischen Benutzeroberfläche, die eine komfortable User-Erfahrung gewährleistet, ist entscheidend für den Erfolg einer Website oder App. Das Gesamtlayout sollte übersichtlich und leicht zu navigieren sein.
Was ist UI Scetching?
Der Begriff UI Scetching bezeichnet den Entwurfsprozess – digital oder auf Papier –, bei dem die Benutzeroberfläche einer Website oder App skizziert wird. Dies hilft deinem Team, ein Projekt zu visualisieren, und stellt sicher, dass alle auf dem gleichen Stand sind. Es hilft auch bei der Problemlösung in einem frühen Stadium der Entwicklung. Anfänger im UX-Design können und sollten an diesem Prozess teilnehmen – er kann zur Recherche dienen oder auch eine Möglichkeit sein, die User Journeys zu entwickeln, die die Website am Ende bieten wird.
Bei der Planung des Layouts und des Gesamtdesigns einer App oder Website versetzen sich die Entwickler in die Situation der User. Es ist entscheidend, den Endzweck des Produkts zu verstehen, da davon abhängt, welche verschiedenen User Journeys erforderlich bzw. möglich sind. UI-Skizzen sind im Wesentlichen schnell und grob. Sie sind keine ausgereiften Pläne, sondern dienen zur schnellen Repräsentation von Ideen und ermöglichen die effektive Kommunikation des Teams über die Richtung, in die sich das jeweilige Projekt bewegen soll. UI Scetching nutzt man normalerweise am Beginn der Entwicklung einer Website, in der Ideenfindungsphase – also noch bevor man mit der eigentlichen Entwicklung beginnt.
Tipps zur Planung des User Interface Designs
Wenn du eine neue Website oder App digital planst, ist die Plattform Sketch ein sehr nützliches Werkzeug für die Gestaltung von Benutzeroberflächen. Sketch bietet deinem Team eine einfache Möglichkeit, zusammenzuarbeiten, Ideen auszutauschen und Brainstormings durchzuführen, um schnell eine Vorstellung davon zu bekommen, wie das Endprodukt aussehen soll. Es startet den Designprozess und vermittelt schnell eine deutliche Vorstellung davon, wie das Projekt für den Endbenutzer aussehen würde.
Um dieses Tool kennenzulernen, kannst du dich auf der Website für eine kostenlose 30-Tage-Testversion anmelden. Sketch verfügt auch über eine sehr ausführliche Bedienungsanleitung und eine Dokumentation für Benutzer. Weitere Tipps für den Einstieg in Sketch sind die folgenden:
Melde dich für einen der Kurse auf der Plattform an. Es gibt verschiedene Kurse sowohl für Anfänger als auch für erfahrenere Benutzer. Dazu gehören Sketch Master, Design+Code und Learn UX.
Entdecke die verschiedenen verfügbaren Plug-ins der Plattform. So erhältst du einen Einblick in die vielfältigen Funktionen, die mit dem Tool möglich sind und bekommst einen guten Eindruck davon, welche Aufgaben sich damit bewältigen lassen.
Lege ein Konto an und erstelle einen Arbeitsbereich für dein Team. Dies ist eine der besten Möglichkeiten für Anfänger, um gleich loszulegen. Sobald du einen Arbeitsbereich eingerichtet hast, kannst du das Tool ausprobieren und mit der Planung von Projekten beginnen.
Weise einem Teammitglied Admin-Rechte zu und melde allen anderen als Redakteure an. Für jeden Arbeitsbereich ist mindestens ein Editor erforderlich. Die Rollen können bei Bedarf angepasst werden, sobald die Einrichtung des Arbeitsbereichs abgeschlossen ist.
Lade die Mitglieder deines Teams in den Arbeitsbereich ein – jetzt kann die Zusammenarbeit beginnen. Du kannst deinen Teammitgliedern entweder die Rolle von Bearbeitern oder von Betrachtern zuweisen.
Wenn es möglich ist, solltest du alle Teammitglieder mit ins Boot holen, damit sie zum Designprozess auf der Plattform beitragen. Sketch ist ein sehr kollaboratives Werkzeug – da ist es gut, wenn alle mit Hand anlegen.
Das Programm kann auch allgemein für Website- und App-Updates verwendet werden, nicht nur um ein neues Projekt zu starten.
Wirf auch noch einen Blick auf das gesamte Bildungsmaterial der Plattform. Du findest hier viele Informationen über Prototyping, Import und Export von Dateien, Design und Plug-ins. Es ist immer gut, alle Möglichkeiten und Funktionalitäten auszuloten.
Das Hauptziel bei diesem Prozess besteht darin, sicherzustellen, dass alle Teammitglieder in Bezug auf Layout und Design auf dem gleichen Stand sind. Außerdem hilft es, potenzielle Fallstricke zu erkennen, bevor die eigentliche Entwicklung beginnt. Selbst bei hervorragender Planung und unabhängig von der jeweiligen Zielsetzung werden die meisten Websites und Apps oftmals modifiziert und umgebaut, bis man schließlich zu einem zufriedenstellenden Ergebnis gelangt. Eine Möglichkeit zu haben, die Website oder App zu planen und wiederholt zu testen, ist bei der Webentwicklung und beim UI-Design von entscheidender Bedeutung.
Weitere wichtige Aspekte des UX-Designs sind die Prinzipien des nutzerzentrierten Designs und die Durchführung von Recherchen zur Ermittlung der User-Bedürfnisse. Häufig wird Design Thinking im User Experience Design verwendet. Auch im UX-Designprozess sind schlanke und agile Methoden wichtig.
Vorteile der Planung von Hand
Zu den Hauptvorteilen der Schnittstellenplanung von Hand gehören die Geschwindigkeit und die Gewährleistung, dass alle aufeinander abgestimmt sind. Es ist der schnellste Weg, um Ideen zwischen Entwicklern, Designern und Projektmanagern zu visualisieren und zu kommunizieren, und eine großartige Möglichkeit, sicherzustellen, dass alle auf dem gleichen Stand sind. Die Planung von Hand hilft deinem Team auch, Probleme zu antizipieren – sei es bei der Implementierung einer bestimmten Funktion oder beim Schließen einer Lücke in der User Journey.
Sobald der Plan steht, sind die nächsten Schritte das Wireframing, das Prototyping und die Codierung der Website. Die feinen Details in Bezug auf Optik oder Funktionalität sind in der Planungsphase nicht vordringlich und sollten außen vor gelassen werden. Die Planung offen und allgemein zu halten, unterstützt die Entwicklung neuer Ideen und ermöglicht es, immer wieder über den Tellerrand zu schauen. Das ist in der Webentwicklung sehr wertvoll.
Ist das nicht nur Wireframing?
Auch Wireframing ist ein schneller Planungsprozess in der Webentwicklung, aber es konzentriert sich mehr auf die Platzierung bestimmter Elemente und auf die gesamte Website-Hierarchie. Es geht nur wenig über die grundsätzliche Planung hinaus und hat nicht die Benutzererfahrung im Blick. Für einen User Experience Designer ist dagegen entscheidend, wie der Benutzer auf der Website navigiert. Ihn interessiert weniger, wie die verschiedenen Teile der Website zusammenkommen und funktionieren. Kurz gesagt: Es geht mehr um die Erfahrung und die Perspektive des Benutzers als um die Funktionalität hinter den Kulissen.
User Experience Bootcamp
Als Anfänger kannst du dich im UI Design Bootcamp von Ironhack über den gesamten Prozess des User Interface Designs informieren. Der Kurs deckt alles ab: von Theorie und Methodik bis hin zur praktischen Umsetzung. Mit Kenntnissen in Figma, Design Thinking, agilen Methoden und User Research bist du bestens gerüstet, um einen neuen Job als Designer anzutreten. Auch Prinzipien des Interaktionsdesigns und Informationsarchitekturen werden behandelt. Der Bau deines ersten interaktiven Prototyps ist Teil des Bootcamps. Hier stehen die praktischen Fähigkeiten im Mittelpunkt.
