Modern UI Design Logo Start Termine About

Handout

PDF

Was ist UI/UX-Design?

»UX design refers to user experience design, while UI design stands for user interface design. Both of these are crucial to an IT product and need to work closely together. Despite being very integral to each other, the roles themselves are quite different, involving distinct processes.«

UX
Funktionalität

Link aus Zelda, symbolisiert dass UX und UI miteinander verknüpft sind

UI
Gestaltung

Unterschied zu Print-Design

Interfacedesign ist dynamisch & interaktiv – das gleiche Element kann je nach Gerät, Systemeinstellungen, Zustand oder Interaktion ganz anders aussehen! Zum Beispiel:

  • Smartphone ↔ Computer
  • Dark Mode ↔ Light Mode
  • Gedrückt ↔ Nicht gedrückt
  • loading, error, success

Tools & Methodik

Konzeptionsphase

  1. Ideenfindung / Sinn & Zweck
  2. Zielgruppenanalyse
  3. Wireframing der wichtigsten Features
  4. Erste Tests
  5. Optimierung

Schritt 3-5 wiederholen bis jedes Feature steht.

Designphase

...

  1. Assets festlegen
  2. High-Fidelity Prototyp
  3. Assets verfeinern
  4. Tests
Ein digital aber von Hand gezeichneter Screen, der sehr grob die Umrisse einer Uni-App zeigt. Im Menü gibt es Optionen wie 'Noten' oder 'Bibliothek', in der Navigationsleiste unten z.B. Symbole für Mensa und Nachrichten.
Wireframe

↓

Ein auf Papier gezeichnetes Interface einer Preisvergleichs-App.
Paper Prototype

↓

Ein per mit einem Designwerkzeug erstelltes App-Design für eine Pflanzen-App, die den Nutzer ans Gießen erinnert. Das Design ist 'High-Fidelity', sieht also schon 1 zu 1 aus wie eine fertig programmierte App.
High-Fidelity

Look & Feel

Farbe sollte...

  • ...zum Inhalt passen und die Marke repräsentieren
  • ...genug Kontrast haben, sodass alles erkennbar und lesbar ist
  • ...einheitliche Statusfarben für z.B. Fehler & Warnungen enthalten
  • ...gut aussehen!

Typografie sollte...

  • ...nicht zu stark gemixt werden! Maximal zwei Schriftarten auf einer Seite, oft reicht eine.
  • ...kontrastreich sein. Schriftschnitte helfen bei Hierarchien, dürfen aber nicht zu ähnlich sein.

Styleguides helfen bei der Erstellung von einheitlichen Designs. So werden im Vorhinein Regeln aufgestellt, die das spätere Ändern von Farben o. Ä. vereinfachen.

Styleguide der Modern UI Website, der die festgelegten Farben, Schriften und Elemente wie Eingabefelder, Logo und Menü zeigt

Farbe, Typografie und Weißraum helfen sehr stark dabei, enge, überfüllte Layouts besser zu strukturieren. Durch den bewussten Einsatz von Farbe an den richtigen Stellen, durch die Verwendung verschiedener Schriftgrößen und Schriftschnitte und durch das Hinzufügen von Weißraum kann Hierarchie natürlich dargestellt und das Layout angenehmer und übersichtlicher gestaltet werden:

Screenshot einer sehr unübersichtlichen Website, die Finanzdaten zeigt

↓

Die gleiche Website, die Finanzdaten zeigt, nun dank verschiedenen Hintergrundfarben, Schriftschnitten und mehr Weißraum aber deutlich übersichtlicher

Beispiele für Gestaltungsmöglichkeiten:

Modern / Verspielt

Durch abgerundete Ecken, runde Elemente (wie Kreise), runde Schriften (Rounded) und helle, knallige Farben erzielt man einen modernen & verspielten Look.

Seriös / Elegant

Durch harte Kanten, Schriften mit Serifen und gedeckte oder besondere Farben (Gold, Silber, ...) kann ein seriöser & eleganter Look erstellt werden.

Neutral

Gedeckte und neutrale Farben wie Blau und Grau, serifenlose Schriften und leichte Schatten können dabei helfen, neutrale Looks zu erstellen.

Animationen & Übergänge

Helfen bei Orientierung und können Spaß machen (»joy of use«).
Aber: immer berücksichtigen, ob sie nicht auf Dauer anstrengend oder nervig sein können!

Accessibility

Form over Function! Accessible Design verbessert die Usability für alle Nutzer*innen, und umgekehrt.

Wichtig:

  • Informationen nicht nur per Farbe vermitteln
  • Ausreichend Kontrast
  • Fokus-Styles
  • Alles beschriften
  • Tastatur-Navigation berücksichtigen

Accessiblity kann alle betreffen:

Viele Beispiele für Gründe und Situationen, durch die Menschen bei Motorik, Hören, Sehen und Sprechen eingeschränkt sein können – sowohl dauerhaft wie zum Beispiel durch Taubheit, temporär wie bei einer Armverletzung oder situationsbedingt, beispielsweise ein Autofahrer der nur kurz aufs Display schauen kann

Able for Figma

bit.ly/able-figma

Stark

getstark.co

WAVE

wave.webaim.org

Google Lighthouse

web.dev/measure

Responsive Design

Mit Smartphone anfangen (»Mobile First«), dann größere Screens designen, um den zusätzlichen Platz sinnvoll zu nutzen. Übliche Breakpoints:

  • 375px Breite: Smartphone
  • 768px Breite: Tablet
  • 1024px Breite: Desktop
  • 1400px Breite: Desktop (groß)

Üblicherweise arbeitet man mobil mit einem einspaltigen Layout und fügt für größere Screens dann weitere hinzu. Man kann Inhalte...

  • ...anders anordnen: mehrere Spalten nutzen, Elemente fixieren
  • ...skalieren: wichtige Elemente vergrößern, mehr Weißraum
  • ...neu hinzufügen: weitere hilfreiche Begleit-Elemente einblenden
Screenshot einer App um Pizza zu bestellen. Der Header, die Lieferzeit, Filteroptionen, die Auflistung der Pizzen im zweispaltigen Raster und der Bestellbutton sind alle untereinander angeordnet Die gleiche Pizza Bestellung in der Desktopansicht. Bestellschritte, Bestellbutton und eine Übersicht des Warenkorbs sind in einer Spalte auf der linken Seite, rechts davon nimmt nun die Auflistung der Pizzen in einem größeren Raster circa zwei Drittel des Bildschirms ein. Filteroptionen und Lieferzeit befinden sich darüber.

Einige Funktionen der Designtools (z.B. "Constraints" in Figma) helfen beim Responsive Design, aber generell gibt es beim Interfacedesign eine große Differenz zwischen den Möglichkeiten bei der Umsetzung mit Code und den Möglichkeiten, die Designtools bieten. Lasst euch davon in eurer Kreativität nicht einschränken!

»By continually studying the work that inspires you with a careful eye, you’ll be picking up design tricks for years to come.«
PDF

Quellen

Seite 1 (PDF)

Seite 4 (PDF)

Seite 5 (PDF)

  • Zitat von Adam Wathan und Steve Schoger aus Refactoring UI von Adam Wathan & Steve Schoger Seite 218 Stand: 16.01.2020