UX/UI -Designspezialisierung: Von der Forschung bis zur Zugänglichkeit

Inspiration / Patricia Reiners

In dieser Lektion werde ich meine wichtigsten Einflüsse mit Ihnen teilen. Sie sind alle sehr unterschiedlich und vielfältig, von Designern über Innovatoren bis hin zu den Menschen um mich herum.

Inspiration / Pablo Stanley

Hier erfahren Sie mehr über die Künstler und Illustratoren, die meine eigene Arbeit stark beeinflusst haben.

Inspiration / Chiara Aliotta

Als ich meine Karriere als Designer begann, war Storytelling kein Begriff, der im Design angewendet wurde. Selbst heute verwenden manche Designer diesen Begriff falsch, um Konzepte wie „Design Thinking“ zu erklären. Deshalb möchte ich Ihnen erzählen, wer mir geholfen hat, meine Art des Storytellings für Designprodukte zu entwickeln.

Inspiration / Margot Gabel

Diese Lektion soll Sie dazu inspirieren, innerhalb und außerhalb des Bereichs des digitalen Designs nach Referenzen zu suchen.

In dieser Lektion lernen Sie die Grundlagen von UX und menschenzentriertem Design kennen. Außerdem erfahren Sie mehr über die verschiedenen Rollen, die im UX-Design eine Rolle spielen. Abschließend sprechen wir über den geschäftlichen Nutzen von UX und warum Unternehmen es ernst nehmen sollten.

Modul 2

Tauchen Sie mit Ethan Parry in die spannende Welt des UX-Designs mit Adobe XD ein. In diesem ersten Modul erkunden Sie die Grundlagen von UX und erfahren, warum es ein so leistungsstarkes und wachsendes Feld ist. Mit praktischer Erfahrung bei Top-Marken vermittelt Ethan seinen Ansatz zu Strategie, Forschung und Methodik – alles, was Sie für zielgerichtetes Design benötigen.

19 Lektionen (2 Stdn. 55 Min.)

Was ist UX?

Eine kurze Geschichte von UX

In dieser Lektion erkläre ich Ihnen die Ursprünge von UX. Wir sprechen über Feng Shui im Jahr 4000 v. Chr., Walt Disney und seinen Wunsch, perfekte, magische Erlebnisse zu schaffen, und Don Norman, den Mann, der den Begriff „User Experience“ prägte. Außerdem erkläre ich Ihnen, wohin sich die Branche meiner Meinung nach entwickelt.

Prinzipien der Zugänglichkeit und Heuristik

In dieser Lektion erhältst du eine Einführung in die Welt des inklusiven Designs und lernst, wie du deine Produkte und Dienstleistungen barrierefreier gestalten kannst. Außerdem zeige ich dir weitere Best Practices, auch Heuristiken genannt, im Bereich der Gestaltung von Benutzeroberflächen.

Einführung in den UX-Prozess

In dieser Lektion lernst du den UX-Designprozess kennen. Ich stelle dir die beiden gängigsten Darstellungsformen vor: das Double-Diamond-Modell und Design Thinking. Der UX-Designprozess besteht aus fünf Hauptschritten: Einfühlen, Definieren, Ideenfindung, Prototypenentwicklung und Testen.

Einführung in UX Research

In dieser Lektion erkläre ich Ihnen den Wert von UX-Forschung und was schiefgehen kann, wenn Sie sie gar nicht durchführen. Sie lernen außerdem den Unterschied zwischen den Methoden „Einstellungsorientiert vs. Verhalten“ und „Qualitativ vs. Quantitativ“ kennen.

Schreibtischforschung, Benchmark, Interviews

In dieser Lektion konzentrieren wir uns auf die drei wichtigsten Methoden, die jeder UX-Designer – ob Forscher oder nicht – kennen sollte: Desk Research, Benchmarking und Interviews. Sie erfahren, wann diese Methoden am besten geeignet sind und welche Best Practices für welche Methoden gelten.

Problem erkennen und definieren

Eine der wichtigsten Fähigkeiten eines UX-Designers ist die Fähigkeit, Probleme zu erkennen. In dieser Lektion lernen Sie, wie Sie Ihre Erkenntnisse nutzen und Techniken wie Affinitätsmapping verwenden, um das zu lösende Problem genauer zu definieren.

