top of page

Reflect

Project Overview

Application & Installation Experience

With this digital mood journal application, a user would ideally be able to record their daily moods. Following that, users could track and evaluate their mood on a weekly basis while also getting advice on how to deal with a bad mood or maintain a good one. Users will have access to daily, weekly, and monthly averages as a result of the data gathered over time. Users can assess tendencies they want to modify with the use of the suggested guides in order to establish healthy goals and uphold a positive outlook each day.

Role

Branding Identity

Experience Designer

Primary and Secondary Research

Influential Ideation 

​

Applications

P5.js

Arduino

Adobe XD

Photoshop

Premiere

Step 1: Ideate

 

Initial Concepts:

  • Digital Journaling Application

  • Mood Instillation

 

Notes:

  • How to make an Interactive Digital Journal

  • Should I represent mood or combat specified moods?

  • Model emotion based on keywords assigned

 

Ideas:

  • Use gradients as base a for a screen

​

Why this idea?

A visual representation of your mood can benefit you in several ways:

  • Self-awareness: Creating a visual representation of your mood allows you to become more self-aware. It helps you recognize and acknowledge your emotions, which is the first step towards managing them effectively.

  • Clarity: By representing your mood visually, you can gain clarity and insight into your emotional state.

  • Communication: A visual representation of your mood can also be helpful when communicating with others. Sometimes, it can be difficult to put our emotions into words, but a visual representation can make it easier for others to understand how we're feeling.

  • Monitoring progress: A visual representation of your mood over time can help you track your progress in managing your emotions. It can show you how your mood has changed over time and help you identify patterns in your emotional state.

Step 2: User Experience Flow

m.PNG

Step 3: Research

 

Questions:

  • What can shapes mean in accordance with mood?

  • What can a screen depict?

  • What do certain colors represent?

  • How does the shape influence a mood?

 

Color Therapy:

Colors have mental and emotional effects on sighted people.

 

Sources:

Step 4: Case Study

​

"Gradients in motion design help capture our current emotional spectrum"

-Danyelle C Overbo

​

While reading this article, I stumbled upon a great example of what a mood screen can depict. This Adobe article discusses how gradients in motion design can evoke different emotions and create visual interest. The use of gradients can create depth, texture, and highlight movement in design. The article provides examples of how gradients can be used in motion design to create specific moods or feelings, such as calmness or excitement.

​

https://blog.adobe.com/en/publish/2021/08/17/gradients-in-motion-design-offer-range-of-possibilities-match-our-current-emotional-spectrum

b.PNG

Step 5: Mood Board

Representing different moods using color and shape in motion can be a creative and effective way to convey emotions visually.

n.PNG

Installation Visual Key

​

The background color (black/white) heightens each sense of emotion!

Negative

​

Sad:

  • The color blue can be associated with feelings of sadness or melancholy.

  • The lines move in a circular pattern around the origin, which could represent the feeling of being stuck in a cycle of negative emotions. 

Disconnected:

  • Each point starts evenly on the canvas. Then light lines move in random directions never connecting with one another.

Fear:

  • This is an abstract representation of chaos and unpredictability. Created is a sense of unease through unsettling lines. Each line forms a circle which moves in  random motions. 

  • This randomness creates a sense of chaos, with the circles moving in unpredictable directions and at varying speeds. 

Isolated:

  • Dull gray background

  • This is visually interpreted as a metaphor for feeling trapped or confined. Circular forms are enclosed around each other with thick strokes of line.  

  • The lack of colors and the use of a white stroke on a black background gives a sense of detachment and emptiness

Angry:

  • The bold and sharp lines give a sense of intensity and aggression. 

  • The rotation of the shapes in a sporadic and fast-paced manner conveys a feeling of restlessness.

  • The choice of colors, red and orange, add to the overall sense of anger, with red often being associated with strong emotions such as anger and passion. 

  • The jagged and uneven shapes that appear to be constantly shifting and changing, much like the emotions associated with anger.

Confused:

  • The shape is composed of many smaller shapes, with each shape rotating and moving at different speeds and directions, creating a sense of chaos and confusion. 

  • The combination of the constantly changing colors, the chaotic movement of the individual shapes, and the unpredictable rotation of the entire shape creates a sense of confusion and disorientation

Positive

​

Peace:

  • Extremely fine multi colored lines

  • slowly moving and changing colors

  • Movements are organic movements creating a soothing, harmonious effect

Excited:

  • Continuous spiral with dynamic movement and changing colors

Calm:

  • The movement of the circular grid structure is smooth and slow

  • The black background adds to the sense of emptiness and calmness.

  • Visual effect is soothing and hypnotic, suggesting a feeling of tranquility and serenity

Energetic:

  • The use of rotating shapes that change in size and position creates a sense of motion and activity that could be seen as reflective of a high-energy state. The fact that the shapes are constantly in motion and changing shape creates a sense of dynamism that is evocative of a state of excitement and enthusiasm.

Happy:

  • The use of bright, colorful strokes that gradually change over time creates a lively and cheerful atmosphere that could be associated with happiness. 

  • The color values for the strokes create a continuous, flowing pattern that is pleasing to the eye.

  • The rotating rectangles could be interpreted as representing a sense of playfulness and joy. 

Step 6: Code Conceptualization

The main moods intended for depiction are six basic emotions Happy, Fear, Sad, Calm, Anger, Excited

Moods currently in the works Isolation, Centered, Excited, Calm, Confused, Happy, Energetic, Fear, Disconnected, Grounded, Peace

​

Helpful Tools:

https://p5js.org/reference/

​

Step 7: Code Text Box

Users will input one word describing how they feel into a text box.

​

g.PNG

Step 8: Altering Text Box Function

Text box function has been altered and tested with the word "happy" and an input.

The biggest challenge will be altering the mechanism to change after imputed mood to fit a custom screen.

​

Helpful Tools

https://www.yourowncodes.com/html-css-user-defined-background-gradient-color-text-list-box/

 

Step 9: Code Testing, Motion Inputs

Apply research and color theory to align with code and edit code aspects like shape to align with specified moods.

​

Credited Code Sources

q.PNG

Demo Installated Experience

“Mood in Motion”

 

More project details below:

Materials

Materials Room Space Laptop Projector Test Subject Mood Cards.png

Mood Cards

Mood Screens

I decided that my visual focus for each mood would be “Line.” Initially, my concept consisted of different flows, patterns and shapes but to make it more cohesive I decided to focus on lines in effect with different shapes as a cohesive unit. I also narrowed down my mood categories for the installation.

Reflect Application

Application Outcomes

View More Projects

Student Project

Student Project

Student Project

Student Project

bottom of page