Design für Entwickler

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

Die Idee dieses Moduls ist es, Entwicklern das Design-Denken (wieder) 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 Erstellung von Websites beteiligt sind, von Vorteil, unabhängig von ihrer Rolle. Zumindest sollte selbst der technischste "Nicht-Designer"-Entwickler Designvorgaben verstehen, wissen, warum Dinge gestaltet sind, wie sie sind, und in der Lage sein, sich in die Denkweise des Benutzers zu versetzen. Und es wird ihnen helfen, ihre Portfolios ansprechender zu gestalten.

Darüber hinaus werden von Frontend-Entwicklern oft verschiedene Designarbeiten in Projekten verlangt. Kunden und Arbeitgeber gehen oft davon aus, dass sie dies können, weil sie mit den visuellen Elementen der Website beschäftigt sind. Historisch gesehen war der "Webentwickler" eine eher hybride Rolle aus Designer und Entwickler als es heute der Fall ist.

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 und nicht die Möglichkeit haben, eigene Dateien zu erstellen, können Sie (die meisten) der Codebeispiele in einem Online-Coding-Programm wie JSBin oder Glitch ausprobieren.

Lektionen

Grundlegende Designtheorie

Lernziele:

  • Grundlegendes UI-Design:
    • Kontrast.
    • Typografie.
    • Visuelle Hierarchie.
    • Maßstab.
    • Ausrichtung.
    • Nutzen von Leerraum.
  • Farbtheorie.
  • Umgang mit Bildern.

Ressourcen:

Benutzerzentriertes Design

Lernziele:

  • Verstehen, dass alles, was wir tun, für den Benutzer ist.
  • Einführung in Benutzerforschung/-tests und Benutzeranforderungen.
  • Design für Zugänglichkeit — die Zielgruppe und deren mögliche zusätzliche Bedürfnisse von Anfang an berücksichtigen.
  • Verstehen, was Designmuster sind, und die gängigen Muster im Web, zum Beispiel:
    • Dunkler Modus.
    • Brotkrumen.
    • Karten.
    • Verzögerte/Träge Registrierung.
    • Unendliches Scrollen.
    • Modale Dialoge.
    • Progressives Offenlegen.
    • Fortschrittsanzeige bei Formularen/Registrierungen/Setups.
    • Einkaufswagen.

Ressourcen:

Designvorgaben

Lernziele:

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

Siehe auch