Figma

Atomic Design

von

Atomic Design

Atomic Design ist eine von Brad Frost entwickelte Methode zur Verwaltung und Systematisierung von User-Interfaces.

Es wird dazu genutzt, um Design-Systeme zu erstellen.

Diese Methodik gibt uns die Möglichkeit, (vom Abstrakten zum Konkreten) konsistente und skalierbare Design-Systeme zu erstellen.

Es gibt fünf unterscheidbare Ebenen im Atomic Design: Atoms, Molecules, Organisms, Templates und Pages.

Design-Datei aus Figma-Community zum Thema „Atomic Design“ –> https://www.figma.com/community/file/1214888616626709424/atomic-design-approach-newbie-academy

YT-Video über Atomic Design –> https://youtu.be/Yi-A20x2dcA?si=fjdSZxcT1ztYmyY7

Ein Atom ist ein kleinstmögliches Objekt wie, z.B., Labels, Buttons, Textfields etc.

Moleküle: Newsletter-Anmeldung, Login für eine App oder andere Gruppierungen von Atomen.

Organismen sind Gruppen von Molekülen, die zu einem relativ komplexen Objekt innerhalb eines Interfaces verbunden werden.

Templates sind Vorlagen, die hauptsächlich aus Gruppen von Organismen, die zu Seiten bzw. kompletten Views zusammengefügt werden.

Pages sind Seiten, oder eher als Instanzen von Vorlagen zu verstehen.

Design System erstellen

von

Hier sind Schritte zur erstellung eines Design Systems für ein App mit Responsive Layout.

Schritt 1: Forschung und Planung

  1. Das Ziel für Design Systems. Welche Probleme möchtest du lösen? Welche Elemente sollen abgedeckt werden?
  2. Zielgruppe: Identifiziere die Zielgruppe deiner App und berücksichtige ihre Bedürfnisse und Erwartungen.

Schritt 2: Style Guide erstellen

  1. Farbpalette: Definiere eine Farbpalette für deine App. Erstelle Farbfelder für Hintergrundfarben, Textfarben, Akzentfarben usw.
  2. Typografie: Wähle Schriftarten für deinen Text. Definiere Schriftgrößen, Zeilenhöhe und andere textbezogene Stile.
  3. Symbole: Erstelle Symbole für häufig verwendete UI-Elemente wie Buttons, Icons, Formularelemente usw.
  4. Abstände und Größen: Festlege die Größen und Abstände für verschiedene Elemente, um ein konsistentes Layout zu gewährleisten.

Schritt 3: Komponentenbibliothek erstellen

  1. Komponenten definieren: Identifiziere wiederverwendbare UI-Komponenten wie Header, Footer, Karten, Buttons usw.
  2. Komponenten erstellen: Erstelle Komponenten in Figma und organisiere sie in einer Bibliothek. Achte darauf, dass sie anpassbar sind, um den Bedürfnissen unterschiedlicher Bildschirmgrößen gerecht zu werden.

Schritt 4: Grid-Layout erstellen

  1. Grid definieren: Erstelle ein Rasterlayout, das sich an die Anforderungen deiner App anpasst. Dies hilft, ein konsistentes und responsives Design zu gewährleisten.
  2. Breakpoints festlegen: Definiere Breakpoints für verschiedene Bildschirmgrößen, um sicherzustellen, dass das Design auf verschiedenen Geräten gut aussieht.

Schritt 5: Interaktionsmuster und Animationen festlegen

  1. Interaktionen planen: Definiere grundlegende Interaktionsmuster, wie z.B. Hover- oder Klickzustände für Buttons.
  2. Animationen hinzufügen: Füge bei Bedarf Animationen hinzu, um das Nutzererlebnis zu verbessern. Definiere Übergänge zwischen Zuständen.

Schritt 6: Dokumentation erstellen

  1. Style Guide dokumentieren: Erstelle eine Dokumentation, die die Richtlinien für die Verwendung deines Design Systems klar erklärt. Dies kann in Form von Text, Bildern oder sogar Videos erfolgen.
  2. Anleitung für Entwickler: Falls du mit Entwicklern zusammenarbeitest, füge Anweisungen zur Integration des Design Systems in den Entwicklungsprozess hinzu.

