Micro-Interaction Design

A Type of Mosaic

a type of mosaic project cover

Overview

Project Purpose

Experimental Interaction Design

Tools

HTML, CSS, Javascript

Project Timeline

1 months, 2018

Published Site

The Challenge

This project required me to create a microsite based on the interaction of scrolling, using skrollr. I had to determine how to make this single action engaging enough for the user to continue to interact with the site after seeing its function once.

The Product

I developed an exploration of scrolling in which letterforms pass through neighboring cropped windows, and combine to create abstract forms.

Screen capture of final project (1)
Screen capture of final project (2)
Screen capture of final project (3)
Screen capture of final project (4)
Screen capture of final project (5)
Screen capture of final project (6)
Screen capture of final project (7)
Screen capture of final project (8)
Screen capture of final project (9)
Screen capture of final project (10)

Outcome

I carefully curated the scrolling pattern of each individual window, so that the user doesn't have an overwhelming amount of control, but they can still manipulate the image on the screen by stopping at different points in the scroll.

I love the fact that variability makes the user's experience new each time. I added variability of window order, font size, font family, and shade of gray, which changes on each reload so it's never the same, even though the operation of the site is very simple. The site reloads when the user hits the bottom of the page, seamlessly refreshing the experience without an additional action.