termini

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


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 ]