Wireframe – Sauer-Creations https://sauer-creations.de Der Profi im Produktdesign, UX Design und Mediendesign Tue, 06 Jan 2026 11:22:51 +0000 de hourly 1 https://wordpress.org/?v=6.9.4 https://sauer-creations.de/wp-content/uploads/2017/10/cropped-Favicon-32x32.png Wireframe – Sauer-Creations https://sauer-creations.de 32 32 Dozent Mediendesign – HS Macromedia https://sauer-creations.de/portfolio-items/dozent-fuer-mediendesign-hs-macromedia/?utm_source=rss&utm_medium=rss&utm_campaign=dozent-fuer-mediendesign-hs-macromedia Fri, 29 Aug 2025 19:03:29 +0000 https://sauer-creations.de/?post_type=avada_portfolio&p=2907

Dozent für Mediendesign – HS Macromedia

LEHRE MIT PRAXISNÄHE UND NEUGIER

Sauer-Creations-Stripe
Designer Ronny Sauer zeichnet Bild zum Thema Design Thinking.

Start

Sauer-Creations-Stripe

Als Dozent an der Hochschule Macromedia in Leipzig bin ich für die Lehre in den Fächern Strategic Design, User Experience Design und 3D-Modeling verantwortlich. Diese Themenbereiche decken ein breites Spektrum ab, das von der strategischen Planung und Konzeption digitaler Produkte bis zur detaillierten Gestaltung und Visualisierung reicht. Dabei vermittle ich den Studierenden nicht nur theoretisches Wissen, sondern lege großen Wert auf die praktische Anwendung und die Entwicklung relevanter Fähigkeiten für die Designbranche.

KI News

Sauer-Creations-Stripe

In meinen Vorlesungen an der Hochschule lege ich großen Wert darauf, die Studierenden nicht nur fachlich, sondern auch im Umgang mit aktuellen Trends und Technologien zu stärken. Ein fester Bestandteil jeder Einheit waren daher die „KI News“: ein kurzer Überblick über aktuelle Entwicklungen im Bereich der Künstlichen Intelligenz. Da viele Studierende hier noch Berührungsängste haben, diente dieser Einstieg dazu, Hemmschwellen abzubauen und Neugier zu wecken.

Ein KI generiertes Bild zum Thema KI News für die HS Macromedia.
hs dozent mediendesign

1. Strategic Design

Sauer-Creations-Stripe

Im Fach Strategic Design erarbeiteten wir, was strategisches Design ausmacht und warum es für moderne Unternehmen unverzichtbar ist. Die Studierenden entwickelten in Design-Thinking-Workshops eigenständig Konzepte und führten als Prüfungsleistung die Repositionierung einer selbst gewählten Marke durch. Die Ergebnisse waren beispielhaft dafür, was junge und kreative Köpfe leisten können. Hut ab!

2. User-Experience-Design

Sauer-Creations-Stripe

In der Vorlesung User-Experience-Design lag der Fokus auf den Grundlagen des nutzerzentrierten Gestaltens. Auch hier nutzten wir den Design-Thinking-Prozess, um kreative Ideen zu entwickeln. Ziel war es, eine eigene App zu konzipieren – von der ersten Idee bis zu konkreten Anwendungsszenarien.

Figma App Icon.

„Man kann einen Menschen nichts lehren, man kann ihm nur helfen, es in sich selbst zu entdecken.

GALILEO GALILEI

Blender App Icon.

3. 3D-Modeling

Sauer-Creations-Stripe

Im Fach 3D-Modeling tauchten die Studierenden schließlich in die Welt des Sculptings, Renderings, Animationen und Motion Graphics ein. Während des Semesters entstand ein eigener 3D-Character, der 2–3 selbst gewählte Adjektive verkörpern sollte, etwa „schnell“ und „klein“. So lernten die Teilnehmer, Design auch im virtuellen Raum präzise und ausdrucksstark umzusetzen.

Tanzende App-Icons für die UX Design Software Adobe, Figma und Canva.

Die Hochschule Macromedia – Kreativität trifft Praxis

Sauer-Creations-Stripe

Die Hochschule Macromedia zählt zu den führenden privaten Hochschulen für Medien, Management und Design in Deutschland. Was sie besonders auszeichnet, ist die enge Verknüpfung von Theorie und Praxis: Studierende arbeiten von Beginn an projektorientiert, wenden Methoden wie Design Thinking oder agile Prozesse an und sammeln so wertvolle Erfahrungen für ihre berufliche Zukunft.

