Web User Interfaces - Kursübersicht

Aktualisiert: 12.05.2009

Konzepte, Methoden und technologischen Grundlagen der Webentwicklung. Vermittlung von Designprinzipien, Methoden und technologischen Grundlagen für die erfolgreiche Konzeption und Realisation webbasierter Anwendungen.

Modul- und Kursausschreibung ist auch im offiziellen ZHdK-Vorlesungsverzeichnis zu finden.

In einem parallel geführten Seminarblog werden die Prozessschritte festgehalten und später die resultierenden Interface-Konzepte präsentiert. Die vorliegende Seminarseite dient der Publikation von Hintergrundinformationen und nützlichen Verweisen für die konkrete Projektumsetzung.

13. Mai 09 – Entdecken & Lernen

Nach einer kurzen Einführung in den allgemeinen Themenbereich des Seminars (Webentwicklung, Design- und Entwicklungs-Prozesse, Informationsarchitektur) wird das konkrete Designprojekt vorgestellt. Anschliessend werden die Struktur und das Vorgehen der nächsten 10 Kurstage erläutert und die Zielsetzungen formuliert. Am Nachmittag legen wir gleich los: in einer kollaborativen Arbeitssession werden wir den Projektkontext kennenlernen, eine breitangelegte Recherche des Untersuchungsgebiet durchführen sowie spezifische Interessenfelder darin eruieren. Ziel des Tages ist das Schaffen eines allgemeinen Bewusstseins für die Designaufgabe, welches als Grundlage für das weitere Vorgehen im Designprozess dienen soll.

14. Mai 09 – Anforderungsanalyse & Roadmap

Der heutige Kurstag steht ganz im Zeichen der Durchführung einer ganzheitlichen Anforderungsanalyse. Wiederum im Plenum werden wir mittels verschiedener Methoden den Designraum ausloten, Bedürfnisse und Rollen zukünftiger Benutzer ausfindig machen und spezifische Nutzungsszenarien (Arbeitsabläufe, Prozesse, Muster) niederschreiben. Darauf folgend müssen die gemeinsam erarbeiteten Anforderungen entsprechend priorisiert und in einer realistischen Design-Roadmap festgehalten werden.

20. Mai 09 – Designkonzepte & Skizzen

Basierend auf dem in der ersten Kurswoche erarbeiteten Kontextwissen sowie den klar formulierten und strukturierten Anforderungen, widmen wir uns am dritten Seminartag der Entwicklung von Designkonzepten. Verschieden Methoden und Techniken unterstützen uns bei diesem Vorhaben und sollten zu einer grösseren Zahl unterschiedlicher Designideen führen. Diese Ideen müssen wiederum entsprechend fokussiert und verfeinert werden, bevor sie in entsprechende ‘Designeinheiten’ aufgedröselt werden können. Am Ende des Tage sollten eine handvoll wohlüberlegter Interfacekonzepte aufbereitet in Form von Moodboard, Skizzen und Wireframes vorliegen.

22. Mai 09 – Prototyping & Designvarianten

Ausgehend von den formulierten Desigkonzepten sollen erste Prototypen erstellt werden. Im Unterschied zum vorangegangenen Kurstag liegt der Fokus heute viel stärker auch auf dem Design von Interaktionen. Diese versuchen wir über entsprechende Prototyping-Methoden (Papierprototypen, Keynote-Prototoyping, Mockups) zu verfeinern und zu evaluieren, um uns diese Weise ganzheitlich und iterativ einem passenden Look & Feel anzunähern. Wir schreiben an diesem Tag keine einzige Zeile Code und werden trotzdem eine ziemlich genaue und fühlbare Vorstellung davon erhalten, welche Interfacekonzepte aus diesem Prozess resultieren werden.

27. Mai 09 – Fundament mit HTML/CSS Templates

