Work

Work vs Worldview

Mockup.jpg
 
 

An interactive web experience that explores the interaction between my work and worldview.

 

This open-ended project required students to create a work of art that examines their craft and how it relates to their view of the world. I decided to design and develop an interactive web experience.

 

Project Requirements

  • Create a work of art that:

    • explores the student's work and worldview

    • incorporates and builds upon the tradition of the triptych

 

Constraints

  • Time: 2.5 weeks

  • Deadlines

    • Week 1: Concept Presentation
    • Week 2: Final Presentation

 

Project Goals

  • Communicate a non-linear, contemplative narrative

  • Create an immersive experience

 

 

UX  Design

Flow

To explore the 3 topics that I find important both in my work and my worldview, the site was laid out with a home page that navigates to one page for each topic.

At each page, the user scrolls through pieces of information/media then can eventually return to the top, exit the page, and explore other pages.

 Initial designs with generic content

Initial designs with generic content

 

Communicating a narrative

The non-linear narrative is communicated by exploring the topics using multiple types of media. This allows users to engage with the topic in a number of different ways on each page – instead of only reading text, only viewing images, or only listening to audio.

The textual content is made up of definitions, quotes, and questions. Overlapped and floating throughout the text are other artifacts such as sound bites and animated gifs.

Additionally, elements on the page have a parallax scroll effect to imitate the concept of thoughts and ideas floating around someone's mind.

Parallax.gif

 

Making it contemplative

To create a contemplative narrative, I didn't feel the need to have a standard linear narrative with an intro, body, and conclusion. The pages included questions in the middle of the page and at the end.

 

 

Immersive experience

To create an immersive experience in a web platform, it seemed crucial to remove the feeling that the user is on a standard website. To accomplish this, I used dynamic page transitions and ambient & interactive music.

 

Page Transitions

Expanding the images from the landing screen to use as banner images is one of the methods I used to make experience feel more seamless and dynamic.

Page Transition.gif

 

Ambient & Interactive music

Taking it back to the 90s, soft music plays in the background. Additionally, small interactions – like hovering and opening a page cues additional music notes that match the background music. They act as audible accents to the user's actions.

 

UI Design

Design inspiration

 

Initial Designs

Following the design reference imagery, the initial designs utilized text overlaying images.

Contemplative

Additionally, to match the contemplative tone of the experience, the interface would be a representation of my perspective on contemplation and cognition. The topics would be blurred (symbolically in the subconscious) until the user hovers over (consciously examines) a specific topic. 

 

Development

The site was developed in a week – using HTML, CSS, and Javscript.

 

 

Outcomes

Was the project successful?

As far as the project requirements, the measures of success for this project were simply to explore the relationship between my work and worldview and do so in a way that represents a triptych. Additionally, however, I had personal project goals of communicating a non-linear, contemplative narrative and creating an immersive experience. While personally I believe I successfully created this, I also received feedback from peers that solidified this.

"This is excellent work. Form and content are an excellent fit. The whole experience is executed in a way that makes it feel seamless. This is a strong polished version. - The narrative structure of the pages is nicely mapped out. You’ve done well in thinking through the entire experience and interactivity."

 

Improvements

1. Content adjustments

A few pieces of text content and questions could be cleaned up as well as some technical details – such as audio volume and cut off points.

2. Parallax Spacing

When translating to development, the parallax scrolling elements at times got a little too close to other elements.

 

 

My role

This project was individually completed. So, my role included: 

  • Content planning and structure
  • UX Design
  • UI Design
  • Development
 

 

Gallery

 

 

Questions?

Want to know more about this project?