Das Studienangebot deckt ein breites Spektrum an kreativen und wirtschaftsorientierten Disziplinen ab. Dazu gehören unter anderem Design, Journalismus, Film, Fashion, Management, Games, Coding sowie Medien- und Kommunikationswissenschaften. Durch diese Vielfalt entstehen interdisziplinäre Projekte, in denen Studierende unterschiedlicher Fachrichtungen zusammenarbeiten und voneinander lernen.

Mit Standorten in ganz Deutschland – darunter auch Leipzig – bietet die Macromedia eine moderne Lernumgebung, die Internationalität, Kreativität und Unternehmergeist miteinander verbindet. So werden die Studierenden optimal darauf vorbereitet, die digitale und kreative Zukunft aktiv mitzugestalten.

Noch Fragen?

GERN KÖNNEN WIR UNS DAZU UNTERHALTEN.

Teilen erwünscht!

]]> Crossmedia UX – LuckyChef https://sauer-creations.de/portfolio-items/crossmedia-ux-luckychef/?utm_source=rss&utm_medium=rss&utm_campaign=crossmedia-ux-luckychef Fri, 29 Aug 2025 18:49:24 +0000 https://sauer-creations.de/?post_type=avada_portfolio&p=2855

Crossmedia UX – LuckyChef

UX/UI DESIGN FÜR DAS MULTIMEDIALE KOCHERLEBNIS

Sauer-Creations-Stripe
App mit sehr gutem UX Design für Tiernahrung auf Tisch mit Hund dahinter.

Start

Sauer-Creations-Stripe

Von 2021 bis 2024 entstand ein Projekt, das weit über die Gestaltung eines einzelnen Produkts hinausging. Ziel war es, eine durchgängige User Experience zu entwickeln – vom Küchengerät selbst über die dazugehörigen Apps bis hin zur Website und zum Online-Shop. Diese ganzheitliche Lösung verbindet Technologie, Design und Alltag auf neuem Niveau. Das Ergebnis ist eine kleine Revolution im Haushalt, die nicht nur das Kocherlebnis optimiert, sondern zugleich das Tierwohl in den Mittelpunkt stellt und so einen verantwortungsvollen Umgang mit Lebensmitteln fördert.

Research

Sauer-Creations-Stripe

Im Rahmen des Design Thinking Prozesses wurde die Perspektive der Persona „Haustierbesitzer“ eingenommen. Ziel war es, Bedürfnisse, Wünsche und mögliche Herausforderungen im Alltag mit Haustieren besser zu verstehen. Durch Empathie-Übungen, Interviews und die Erstellung detaillierter User Journeys konnten zentrale Needs identifiziert werden – von der einfachen Handhabung des Geräts bis hin zu transparenten Informationen rund um Tierwohl und Ernährung. Diese Erkenntnisse bildeten die Basis für alle weiteren Designentscheidungen.

Pinwand im Büro zur UX Research zum Thema Farben und Branding für Tier Ernährungs App.
UX moodboard und Wort Collage für das App Design Projekt.

Konzeption

Sauer-Creations-Stripe

Anschließen hieß es in der Konzeptionsphase, sämtliche Ergebnisse aus der Research-Phase und den User-Interviews auszuwerten und auch zu hinterfragen.
Ein erfolgreiches Projekt beginnt mit einer klaren gestalterischen Sprache. Dafür entwickelte ich Konzepte für Corporate Design, Interface Design und User Experience, die nicht nur funktional sind, sondern auch emotional überzeugen.
Um das gesamte Team auf eine gemeinsame Vision einzustimmen, setzte ich auf Moodboards und Styleguides. Sie schaffen Orientierung, visualisieren Ideen und geben allen Beteiligten ein gemeinsames Verständnis für das Look & Feel. So entstand eine konsistente Designbasis, die Kreativität fördert und den roten Faden im gesamten Projekt sichtbar macht.

RE

Research

KON

Konzeption

UI

UI Design

PR

Prototyping

Design Thinking

Sauer-Creations-Stripe