Die folgenden drei Kurstage werden für die prototypische Umsetzung der Interfacekonzepte in HTML/CSS/JS genutzt. Papierprototypen, Wireframes und Illustrator/Photoshop-Vorlagen bilden dabei die Basis ein sauberes Markup-Gerüst mittels HTML zu entwickeln und durch CSS die Seitenelemente entsprechend zu positionieren und gestalten. Alle Kursteilnehmer entwickeln ein übergreifendes Seitenlayout, diverse Seitentypen und fokussieren auf ausgewählte Interface-Elemente.

28. Mai 09 – Interaktion durch PHP & jQuery

Ohne gleich in PHP und Javascript abzutauchen, versuchen wir dennoch einige Parts der Interfaceprototypen entsprechend interaktiv aufzubereiten. Hierzu greifen wir mehrheitlich auf vorgefertigte Module aus bekannten PHP und JS-Bibliotheken zurück. Wir wollen nicht das Rad neu erfinden, sondern gezielt wichtige Interaktionen prototypisch erfahrbar machen. Ziel ist insbesondere das Zusammenspiel der verschiedenen Sprachen der Webentwicklung kennenzulernen, um aufbauend darauf vertiefte Schritte in die eine oder andere Richtung vorzunehmen. Bei all diesen Tätigkeiten müssen wir uns aber immer wieder auf die eingangs festgelegte Entwicklungs-Roadmap zurück besinnen und uns nicht im Code uns seinen Tücken verlieren.

29. Mai 09 – Komposition & Balance

Der dritte intensive Programmiertag nutzen wir die begonnen Schnipsel zu einem ausgewogenen Ganzen zusammenzuführen. Dabei soll beachtet werden, dass die HTML/CSS/JS/PHP Vorlagen am Ende des Kurstages mehrheitlich abgeschlossen sein sollten. Dies wird einige (schmerzhafte) Kompromisse nach sich ziehen, es gilt jedoch immer das fertige Produkt (Interfacekonzepte, Arbeitsprototypen) im Auge zu behalten. Das Motto lautet demnach: Clever vorgehen und den Nutzen der Arbeitsschritte abwägen.

03. Juni 09 – Usability & Expert Reviews

Bereits in der Prototypingphase haben wir einige Tests durchgeführt. Heute wollen wir es noch genauer wissen: Wir werden die Arbeitsprototypen formativen Usability-Tests unterziehen und gezielt Expert Reviews durchführen. Die Erkenntnisse aus diesen Test sollen wenn möglich in die Verfeinerung der bestehenden Arbeitsprototypen einfliessen. Handelt es sich um substanzielle Korrekturen, können diese auch später in der Dokumentation/Präsentation ohne passende Lösungsvorschläge benannt und kommuniziert werden. Oft ist es auch nützlich in einem Interfacekonzept spezifische Problemfelder beschreiben zu können, welche weiteren detaillierteren Untersuchung bedürfen.

04. Juni 09 – Dokumentation & Kommunikation

Der gesamte Designprozess und die daraus resultierenden Konzepte und Prototypen müssen für die morgige Präsentation entsprechend aufbereitet werden. Dies soll einerseits über eine gut vorbereitete Präsentation des Interfacekonzeptes geschehen und andererseits auch in einem schriftlichen Dokument festgehalten werden. Hier kommt uns zu Gute, dass wir schon während des Prozesses entsprechende Designphasen und Entscheidungen festgehalten haben. Durch diesen reflexiven Prozess versuchen wir die Konzepte aus kritischer Distanz zu beurteilen und entsprechend wohlüberlegt die Ergebnisse zu präsentieren. Dieser letzte Schritt sollte als integraler Bestandteil des Designprozess betrachtet werden und mit entsprechender sorgfalt in Angriff genommen werden.

05. Juni 09 – Präsentation & Ausblick

Finalissima! Die Interfacekonzepte und Arbeitsprototypen werden dem ‘Kunden’ präsentiert und vorgeführt. Anschliessend werden die Dokumentation noch vervollständigt, der Projektblog upgedatet und das Seminar hoffentlich erfolgreich und zufrieden abgeschlossen.