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:

• Problem: What problem does the pattern attempt to solve? (for example, uploading a particular file)

• Context: What are the situations where the problem arises? (for example, on a desktop browser for a particular web service)

• Principle: How does the pattern work. What actions does the user have to make?

• Examples: A link or screenshot to the pattern in use

• Implementation: How can the pattern be implemented? Is it a standard HTML input? Are their libraries or tools available to include it in a website?

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:

• Sonia, Mai, Baran

• Gian, Ramona, Alessia

• Aathmigan, Celina, Daniela

• David, Nemo, Alec

• Kilian, Kimon, Andreas, Nicola

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.

• First design the layout & style

• Use HTML5 & CSS3

• Use Github / git to develop your application and host the actual webpage

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

• Go through the Tutorial for a WebSocket during the session I, enabling both examples (chat and whiteboard from socket.io) running from a server hosted on your computers locally

• Write down in few words an idea , what can a WebSocket be useful for or where is this technology likely implemented?

• Go through the Tutorial for writing the GPS Tracker using socket.io and the tutorial as a guide: https://www.youtube.com/watch?v=Wf1siAZAMtw&t=733s

• Write down in few words a concept or a reflection that you take with you after the inputs from the last session about Net-Art