Im Projekt wurden die typischen Schritte des Design Thinking konsequent durchlaufen – von der Problemdefinition über die Ideengenerierung bis hin zu Prototyping und Testing. Besonders prägend war die Empathy-Phase, in der durch gezielte Kreativ-Workshops ein tiefes Verständnis für die Bedürfnisse aller Stakeholder entstand.
An diesen Workshops nahmen Veterinäre, Designer, Programmierer und der Product Owner teil. Durch ihre unterschiedlichen Perspektiven konnten wertvolle Einsichten gewonnen werden, die halfen, die Anforderungen an Produkt und Nutzererlebnis ganzheitlich zu erfassen. So entstand eine fundierte Basis, auf der innovative Lösungen entwickelt und weiter verfeinert werden konnten.

FIGMA Screenshot des Design Thinking Prozesses.

„Die Aufgabe des Designers ist es, eine Brücke zu bauen zwischen dem, was der Nutzer braucht, und dem, was die Technologie leisten kann.

DAVID KELLEY

Prototyping

Sauer-Creations-Stripe

In den frühen Phasen des Design Thinking Prozesses kamen Tools wie Balsamiq und Miro zum Einsatz, um erste Ideen schnell zu visualisieren und gemeinsam im Team zu strukturieren. Mit dem Übergang in die Entwurfsphase rückte jedoch Figma immer stärker in den Mittelpunkt: Hier wurden Styleguides, Bildsprachen und Clickdummys erarbeitet und die Entwicklung von Low-, Mid- und High-Fidelity Mockups vorangetrieben.
Während Figma die ideale Plattform für ein kollaboratives Arbeiten bot, erforderte die Gestaltung des eigentlichen Geräts eine Ausnahme: Aufgrund technischer Einschränkungen musste auf Sketch zurückgegriffen werden. Dieser Bruch im Workflow stellte eine echte Herausforderung dar, da unterschiedliche Software-Ökosysteme miteinander verbunden werden mussten. Gleichzeitig eröffnete er aber auch die Möglichkeit, die Konzepte noch präziser auf die jeweiligen Anforderungen zuzuschneiden.

Screenshot vom Figma UI Design Prozess.
Darstellung von iPhone und iPad mit App Design, welches in Figma erstellt wurde.

UI/UX Design Workflow allgemein

Sauer-Creations-Stripe

Ein UX-Designprozess folgt normalerweise einem Design Thinking-Ansatz, der aus fünf grundlegenden Phasen besteht:

  1. Mit dem Benutzer vertraut machen
  2. Definieren des Problems (Ermittlung der Benutzer-Anforderungen)
  3. Ideen für das Design generieren
  4. Prototyping
  5. Test-Phase

Übrigens, diese 5 Schritte müssen nicht streng hierarchisch abgearbeitet werden. Im Gegenteil! Denn es ist sehr oft erforderlich diese Schritte zu wiederholen, parallel zu bearbeiten und deren Reihenfolge zu tauschen. Kurzum, es ist ein iterativer Prozess.

Kernstrategien

Doch welche Kernstrategien beinhaltet ein solches UX-Design? Je nachdem, welche Strategie man für das aktuelle Projekt für richtig erachtet, sollte man zwischen User-Centered-Design, Design-Thinking, Activity-Centered-Design und Design-Sprints (von Goolge) wählen. Also um vor allem Probleme aus der Welt zu schaffen. Gleichwohl jede dieser Strategien Vor- und Nachteile besitzt.
Wenn diese Phase des UX-Designs abgeschlossen ist, geht es an die Gestaltung des Produktes. Und zwar an die grafische Umsetzung des User Interfaces (UI). Bei diesem Prozess werden im ersten Schritt Use Cases, Papier Prototypen, Wireframes und/oder Klickdummies erstellt. Danach gestaltet man sämtliche Screens und Icons grafisch, dem Styleguide entsprechend.

Software

Abgesehen von Stift und Papier kommt folgende Software beim UX/UI Design oftmals zum Einsatz: Adobe XD, Sketch, Figma, InVision, Axure, Balsamiq, Adobe Photoshop, Adobe Illustrator, Adobe After Effects usw.

UI Design Trends 2021
Pinwand im Büro zur UX Research zum Thema Farben und Branding für Tier Ernährungs App.
Darstellung Figma Mockup auf Apple Notebook.
Screenshot vom Figma Prototyping Prozess.
Screenshot vom Figma UI Design Prozess und High Fidelity Mockup.
High Fidelity Mockup im UX Design für Tier Ernährungs App.

