top of page

Day & Night

An interactive website that tells the time while changing perspectives with the use of a movable sun. The user is given control over the position of the sun using their cursor. With background sound effects to match the position of the sun, the user is immersed in an interactive experience that encourages questions about time and space. Visit website

ROLE

Graphic Design & UI Design

TEAM

Solo

Project

DURATION

July 2021 to November 2021

Day & Night

Questions

What is time and is it real?

 

How did we first starting telling time?

 

What is the relationship between the sun and time?

 

How do we experience time as users?

Concept

Day & Night is an interpretation and exploration of the concept of time and our connection to it. We are accustomed to clocks and never think twice about what a certain hour and minute mean. After conducting research about the science of time, I understood that it can be assumed that time is the same everywhere through classic mechanics and that synchronised clocks align perfectly.

 

To me, clocks simply guide us toward understanding the movement of the sun, which has the biggest impact on our lives since it decides our environment. Therefore, I decided to give users the power to control the movement of the sun on the website, allowing them to choose the surroundings they see, no matter what the time is displayed as simultaneously.

Inspiration 01

When I first realised that I wanted to create a work relating to the concept of time, I started researching other clock works to get inspired. That’s when I discovered Stuart Ringholt’s Untitled (Clock) from 2014. It proposes the concept of an 18-hour day instead of a 24-hour one, which broadened my perspective of time.

d&n_i01.png

Inspiration 02

Soon after establishing the main concept, I started researching interactive works to help spark an idea about how I could create a similar experience relating to my topic of time. Susan Hiller’s 1996 work, Dream Screens did just that. I was truly inspired by the way in which the artist mapped her interest in dream states onto the the web using interactive colourfields and soundtracks.

d&n_i02.png

Inspiration 03

Once I started to get a clearer image of the way in which my clock website would work, I started to research still-life paintings to get ideas about the background. By stumbling upon the 2021 work, The Passenger, by Paul Rouphall, I was inspired by the way in which the glass sits ahead of a window, with an interesting combiation of sky and ocean. That’s when I knew I wanted to create a movable sun which affects the appearance of those elements.

d&n_i03.png

Process

I first brainstormed different ideas for the interactive project, and over time, discovered the vision for the project. My process often starts with a set of ideas and vision which I refine over time through research and experimentation. Therefore, I started working on the website, and kept adding, removing, and changing aspects of it as I progressed, also relying on my intuition to navigate what simply “feels right”.

d&n_drawing.png
d&n_screen01.png
d&n_screen02.png
d&n_screen03.png

I started with the design of the clock on a standard background, then created the different backgrounds that adapt based on the position of the cursor. Lastly, I crafted the four different sound notes and added sections of the page that trigger these sounds on hover. After some thought, I added some text to the webpage to compliment the concept of the interactive artwork and make it more poetic or thought provoking.

d&n_screen04.png

The Goal

The overall goal was to create an interactive art piece that is conceptual in nature and based on the idea of time changing. Since I've always had an interest in poetic or artistic endeavours, I wanted to find a way I could combine that with my expertise in the area of interaction design. According to me, I'd say that the final result was a success, and I encourage anyone reading this to try the website to use as a screen saver, or simply as an interactive art piece to explore.

smartmockups_kuwphxup.jpg

© Raul Rath

bottom of page