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.

Topics:

World Wide Web

Graphic User Interfaces

Micro Interactions

Technology

p5.js / Javascript

HTML & CSS

Hosting, FTP 

Software:

• Web Storm

Deliverables/Exercises

1. Attendance during lessons

2. Individual Exercises

3. 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 in P5js. 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?

Knowledge Base

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

Schedule