Visual Culture
Educational Website
June 2021
The Project
My collaborators and I set out to create an informational platform where teens and young adults could learn about visual culture and the ethics and methods behind image manipulation. I led the design and creation of a prototype using Figma.
The project was designed to help address the following:
What is visual culture and why is it important now?
What is image manipulation? What tools and platforms are being used, and who is using them?
What are the effects of image manipulation on mental health, including body image and self-esteem? Are there positive effects?
How can our society implement ethics and standards into image manipulation practices?
The project goals:
Inform, educate, and empower high school students to use critical thinking about images
Choose a medium that is easily accessible and simply to use for our target audience
Provide resources and content to continue engagement in this topic
Our Medium: An Informational Web App
We chose to use a web app (mobile-responsive website) as our medium of communication because it is easily accessible by the target audience of high school students in Toronto.
Statistics Canada reports that 97.9% of people aged 15-25 in Canada have a smartphone, and teenagers in Toronto are likely to have wi-fi access through schools and our many libraries even if they do not have access to it at home or do not have a data plan on their phone.
Using a web app that does not require users to download a native app makes it more accessible to teens who may not control downloads on their phone, as downloads may necessitate use of a credit card associated with their account.
Our Audience
With a young audience who may be (relatively) new to the challenges of social media, we felt that it was crucial to inform them about what they might encounter online, like heavily edited images that blur the lines between reality and illusion.
We believed our target audience of high school students would benefit from an informational web app that helps them understand and recognize when image manipulation tools - like Photoshop - are used and shared online, to help them develop judgement of what is real vs what is manipulated or fake.
Why is this topic important?
Mental Health
According to Polygeia, 9 out of 10 teenage girls experience psychological distress around body image, and claim that “image manipulation contributes towards body dissatisfaction among young people, by normalizing unrealistic body ideals.”
As we live in a visual culture that has popularized (and somewhat normalized) selfies, filters and image manipulation apps like FaceTune, it’s essential for our target audience to understand the implications of using image manipulation tools, and how to discern between fact and fiction to reduce negative impacts on one’s mental health.
Planning The Prototype
The first step to planning the prototype for our web app, once we had refined our written and visual content, was to plan the user flow for the website. With five main pages of content, I used a homepage as a landing point for visitors to discover brief introductions to the sub-topics, and a sticky menu at the bottom so navigating to other pages would remain accessible. Pretty simple, but worth visualizing to make sure the prototype runs smoothly.
Design Process & Style Guide
Once my collaborators and I had settled on our content, I began to determine our colour palette and overall design, iterating until I found what worked best. Our product needed to be visually interesting, while still being easy for users to read and skim to find and dive deeper into topics.
For the colour palette, I settled on using a dark navy blue background, with a bright, contrasting coral orange, and analogous gold/yellow colours, along with one bright blue for occasional highlights.
To keep the body, titles, and other text easy to read and cohesive, I used the sans serif Google font Roboto for body text, and Roboto Slab for titles and some subtitles, with Roboto in uppercase for navigation labels, including button text.
Prototype & Next Steps
Lastly, I created a high fidelity prototype in Figma, which you can view here.
While I was happy with the prototype, there are some further changes I would make to improve the final product, including:
Adjusting the sizing of some images and borders
Simplifying the visual design of the menu
Making better use of the updated Components features now available in Figma to improve UI transitions in the menu
Exploring new topics relating AI image generation
