Info & Interaction Design:
Visual Demos

Mick McQuaid

11/16/22

Week THIRTEEN

Demoing Static Visual Design

Robert Johnson Page

This is a two part exercise.

Create a style sheet
Use the style sheet to create an actual webpage about the song “Hellhound on my Trail” by Robert Johnson

Style sheet

The style sheet can be a png, a pdf, or a jpg file containing the following elements.

A color palette with about four or five colors
A type guide, with at least two typefaces in several sizes
A layout guide, such as a grid

Using the style sheet

Create an actual webpage, not a Figjam
Display the following information
1. A picture of your choice
2. The lyrics to “Hellhound on my Trail” (recorded 1937)
3. Some biographical information about Robert Johnson (1911–1938)

Turning it in

In the Robert Johnson Page assignment box, provide the stylesheet and a link to the webpage. If you don’t have a place to host the webpage, put all the assets (the html file, a css file, and the picture file) in the assignment box so that they display there.

Demoing dynamic visual design

Design a microinteraction

What are microinteractions?

Definition from NNgroup: Microinteractions are trigger-feedback pairs in which (1) the trigger can be a user action or an alteration in the system’s state; (2) the feedback is a narrowly targeted response to the trigger and is communicated through small, highly contextual (usually visual) changes in the user interface.

Microinteraction flow

Some are, some aren’t

Digital element	Is it a microinteraction?
Scrollbar	Yes: User triggered; visual feedback to user changing location within a page
Digital alarm	Yes: System triggered; auditory (and visual) feedback to time condition being met
Button	It depends: If there is no feedback when a user clicks the button, there is no microinteraction
Pull-to-refresh animation	Yes: User triggered; visual feedback to a user action
GIFs	No: Not triggered by the system or a user
Video player	No: It’s a feature, not a microinteraction; volume control would be a microinteraction