Bits & Atoms II 2020

Overview

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 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

HTML & CSS

CMS (GRAV?)

Hosting, FTP 

Topics:

World Wide Web

Graphic User Interfaces

Micro Interactions

Deliverables/Exercises

1. Individual Exercises A & B

2. 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://threesixtyreality.co.uk/interaction-design-patterns-library/

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: The Website

Developing a website using HTML, CSS, Javascript and CMS

Contemporary examples:

https://www.washingtonpost.com/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?

Old Material (from Jonas) (some good reference slides here) 

https://github.com/Jones-S/web-dev-zhdk-2019

• Download Slides 2019-04-12

• Download Slides 2019-05-03

• Download Slides 2019-05-07

• Download Slides 2019-05-16

• Download Slides 2019-05-23

Knowledge Base

• Overview: http://wiki.iad.zhdk.ch/CP

Schedule