Design für Entwickler

Hinweis: Wie Sie unten sehen werden, ist dieses Modul derzeit nur ein grober Lehrplan. Wir beabsichtigen, es in Zukunft in einen vollständigen Kurs umzuwandeln, sobald die Zeit es zulässt.

Die Idee dieses Moduls ist es, Entwicklern (wieder) das Design-Denken näherzubringen. Sie möchten möglicherweise nicht als Designer arbeiten, aber ein grundlegendes Verständnis von Benutzererfahrung und Designtheorie ist für alle, die an der Website-Entwicklung beteiligt sind, wertvoll, egal welche Rolle sie dabei spielen. Zumindest sollten selbst die technischsten Entwickler, die keine „Designer“ sind, Designbriefe verstehen, warum Dinge so gestaltet sind, wie sie sind, und in der Lage sein, sich in das Denken des Benutzers hineinzuversetzen. Außerdem hilft es ihnen, ihre Portfolios ansprechender zu gestalten.

Darüber hinaus werden Frontend-Entwickler oft mit verschiedenen Designaufgaben in Projekten betraut. Kunden und Arbeitgeber gehen häufig davon aus, dass sie dies können, weil sie in die visuellen Elemente der Website eingebunden sind. Historisch gesehen war der „Webentwickler“ einst mehr eine hybride Designer-/Entwickler-Rolle 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, bei dem Sie nicht in der Lage sind, Ihre eigenen Dateien zu erstellen, könnten Sie (die meisten) der Code-Beispiele in einem Online-Coding-Programm wie JSBin oder Glitch ausprobieren.

Lektionen

Grundlegende Designtheorie

Lernziele:

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

Ressourcen:

Nutzerzentriertes Design

Lernziele:

  • Verstehen, dass alles, was wir tun, für den Benutzer ist.
  • Einführung in Benutzerforschung/-tests und Benutzeranforderungen.
  • Design für Barrierefreiheit — Berücksichtigung der Zielgruppe und ihrer zusätzlichen Bedürfnisse. Entwerfen Sie für diese von Anfang an.
  • Verstehen, was Designmuster sind, und die gängigen Muster, die im Web verwendet werden, z. B.:
    • Dunkler Modus.
    • Breadcrumbs (Brotkrümelnavigation).
    • Karten.
    • Aufgeschobene/träge Registrierung.
    • Unendliches Scrollen.
    • Modale Dialoge.
    • Progressive Offenlegung.
    • Fortschrittsanzeige bei Formularen/Registrierung/Einrichtung.
    • Einkaufswagen.

Ressourcen:

Design-Briefings

Lernziele:

  • Die Sprache des Designs sprechen, um mit Designern zu kommunizieren.
  • Interpretation von Anforderungen in Design-Briefings zur Erstellung einer Implementierung.
  • Typische Werkzeuge, die Designer verwenden, um ihre Botschaft an Entwickler zu übermitteln (z. B. Figma).

Siehe auch