Interaction Design WikiBits & Atoms II

Exercises

Exercise A: An unconventional UI design pattern.

Credit: BMJ (more examples here)

Increasingly UI design is settling on well-established design patterns and conventions. Such patterns are reusable solutions to commonly occurring problems, and they are often considered best practice for a given problem. While many of these patterns are based on creative and well-tested solutions, by relying on these norms we miss out on the unknown potential of unconventional User Interfaces. In this exercise, each student will investigate an existing pattern, and come up with a provocative alternative in a functional prototype.

Part I

Investigate an existing design pattern: Collect at least one image of implementation of this pattern and write a short description:

Resources:

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 II

Brainstorm and prototype an alternative design pattern in P5js. Record your results as a GIF.

Tools: P5.js: Use the template files and look at this “Alternative Design Pattern” example and source code for inspiration

Groups:

Presentation

Students will present their results on 22.04.2020 during Bits and Atoms

Exercise B: An online portfolio website.

Exercise B is all about your own project. Think about what kind of product, team or work you would like to show and how it could be implemented as a website. The website should be created straight from HTML & CSS without using any frameworks to learn the very basics of web-design.

Update: Your task is to start this project, not to have a feature complete and polished website. Document your progress, your tryouts and explain very briefly what the website is intended for.

Part III