Personas sind ein häufig verwendetes Werkzeug in der UX. In dieser Lektion erfahren Sie, warum sie wichtig sind, welche Merkmale eine gute Persona hat, wie man sie erstellt und wann sie im UX-Designprozess eingesetzt werden.

Persona Schöpfung

12 Min.

Reise-Mapping

Sobald Sie eine Persona (oder mehrere Personas) haben, empfiehlt es sich, eine Journey Map zu erstellen. In dieser Lektion lernen Sie die wichtigsten Komponenten einer solchen Map, die verschiedenen Typen und ihre Vorteile kennen.

In dieser Lektion lernen Sie verschiedene Techniken zur Ideenfindung kennen – Brainstorming, Bodystorming und Mindmapping, um nur einige zu nennen –, die Ihnen dabei helfen, mögliche Lösungen für die Probleme zu finden, die Sie bei Ihrer Benutzerforschung festgestellt haben.

Ideenfindungstechniken

Bei der Erstellung einer App oder Website ist eine übersichtliche und gut gestaltete Benutzeroberfläche wichtig. In dieser Lektion lernen Sie etwas über Informationsarchitektur und wie Sie Ihre Inhalte effektiv organisieren.

Informationsarchitektur

Nachdem Sie mehrere Ideen entwickelt haben, ist es an der Zeit, diese konkret umzusetzen. In dieser Lektion erfahren Sie mehr über das Was, Warum und Wann des Prototypings.

Wert des Prototyping

Arten von Prototypen und Prototyping-Tools

In dieser Lektion lernen Sie die verschiedenen Arten von Prototypen kennen. Außerdem stelle ich Ihnen einige Tools zur Erstellung solcher Prototypen vor.

Nachdem Ihr Prototyp erstellt wurde, können ihn andere ausprobieren. In dieser Lektion lernen Sie, wie Sie effektive Benutzertests vorbereiten und durchführen. Außerdem erkläre ich Ihnen Best Practices zur Dokumentation und Priorisierung Ihrer Ergebnisse.

Benutzertests

Auch wenn Sie kein Entwickler werden möchten, müssen Sie eng mit ihnen zusammenarbeiten. In dieser Lektion lernen Sie, wie Sie eine reibungslose Übergabe von Design und Entwicklung gewährleisten.

Arbeiten mit Entwicklern

Präsentieren gegenüber Stakeholdern / Kunden

In dieser Lektion lernen Sie, wie Sie UX messen und Ihre Ergebnisse Stakeholdern/Kunden kreativ präsentieren. Außerdem gebe ich Ihnen Tipps, wie Sie UX-Design im Unternehmen etablieren können.

10 Min.

Fallstudien

In dieser Lektion lernen Sie, wie Sie eine Fallstudie erstellen und so Ihren UX-Designprozess von Anfang bis Ende dokumentieren können.

Präsentieren Sie Ihre Arbeit

In dieser Lektion lernst du verschiedene Plattformen kennen, auf denen du deine Arbeiten präsentieren kannst, und lernst, wie du ein Portfolio erstellst. Im Rahmen der Portfolio-Erstellung besprechen wir auch die Vor- und Nachteile bestimmter Formate.

In dieser Lektion gebe ich Ihnen einige Tipps für Vorstellungsgespräche für UX-Positionen und die Arten von Designübungen, die Sie dort erwarten.

UX Vorstellungsgespräche

In dieser Lektion lernen wir, was UX-Forschung ist und wann sie integriert werden sollte.

Modul 3

Entdecken Sie mit Patricia Reiners, die ihre Erfahrung aus der Zusammenarbeit mit Google und Adobe einbringt, wie Sie aussagekräftige digitale Erlebnisse gestalten. Sie erläutert die wesentliche Rolle der UX-Forschung und zeigt Ihnen, wie Sie einen personalisierten Forschungsplan erstellen. Sie erhalten Tools, um die Bedürfnisse der Nutzer besser zu verstehen und Lösungen zu entwickeln, die wirklich etwas bewirken.

13 Lektionen (1 Stdn. 47 Min.)

Was ist UX-Forschung?

