An internet fan page about drawers.


3 weeks
Spring 2021
DSGN 634 course project



My Role

Individual project
content generator


Select a topic and create a fan page using HTML and CSS. All assets of the page must be new or manipulated. Embrace the spirit of the topic/object and establish clear information hierarchy.


DRAWERS: is a web fan page for people's drawers. It is an internet archive that allow people to look into others' lives without having to visit their homes.

Design Brief

One project in the course DSGN 634, Art of the Web was Fan Page. For this project, I needed to create a website that uses mixed media to honor an object or a person. The aesthetics of the page needed to embrace the spirit of the topic and have a contemporary design sensibility. The content of the site could be a mix of self-generated content or found content interpreted in a new way.

The project timeline included Spring Break which afforded me time to generate content for the page.

01 visual directions

When I explored different subjects I could make a fan page for, I thought about both visual and audio rich subjects and came up with two directions. These were preliminary explorations and my peers and professor were able to provide feedback. Even though I did not pursue either of these directions, I was able to draw elements from them.

Direction 1: Fermentation

I really like how one can observe bubbles being formed in fermented food and it’s a sign of life. The bubbling up movement is the key to this direction. Using close ups of fermented food project from Brad’s It’s Alive Show to fill the front page. Subsequent windows can be hover or new pages on click.

Direction 2: Brad Leone

The second direction came from YouTube personality and chef Brad Leone. I was inspired by language learning apps and brad's own specific ways of pronouncing English words. It'd be a visual and playful representation of the words. Hover animations would be used to "unlock" sounds and gifs.

02 Concept

After digging into the two visual directions, I decided to edit out the audio parts of my ideas and have the visuals speak for themselves.
This was when I landed up in the concept of Drawers.
Drawers are very ordinary pieces of furnitures in people’s homes. We use them to organize and store things. However, we tend to shove things into drawers and forget about them. The contents inside a person’s drawers can tell a lot of personal stories and lifestyles. I want to showcase drawers from different people as a way to lead viewers into their lives.

Key words: Eclectic, Personal, Flea Market X Museum, Informative, Warmth

Mood Board


You Can't Lay Down Your Memory Chest of Drawers - Tejo Remy

03 Lo-Fi prototype

I went through three stages of low fidelity prototypes before coding the website in HTML & CSS.


Hand sketch

HAND Sketch

I sketched out how I might want the drawer pictures to be presented on a page. This helped me solidify what elements were needed for the pages to be successful.


After sketching on paper, I moved onto figma to visualize the pages on screen. Using real pictures and words was helpful to make the pages feel real. I narrowed down to two directions and gathered feedback from my peers. After this, I continued prototyping in figma to reach a higher fidelity.

Figma Mock up with content

04 Final DESIGN

Over the spring break, I collected photos of drawers and their contents from my friends and family. I asked, "send me a picture of one drawer in your home and a picture of the content inside of it." As I compiled all the visual contents, I realized that the drawers were located in four general locations in homes and that informed me about how to stack the drawers on my index page.

Finished Website

Visit DRAWERS: to see the site in a new tab.


I designed the website to be responsive and suitable for many different screens using a grid design that optimizes for 4, 2 and 1 stack of drawers.

Hover Animations

Hover animations were used throughout the website for information hierarchy and clarity.
On the index page, hovering on each drawer's picture allows user to preview the drawer's name.
On sub pages, user can use the hover drop-down navigation to jump between drawers quickly.

Colors & Typography

Preivious Project
Levi's talk Show