Schritt 7: Zusammenarbeit und Aktualisierung

  1. Kollaboration: Teile dein Design System mit Teammitgliedern und sammle Feedback ein.
  2. Aktualisierung: Halte dein Design System auf dem neuesten Stand. Aktualisiere es bei Bedarf, um neue Anforderungen oder Trends zu berücksichtigen.

Schlüsselfarben

von

Farben für App

Die spezifische Anwendung von Farben kann je nach dem spezifischen Kontext und den Anforderungen der App variieren.

Allgemeine Leitlinien, wie verschiedene Schlüsselfarben in App-Designs verwendet werden können:

Primärfarben:
App-Header und Navigationsleisten: Primärfarben werden oft für die Hauptelemente wie App-Header, Navigationsleisten und Schaltflächen verwendet, um wichtige Funktionen oder Aktionen hervorzuheben.

Sekundärfarben:
Akzentfarben und Call-to-Action-Elemente: Sekundärfarben können für Akzentuierungen und Call-to-Action-Elemente verwendet werden, um wichtige Interaktionspunkte hervorzuheben. Zum Beispiel für Schaltflächen, Links oder Benachrichtigungen.

Neutralfarben:
Hintergründe und Text: Neutralfarben eignen sich gut für Hintergründe, insbesondere wenn du möchtest, dass Inhalte oder andere Elemente darauf hervorstechen. Sie werden auch häufig für Text verwendet, um die Lesbarkeit zu verbessern.

Tertiärfarben:
Akzentuierung und Variation: Tertiärfarben können dazu verwendet werden, bestimmte Elemente hervorzuheben und Variationen innerhalb der Farbpalette zu schaffen. Dies könnte zum Beispiel für spezielle Grafiken, Icons oder kleine Designakzente sein.

Richtlinien der Material Design 3:

Schlüsselfarben werden aus dem Farbton der Eingabefarbe erstellt, indem Chroma und Ton angepasst werden.

(1) Primär kann Ihre Hauptmarkenfarbe oder die am häufigsten verwendete primäre Akzentfarbe sein.
Die primäre Schlüsselfarbe wird als Quellfarbe verwendet, ähnlich wie die Quellfarbe in der dynamischen Einstellung, und überschreibt alle anderen Schlüsselfarben. Legen Sie diese daher zuerst fest. Das bedeutet, dass keine zusätzlichen Farben hinzugefügt werden müssen

(2) Sekundäre Rollen werden für weniger prominente Komponenten in der Benutzeroberfläche verwendet und erweitern gleichzeitig die Möglichkeiten zur Farbdarstellung.

(3) Neutrale Rollen werden für Oberflächen und Hintergründe sowie für stark hervorgehobene Texte und Symbole verwendet. Ihre Markenfarben werden nun in das Kernfarbschema aufgenommen, das an den M3-Farbraum angepasst ist, vollständig zugänglich ist und als Design im Code exportiert und implementiert werden kann.

(4) Tertiärrollen werden für kontrastierende Akzente verwendet, die dazu dienen können, Primär- und Sekundärfarben auszugleichen oder die Aufmerksamkeit auf ein Element zu lenken.

Pixel Density (DIP oder DP)

von

Pixeldichte

DIP (Density-Independent Pixel) und DPI (Dots Per Inch) sind Begriffe, die in der Grafik- und Bildschirmtechnologie verwendet werden, insbesondere im Kontext von Mobilgeräten. Hier sind die Unterschiede zwischen DIP und DPI:

DIP (Density-Independent Pixel):

  1. Definition: DIP ist eine Einheit, die in der Softwareentwicklung verwendet wird, um grafische Elemente unabhängig von der Pixeldichte eines Bildschirms zu beschreiben.
  2. Unabhängigkeit von der Pixeldichte: Ein DIP repräsentiert eine Einheit der Größe, die unabhängig von der tatsächlichen Pixeldichte ist. Dies bedeutet, dass ein DIP auf verschiedenen Bildschirmen gleich groß erscheint, unabhängig davon, ob es sich um einen hochauflösenden Bildschirm mit hoher Pixeldichte oder einen Bildschirm mit niedriger Pixeldichte handelt.
  3. Verwendung in der Softwareentwicklung: Entwickler verwenden DIPs, um die Größe von Benutzeroberflächenelementen festzulegen, ohne sich um die spezifische Pixeldichte des Geräts kümmern zu müssen. Dies ermöglicht eine konsistente Darstellung auf verschiedenen Geräten.

