LU01e: UI Design Patterns

Design Patterns sind im Grunde Lösungen für häufig auftretende Probleme beim Programmieren. Stell dir vor, du bist Architekt oder Bauleiter: Jedes Mal, wenn du ein bestimmtes Gebäude baust, merkst du, dass du ähnliche Bausteine und Bauweisen immer wieder benutzen kannst. Ein Design Pattern ist also wie eine Art Bauplan, der dir hilft, ein Problem einfacher und schneller zu lösen, weil schon jemand vor dir herausgefunden hat, wie das geht.

Design Patterns sind wie Abkürzungen oder Vorlagen, die dir sagen: „Wenn du Problem X hast, kannst du es so oder so lösen, weil das schon oft funktioniert hat.“ Das macht die Arbeit beim Programmieren nicht nur schneller, sondern auch sicherer, weil du weißt, dass diese Lösungswege erprobt sind und funktionieren.

Insgesamt helfen Design Patterns also dabei, deinen Code zu verbessern, ihn übersichtlicher zu machen und typische Fehler zu vermeiden.

Schauen Sie sich dazu die beiden Videos an, die dienen der Veranschaulichung.

👉🏽 Design Systems and Their Benefits: https://www.youtube.com/watch?v=3TpiNrZlzt4

👉🏽 Design System vs. Style Guide: https://www.youtube.com/watch?v=5BgKwkpJQdE

Design Patterns helfen UX Designer und Entwickler*innen auf verschiedene Arten:

1. Wiederverwendbare Lösungen: Design Patterns bieten erprobte Lösungen für häufige Probleme. Dadurch muss nicht jedes Problem von Grund auf neu gelöst werden, sondern es kann auf eine fertige Vorlage zurückgegriffen werden, was Zeit und Energie spart.

2. Verringerung von Fehlern: Da Design Patterns erprobt sind, verringern sie die Wahrscheinlichkeit, dass im Code Fehler auftreten. Man verlässt sich auf eine Lösung, die sich bereits in vielen Projekten bewährt hat.

3. Vereinfachte Kommunikation: Viele Fachpersonen in UX, IT, etc. kennen Design Patterns und verstehen sofort, was mit dem jeweiligen Pattern gemeint ist. Das spart Erklärungszeit und hilft, gemeinsam an einem Strang zu ziehen.

4. Wiedererkennbarkeit und Standardisierung: Design Patterns bieten Standardlösungen, die Entwickler*innen sofort wiedererkennen. Wenn du ein Projekt von einem Mitarbeitenden übernimmst und siehst, dass bestimmte Design Patterns verwendet werden, verstehst du schnell, wie der Code aufgebaut ist und wie du daran arbeiten kannst.

Die wertvollsten Helfer für Designer und Entwickler*innen in der Ausarbeitung neuer Designs und Codes. 

a) Ein Design System beschreibt, wie etwas aussehen und sich verhalten soll (Richtlinien fürs Design). Das wohl bekannteste Design System ist Material Design von Google: https://m3.material.io/

b) Ein Framework liefert dir den technischen Code, um diese Designs in deiner Anwendung umzusetzen (Werkzeuge und Bausteine für die Entwicklung). Wobei Bootstrap (Version 5.3) das wohl am meist verbreitete Framework ist: https://getbootstrap.com/docs/5.3/examples/

c) Eine Library ist eine Sammlung vordefinierter Funktionen oder Klassen, die spezifische Aufgaben erfüllen und von Entwicklern verwendet werden können, um die Programmierung zu erleichtern, ohne ein vollständiges System vorzugeben. Hier findet ihr die Industrie-Standards: https://ui-patterns.com/patterns

© Gaby Jenni