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 vollwertigen Kurs umzuwandeln, sobald die Zeit es erlaubt.
Die Idee dieses Moduls ist es, Entwicklern das Design-Denken (wieder) näherzubringen. Sie möchten vielleicht nicht als Designer arbeiten, aber ein grundlegendes Verständnis für Benutzererfahrung und Designtheorie ist für jeden, der an Websites mitarbeitet, von Vorteil, unabhängig von seiner Rolle. Zumindest sollten selbst die technischsten "Nicht-Designer"-Entwickler Design-Briefs verstehen, wissen, warum Dinge gestaltet sind, wie sie sind, und sich in die Denkweise der Benutzer versetzen können. Außerdem wird es ihnen helfen, ihre Portfolios besser aussehen zu lassen.
Darüber hinaus werden Front-End-Entwickler oft gebeten, verschiedene Designaufgaben 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 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.
Lektionen
Grundlegende Designtheorie
Lernziele:
- Grundlagen des UI-Designs:
- Kontrast.
- Typografie.
- Visuelle Hierarchie.
- Maßstab.
- Ausrichtung.
- Verwendung von Leerraum.
- 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 — die Zielgruppe bedenken und welche zusätzlichen Bedürfnisse sie haben könnten. Designen Sie von Anfang an dafür.
- Verstehen, was Designmuster sind, und die gängigen Muster, die im Web verwendet werden, zum Beispiel:
- Dunkelmodus.
- Breadcrumbs.
- Karten.
- Verschobene/Verzögerte Registrierung.
- Unendliches Scrollen.
- Modale Dialoge.
- Progressive Offenlegung.
- Fortschrittsanzeige bei Formularen/Registrierung/Setup.
- Einkaufswagen.
Ressourcen:
Design-Briefs
Lernziele:
- Die Designsprache sprechen, um mit Designern zu kommunizieren.
- Anforderungen von Design-Briefs interpretieren, um eine Implementierung zu erstellen.
- Typische Werkzeuge, die Designer verwenden, um ihre Botschaft an Entwickler zu übermitteln (z.B. Figma).
Siehe auch
- Learn UI Design Fundamentals, Scrimba Kurs-Partner
- The Shape of Design, Frank Chimero
- Designing for the Web, Mark Boulton
- Design for web, Prisca Schmarsow + weitere Mitwirkende
- Practical Typography, Matthew Butterick
- Web Style Guide, Patrick J. Lynch und Sarah Horton
- Visuelle Designregeln, die Sie jedes Mal sicher befolgen können, Anthony Hobday
- 16 kleine UI-Designregeln, die einen großen Einfluss haben, Adham Dannaway