Brief

With this project the goal was to design a user experience based solely upon coding by hand in HTML and CSS. The only other stipulation was that we must have at least 8 pages. For this experience, I wanted the user to experience light and color in the form of a sunrise.

 
 
 

Color

As a painter I have a passion for light especially natural light in all its subtleties. Once I decided to design an experience around sunrise, I thought that watching the room as it is affected by the light from outside would add more depth and authenticity to the experience. With that, I decided to add a light switch allowing users to switch the lights off or on at any time so see the difference. With the lights on the window is in shades of its local color, but in the dark, the inner part of the window reflects the light from outside so it is no longer in shades of grey. As it gets brighter outside, the room will get darker if the lights are on (or at least appear darker in comparison) and light if the lights are off until the difference between the two is very subtle.

 
UXWebcolor-01.png
UXWebcolor-02.png
 

 

Research & Finish

The first step after coming up with the content for this experience, was getting the user to know where to click. I didn't want to make it obvious and say click here; I wanted it to be intuitive so the user would know. My first instinct was to have the user click on text posing a question such as "Look out window?" but that didn't feel like a natural way to click closer to the window. I then thought that the most natural thing to do was to actually click on the window, similar to clicking through Google Maps in street view. My research involved surveying my classmates, showing them my design for the first page, and asking where they would click. The feedback was positive with regards to the window so I moved forward with it.

Still thinking about how I could make it even more obvious, I thought about  ways to hint that the window was clickable. I thought a hover pseudo-selector would work nicely. With this I could create an effect that animated when the cursor crosses the window, prompting a click.

The last thing I surveyed my classmates about was the light switch. It is fully functional and allows you to experience the sunrise with the indoor lights off or on at any point in time, but I did not want this to be so obvious. I wanted this to be a surprise that the user could find if curious enough to try clicking the light switch.

The Link to the finished site is at the top of this page and works in Safari, Chrome, Edge, and Firefox