2.25 Web Page Design

When I was working on producing the different gradient colours, I knew that I would use them as key visuals for my website (reference image below). The overall look and feel that I wanted to go for was gradient circles illuminated amidst the darkness (a black background). For the landing page, I wanted to create an animation that would introduce the idea briefly using a few keywords and visuals.

I extracted a few keywords from my design statement and objective: Design Intervention, MRT, Mobility, Non-Place and Ex Situ. To give the viewer a better understanding, a short animation intro is designed on the landing site so that the user will grasp a brief idea of what the project is about.

Variations/Sketch of the elements and the placement

Since the gradients are the key visual, I decided to include them and show the changing colours + movement. The word Ex Situ is animated with different typefaces to portray the idea of ‘out of situation’ which defines what the commuters are experiencing on the train. The changing image of the arrow and train window, is to display the movement and speed of the train.

I decided to go with a one page scroll design when the user clicks in after the landing site. I think the smooth navigation of the one scroll would be easier for me to explain my information that is essentially one thing leading to the next.

Wireframe Sketch of the website

I decided to incorporate the use of arrows as directional visuals for the reader like how at train stations we see many directional signs. Incorporating an idea of wayfinding in the information on the website, mimicking that of our MRT stations. The circles in the wireframe represent the gradient circles that will be moving in the background constantly.

Top of page
Bottom of page

The user can access the experience video from the bottom of the page or the landing page. They will be redirected to a separate webpage to view the video. This is to remove any other contents that could potentially distract the user. The webpage for viewing is here: https://www.breaking-mobilityexsitu.com/

All that’s left is to finish up on the video.