Entwurf für Entwickler

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

Die Idee dieses Moduls ist es, Entwicklern das Design-Denken (wieder) näherzubringen. Sie möchten vielleicht nicht als Designer arbeiten, aber es ist von Vorteil, ein grundlegendes Verständnis für Benutzererfahrung und Designtheorie zu haben, unabhängig von der eigenen Rolle beim Erstellen von Websites. Zumindest sollten selbst die technischsten "Nicht-Designer"-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 hilft ihnen, ihre Portfolios besser aussehen zu lassen.

Darüber hinaus werden Front-End-Entwickler oft damit beauftragt, verschiedene Designarbeiten in Projekten zu erledigen. Kunden und Arbeitgeber gehen oft davon aus, dass sie es können, weil sie an den visuellen Elementen der Website beteiligt sind. Historisch gesehen war die Rolle des "Webentwicklers" eher eine hybride Designer-/Entwickler-Rolle als heute.

Voraussetzungen

Bevor Sie dieses Modul beginnen, sollten Sie mit HTML und CSS vertraut sein.

Hinweis: Falls Sie an einem Computer/Tablet/anderen Gerät arbeiten, bei dem Sie nicht die Möglichkeit haben, eigene Dateien zu erstellen, können Sie (die meisten) Codebeispiele in einem Online-Coding-Programm wie JSBin oder Glitch ausprobieren.

Lektionen

Grundlegende Designtheorie

Lernziele:

  • Grundlagen des UI-Designs:
    • Kontrast.
    • Typografie.
    • Visuelle Hierarchie.
    • Skalierung.
    • Ausrichtung.
    • Nutzung 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/-tests und Benutzeranforderungen.
  • Design für Barrierefreiheit — Berücksichtigung der Zielgruppe und ihre zusätzlichen Bedürfnisse von Anfang an.
  • Verstehen, was Designmuster sind, und die gängigen Muster, die im Web verwendet werden, beispielsweise:
    • Dunkelmodus.
    • Breadcrumbs.
    • Karten.
    • Verzögerte/Träge Registrierung.
    • Unendliches Scrollen.
    • Modale Dialoge.
    • Progressive Offenlegung.
    • Fortschrittsanzeige bei Formularen/Registrierung/Einrichtung.
    • Einkaufswagen.

Ressourcen:

Design-Briefs

Lernziele:

  • Die Designsprache sprechen, um mit Designern zu kommunizieren.
  • Anforderungen für 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