DPI (Dots Per Inch):

  1. Definition: DPI ist eine Maßeinheit, die die Anzahl der Bildpunkte (Pixel) pro Zoll auf einem Bildschirm oder Druckmedium angibt.
  2. Pixeldichte: DPI gibt an, wie dicht die Pixel auf einem Bildschirm platziert sind. Ein höherer DPI-Wert bedeutet eine höhere Pixeldichte, was zu einer schärferen Anzeige führt.
  3. Verwendung: DPI wird oft im Druckwesen und in der Bildschirmtechnologie verwendet, um die Qualität von Ausdrucken oder die Schärfe von Bildschirmdarstellungen zu beschreiben. In der Regel wird es in Bezug auf die Hardware und die physikalischen Eigenschaften eines Bildschirms verwendet.

Zusammenfassung:

  • DIP: Einheiten in der Softwareentwicklung zur Größenangabe von Benutzeroberflächenelementen, unabhängig von der Pixeldichte.
  • DPI: Eine Maßeinheit, die die Anzahl der Pixel pro Zoll auf einem Bildschirm oder Druckmedium angibt, und wird oft verwendet, um die Pixeldichte eines Bildschirms zu beschreiben.

In der Praxis sind DIPs und DPI eng miteinander verbunden, da DIPs dazu dienen, eine konsistente Benutzeroberfläche über verschiedene Pixeldichten hinweg zu ermöglichen. Entwickler verwenden DIPs, um die Größe von UI-Elementen zu definieren, und die Plattform passt diese dann entsprechend der Pixeldichte des Geräts an.

adaptiv vs. responsive

von

adaptiv vs. responsive

Sie können eine adaptive App haben, die nicht responsive ist, oder umgekehrt.
Und natürlich kann eine App beides oder keines von beidem sein.

Adaptives Design:

  • Es werden separate Designs für Desktop-Computer, Tablets und Mobilgeräte erstellt
  • Media Queries oder andere Techniken, um das Gerät zu identifizieren etc. Mit Media Queries werden Breakpoints gesetzt.
  • Bessere Leistung, da nur das Layout für erkanntes Gerät geladen wird

Responsive Design:

  • Einheitliches Layout für alle Geräte. Dynamische Anppasung an verschiedenen Bildschirmgrößen
  • Flüssige Raster und flexible Elemente. Skalierung proportional zw. UI-Elementen und Bildschirmabmessungen
  • Schwerpunkt in Verwendung von Media Queries liegt darauf, dass das Layout dynamisch auf verschiedene Bildschirmgrößen reagiert, ohne spezielle Designs für bestimmte Geräte vorzusehen.

Beide Ansätze haben jedoch gemeinsame Ziele:

  • Benutzerfreundlichkeit: eine gute UX, unabhängig vom verwendeten Gerät.
  • Optimierung für verschiedene Geräte: die Benutzeroberfläche auf einer Vielzahl von Geräten und Bildschirmgrößen gut dargestellt wird.

Kurze Einführung in Responsive Design (EN) ca. 6 min.: https://www.linkedin.com/learning/mapping-the-modern-web-design-process/responsive-web-design-as-a-process-14881664?u=36053084

Layout verstehen

von

Layout verstehen

Material Design von Google enthält sehr gutes Richtlinien, wie man Res.Des implementiert.

  • Gestalten sie das Layout so, dass die Aufmerksamkeit des Users auf die Aktion geführt wird
  • Passen Sie Layouts an kompakte, mittlere und große Window size classes an
  • Nutzen sie als Grundlage ein kanonisches Layout
  • Überlegen Sie, wie Abstände und Teile des Layouts, die zusammenwirken
  • Materiallayout gilt für Android und das Web