Noch Fragen?

GERN KÖNNEN WIR UNS DAZU UNTERHALTEN.

Teilen erwünscht!

]]> Sport UX – IDA Software https://sauer-creations.de/portfolio-items/sport-ux-ida-software/?utm_source=rss&utm_medium=rss&utm_campaign=sport-ux-ida-software Mon, 02 Aug 2021 13:03:42 +0000 https://sauer-creations.de/?post_type=avada_portfolio&p=2394

Sport UX – IDA Software

UX/UI DESIGN FÜR DIE PROFI-SPORTLER-APP „IDA“

Sauer-Creations-Stripe

Start

Sauer-Creations-Stripe

Im November 2020 kam das IAT (Institut für Angewandte Trainingswissenschaften) auf mich zu, um den ersten Teil ihrer Profi-Sportler-Software „IDA“ für den User zu optimieren. Dabei lernte ich meinen zukünftigen Projekt-Partner Lukas kennen und wir waren uns recht schnell einig: Es sollten unbedingt User-Interviews durchgeführt werden.

Was ist die IDA-App?
Die IDA-App ist über viele Jahre zu einem der TOP-Tools im Profi-Sport herangewachsen. Es werden traditionelle sportlicher Bereiche wie z.B. Schwimmen, Laufen und Biathlon abgedeckt. Aber auch moderne Olympia-Disziplinen wie Snowboarden und Surfen finden sich wieder. IDA ermöglicht den Sportlern eine direkte Kommunikation mit ihren Trainern. Es werden Trainingseinheiten und Wettkämpfe mit höchstem wissenschaftlichen Ansatz geplant und verwaltet. Zusätzlich hat der Sportler auch die Möglichkeit, seinen Fortschritt und psychischen/physischen Zustand zu analysieren.

Research

Sauer-Creations-Stripe

Der erste Schritt stellte das Durchführen von User-Interviews dar. Es ist jedes mal aufs Neue absolut erstaunlich, was durch eine solche Nutzer-Befragung herausgefunden wird. Bedingt durch Corona wurden die Interviews via Facetime und Apps wie z.B. Zoom oder Teams durchgeführt, was sich als extrem unterhaltsam herauskristallisierte.

ux_user-interview
PersonasUX

Konzeption

Sauer-Creations-Stripe

Anschließen hieß es in der Konzeptionsphase, sämtliche Ergebnisse aus der Research-Phase und den User-Interviews auszuwerten und auch zu hinterfragen. Jetzt war es an der Zeit, diese gesammelten Daten in den UX-Design-Prozess einzubinden. Welche UX-Prozesse machen Sinn und helfen beim weiteren Design-Prozess? Wir entschieden uns für folgende UX-Bausteine:
1.Personas, 2. Customer Journey Map, 3. Empathy Map

RE

Research

KON

Konzeption

PR

Prototyping

UI

UI Design

Design Thinking

Sauer-Creations-Stripe

Projektarbeit kann – nein, sollte auch Spaß machen. Bei diesem Projekt wurden typische Schritte des Design-Thinking-Prozesses auch spielerisch und sportlich interpretiert. Durch Apps wie bspw. Miro oder Figma konnten die wöchentlich online stattfindenden Meetings erfrischend und barrierefrei abgehalten werden. Denn diese Tools ermöglichen einen fortschrittlichen Projekt-Ablauf – vor allem während der Corona-Pandemie.

Design Thinking IDA

„Wenn ich die Leute gefragt hätte, was sie wollen, hätten sie gesagt: »schnellere Pferde«

HENRY FORD

Prototyping

Sauer-Creations-Stripe

Heutige UX Design-Tools wie Figma oder Adobe XD erlauben es, sehr schnell klickbare Prototypen zu erstellen. Dadurch kann auch zügig in A/B-Testings herausgefunden werden, welche der entworfenen Lösungen gut beim User ankommen und welche eher ungeeignet sind. Nachdem eine perfekte Lösung für den Benutzer gefunden wurde, war es nun an der Zeit das Interface (UI) zu gestalten.

Figma Screen UX design

UI/UX Design Workflow allgemein

Sauer-Creations-Stripe

