UI / UX Design für Apps und Webapplikationen

Auf der Basis des Konzepts erstellen wir ein zielgruppenspezifisches UI / UX Design für Apps und Webapplikationen. Von den ersten Scribbles bis hin zum finalen Design – alles aus einer Hand. Und das von erfahrenen Designern, die mit voller Leidenschaft bei der Sache sind.

Icon UI/UX Design
CI Guidelines
Skizzen
Wireframes
Clickdummies
Referenzgeräte
Feedbackschleifen

UI / UX Design für eine intuitive Bedienbarkeit

Gutes UI / UX Design für Apps und Weppapplikationen sorgt für die einfache und schnell zu begreifende Bedienbarkeit Ihrer App oder Website. Hier wird festgelegt, wie Funktionen so realisiert werden, dass der Nutzer diese einfach findet und ohne Überlegen und Ausprobieren ausführen kann. Auch die gestaltungsspezifischen Aspekte der Barrierefreiheit werden hier definiert.

In diesem Arbeitsschritt entscheidet sich, ob Nutzer mit der App oder Website zurechtkommen oder diese für kompliziert oder schlecht durchdacht halten. Damit zeigt sich die besondere Bedeutung dieses Prozessschrittes.

Scribbles – es wird etwas sichtbar

Als Scribbles bezeichnet man einen meist per Stift auf Papier oder mittels Grafiktablet angedeuteten Grobentwurf. Ein Scribble dient der Ideenfindung und steht ganz am Anfang des Designprozesses.

Der Vorteil von Scribbles für Apps und Webapplikationen liegt darin, dass das Konzept ohne großen Aufwand visualisiert und mit Ihnen als Kunde diskutiert werden kann. Sie stellen die wichtigsten Interaktionsabläufe und die Navigationsstruktur dar.

Darüber hinaus werden das Basis-Layout der Screens sowie grundlegende Screen-Elemente visualisiert. Auf Designdetails wird in dieser Phase ganz bewusst verzichtet.

Der nächste Schritt - Wireframes

In Wireframes werden bereits die Kanten der Objekte gezeichnet und ggf. noch Hilfslinien eingefügt. Damit werden Flächen als solche erkennbar und erhalten bereits eine plastische Wirkung.

Wireframes ermöglichen ein besseres Verständnis der Interaktionen und Abläufe in der App oder Website. Sie dienen als Grundlage für gemeinsame Diskussionen, die am Ende keine Fragen offenlassen.

Layouts – es wird konkreter

Mit dem Layout erfolgt die konkrete Visualisierung des Konzepts für die App oder Webseite bzw. Webapplikation. Dazu werden die Wireframes weiter ausgearbeitet und mit konkreten Designelementen und Farben finalisiert. Das dadurch entstehende Bild vermittelt Ihnen einen Eindruck, wie Ihre App oder Website aussehen wird.

Das User Interface (UI) der App oder Webapp sollte auf die jeweiligen Gegebenheiten der technischen Plattform, also Google Android oder Apple iOS, angepasst sein. Die Benutzerführung, Buttons und Darstellungsweisen von Icons ähneln sich bei iOS und Android, aber es gibt spezifische Details, die berücksichtigt werden sollten. Unsere UI Designer sind entsprechend der App Store Design Guidelines hinsichtlich Benutzerführung und Design geschult. Dadurch sind sie immer auf dem aktuellsten Stand, was die herstellereigenen Vorgaben angeht. Somit wird Ihre App hinsichtlich der Optik und Benutzerführung immer den neusten Vorgaben und Designtrends, natürlich entsprechend Ihres Corporate Designs, entsprechen. Die Website oder App wird gemäß den Grundsätzen des Material Designs und unter Beachtung Ihres Corporate Designs erstellt.

Als Text wird in der dieser Projektphase häufig noch als Fülltext (Lorem Ipsum) verwendet, um die Diskussion auf das Design zu fokussieren. Der endgültige Text wird oft erst im Rahmen der Entwickung vom Kunden finalisiert und dann entsprechend in die App oder Website integriert.

Klick Dummy – es wird anschaulich

Um das Layout noch anschaulicher zu machen, können die verschiedenen Screens zu einem Klick Dummy verknüpft werden. Die einzelnen Screens weisen dabei noch keine Funktion auf. Hier werden lediglich die Abfolgen der Screens im Rahmen des UI / UX Design Prozesses ersichtlich.

So können Sie sich bereits zu einem sehr frühen Zeitpunkt durch die Navigation klicken, ohne dass eine Zeile Code geschrieben wurde. Sofern Sie jetzt feststellen, dass doch noch Änderungen erforderlich sind, können diese immer noch mit vergleichsweise geringem Aufwand umgesetzt werden.

Hierfür setzen wir verschiedene Tools ein, die für Wireframes, Designs oder Klickdummys verwendet werden können.

Test auf Referenzgerät spart Aufwand

Dieser Klick Dummy, der im Rahmen des UI / UX Design für Apps und Webapps erstellt wurde, kann nun auf einem oder mehreren vorher mit Ihnen vereinbarten Referenzgerät(en) begutachtet und kommentiert werden.

Mit der Beschränkung auf ein oder wenige Referenzgerät(e) erspart man sich die responsive Umsetzung zu so einem frühen Projektstadium, in dem noch vielfältige Änderungen zu erwarten sind.

Sobald das Layout sowie das dazugehörige Design festgelegt wurde, werden die Screens auch in den responsiven Ansichten entworfen.