Begriffe:

Column (Spalte): ein oder mehrere vertikale Inhaltsblöcke innerhalb eines Bereichs
Fold (Falten): bei faltbaren Geräten ein flexibler Bereich des Bildschirms oder bei Geräten mit zwei Bildschirmen ein Scharnier, das zwei Displays trennt
Margin (Rand): der Abstand zwischen dem Bildschirmrand und allen darin enthaltenen Elementen
Multi-window mode (Multi-Window-Modus): Ermöglicht mehreren Apps die gleichzeitige gemeinsame Nutzung desselben Bildschirms
Pane (Bereich): ein Layout-Container, der andere Komponenten und Elemente innerhalb einer einzelnen App enthält. Eine Scheibe kann fest, flexibel, schwebend oder semipermanent sein
Spacer (Abstandhalter): der Abstand zwischen zwei Scheiben
Window size class (Fenstergrößenklasse): eigenwilliger Haltepunkt, die Fenstergröße, bei der sich ein Layout ändern muss, um es an den verfügbaren Platz, Gerätekonventionen und Ergonomie anzupassen

Quelle: Google Mterial Design Guidelines

–> LinkedIn Learning: Design Aesthetics for the Web (ca. 3h / EN) https://www.linkedin.com/learning/design-aesthetics-for-the-web/using-the-exercise-files?autoSkip=true&resume=false&u=36053084

UX Design (mit Links)

von

UX Design (User Experience Design) bezieht sich auf den Prozess der Gestaltung von Produkten, Systemen oder Dienstleistungen, um eine positive und effektive Erfahrung für die Nutzer sicherzustellen. Ziel ist es, die Interaktion zwischen dem Nutzer und dem Produkt so nahtlos, effizient und angenehm wie möglich zu gestalten. Dabei werden Aspekte wie Benutzerfreundlichkeit, Zugänglichkeit, Ästhetik und die Gesamtzufriedenheit des Nutzers berücksichtigt. UX Designer analysieren die Bedürfnisse und Verhaltensweisen der Nutzer, um Produkte zu entwickeln, die deren Erwartungen erfüllen und eine positive Gesamterfahrung bieten.

Artikel

What Is a UX Designer and What Does He/She Do?

What is UX?

Dos and Don’ts of UX Design

UX Fundamentals 101 guide

Einzelne  LinkedIn-Learning Videos:

  1. Methoden der UX(Nutzer kennenlernen) https://www.linkedin.com/learning/grundlagen-der-user-experience-fur-entscheider-innen/methoden-der-ux-die-nutzer-kennenlernen?resume=false&u=36053084
  2. Methoden der UX (Ideen entwickeln) https://www.linkedin.com/learning/grundlagen-der-user-experience-fur-entscheider-innen/methoden-der-ux-ideen-entwickeln-und-testen?resume=false&u=36053084
  3. Analytische Methoden https://www.linkedin.com/learning/grundlagen-der-user-experience-fur-entscheider-innen/analytische-methoden?resume=false&u=36053084
  4. Creating the journey map https://www.linkedin.com/learning/learning-design-thinking-lead-change-in-your-organization/creating-the-journey-map?u=36053084

Oder ganze Video-Kurse, es gibt auf LinkedIn Learning mehrere, z.B.:

Grundlagen der User Experience: Usability-Tests
https://www.linkedin.com/learning/grundlagen-der-user-experience-usability-tests/willkommen-zu-grundlagen-der-user-experience-usability-tests?u=36053084
Grundlagen der User Experience für Entscheider:innen
https://www.linkedin.com/learning/grundlagen-der-user-experience-fur-entscheider-innen/ux-mythen-und-fehleinschatzungen?u=36053084

Zusätzlich hier sind ein paar Artikel zum Thema aus Online Magazin „Medium“:
(im Brauser kan man die Artikel auch auf Deutsch übersetzen)

