GOAL
CHALLENGE
SOLUTION
Goal
A narrative-driven webpage experience that leads the viewer through the many perceptions of "Beauty."
Overview
TYPE
Website
Web Designer & Developer
ROLE
HTML, CSS, JS, After Effects, Blender
TOOLS
SKILLS
Front-End Development
GOAL
CHALLENGE
SOLUTION
Goal
A narrative-driven webpage experience that leads the viewer through the many perceptions of "Beauty."
Overview
TYPE
Website
Web Designer & Developer
ROLE
HTML, CSS, JS, After Effects, Blender
TOOLS
SKILLS
Front-End Development
GOAL
CHALLENGE
SOLUTION
Goal
A narrative-driven webpage experience that leads the viewer through the many perceptions of "Beauty."
Overview
TYPE
Website
Web Designer & Developer
ROLE
HTML, CSS, JS, After Effects, Blender
TOOLS
SKILLS
Front-End Development
01
01
01
02
02
02
03
03
03
04
04
04
05
05
05
05
05
05
06
06
06
Design
“What is Beauty?” is a single-page site exploring the different ways beauty as a concept is practiced and perceived, such as different standards across cultures, its scientific basis, and how it’s affected by personal perception.
Based in research about beauty as a fundamental way of viewing the world, the purpose of the site is to inform, educate, and prompt visitors to reflect on where and how they can find beauty in their own lives.
01
Frame-by-Frame Motion
Multimedia assets are adapted into frame-by-frame motion components that allow for optimized loading times and fluidity.
01
Frame-by-Frame Motion
Multimedia assets are adapted into frame-by-frame motion components that allow for optimized loading times and fluidity.
01
Frame-by-Frame Motion
Multimedia assets are adapted into frame-by-frame motion components that allow for optimized loading times and fluidity.
02
Scrolling Interactions
Different perspectives on the beauty of various things and concepts.
02
Scrolling Interactions
Different perspectives on the beauty of various things and concepts.
02
Scrolling Interactions
Different perspectives on the beauty of various things and concepts.
03
Hover and Dropdowns
A combination of interaction methods draw the visitor in and provide varied structure for blocks of information.
03
Hover and Dropdowns
A combination of interaction methods draw the visitor in and provide varied structure for blocks of information.
03
Hover and Dropdowns
A combination of interaction methods draw the visitor in and provide varied structure for blocks of information.
04
Guiding Narrative
The main narrative is differentiated from supporting text via font size, style, and position.
04
Guiding Narrative
The main narrative is differentiated from supporting text via font size, style, and position.
04
Guiding Narrative
The main narrative is differentiated from supporting text via font size, style, and position.
05
Rotating Models
Draggable models encourage active viewer engagement through interaction rather than passive viewing.
05
Rotating Models
Draggable models encourage active viewer engagement through interaction rather than passive viewing.
05
Rotating Models
Draggable models encourage active viewer engagement through interaction rather than passive viewing.
06
Response Field
The site ends with an open ended question, prompting visitors to reflect on how beauty relates to their own life. The responses are collected in a Google Form.
06
Response Field
The site ends with an open ended question, prompting visitors to reflect on how beauty relates to their own life. The responses are collected in a Google Form.
06
Response Field
The site ends with an open ended question, prompting visitors to reflect on how beauty relates to their own life. The responses are collected in a Google Form.