Ein UX-Designprozess folgt normalerweise einem Design Thinking-Ansatz, der aus fünf grundlegenden Phasen besteht:

  1. Mit dem Benutzer vertraut machen
  2. Definieren des Problems (Ermittlung der Benutzer-Anforderungen)
  3. Ideen für das Design generieren
  4. Prototyping
  5. Test-Phase

Übrigens, diese 5 Schritte müssen nicht streng hierarchisch abgearbeitet werden. Im Gegenteil! Denn es ist sehr oft erforderlich diese Schritte zu wiederholen, parallel zu bearbeiten und deren Reihenfolge zu tauschen. Kurzum, es ist ein iterativer Prozess.

Kernstrategien

Doch welche Kernstrategien beinhaltet ein solches UX-Design? Je nachdem, welche Strategie man für das aktuelle Projekt für richtig erachtet, sollte man zwischen User-Centered-Design, Design-Thinking, Activity-Centered-Design und Design-Sprints (von Goolge) wählen. Also um vor allem Probleme aus der Welt zu schaffen. Gleichwohl jede dieser Strategien Vor- und Nachteile besitzt.
Wenn diese Phase des UX-Designs abgeschlossen ist, geht es an die Gestaltung des Produktes. Und zwar an die grafische Umsetzung des User Interfaces (UI). Bei diesem Prozess werden im ersten Schritt Use Cases, Papier Prototypen, Wireframes und/oder Klickdummies erstellt. Danach gestaltet man sämtliche Screens und Icons grafisch, dem Styleguide entsprechend.

Software

Abgesehen von Stift und Papier kommt folgende Software beim UX/UI Design oftmals zum Einsatz: Adobe XD, Sketch, Figma, InVision, Axure, Balsamiq, Adobe Photoshop, Adobe Illustrator, Adobe After Effects usw.

Product-Overview
Brainstorming_Moodboard
App Research
User Interviews
Empathy Map
UI Design Trends 2021
Miro App
UI Design

Noch Fragen?

GERN KÖNNEN WIR UNS DAZU UNTERHALTEN.

Teilen erwünscht!

]]> shift by wire – AUDI https://sauer-creations.de/portfolio-items/shift-by-wire-audi/?utm_source=rss&utm_medium=rss&utm_campaign=shift-by-wire-audi Tue, 06 Oct 2020 12:05:08 +0000 http://sauer-creations.de/?post_type=avada_portfolio&p=2185

shift by wire – AUDI

UX/UI DESIGN-KONZEPTE FÜR DIE FIRMA AUDI

Sauer-Creations-Stripe
audi_project

Briefing

Sauer-Creations-Stripe

Es war eines meiner ersten Projekte im Bereich des UX Designs. Aber Projektpartner sollte keine Geringere als die in Ingolstadt ansässige Automobilfirma AUDI sein. Natürlich war man damals sehr aufgeregt. Schließlich ergeben sich solche Chancen nicht jeden Tag. Doch die anfängliche Aufregung wich sehr schnell dem Tatendrang.
Ziel dieses Projektes war es, zu erforschen wie das Gangschalten in einem Fahrzeug (AUDI A8) in der Zukunft aussehen könnte. Dabei wurden 3 Zeit-Szenarien fokussiert:

  1. Today
  2. Tomorrow
  3. Vision

Je nach Einordnung in die Zeit-Segmente (today, tomorrow, vision), sollten die Konzepte bodenständig-real bis hin zu visionär-beflügelt ausgearbeitet werden.

Research

Sauer-Creations-Stripe

Am Anfang eines jeden Projektes steht natürlich die Recherche und Analyse. Bewaffnet mit Kamera und Notizblock ging es also auf in die verschiedensten Autohäuser der gehobenen Klasse, wie z.B. BMW, Porsche, Mercedes und natürlich AUDI. Anschließend wurden die Ergebnisse aus dieser umfangreichen Phase sehr genau dokumentiert.

research_audi_ag
brainstorming_audi

Konzeption

Sauer-Creations-Stripe