Create Customer Journey Maps That Don’t Suck
https://medium.com/r-before-d/create-customer-journey-maps-that-dont-suck-337e62eb39d1
The Importance of Customer Journey Mapping: Optimizing Touchpoints for Enhanced Experiences
https://medium.com/@alexanderizryadnov/the-importance-of-customer-journey-mapping-optimizing-touchpoints-for-enhanced-experiences-7f53bc52bd29


Übung: Custom Journey Map

von

(1) Eine Methode für Kaffee-Zuberatung auswählen:

Filterkaffee: Das ist eine der gebräuchlichsten Methoden, bei der gemahlener Kaffee in einen Filter gegeben wird, durch den heißes Wasser langsam hindurchfließt.
Espressomaschine: Diese Maschinen pressen heißes Wasser unter Druck durch fein gemahlenen Kaffee, um einen starken, konzentrierten Kaffee zuzubereiten.
French Press (Pressstempelkanne): Gemahlener Kaffee wird mit heißem Wasser in einer French Press gebrüht. Nach einer Brühzeit wird der Kaffeesatz durch Drücken eines Kolbens nach unten von der Flüssigkeit getrennt.
Perkolator: Ein perkolierender Kaffeekocher zirkuliert heißes Wasser durch Kaffeesatz in einem Behälter, bis die gewünschte Stärke erreicht ist.
Türkischer Kaffee: Fein gemahlener Kaffee wird mit Zucker und Wasser gekocht und in speziellen kleinen Pfannen serviert.
Cold Brew: Kaffee wird über einen längeren Zeitraum in kaltem Wasser eingeweicht, was einen milderen, weniger sauren Kaffee ergibt.
Mokkakanne (Bialetti): Diese Methode verwendet Dampfdruck, um Wasser durch Kaffeepulver zu pressen und Kaffee zuzubereiten.
Aeropress: Ein Gerät, das Kaffee unter Druck durch ein Filtersystem drückt, ähnlich einer Spritze, um Kaffee zuzubereiten.
Siphon/Vakuumkaffeebereiter: Hier wird Wasser durch Erhitzen in einem unteren Behälter nach oben in einen oberen Behälter gezogen, wo es mit Kaffeesatz vermischt wird. Nach dem Entfernen der Hitze fließt der Kaffee zurück in den unteren Behälter.
Kaffeepads/Kapseln: Verwendet spezielle Kaffeepads oder Kapseln, die in dafür vorgesehenen Maschinen für eine schnelle Zubereitung eingesetzt werden.
Pour-over/Kaffeetropf: Heißes Wasser wird manuell über gemahlenen Kaffee in einem Filter gegossen, um langsam Kaffee aufzubrühen.
Kaffeekocher aus Edelstahl oder Keramik: Spezielle Kocher, in denen Kaffee direkt über einem offenen Feuer oder Herd zubereitet wird.

(die Liste ist mit GPT-Chat erstellt)

(2) Mit der Eingabe customer journey map template in Google-Bilder sich über Vielfalt der CJM-Ausführungen inspirieren lassen.

(3) Ein FigJam-Dokument erstellen.
Die Möglichkeiten Des Tools erforschen und
eine CJM für eine Kaffee-Zuberatung-Methode eurer Wahl erstellen.

Es muss nicht perfekt sein. Ihr könnt erst eine“nicht-perfekte“ CJM bauen, basierend auf ersten Eindruck, was eine CJM ist. Und später, für einen anderen nach Ihrem Auswahl Produkt oder Anwendung eine bessere CJM erstellen. Wichtig ist, das ihr nicht zu lange überlegt, sonder FigJam gleich benutzt.

Jeder Prozess der Kaffee-Zuberatung  besteht aus Aktionen vom Ausgangs- bis zu Endpunkt, wo man eine Tasse Kaffee geniesst (oder nicht). Dieser Prozess im Bezug zu Nutzer versucht als CJM darzustellen. Das ist eine klassische UX-Übung.

Nützliche Links zur Übung:

– Erklärung über CJM: https://www.figma.com/de/templates/customer-journey-map/
– ein Workflow, wie eine CJM zu erstellen: https://www.figma.com/de/resource-library/what-is-a-customer-journey-map/
– ein Video-Tutorial „Creating the journey map“: https://www.linkedin.com/learning/learning-design-thinking-lead-change-in-your-organization/creating-the-journey-map?u=36053084


