Design für Entwickler

Hinweis: Wie Sie unten sehen werden, ist dieses Modul derzeit nur ein Lehrplanumriss/Syllabus. Wir beabsichtigen, dies in Zukunft, wenn die Zeit es erlaubt, in einen vollständigen Kurs umzuwandeln.

Der Zweck dieses Moduls ist es, Entwickler mit dem Design-Denken (wieder) vertraut zu machen. Sie möchten vielleicht nicht als Designer arbeiten, aber ein grundlegendes Verständnis von Nutzererfahrung und Designtheorie ist für alle Beteiligten beim Erstellen von Websites hilfreich, unabhängig von ihrer Rolle. Zumindest sollten selbst die technischsten "Nicht-Designer"-Entwickler Designvorgaben verstehen, warum Dinge so gestaltet sind, wie sie sind, und in der Lage sein, sich in die Denkweise der Nutzer hineinzuversetzen. Und es wird ihnen helfen, ihre Portfolios besser aussehen zu lassen.

Darüber hinaus werden Frontend-Entwickler oft dazu aufgefordert, verschiedene Designarbeiten in Projekten durchzuführen. Kunden und Arbeitgeber gehen oft davon aus, dass sie dies können, weil sie mit den visuellen Elementen der Website zu tun haben. Historisch gesehen war der "Webentwickler" eher eine hybride Designer-/Entwicklerrolle als heute.

Voraussetzungen

Bevor Sie mit diesem Modul beginnen, sollten Sie mit HTML und CSS vertraut sein.

Hinweis: Wenn Sie an einem Computer/Tablet/anderen Gerät arbeiten, auf dem Sie keine eigenen Dateien erstellen können, könnten Sie (die meisten) der Codebeispiele in einem Online-Coding-Programm wie JSBin oder Glitch ausprobieren.

Lektionen

Grundlegende Designtheorie

Lernziele:

  • Grundlagen des UI-Designs:
    • Kontrast.
    • Typografie.
    • Visuelle Hierarchie.
    • Maßstab.
    • Ausrichtung.
    • Verwendung von Leerraum.
  • Farbtheorie.
  • Verwendung von Bildern.

Ressourcen:

Nutzerzentriertes Design

Lernziele:

  • Verstehen, dass alles, was wir tun, für den Nutzer ist.
  • Einführung in Nutzerforschung/-tests und Nutzeranforderungen.
  • Design für Barrierefreiheit — Überlegung der Zielgruppe und ihrer zusätzlichen Bedürfnisse. Von Anfang an für diese gestalten.
  • Verstehen, was Designmuster sind und die gängigen Muster im Web, zum Beispiel:
    • Dunkelmodus.
    • Breadcrumbs.
    • Karten.
    • Deferred/Lazy-Registrierung.
    • Unendliches Scrollen.
    • Modale Dialoge.
    • Progressive Offenlegung.
    • Fortschrittsanzeige bei Formularen/Registrierung/Einrichtung.
    • Warenkorb.

Ressourcen:

Designvorgaben

Lernziele:

  • Designsprache sprechen, um mit Designern zu kommunizieren.
  • Designbrief-Anforderungen interpretieren, um eine Umsetzung zu produzieren.
  • Typische Werkzeuge, die Designer verwenden, um ihre Botschaft an Entwickler weiterzugeben (z.B. Figma).

Siehe auch