Design Approach Part II

30 Jan 2023 - by: Darkwraith Covenant

Deep Dive on Windows Design

There are a number of different ways to approach this design, but I wanted to keep it simple. I didn’t want to recreate the desktop environment in its entirely. That’s why sites like Windows 93 exist, which does a far better job at emulating the OS with a modern twist than I realistically have time for. I wanted to keep the overall feel of the aesthetic design, but not necessarily emulate the functionality of the operating system. Getting it to look like a windows95 site/application but in blog form was crucial.

In order to fit with the aesthetic, I imposed a few limitations:- It could only use the 16 colors available in the basic Microsoft Windows 16-color palette.

The most prominent colors would be Teal, White, Silver, Gray, Blue, and Yellow. Punctuated by Red, Black and Fuschia.

Squawk Squawk motherfucker, I'm only 16 colors Squawk.

From here, the sky is the limit with how to approach how content is displayed. Some inspirations:

The Sound Recorder app I spent hours recording fart noises and cusswords into, using a cheap mic plugged into the soundcard is a great example of the typical Windows application. This could be a music player perhaps.

Phone Dialer was simple, elegant, and at the same time drab and oppressive. This could be a synth or something of that nature.

What’s with these homies copying my design? Why do they have a frontend?

Ok that was actually a Win95 dad joke of the lowest order about how a video of Buddy Holly by Weezer was included on the Win95 disk, but who could forget the Windows Media Player, which remained mostly unchanged for years.

I thought Win Media Player would be a great interface for a youtube video player or something. There are so many opportunities to hide content in the menus, an idea I saved for later. I thought it would be cool to actually make the buttons functional, but for that, I would have to learn React and Javascript which have their respectable learning curves. I approached that topic with humbleness and trepidation.

In all of these examples, a sense of depth is simulated quite simply by the clever use of a silver square bordered by a white L shape on top and a gray reverse L on the bottom, with a larger black reverse L bordering the gray. This can be replicated over and over again with different uses for things like separators, dropdown boxes and other clickable elements. But why re-invent the wheel?

Learning CSS seems less daunting, so I focused on that initially before touching on any dynamic content for this site.

98.css

Clearly, I’m not the only fan of this aesthetic, I would soon find out. In looking for references to the Win98 color palette, I found the website https://jdan.github.io/98.css/. Hat tip to jdan, who created this design system for “building faithful recreations of old UIs.” This was exactly what I was looking for!

And then, I peered down a rabbit hole of css and html, neither of which I’m proficient in. I thought it wouldn’t be too hard to fall headfirst into said rabbit hole, even with my lack of serious dev skills. This wasn’t my first programming language, I learned the decidedly uncool powershell and vbscript languages for work, and javascript is supposed to be easier to learn than vbscript.

I used this codesandbox to test this stylesheet out.

Very nice design system, it will be the basis of the styling for most of my site which will be a monstrous hybrid of a Windows window meets a cyberpunk geocities page.

I decided to develop the site from scratch., which should be fun and not terribly difficult. So much has changed since I learned HTML in the Win98 era, I still have a shitty Angelfire page up on the internet.

More to come on how I chose the Jekyll framework and github pages as the platform.

Back