Zuerst hieß es in der Konzeptionsphase, sämtliche Ergebnisse aus der Recherche auszuwerten, zu hinterfragen und neu zu interpretieren. Nachdem diese Re-Interpretation abgeschlossen war, wurden die am besten für dieses Projekt geeigneten Kreativitätsprozesse angewendet. Sogar etwas Schauspielunterricht stand auf dem Plan. Des Weiteren wurden Unzählige Skizzen, CAD-Modelle und Haptik-Mockups erstellt. Auch um ein Gefühl dafür zu bekommen, welches Konzept weiterverfolgt werden sollte und welches weniger Potential hatte. Ebenfalls spielte der Prozess des Design-Thinkings eine tragende und vorantreibende Rolle.

RE

Research

KON

Konzeption

PR

Prototyping

UI UX

UI/UX DESIGN

Entwurf & Prototyping

Sauer-Creations-Stripe

Während der Entwurfsphase wurden die Konzepte aus der vorhergehenden Phase immer wieder gemischt und neu angeordnet. Nachdem die Favoriten gesichtet und in Team-Besprechungen fokussiert wurden, entwickelten die Teams technische Funktions-Modelle (siehe Abbildung). Zusätzlich programmierte ein anderes Team einen Fahrsimulator, um die erstellten Prototypen möglichst realitätsgetreu zu testen. Es war viel kreative und analytische Arbeit, aber der „Spaß an der Freude“ war stets dabei.

Erkenntnis: Das heißt, in einem tollen, respektvollen und ambitionierten Team entstehen definitiv bessere Lösungen.

„A user interface is like a joke. If you have to explain it, it´s not that good.

MARTIN LeBLANK (CEO of iconfinder)

Kreativer & technischer Austausch

Sauer-Creations-Stripe

Im 14-Tage-Rhythmus kamen Designer und Ingenieure zusammen, um die entstandenen Ergebnisse zu begutachten und direkt am 1:1 Mockup (detailliertes AUDI-Cockpit inkl. Sitz und Lenkrad) zu testen. Folglich war das Interesse vor allem bei der Haptik- und Usability-Abteilung von AUDI riesig. Entsprechend der typischen Methodik des iterativen UX-Design-Prozesses, wurden sämtliche Lösungen hinterfragt, verbessert und erneut getestet.

audi_ux_design_testing

UI/UX Design Workflow allgemein

Sauer-Creations-Stripe

Ein UX-Designprozess folgt normalerweise einem Design Thinking-Ansatz, der aus fünf grundlegenden Phasen besteht:

  1. Mit dem Benutzer vertraut machen
  2. Definieren des Problems (Ermittlung der Benutzer-Anforderungen)
  3. Ideen für das Design generieren
  4. Prototyping
  5. Test-Phase

Übrigens, diese 5 Schritte müssen nicht streng hierarchisch abgearbeitet werden. Im Gegenteil! Denn es ist sehr oft erforderlich diese Schritte zu wiederholen, parallel zu bearbeiten und deren Reihenfolge zu tauschen. Kurzum, es ist ein iterativer Prozess.

Kernstrategien

Doch welche Kernstrategien beinhaltet ein solches UX-Design? Je nachdem, welche Strategie man für das aktuelle Projekt für richtig erachtet, sollte man zwischen User-Centered-Design, Design-Thinking, Activity-Centered-Design und Design-Sprints (von Goolge) wählen. Also um vor allem Probleme aus der Welt zu schaffen. Gleichwohl jede dieser Strategien Vor- und Nachteile besitzt.
Wenn diese Phase des UX-Designs abgeschlossen ist, geht es an die Gestaltung des Produktes. Und zwar an die grafische Umsetzung des User Interfaces (UI). Bei diesem Prozess werden im ersten Schritt Use Cases, Papier Prototypen, Wireframes und/oder Klickdummies erstellt. Danach gestaltet man sämtliche Screens und Icons grafisch, dem Styleguide entsprechend.

Software

Abgesehen von Stift und Papier kommt folgende Software beim UX/UI Design oftmals zum Einsatz: Adobe XD, Sketch, Figma, InVision, Axure, Balsamiq, Adobe Photoshop, Adobe Illustrator, Adobe After Effects usw.

audi 01
audi_04
audi 03
cad_mockup-design
audi 02
ux_mockup_audi
audi_05
audi_ux_presentaion

Noch Fragen?

GERN KÖNNEN WIR UNS DAZU UNTERHALTEN.