Was sind die gängigsten Methoden?

Die Wahl der richtigen Methode für Ihre Fragen hilft Ihnen dabei, zu den richtigen Erkenntnissen zu gelangen. In dieser Lektion werden wir uns daher mit dem Unterschied zwischen evaluativer und generativer Forschung befassen und erklären, wann welche Methode am besten eingesetzt wird.

Quantitative Nutzerforschung

Bei der quantitativen Nutzerforschung geht es um Quantität. Sie benötigen eine große Datenmenge, um echte Erkenntnisse zu gewinnen. Diese Erkenntnisse beantworten die Frage nach dem „Was“. Sie zeigen, welche Geräte Nutzer verwenden, aber nicht, warum sie ein bestimmtes Gerät verwenden. In dieser Lektion werden wir verschiedene quantitative Methoden durchgehen

Qualitative Nutzerforschung

Bei der qualitativen Nutzerforschung geht es um Qualität. Mit diesen Methoden können Sie Ihr „Warum“ herausfinden. In dieser Lektion gehen wir verschiedene qualitative Methoden durch.

Planen Sie Ihre Forschung

Durch die Erstellung eines Forschungsplans strukturieren Sie Ihre Überlegungen zur Forschungsaktivität.

In dieser Lektion schreiben wir einen Forschungsplan für ein Forschungsprojekt. Wir gehen alles Schritt für Schritt durch.

Forschungsplan schreiben

So wählen Sie die Teilnehmer aus

Die Auswahl der Teilnehmer ist wichtig, unabhängig von der gewählten Methode. In dieser Lektion erfahren Sie, wie Sie dabei vorgehen.

So schreiben Sie einen Diskussionsleitfaden

Wenn Sie Feldstudien, kontextbezogene Untersuchungen, Einzelinterviews oder Interviews jeglicher Art durchführen, benötigen Sie einen Diskussionsleitfaden. In dieser Lektion werden wir uns die Fragen überlegen, um sie richtig zu formulieren.

So bereiten Sie die Sitzung vor

Ihr Ziel im Interview ist es, möglichst viel über die Denkweise und das Verhalten Ihrer Nutzer zu erfahren. In dieser Lektion lernen wir, Fragen zu formulieren und welche Materialien wir für das Interview benötigen.

Wie sieht eine qualitative Sitzung aus?

In dieser Lektion sprechen wir über die Struktur eines Interviews: die Einleitung, den Hauptteil (die Fragen) und den Outro.

Visualisieren Sie Ihre qualitative Benutzerforschung

In dieser Lektion werden wir die Erkenntnisse zusammenfassen und visuell darstellen, um sie Ihren Stakeholdern und Teammitgliedern zu präsentieren.

User Journey Map & Personas 1

In dieser Lektion lernen wir, wie Sie Artefakte erstellen, die Sie mit allen Ihren Teammitgliedern und Stakeholdern teilen können: Personas und User Journey Maps.

User Journey Map & Personas 2

Wir beenden diese Lektion mit User Journey Maps und Personas.

13 Min.

Webdesign mit Figma: Gestaltung effizienter Interfaces

Modul 4

Entdecken Sie mit Pablo Stanley als Guide, wie visuelles Design zum Storytelling-Tool wird. In diesem Modul erklärt er die wichtigsten Prinzipien überzeugender Kompositionen und zeigt Ihnen, wie Sie mit Figma Ihre Ideen zum Leben erwecken. Egal, ob Sie neu im Design sind oder Ihre Fähigkeiten verbessern möchten – Sie erhalten praktische Einblicke, die Ihre kreative Arbeit verbessern. Bereit zum Eintauchen?

18 Lektionen (2 Stdn. 35 Min.)

Kompositions- und visuelle Designprinzipien

Nun analysieren wir die Elemente, die eine gute Komposition ausmachen.

Gestaltprinzipien, die im Design verwendet werden

Wir werden sehen, wie die Gestaltprinzipien unsere Art der Interpretation visueller Informationen beeinflussen.

Um die Aufmerksamkeit des Betrachters zu fokussieren, ist es entscheidend, zu bestimmen, welche Teile einer Komposition relevanter sind als andere. Hier erfahren Sie, wie Sie eine Hierarchie innerhalb unseres Designs etablieren.

