Creative Coding
Visual Design

Is This Consent?

My Role

Visual Designer,
Developer

Team Members

Solo Project

Tools Used

Photoshop, Adobe XD, HTML, JS

Duration

5 weeks

Design Challenge

"Create and manipulate images as pieces of digital art to represent a social issue. This image must respond to user input and the user interaction will happen either through a keyboard or mouse."

Context

April is Sexual Assault Awareness Month, focusing on raising awareness and educating people about consent.

My intention was to mimic peoples’ experiences by putting responses on the screen for users to test whether they know if a particular response is an indication of a yes or no.

This prompts them to think more carefully about consent and realize how important it is. Many of the responses are ambiguous which makes users doubt if it is actually consent or not.

Brainstorming (Sketches)

Iteration of Layouts

I wanted to find a 3D hand image I could incorporate into the collage that was symbolic of this topic. I found an image of a hand with paint drips on it by Josh Caudwell and this helped bring my vision to life.

In Photoshop, I traced the hand in order to be able to play around with putting different letters behind the image. Below are some of my explorations of various layouts.

Final Layout

In order to give a sense of how victims feel, I wanted to emanate fear and loneliness in this design. I explored fonts that felt very robotic and made the image glitch when it is hovered over to portray that.

Building the Code

Final Result

Hover over the hand: glitch effect
Hover over a response: green (yes it is consent), red (no it is not consent)

Every time you refresh the page, the responses are randomized

Takeaways

Reflecting on the process

Creating an Impactful Collage

By experimenting with different layouts and continuously exploring how to improve the collage, I was able to make a bold statement with this piece. There should be a reason for every design decision that is made. This helped me figure out what I needed to add or remove from the composition to help enhance the message that is being portrayed.

Making Constraints

In order for the text colour to change to green or red when the user hovers over a response, I had to create constraints in the code. This means I had to input the start and end points of the x axis for the text. In easier terms, imagine there was a box around each response and whenever the user's mouse hovers over any area of that box, the text colour changes.

View More Projects

Education Explorer
Sheridan Accessible Learning
Great Barrier Reef