The Dance

The Dance was my final project for my New Media Design Elements III class during my third year at RIT. It’s a layout prototype for a website dedicated to archiving information on the AIDS crisis of the 1980s, so it’s not a functional site as of yet. I am taking this project beyond the classroom and working on developing it further so that it can one day exist as its own site.

Planning and User Flow

The goal for this project was to focus on one flow plan for the website, rather than fully developing the entire site. I chose to hone in on a part of the home page that would take the viewer to a list of notable figures who lost their lives in the struggle against AIDS during the crisis.

I started by making a flow plan prototype to map out the content, interactions, and micro animations the user would encounter as they delved deeper into this part of The Dance.

Flowchart titled "Prototype Flow Plan V1" outlining steps from intro animation, home screen, victim profiles main, to single victim profile with descriptions of content and interactions at each stage, including navigation instructions.

I also put together a sitemap showing the most basic user flow, this time for the entire website rather than just one page of it. Even though the goal was only to prototype one potential user flow, I thought mapping out the whole site would be useful in case I decided to prototype, and eventually build, the entire site.

A flowchart diagram illustrating a website's user journey from the homepage to various sections such as death statistics, media response, ACT Up, NAMES Project, and victim profiles.

Wireframes

Once I had a good idea of the user flow, I started making lo-fi wireframes. These were my v1 wireframes showing the most rudimentary visual layout of the site, starting from the home page, then going to the list of notable victims of AIDS (displayed as photos that the user could click on), and ending with a photo and written biography of the user’s chosen profile.

A collage of various grey tones containing text about victim profiles, media coverage, and AIDS quilt projects, with some abstract shapes and titles like "ACT Up" and "NAMES Project/AIDS Quilt."
Two photo placeholders, one labeled 'text info on victim' and the other labeled 'photo of victim,' on a gray background.
A collection of several color photos depicting abstract shapes and colors, with some photos featuring a simple geometric figure.
A grayscale collage featuring various protest signs and buttons, including one that says 'Vote for REAGAN' and another that reads 'Doctor Lectures on AIDS Virus,' with a background menu showing links to 'ABOUT,' 'CREDITS,' and 'MORE.' Another sign references the NAMES Project, and a button for 'SILENCE = DEATH' is also visible.
A digital interface with gray background featuring two white rectangular cards. The left card contains placeholder text with the label 'Placeholder Name' and additional placeholder details. The top menu includes links labeled 'ABOUT,' 'CREDITS,' and 'MORE.'
Screenshot of a website about the NAMES Project, showing informational text about AIDS memorial quilts, with sections labeled 'ABOUT,' 'CREDITS,' and 'MORE,' and featuring several white and gray photo placeholders with icons indicating photos.

My v2 wireframes were much more detailed (and also the correct viewport size, unlike my v1 wireframes). I also started to include some of my text content in this version, though I still kept things simple overall.

Adding Content

A desk with a photo album, a booklet titled "Doctor Lectures on AIDS Virus," a large photo of Ronald Reagan with an American flag button, a small glass of water, a cup of coffee, and scattered photographs, some depicting young men.
A desk with photos of Ronald Reagan, flowers, a notebook with color swatches and paintbrushes, a cup of coffee, and a note about a lecture on AIDS Virus.

As the prototype started to come together, I got the idea to make the website mostly grayscale, with splashes of color here and there to give it a historic and solemn feel. But I ultimately decided it would be better in full color, as the grayscale version was less readable.

Final Compositions

A desk with a photo of a woman holding a trophy, a notebook titled "Victims Project" with a Polaroid picture, an open sketchbook with drawings, a tag reading "Juan's funeral 5:00 pm," a sticker that says "Silence = Death," a button labeled "Reagan," a book titled "Doctor lectures on AIDS" with an article, a purple booklet with the word "Names," a bowl with pink, purple, and blue colors, and a camera, a pair of glasses, and a note.
A digital illustration of a scrapbook page featuring a photograph of a man holding a trophy at a sports event, with a background of a crowd. The page is titled "The Dance" and includes a profile of Keith Haring, an artist, with a photo of him in front of a black and white patterned background, wearing a red shirt and glasses.
A digital illustration featuring a photo of a young man holding a trophy, surrounded by vintage photos of people, with a section of text discussing HIV/AIDS statistics between 1981 and 1990.

I adjusted the colors and perspective for the final prototype. The Dance came out with a solemn, and strangely nostalgic DIY vibe through its mix of hand drawn, artistic assets and photographs.

The Dance was one of my favorite projects I completed during my third year at RIT. While it still has a ways to go before I’m ready to publish it. I learned a lot about web design and UIUX design, as well as how to integrate my personal art style with an accessible and readable design.