A Type of Mosaic

Micro-Interaction Design

Exploration of scrolling in which letterforms pass through neighboring cropped windows, and combine to create abstract forms.

Designed and developed from scratch, using HTML, CSS, and Javascript. Finished October 2018.

Published Site

The Task

Create a microsite based on the interaction of scrolling, using skrollr.

View Process

The Process

I'd never even heard of skrollr before this project. This project was a learning experience up front, and once I was comfortable manipulating the code, I allowed the project to get more conceptually complex.

This was my experience working with skrollr, simply making objects do things when the user scrolls. I include this to show that this project developed from the VERY basics.

I had the idea to make things scroll into different windows.

In these iterations the user can work toward making something of their own.

I decided the use of text was a good balance of abstractness and familiarity of the shapes. I thought having the windows right up against one another made the image more cohesive.

The Solution

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.