Design für Entwickler

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

Die Idee dieses Moduls ist es, Entwicklern das Design Thinking (wieder) näherzubringen. Sie möchten vielleicht nicht als Designer arbeiten, aber etwas grundlegende Benutzererfahrung und Designtheorie ist für alle, die an der Erstellung von Websites beteiligt sind, von Vorteil, unabhängig von ihrer Rolle. Zumindest sollte selbst der technischste „Nicht-Designer“-Entwickler Design-Briefs 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 müssen Frontend-Entwickler häufig verschiedene Designarbeiten an Projekten übernehmen. Kunden und Arbeitgeber gehen oft davon aus, dass sie dies tun können, da sie an den visuellen Elementen der Website beteiligt sind. Historisch gesehen war „Webentwickler“ mehr eine hybride Designer-/Entwicklerrolle, als es heute der Fall ist.

Voraussetzungen

Bevor Sie dieses 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önnen Sie die meisten Code-Beispiele 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.
    • 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ücksichtigen Sie die Zielgruppe und welche zusätzlichen Bedürfnisse sie haben könnten. Entwerfen Sie von Anfang an dafür.
  • Verstehen, was Designmuster sind, und die gängigen auf dem Web verwendeten Muster, zum Beispiel:
    • Dunkelmodus.
    • Breadcrumbs.
    • Karten.
    • Verschobene/Lazy Registrierung.
    • Unendliches Scrollen.
    • Modale Dialoge.
    • Progressive Offenlegung.
    • Fortschrittsanzeige bei Formularen/Registrierung/Einrichtung.
    • Einkaufskorb.

Ressourcen:

Design Briefs

Lernziele:

  • Die Designsprache sprechen, um mit Designern zu kommunizieren.
  • Anforderungen von Design-Briefs interpretieren, um eine Umsetzung zu produzieren.
  • Typische Werkzeuge, die Designer verwenden, um ihre Botschaft an Entwickler zu übermitteln (z.B. Figma).

Siehe auch