Page Comparison

...

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

User Interfaces Micro Interactions

Technology

p5.js / Javascript

...

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

...

1. Documentation in the standard template

Course Resources:

• Knowledge base

• Exercises

Schedule

...