Visuelle Hierarchie

Leistungen in der Benutzeroberfläche

In dieser Lektion spreche ich über den Begriff „Affordanzen“ und wie man sie in unseren Schnittstellen implementiert.

Einführung in visuelle Elemente und Verstehen des Briefings

Ein Kreativbriefing ist ein zusammenfassendes Dokument, das die entscheidenden Vorteile einer Kampagne oder eines Produkts aufzeigt. Es erzählt die Geschichte und erklärt, warum sie für das Publikum so wichtig ist. Es dient als Leitfaden für die Entwicklung eines Produkts.

Grundkomposition in Figma

In dieser Lektion machen wir einige Übungen in Figma und lernen, wie wir das Gelernte mithilfe einiger Funktionen anwenden können. Das Wissen um die Verwendung dieser Tools und die Anwendung dieser Fähigkeiten wird Ihnen helfen, Ihre Designfähigkeiten in Figma auf die nächste Stufe zu heben.

Typografie ist eines der wirkungsvollsten Elemente eines Designs. Sie hebt den Inhalt hervor und spiegelt den Ton und die Anforderungen eines Projekts wider. Ihr Zweck ist nicht nur ästhetisch, sondern auch funktional und technisch.

Typografie

Erstellen einer Farbpalette

Farben haben eine Bedeutung. Sie vermitteln Stimmung und Emotionen und sind daher ein wirkungsvolles Designinstrument. Die Möglichkeiten sind jedoch nahezu unbegrenzt – wenn Sie Farben zu einer Palette kombinieren, sind Ihre Optionen endlos. Wo fängt man also an? In dieser Lektion lernen wir, wie man Farben kombiniert.

Mit Bildern erreichen Sie mit weniger mehr. Ein Bild sagt mehr als tausend Worte. Deshalb sind Bilder und Grafiken wirkungsvolle visuelle Werkzeuge, die helfen, eine Botschaft zu vermitteln und die visuelle Identität eines Produkts zu etablieren. Sie können Fotos, Illustrationen und Symbole verwenden. Erfahren Sie, wann welche Anwendung am besten geeignet ist.

Grafiken und Symbole

In dieser Lektion öffnen wir Figma und testen verschiedene visuelle Stile. Wir sehen, wie man sie ausprobiert und warum sie funktionieren. Einen nach dem anderen.

Visuelle Stile

19 Min.

Skizzieren eines Drahtmodells

Durch die Skizzierung eines Wireframes können wir Usability-Probleme bereits in einem frühen Stadium unseres Designprozesses erkennen. Außerdem können verschiedene Stakeholder ihre Ideen und Anregungen einbringen. Und wir erhalten einen ersten Eindruck davon, wie das finale Projekt aussehen könnte.

Definieren Ihres visuellen Styleguides 1

Bevor wir unsere Skizzen in High-Fidelity-Qualität umsetzen, definieren wir den Stil einiger wesentlicher Elemente. Mit diesem Basissystem können wir Layout und Kompositionen im High-Fidelity-Modell schneller zusammenstellen.

Definieren Ihres visuellen Styleguides 2

In diesem zweiten Teil der Lektion konzentrieren wir uns auf den Stil der Illustrationen, die in Ihrem Projekt vorkommen werden.

Erstellen eines High-Fidelity-Modells 1

Lassen Sie uns nun unseren Styleguide und das Skizzen-Drahtmodell verwenden, um eine High-Fidelity-Version unserer Seite auf Figma zusammenzustellen.

15 Min.

Erstellen eines High-Fidelity-Modells 2

Hier werde ich mein High-Fidelity-Modell weiter formen und fertigstellen und dabei stets sein lebendiges und dynamisches Aussehen beibehalten.

Schaltflächen-Interaktionen

Wir lernen, wie wir einfache Komponenteninteraktionen hinzufügen, um unsere Schaltflächen oder andere Komponenten mit verschiedenen Auslösern zu animieren.

Verlinkung zu Seiten und Modals

Es ist wichtig, Links zwischen verschiedenen Seiten und anderen Zuständen unseres Prototyps zu erstellen, um ein natürlicheres Gefühl zu vermitteln. In dieser Lektion lernen wir, wie man auf eine neue Seite verlinkt und ein Modal öffnet.

