Parsons School of Design

Communication Design BFA

2019 Spring, Sophomore Year

Core Interaction Studio: Maxim Project

Designed by Maddie Hyunseung Lee

Programs & Skill sets used: Sketch, HTML, CSS, jQuery

Responsive design: Available on Phone, Tablet, Desktop -- Chrome, Safari.

This projects is called Maxim. It is to choose at least 15 different maxims and create a website using only texts. Inspired by Lady Macbeth's sleepwalking scene, I visualized her fragile and guilty emotion about herself said to her husband to kill Duncan. At first, she seemed she doesn't feel any guilty emotion about it but she can't get out of herself being overwhelmed as time goes by. Her emotional status is visually-dramatized in the black background with chaotic animations with the use of jQuery animation effects. 

Font: Poynter-Oldstyle-Display (Adobe Typekit)

Background color: #ff0000, #3f0909, #281919, #740000

Font color: Black and white, #ff0000, #730000

[Scene #1: Linear] It only goes forward in red gradient background, which is the scene before sleepwalking. At this moment, she never showed guilty about herself and even felt confident about murdering. She condemned her husband who already felt so much guilty and overwhelmed. The quote "What is done is done." shifts to "What is done cannot be undone." and the background twists to black, to give users a sense of being alone in the room.

[Scene #2: Random] Text animation is set in random to present Lady Macbeth's overwhelmed emotion. In sleepwalking scene, Lady Macbeth started to see blood in her hands which actually doesn't exist. By experiencing randomized animation, the users see the lines back-and-forth similar to her chaotic emotion. 

[Scene #3: Back to Linear] Random animations become subtle down with one click on the quote "Out, Damned spot!" and the last quote slowly fades in line by line.

You can see this whole project with the link below.

Process​​​​​​​

1. Visual Presentation and Confirming the Concept

Before executing the website, I came up with 3 different versions of visual presentation -- 1: Lady Macbeth's room, 2: Pale color, 3: Mirror surfaces -- and discuss them in the class to set the visual concept. Each concept is presented with a brief description, mood board, and preview of the website using Sketch. 

Professor Nika pointed out the first and second version is more focusing on colors, whereas the third version is showing visually-interesting forms. She suggested me to make it more stronger by upgrading the navigation and layouts in the first version(the quotes below the circle looked less strong) and combine colors and layouts in the third version together. Also to place only texts that are kind of similar to mirror shapes, but not literally showing the shapes like shown in the third presentation.

2. Prototyping with Sketch

Based on critiques from classmates in the class, I set the first concept 'Lady Macbeth's Room' to maximize creepy and scary atmosphere of the scene. The fourth image above shows the final prototyping of the website.

In the final prototyping, the scenes are classified in 3 phases. The first scene showing confidence of Lady Macbeth, the second scene showing her fragility and guilty, and lastly the third scene showing her regret.

3. Execution with HTML, CSS, jQuery

In the first draft, the text animation was all linear. Professor Nika suggested me to change the navigation in Black background, which makes more sense to visualize Lady Macbeth's chaotic emotional status. 

In the final, I randomly set animation in Scene #2 by using jQuery.