Design für Entwickler

Hinweis: Wie Sie unten sehen werden, ist dieses Modul derzeit nur ein Lehrplanübersicht/Syllabus. Wir beabsichtigen, es in der Zukunft, wenn die Zeit es zulässt, in einen vollständigen Kurs umzuwandeln.

Die Idee dieses Moduls ist es, Entwickler (wieder) an das Designdenken heranzuführen. Sie möchten möglicherweise nicht als Designer arbeiten, aber es ist gut für alle, die an der Erstellung von Websites beteiligt sind, über ein grundlegendes Wissen über Benutzererfahrung und Designtheorie zu verfügen, unabhängig von ihrer Rolle. Zumindest sollte selbst der technischste, "nicht-Designer" Entwickler Designvorgaben verstehen, warum Dinge so 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 wird von Frontend-Entwicklern oft erwartet, dass sie verschiedene Designarbeiten in Projekten durchführen. Kunden und Arbeitgeber nehmen oft an, dass sie dies können, weil sie an den visuellen Elementen der Website beteiligt sind. 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 oder einem anderen Gerät arbeiten, auf dem Sie keine Dateien erstellen können, können Sie versuchen, den Code in einem Online-Editor wie CodePen oder JSFiddle auszuführen.

Lektionen

Grundlegende Designtheorie

Lernziele:

  • Grundlegende UI-Designprinzipien:
    • Kontrast.
    • Typografie.
    • Visuelle Hierarchie.
    • Skalierung.
    • Ausrichtung.
    • Verwendung von Weißraum.
  • Farbtheorie.
  • Verwendung von 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 Barrierefreiheit — berücksichtigen Sie die Zielgruppe und welche zusätzlichen Bedürfnisse sie möglicherweise haben. Entwerfen Sie von Anfang an dafür.
  • Verstehen, was Designmuster sind und welche gängigen Muster im Web verwendet werden, zum Beispiel:
    • Dunkelmodus.
    • Breadcrumbs.
    • Karten.
    • Verzögerte Registrierung.
    • Unendliches Scrollen.
    • Modale Dialoge.
    • Progressive Offenlegung.
    • Fortschrittsanzeige bei Formularen/Registrierung/Einrichtung.
    • Einkaufswagen.

Ressourcen:

Designvorgaben

Lernziele:

  • Die Designsprache sprechen, um mit Designern zu kommunizieren.
  • Die Anforderungen eines Designbriefs interpretieren, um eine Implementierung zu produzieren.
  • Typische Werkzeuge, die Designer verwenden, um ihre Botschaft an Entwickler zu übermitteln (z.B. Figma).

Siehe auch