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.
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?
Brainstorm and prototype an alternative design pattern in P5js. Record your results as a GIF.
Sonia, Mai, Baran
Gian, Ramona, Alessia
Aathmigan, Celina, Daniela
David, Nemo, Alec
Kilian, Kimon, Andreas, Nicola
Students will present their results on 22.04.2020 during Bits and Atoms
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.
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