Teilen erwünscht!

]]> UI Design – Tacho https://sauer-creations.de/portfolio-items/ui-design-innvelo/?utm_source=rss&utm_medium=rss&utm_campaign=ui-design-innvelo Thu, 12 Dec 2019 18:55:44 +0000 http://sauer-creations.de/?post_type=avada_portfolio&p=1864

UI Design – Tacho

GESTALTUNG DES „INNVELO“-DISPLAYS

Sauer-Creations-Stripe
ui_design_tacho

Wiedersehen macht Freude

Sauer-Creations-Stripe

Für das ICM aus Chemnitz sollten erneut Displays und das damit verbundene UI (User Interface) gestaltet werden. Mit dem ICM verbindet mich ein jahrelange und sehr fruchtbare Zusammenarbeit – es war der Kunde der ersten Stunde. Gemeinsam setzten wir das umfangreiche Projekt „Innvelo Three“ um.

Deshalb erfreut mich die erneute Zusammenarbeit um so mehr. Für die technische Umsetzung des Displays war die Firma Areus verantwortlich.

UI Design beginnt zu leben

Sauer-Creations-Stripe

Früher analog, sind heutzutage fast alle Anzeigen und Bedienelemente digital umgesetzt. Dies wiederum setzt vor allem ältere Menschen oftmals unter Stress. Zuviele Icons und Bedienebenen fordern selbst jüngeren und technikaffinen Menschen einiges ab.

Bereits 2014 sollte ein Display für das „Innvelo Three“-Fahrzeug erstellt werden. Allerdings damals auf 2 einzelnen, runden und sehr kleinen Anzeigen. Auf Grund des technologischen Fortschrittes und der stetigen Preissenkung bei größeren Displays, sollte nun der Tacho angepasst bzw. komplett neu aufgebaut werden. Aus diesem Grund mussten sämtliche Screens, Icons und Anzeige-Stati in Adobe Illustrator neu gestaltet und pixel-genau aufgebaut werden. Im Folgenden wurden alle Elemente als PNG-Dateien exportiert und an die Programmierer weitergereicht.

tacho_mockup_ui
R

Research

K/E

Konzept/Entwurf

UI

UI DESIGN

PT

Prototyping

UI_Illustrator_PfadeUI_Illustrator

Abb.: Pfadansicht in Adobe Illustrator; fertiges UI-Design

UI/UX Design Workflow allgemein

Sauer-Creations-Stripe

Ein UX-Designprozess folgt normalerweise einem Design Thinking-Ansatz, der aus fünf grundlegenden Phasen besteht:

  1. Mit dem Benutzer vertraut machen
  2. Definieren des Problems (Ermittlung der Benutzer-Anforderungen)
  3. Ideen für das Design generieren
  4. Prototyping
  5. Test-Phase

Übrigens, diese 5 Schritte müssen nicht streng hierarchisch abgearbeitet werden. Im Gegenteil! Denn es ist sehr oft erforderlich diese Schritte zu wiederholen, parallel zu bearbeiten und deren Reihenfolge zu tauschen. Kurzum, es ist ein iterativer Prozess.

Kernstrategien

Doch welche Kernstrategien beinhaltet ein solches UX-Design? Je nachdem, welche Strategie man für das aktuelle Projekt für richtig erachtet, sollte man zwischen User-Centered-Design, Design-Thinking, Activity-Centered-Design und Design-Sprints (von Goolge) wählen. Also um vor allem Probleme aus der Welt zu schaffen. Gleichwohl jede dieser Strategien Vor- und Nachteile besitzt.
Wenn diese Phase des UX-Designs abgeschlossen ist, geht es an die Gestaltung des Produktes. Und zwar an die grafische Umsetzung des User Interfaces (UI). Bei diesem Prozess werden im ersten Schritt Use Cases, Papier Prototypen, Wireframes und/oder Klickdummies erstellt. Danach gestaltet man sämtliche Screens und Icons grafisch, dem Styleguide entsprechend.

Software

Abgesehen von Stift und Papier kommt folgende Software beim UX/UI Design oftmals zum Einsatz: Adobe XD, Sketch, Figma, InVision, Axure, Balsamiq, Adobe Photoshop, Adobe Illustrator, Adobe After Effects usw.

din_vorgabe
ui_design_adobe_illustrator
ui_testing

Noch Fragen?

GERN KÖNNEN WIR UNS DAZU UNTERHALTEN.

Teilen erwünscht!

]]>