Teilen Sie Ihren Prototyp

Jetzt, da wir alles zusammen haben, lasst es uns mit der Welt teilen!

2 Min.

Das Narrative Web: Storytelling im UX/UI-Design

Modul 5

Tauchen Sie mit Chiara Aliotta als Guide in die Macht des Storytellings als Werkzeug für emotionale, nutzerzentrierte Designs ein. Entdecken Sie, wie narrative Elemente – wie Zielgruppe, Zweck und Charakter – immersive digitale Erlebnisse gestalten können. Sie lernen, wie Sie UX-Briefings in fesselnde Geschichten verwandeln, die fesseln, begeistern und einen bleibenden Eindruck hinterlassen.

11 Lektionen (2 Stdn. 22 Min.)

Storytelling für UX- und UI-Design

Wie bei jeder Reise ist es meiner Meinung nach wichtig zu verstehen, wohin man geht. In dieser Lektion stelle ich Ihnen den Kurs vor, wie er aufgebaut ist und was wir gemeinsam lernen werden. Außerdem werde ich auf den Unterschied zwischen User Experience Design (UX) und User Interface Design (UI) eingehen.

Elemente des Geschichtenerzählens: Zielgruppe, Zweck, Charaktere und Kontext

Schon vor dem Schreiben sind die ersten Elemente, die eine Geschichte definieren, Ihr Publikum, Ihre Motivation/Ihr Zweck, der Kontext und das Verständnis, dass eine Geschichte einen Rhythmus haben muss.

17 Min.

Elemente des Geschichtenerzählens: Die Struktur

Von Aristoteles bis heute hat sich die Struktur einer Geschichte kaum verändert. Entdecken wir, wie Storytelling entsteht und wie Sie dieselben Prinzipien auf UX-Design anwenden können.

Die Kraft des Geschichtenerzählens: Emotionen

Emotionen spielen eine große Rolle in unserem Verhalten. Gute Geschichten wecken Emotionen und können ihr Publikum ansprechen. In dieser Lektion erfahren Sie, wie Sie die Macht des Geschichtenerzählens meistern und Emotionen nutzen können, um Ihre Ziele zu erreichen.

Die Elemente der Geschichte finden 1

Anhand einer fiktiven Marke werde ich Handlungen, Sequenzen und Szenen verwenden, um die Erfahrung abzubilden und tiefer zu ergründen, wie UX-Design dem traditionellen Geschichtenerzählen zugutekommt.

13 Min.

Die Elemente der Geschichte finden 2

In diesem zweiten Teil der Lektion werde ich Ihnen weiterhin zeigen, wie Sie die Elemente der Geschichte skizzieren.

13 Min.

Visuelle Inspiration, um die Fantasie anzuregen

In dieser Lektion erfahren Sie, wie Sie visuelle Inspiration aus verschiedenen Quellen finden, bevor Sie mit dem letzten Schritt der Aufgabe beginnen, dem Drahtmodell der Zielseite.

Aufbau der Erzählung und des Wireframes 1

Bisher habe ich die Nutzerreise anhand von Akten, Sequenzen und Szenen abgebildet. Das von mir mithilfe von Post erstellte Raster dient als Blaupause und hilft mir sicherzustellen, dass das von mir entworfene digitale Produkt die richtige Nutzererfahrung bietet.

Aufbau der Erzählung und Wireframe 2

Zum Abschluss dieser Einheit lernen Sie, wie Sie durch die Untersuchung der Aufnahmen und die Gestaltung des Drahtmodells tief in die Erzählung eintauchen.

15 Min.

Unterstützung der Erzählung: Wireframe vs. High-Fidelity-Mock-up

In dieser Lektion stelle ich das hochpräzise Modell vor, das vom Wireframe der vorherigen Einheit inspiriert ist. Die Dekonstruktionsphase ist wichtig, da sie uns hilft zu verstehen, ob wir mit unserer Geschichte übereinstimmen (auch bekannt als Übereinstimmung mit dem Wireframe und den bei der Analyse des Briefings getroffenen Entscheidungen).

