Case Study

My Desk

An interactive representation of my bedroom desk

photorealistic website mobile design mobile view
photorealistic website design web view // home
photorealistic website design web view // projects

Brief

For this project, I wanted to recreate my bedroom desk in a photorealistic style. So I grabbed the closest notebook to me and drew a quick sketch (and added some extra gadgets). At the time, I was really into creating CSS objects, and loved how they could easily be manipulated using animations and JavaScript. I also loved how they didn't take that much space as compared to image files.

From the beginning I loved the idea of everything being interactive. I wanted the PC to open in fullscreen when clicking on something. I also wanted something similar to Google Hub to show information. As well as this, I included some hidden Easter eggs too.

Result

A challenge was understanding how to make the entire desk fit onto a mobile screen. I overcame this by removing the desk, and making the computer screen change its dimensions to fit the user's device to imitate the device that they're using - meta I know.

When I finally finished, I realised I had learnt a lot. I learnt that some things are easier to recreate as SVGs, so some things (like the lamp) are actually SVGs. I used a lot of JavaScript (and lots of trial and error!). If you're interested in seeing objects that I've created, you can visit this link.

Info