...
This seminar series covers history, theory and skills relating to technology and its relevance for design practice in contemporary and future contexts. The semester II Bits and Atoms module focuses on coding and web technology, providing an important preparation for the Basic GUI Module.
Grading
The grades will be based on an individual exercises and will account for 25% of the overall Basic GUI grade.
80% attendance is mandatory. Missing more than 20% of the lectures will result in a failing grade.
Technology
p5.js / Javascript Javascript
HTML & CSS
CMS (GRAV?)
Hosting, FTP
Topics:
World Wide Web
Graphic User Interfaces
Micro Interactions
Deliverables/Exercises
Individual Exercises
1 & 2 A & B
Documentation
Exercise A:
...
Develop an unconventional approach to a classic UI design pattern.
Increasingly UI design is settling on well-established design patterns and conventions. While many of these patterns are based on creative and well-tested solutions, by relying on norms we reduce the potential for creative and better UIs.
Part A: Investigate a design pattern, collect a number of images of implementation of these patterns and write a short description.
http://www.welie.com/patterns/
...
https://www.smashingmagazine.com/2009/06/40-helpful-resources-on-user-interface-design-patterns/
Part B: Brainstorm and prototype an alternative design pattern. Record your results as a GIF.
Tools: P5.js
Exercise B:
...
Basic Web Technology.
...
The Website
Developing a website using HTML, CSS, Javascript and CMS
Contemporary examples:
https://www.weliewashingtonpost.com/patterns/graphics/2020/world/corona-simulator/?fbclid=IwAR1WBxrEnSHy7nh1IqhSz82lVVlRzC-enzHkQhqMdkBxddN1HPwm0t1EwoE&utm_campaign=wp_main&utm_medium=social&utm_source=facebook
Features
UI
Images
Lists
Headings, Text
Responsive?
...
Collaboration with ZHAW Physiotherapy
Old Material (from Jonas) (some good reference slides here)
https://github.com/Jones-S/web-dev-zhdk-2019
Knowledge Base
Overview: http://wiki.iad.zhdk.ch/CP
Schedule
Date (Room) | Time | Topic | Lecturer | During which course: |
|---|---|---|---|---|
25.03. |
2020 (T 6.F01) | 15:00 – 17:00 |
|---|
Introduction Context: History GUI, The Web
(Research for Exercise A)
CANCELED | Interaction Design Process | |
01.04.2020 (5.D02) | 15:00 – 17:00 |
|---|
Javascript
Introduction: History Internet and the WWW to the modern web. P5.js (Research for Exercise A) | Luke | Interaction Design Process |
08.04.2020 (T 6.F01) | 15:00 – 17:00 |
|---|
P5.js (Exercise A Continued ) | Luke | Interaction Design Process | |
15.04.2020 (5.D02) | 15:00 – 17:00 |
(Exercise A Continued ) | Luke | Interaction Design Process |
22.04.2020 (4.K15) | 15:00 – 17:00 | ( |
|---|
Exercise A Presentation ) | Luke | Interaction Design Process |
29.04. |
|---|
2020 (4.K16) | 15:00 – 17:00 |
|---|
Introduction Web Technology: Page structure, HTML/CSS | Florian? | Interaction Design Process |
06.05. |
|---|
2020 (4.K16) | 15:00 – 17:00 | Web Technology |
| Basic GUI |
|---|---|---|---|---|
13.05. |
2020 (4.K16) | 15:00 – 17:00 |
|---|
Web Technology |
| Basic GUI |
20.05. |
|---|
2020 (6.F01) | 15:00 – 17:00 |
|---|
Web Technology | Andreas? | Basic GUI |
27.05. |
|---|
2020 (7.D04) | 15:00 – 17:00 | Web Technology | Andreas? | Basic GUI |
|---|---|---|---|---|
03.06. |
2020 (7.D04) | 15:00 – 17:00 | Guest Lecture? | Andreas? | Basic GUI |
|---|