CJM

von

Customer Journey Map („Kundenreise“) – ist ein UX-Instrument zur Analyse des Benutzerverhalten im Bezug zu einem Produkt.
CJM hilft zu verstehen, wie ein Nutzer einen Produkt/Anwendung /Marke/Service benutzt, welche Entscheidungen kann er in diesem Prozess treffen und was er dabei fühlen kann.
Die Interaktionen und Erfahrungen mit einem Produkt können auf verschiedene Weise visualisiert werden.
Als Ergebnis entsteht eine „Karte“,  die hilft, den gesamten Verlauf der Kundeninteraktionen zu analysieren, von Anfang – bei der ersten Kontaktaufnahme – bis zum Abschluss einer Transaktion und darüber hinaus.

Mit der Eingabe customer journey map template in Google-Bilder gibt uns eine Vielfalt, wie eine CJM aussehen kann.

Verschiedene Whiteboards-Anwendungen wie Miro oder FigJam sind dazu gedacht Ideen zu sammeln und Projekte in einem Team zu planen. Die Benutzerfläche der Miro, sowie FigJam ist minimalistisch und intuitiv. Sie sind ein guter Werkzeug, um CJMs schnell zu erstellen.
FigJam-Webseite erklärt sogar, was eien CJM ist : https://www.figma.com/de/templates/customer-journey-map/ und gibt dazu ein Workflow, wie eine CJM zu erstellen: https://www.figma.com/de/resource-library/what-is-a-customer-journey-map/.


Skeuomorphismus

von

Skeuomorphismus ist eine Design-Stilrichtung, die vertraute reale Objekte oder die Optik realen Texturen nachahmt.
Vergleichsweise wirkt derzeit diese Stilrichtung unmodern.
Doch überall, wo Transfer von Produkten in die digitale Welt gefragt wird (z.B. in Musik-Apps), ist Skeuomorphismus berechtigt verwendet.
Gegeteil des Skeuomorphismus ist dann das Flat Design.

Arten der Prototypen

von

Es gibt verschiedene Arten von Prototypen, die bei der Entwicklung und dem Design von Anwendungen verwendet werden können. Hier sind einige gängige Arten von Prototypen:

  1. Papierprototypen: Diese werden auf Papier gezeichnet oder ausgedruckt, um grundlegende Benutzeroberflächen darzustellen.
  2. Wireframes: Diese sind statische, schematische Darstellungen von Benutzeroberflächen, die die grundlegende Struktur und Platzierung von Elementen zeigen.
  3. Interaktive Prototypen: Sie ermöglichen es Benutzern, durch die Anwendung zu navigieren, grundlegende Aktionen auszuführen und Interaktionen zu simulieren, jedoch ohne die Funktionalität der tatsächlichen Anwendung.
  4. HTML-Prototypen: Diese werden mithilfe von HTML, CSS und manchmal einfachem JavaScript erstellt, um eine realistischere Vorstellung der Benutzeroberfläche zu vermitteln.
  5. Visuelle Prototypen: Sie fokussieren sich stark auf das visuelle Design und zeigen das Aussehen der Anwendung mit besonderem Augenmerk auf Farben, Schriften, Bilder usw.
  6. Funktionsprototypen: Diese enthalten grundlegende Funktionalitäten der Anwendung, um spezifische Aktionen oder Prozesse zu demonstrieren.
  7. Prototypen mit hoher und niedriger Fidelity: Prototypen mit hoher Fidelity sind detaillierter und näher an der endgültigen Anwendung, während Prototypen mit niedriger Fidelity grobe Darstellungen sind, die sich auf Struktur und Funktion konzentrieren.
  8. Prototypen für verschiedene Plattformen: Prototypen, die speziell für verschiedene Plattformen wie Web, mobile Anwendungen (iOS, Android) oder Desktop-Anwendungen entwickelt wurden.
  9. Storyboard-Prototypen: Diese erzählen eine Geschichte über den Ablauf der Anwendung und wie der Benutzer damit interagieren könnte.
  10. Animationen und Bewegungsprototypen: Diese zeigen, wie Elemente sich innerhalb der Anwendung bewegen oder verändern könnten, um die Benutzererfahrung zu verbessern.

