Design für Entwickler

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

Die Idee dieses Moduls ist es, Entwickler (wieder) in das Design Thinking einzuführen. Sie möchten möglicherweise nicht als Designer arbeiten, aber einige grundlegende Kenntnisse über Benutzererfahrung und Design-Theorie sind für alle, die Webseiten erstellen, unabhängig von ihrer Rolle, von Vorteil. Zumindest sollte selbst der technisch versierteste, "nicht-designerische" Entwickler Design-Briefs verstehen, wissen, warum Dinge so gestaltet sind, wie sie sind, und in der Lage sein, sich in die Denkweise des Benutzers hineinzuversetzen. Und es wird ihnen helfen, ihre Portfolios ansprechender zu gestalten.

Außerdem werden Front-End-Entwickler oft damit beauftragt, verschiedene Designarbeiten in Projekten zu übernehmen. Kunden und Arbeitgeber gehen oft davon aus, dass sie dies können, weil sie an den visuellen Elementen der Website beteiligt sind. Historisch gesehen war der "Webentwickler" 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, 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.
  • Nutzung von Bildern.

Ressourcen:

Benutzerzentriertes Design

Lernziele:

  • Verstehen, dass alles, was wir tun, für den Benutzer ist.
  • Einführung in Benutzerforschung/Testing und Benutzeranforderungen.
  • Design für Barrierefreiheit — Berücksichtigen Sie die Zielgruppe und welche zusätzlichen Bedürfnisse sie haben könnten. Entwerfen Sie für diese von Anfang an.
  • Verstehen, was Designmuster sind, und die auf dem Web allgemein verwendeten Muster, zum Beispiel:
    • Dunkler Modus.
    • Breadcrumbs.
    • Karten.
    • Verzögerte/verspätete Registrierung.
    • Unendliches Scrollen.
    • Modale Dialoge.
    • Progressive Offenlegung.
    • Fortschrittsanzeige auf Formularen/Registrierung/Setup.
    • Warenkorb.

Ressourcen:

Design-Briefs

Lernziele:

  • Die Sprache des Designs sprechen, um mit Designern zu kommunizieren.
  • Anforderungen eines Design-Briefs interpretieren, um eine Implementierung zu erstellen.
  • Typische Werkzeuge, die Designer verwenden, um ihre Botschaft an Entwickler zu vermitteln (z. B. Figma).

Siehe auch