Homebase Archive

PROBLEM

Rose-tinted glasses is an idiom used to describe viewing a past or previous memory in a positive lens, while completely ignoring the heavy negatives.

Gen-Z and Millennials often idealize their childhood, comparing their past/childhood to the present. By doing this, it creates an misrepresented view of the past, dimming the state of the present.

SOLUTION

An interactive website that challenges users to "crack the lens" of nostalgia, revealing hidden, unvarnished truths about past memories.

ROUGH DRAFTS

The concept of a digital database acted as the main foundation for this project. The initial approach was to visually design a library of folders. By exploring those folders, users will find files to feel either nostalgic, traumatic, or overall uncomfortable to.

Other drafts show the visual layout of the project. The design was inteded to emulate the appearance of older computer UI and programs, including the design of older password systems, and applications.

By reinterpreting the concept of exploring files, I made the project into a point-and-click, where the user can explore a digital house filled with clickable memories.

ROUGH WAYFINDING DRAFT

The website taking the structure of a house was a strong idea. It was familiar enough for a user to explore and not get lost. I made the first layout to visualize the wayfinding for the house.

I also created a two-floor map system for users to locate where they are in the house.

VISUAL DESIGN

The visual approach was to capture the essence of the 2000's early-mid web UI. At this point, I was committed to creating an entirely new OS for the project, so the visual design needed to replicate that.

The typography in the project is a custom Tahoma type that has an added on rasterize effect to create the pixelated display. I gave the project the title "Homebase Archive" for users to understand that this is an archive of familar memories, or feel like "home".

The map system's design was inspired by standard floor plans.

FRONTEND DEVELOPMENT /
CODING

Built using Visual Studio Code and Github. Coding languages include: HTML for skeletal structure for the project, CSS for visuals, and JavaScript.

JavaScript was mainly used for functionality purposes, window tabs, draggable window headers, and fail safes in case the website ever gets stuck on a specific page.