Since the project objective was to make a protest website, the first that came to my mind was to create a striking design that would be in line with the emotions that come when people think about social justice.

This initial thought carried my design throughout its development stages, and helped form the final site design.

Since I wanted the site to evict a certain feeling amongst my users, I wanted to utilize color theory to give the site a certain atmosphere.

Red, which is the color that is commonly associated with fire, warmth and passion was the color that I thought would accomplish this task. Although red is a striking color on its own, I wanted to highlight it even further by making black the background color for the site, so that the red would really stand out.

I wanted to create branding that would pair well with the color scheme of the site. In order to do this I thought of symbols that are common when it comes to social change and the raised fist immediately jumped out. So I created a couple iterations of the fist and showed it to my team, and then I integrated the final SVGs into the wireframe.

To stay in line with the bold theming of the site, I wanted to use a font that complemented the emotion I was trying to evoke, so I used a bold sans serif font, so that the site would be clean, and the message would get across.

Serif fonts are often used in a more playful/artsy way, and while that’s certainly a way I could’ve designed the site, I wanted the font to give off a commanding or serious tone, so I decided to opt out of using a serif font.

To make the site more personable, as I didn’t want the site to be too serious, I wanted to contrast the bold colors and font with assets that people could relate to. So to do this, I used open source illustrations of people, and tried to make the people in the illustrations as diverse as possible so that everyone using the site would feel represented.

In addition to the 2D elements that I pulled from copyright free sources, I also designed original assets for the page. These assets were made with a glassmorphic style as the inspiration. The reason for this is because glassmorphism has become really popular as of recent.

Since I do web development, and I was working very closely with the dev team, I thought about what it would take to implement my design through code while I was creating them.

The dev team used React.js for the frontend, so I thought about how my site would translate into components.

Since I was working with a team, I was not the only person in control of the design of the website. I was constantly taking input from my team, as well as my friends who I asked to interact with the mockups in order to collect some user feedback. From this feedback, I decided to make an alternate theme for the site, that was softer in a sense. I used less harsh color, opting for a grey and more inviting, orangish color. I also made another version of the logo that was more bubbly that featured a megaphone.