Das Publikum mit der Erzählung einbeziehen

Storytelling ist ein mächtiges Werkzeug, das mit Bedacht eingesetzt werden muss. Deshalb erfahren Sie, wie Sie es nutzen können, um Ihr Publikum zu motivieren, zu überzeugen und zu inspirieren.

Einführung in die digitale Barrierefreiheit

Modul 6

Tauchen Sie mit Margot Gabel in die Welt des inklusiven Designs ein und erfahren Sie, wie Barrierefreiheit digitale Erlebnisse für alle verändern kann. Margot zeigt Ihnen praktische Tipps, wie Sie Ihre Website benutzerfreundlicher gestalten können – von Farbkontrasten bis hin zu alternativem Text. Sie werden entdecken, wie inklusives Design nicht nur die Gleichberechtigung fördert, sondern auch SEO und die allgemeine Benutzerfreundlichkeit verbessert.

14 Lektionen (1 Stdn. 53 Min.)

Zunächst erfahren Sie mehr über Barrierefreiheitsstandards und deren Vorteile.

Die Vorteile der digitalen Barrierefreiheit

Jetzt werde ich darüber sprechen, warum es so wichtig ist, die digitale Zugänglichkeit beim Design zu einer Notwendigkeit zu machen.

2 Min.

Barrierefreiheit im wirklichen Leben

Es ist an der Zeit, einige Browser-Situationen nachzubilden, in denen digitale Barrierefreiheit entscheidend ist. So können Sie sich besser damit identifizieren und verstehen, warum sie wichtig ist.

Zuerst lernst du das berühmte Kontrastverhältnis kennen und wie du es auf Text und Bilder anwenden kannst. Anschließend zeige ich dir, wie du eine Farbkombination auswählst.

Farben und Kontrast

Schriftarten und Hierarchie

Jetzt sehen Sie sich die Auswahlmöglichkeiten für Typografien an und erfahren, wie diese zugänglich gemacht werden können. Außerdem erfahren Sie, wie Sie eine Kombination auswählen.

Alternativer Text und Mikrokopie

In dieser Lektion bringe ich Ihnen ein sehr wichtiges Element der digitalen Zugänglichkeit bei und wie es Ihr Designdenken beeinflussen kann.

Ich möchte Ihnen dabei helfen zu verstehen, wie Benutzer Tastatur-/Sprach-/Touch-Eingaben unterschiedlich verwenden können und wie Sie sich hinsichtlich Design und UX-Entscheidungen daran anpassen bzw. darüber nachdenken müssen.

Zustände

Animationen und Multimedia-Steuerelemente

Sehen wir uns verschiedene Möglichkeiten an, die Kontrolle zurückzugeben und verantwortungsvolle Entscheidungen bei der Animation zu treffen.

Wireframing für Barrierefreiheit

In dieser Lektion erfahren Sie, wie Sie ein Low-Fidelity-Design Ihres Projekts erstellen und das bisher Gelernte bereits in diesen wichtigen Schritt einbeziehen.

10 Min.

Ein einfaches und zugängliches Designsystem

Ich zeige Ihnen, wie Sie die grundlegenden Elemente einrichten: eine Farbpalette, eine grundlegende Schriftskala, das Erstellen einiger Schaltflächen und Textfelder und das Nachdenken über ihre verschiedenen Zustände.

17 Min.

Entwerfen

Abschließend zeige ich Ihnen, wie Sie Ihre Designs mit allen zuvor besprochenen Elementen erstellen. Anschließend lernen Sie, das Designsystem zu verwenden.

In dieser Lektion erfahren Sie, wie Sie das Figma-Design unter Berücksichtigung verschiedener Zustände interaktiv und möglichst realitätsnah gestalten.

Der interaktive Prototyp

12 Min.

Testen, testen, testen

In dieser Lektion betrachten Sie das Projekt aus der Perspektive der Benutzer.

Wie präsentieren Sie sich jenseits Ihrer Website? Vielleicht haben Sie ein Ladengeschäft, einen Instagram-Account oder einen monatlichen Newsletter? Haben Sie schon einmal darüber nachgedacht, wie zugänglich diese Kontaktpunkte sein könnten?

Omnichannel-Denken