DRAWERS:

01 visual directions

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

Inspiration

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.

Tools

Hand sketch
figma
wireframe

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.

WIREFRAME

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.

RESPONSIVE DESIGN

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