See the final result at Stylestage.dev

Background

Stephanie brilliantly gave new life to the famous CSS Zen Garden project when she created Stylestage.dev. At work I often have to find ways to redesign components that already have been given HTML, as it sometimes is with CMS-generated content, so I thought this would be a nice challenge.

I've wanted to challenge myself to create something that's supported by most major browsers, while still doing some things out of the ordinary. I quickly landed the idea of creating a wireframed OS. Although external images was allowed I opted for using CSS gradients to create all the background patterns and OS windows.

Tech & tools

I rarely do sketching before I begin my personal projects as I sometimes prefer to design with CSS. So in this case I only used the given HTML template, dug into the CSS right away and designed as I went.