Die Wahl des Prototyps hängt von den spezifischen Anforderungen des Projekts, dem Entwicklungsstadium und den Zielen ab. Oftmals werden verschiedene Arten von Prototypen in verschiedenen Entwicklungsphasen verwendet, um eine umfassende und nutzerzentrierte Anwendung zu erstellen.

[ Chat GPT ]

mentale Modelle

von

„Oft werden sogenannte »mentale Modelle« verwendet, um technische Geräte zu verstehen und zu nutzen. Das mentale Modell bezieht sich auf die Art und Weise, wie sich ein Nutzer in einer bestimmten Situation verhält, wenn er versucht, eine bestimmte Aufgabe zu vervollständigen. Anders gesagt: Der Nutzer glaubt bereits vor der Nutzung zu wissen, wie etwa das User Interface einer Applikation funktioniert und wie er Aufgaben damit meistern kann. Im Idealfall entspricht das mentale Modell eines Nutzers der Funktionalität eines technischen Geräts.
Ein Beispiel dazu: Stellen Sie sich vor, Sie händigen einem guten Freund ein Tablet aus, der zuvor noch niemals dieses Gerät gesehen und genutzt hat, und sagen ihm, dass er darauf Bücher lesen kann. Noch bevor er das Gerät eingeschaltet hat, wird er sich im Geiste den Prozess des Bücherlesens auf diesem Gerät vorstellen. Er wird mutmaßen, wie wohl die Bildschirmanzeige aussehen wird, wie man Buchseiten umblättern kann, und sich vielleicht fragen, ob es auch so etwas wie Lesezeichen gibt und wie diese realisiert sind. Diese bereits im Vorfeld getroffenen Annahmen über das User Interface beeinflussen den Nutzer anschließend auch bei der Nutzung.“

Auszug aus „App-Design“ (Jan Semler, Kira Tschierschke)

Cognitive Load

von

Jede Plattform ist anders. Die Erwartung des Nutzers sind es auch, je nach Plattform.

Der Cognitive Load beschreibt die Menge an Informationen, die sich ein Nutzer merken muss, um ein System vollständig oder zum Grad der Nutzbarkeit zu erlernen. Je mehr der Nutzer über ein System und die Controls lernen muss, desto schwieriger ist es zu bedienen.

Usability Guidelines

von

„Greifen Sie wenn möglich auf die Richtlinien und Controls des jeweiligen Betriebssystems zurück. Scheuen Sie sich aber nicht, auch individuelle Lösungen für Bedienelemente oder Funktionen zu entwickeln. Wichtig ist dabei aber, den Nutzer nicht zu verwirren oder ihn ratlos allein zu lassen. Führen Sie neue Funktionen und Bedienelemente also bewusst ein. Haben Sie immer im Auge, ob der Nutzer auch versteht, wofür das jeweilige Bedienelement eingesetzt wird.“ [Auszug aus „App-Design“, Jan Semler, Kira Tschierschke]

Design Guidelines für Android, IOS und WEB

Die offizielle Design Guide-Leitlinien, die von jeweiligen Unternehmen eingeführt wurden, helfen Entwicklern und Designern eine konsistente und intuitive Benutzererfahrung zu schaffen. Dabei sind diese Design-Systeme ein leistungsstarke Werkzeug für das Prototyping und machen es einfacher Apps zu erstellen, die gut auf verschiedenen Geräten und Bildschirmgrößen funktionieren.

Für Android gibt es das Material Design System von Google, LINK!

für IOS das Human Interface Guidelines System von Apple, LINK!

für Webanwendungen gibt es verschiedene Systeme wie das Bootstrap Framework LINK!

und das Material Design Lite von Google. LINK!


Durch die Einhaltung der Design-Richtlinien können sie schneller und effizienter arbeiten, da es ist nicht jedes Mal von Grund auf neu gestalten werden muss.   

Heuristik

von

