Glitchin' GIFs

Micro-Interaction Design

A colorful, rhythmic, mysterious display of GIFs that encourages the user to interact by resizing the window.

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

Published Site

The Task

Create a microsite based on the interaction of resizing the window.

View Process

The Process

I started with the idea of having a box that breaks up into smaller boxes as the window size changes.

I was trying to figure out what those boxes should do, other than just be present. Even though the main interaction of the project was resizing, it could be more dynamic with mouse events.

Once I added a gif as the background of the boxes, the project took a pivot. After exploring with how the gifs changed the visuals, I stumbled on the concept of the slivers of gifs that appear in the final version.

The Solution

At full size, the window contains 850 horizontal slivers of the same gif. The size and number of the slivers changes when the window is resized, creating different rhythms and patterns from the same gif.

My favorite part of this final work is that a new user can't immediately tell what's actually going on. I like that the user has to interact with it in order to understand it.