Beim Wireframing wird die grundlegende Informationsstruktur und -hierarchie modellhaft definiert und abgestimmt. Es ist die wichtigste Grundlage für das UI Design und hilft, den Gestaltungsprozess zu optimieren und zu beschleunigen. Neben der grundsätzlichen Anordnung sowie Größe von Text und Bild, definiert es die Platzierung von Navigationselementen und deren einzelne Zustände.
Was bedeutet für uns
perfektes UI Design?
Ein gutes User Interface Design (UI Design) muss einen klaren Nutzen und eine eindeutige Funktionalität haben und dabei optimal bedienbar sein.
Um dies zu erreichen braucht es eine stringente und transparente Informations- und Navigationsarchitektur, die sich intuitiv erfassen lässt. Wichtig ist sich immer auf den Nutzer zu fokussieren, jedes Contentelement bezüglich seiner Notwendigkeit und Priorität zu hinterfragen und die Darstellung der Inhalte für jeden relevanten Screen gut lesbar und barrierearm zu gestalten.
Wenn dann noch eine moderne und zielgruppenkonforme Ästhetik die Nutzer aktiviert, unterhält und begeistert, definiert dies in Summe unseren Maßstab für gutes UI Design.
Wir beherrschen jeden Schritt
der UI Design Entwicklung …
Wireframing
Prototyping
Um die Interaktionen innerhalb eines UI zu testen folgt nach dem Wireframig die Erstellung eines Clickdummys, also das Prototyping. An diesem lassen sich die Abläufe innerhalb der Nutzungsszenarien visualisieren und optimieren. Prototypen dienen somit in erster Linie zur Unterstützung bei Designentscheidungen und Festlegung von Interaktionsabläufen. Durch erste User-Tests mit dem Prototypen, lassen sich schon frühzeitig Schwachstellen und Verbesserungspotentiale ermitteln und somit Entwicklungskosten einsparen.
Prototyping
Interface- & Screendesign
Der erste Schritt bei der Erstellung des Designs einer Nutzeroberfläche ist der Entwurf von MockUps. An Hand dieser wird die Gestaltung in all ihren Ansichten und Details abgestimmt und definiert. Die gesammelten Informationen und Festlegungen aus dem Wireframing und dem Prototyping finden sich in den MockUps wieder und werden grafisch und textlich optimiert. Auch das Corporate Design und das Produkt Branding werden in diesem Schritt in das Oberflächendesign integriert.
Motion- & Transitiondesign
Die Gestaltung von Animationen und Übergängen innerhalb eines UI stellen einen wichtigen Teil bezüglich der Akzeptanzsteigerung und Nutzbarkeit dar – sie machen ein Design lebendig. Animationen können Nutzer führen und z.B. Fehlbedienungen verringern, während die Gestaltung von Übergängen zwischen verschiedenen Zuständen des Interfaces dem Nutzer bei der Orientierung helfen kann. Eine gute User Experience ist nur mit durchdachtem und natürlich anmutendem Motion- und Transition-Design zu erreichen.
Motion- & Transitiondesign
UI Design Assets, Templates & Kits
Als letzte Phase des Designs werden alle Elemente detailliert ausgearbeitet und in Objektbibliotheken gesammelt. Durch die konsequente Nutzung eines derartigen atomaren Designsystems, lässt sich die Konsistenz und Kohärenz einer UI-Umgebung best möglich garantieren. Auch weitere UI Anwendungen, lassen sich aus solch einem System kostengünstig und schnell ableiten. Änderungen eines einzelnen Elementes, werden dann global in allen Umgebungen übernommen.
Design Manuals & Guidelines
Ein Design Manual oder Style Guide definiert final die Gestaltungsregeln eines User Interfaces. Es werden die einzelnen UI-Elemente, deren Positionierung, Abstand, Zustand und Verhalten, sowie das Gestaltungsraster und grundlegende Festlegungen wie Farben, Typografie etc. genau beschrieben. Das Design Manual dient damit als Basis für die effiziente Entwicklung weiterer Touchpoints und neuer digitaler Produkte.
Design Manuals & Guidelines