Heuristik bezeichnet im Allgemeinen eine Methode oder eine Technik, die zur Problemlösung oder zur Entdeckung neuer Ideen verwendet wird. Diese Herangehensweise basiert oft auf Erfahrungswerten, Intuition und Regeln, die nicht zwangsläufig garantiert die optimale Lösung bieten, sondern eher eine schnelle, praktische Lösung ermöglichen.

Heuristiken kommen in verschiedenen Bereichen wie der Psychologie, Informatik, Mathematik und anderen Wissenschaften zum Einsatz, um komplexe Probleme zu vereinfachen und Lösungen zu finden, ohne alle möglichen Optionen durchzugehen. Sie dienen als Richtlinien oder Faustregeln, um Entscheidungsfindungsprozesse zu unterstützen.

Figma-Lernquellen

von
Lernquellen

Erste Woche: Crash-Kurs auf Udemy Lerne FIGMA: UX UI Design Masterclass – Der Weg zum Experten // Sinan Yurttadur

Zusätzliche Quellen:

  1. Figma Learn Center auf der offiziellen Figma Webseite
  2. LinkedIn Learning: Figma Grundkurs // Kerstin Müller
  3. LinkedIn Learning: Figma Grundkurs // Maureen Herben
  4. LinkedIn Learning: Grundlagen der User Experience // Jens Jacobsen
  5. LinkedIn Learning: UX Prototyping Grundkurs // Jens Jacobsen
  6. Kapitel Grundlagen des Webdesigns aus dem LinkedIn Learning Kurs „Grundlagen der Webprogrammierung: Meine erste Website“ // Florence Maurice
  7. LinkedIn Learning: Interaction Design: Flow // Diane Cronenwett
  8. LinkedIn Learning: Wie Entwickler von UX profitieren // Jens Jacobsen

Stoffplan: Figma

von
Stoffplan
1. Einführung in das Prototyping
	1.1. Arten von Prototypen
	1.2 Grundelemente eines Interface Designs
	1.3 Lofi- oder Hifi-Fidelity
	1.4 Arbeitsablauf der Prototypenproduktion im Überblick 
	1.5 Tools zur Erstellung von Prototypen



2. Gestaltung in Figma	2.1 Arbeitsflächen, Menüs und Tools
	2.2 Frame Set-up und Rasterformate
	2.3 Layers, Gruppen, Pages und Assets
	2.4 Farben und Hintergrunde
	2.5 Text- und Schifteinstellungen
	2.6 Vektorgrafiken und Pixel-Bilder
	2.7 Device Preview



3. Zusammenarbeit in FigJam	3.1 Ideen sammeln und festhalten
	3.2 Phasen nutzerorientierten Designs
	3.3 UX-Technicken im Überblick



4. Designprozess in Figma	4.1 Das Moodboard, Wireframes und Mock-ups 
	4.2 Styleguide (Gestaltungsrichtlinien)
	4.3 Entwurfsvorbereitung 



5. Fortgeschrittene Techniken in Figma 	5.1 Verwendung von Komponenten und Stilen
	5.2 Arbeiten mit Instanzen
	5.3 Fonts importieren
        5.4 Arbeiten mit Masken
	5.5 Plugins und Erweiterungen
	5.6 Parent-Frames und Child-Frames
	5.7 Nested Auto-Layout
	5.8 Assets in Bibliotheken organisieren
        5.9 Erstellung von Design-Systemen
	5.10 Automatisierung von Arbeitsabläufen
	5.11 Templates finden und installieren  



6. Erstellung von interaktiven Prototypen	6.1 Einen Prototype einrichten
	6.2 Navigationsstruktur für den Prototypen entwickeln
	6.3 Screens verbinden
	6.4 Overflow Verhalten
	6.5 Horizontales Scrollen
	6.6 Elemente fixieren
	6.7 Smart Animate
	6.8 Validierung und Test



7. File Sharing im Figma-Teamprojekt	7.1 Erstellung von einem Teamprojekt
	7.2 Erstellen einer Teambibliothek
	7.3 In einem Team Designs teilen
	7.4 Assets exportieren und herunterladen
	7.5 Exportieren eines Figma-Projekts