A post for organizing my thoughts on the inspirations and resources used for this website's design. Hopefully you find it useful as well.

design notes

The overall aesthetic for the site is a bit of a mashup of late 90s design firm and mid 90s black background homepages. It's a a return to 'normal' for the site, as it spent most of it's early history in a black background/dark themes.

Late 90s sites, 1998 and 1999, were characterized by bold colors, strong font styling, borders, and content windows scaled for readability on 800x600 and 1024x768 displays. Headers with wide kerning were also a common design feature of that period. New CSS and HTML standards allowed for greatly improved visual styling, and meant frames and tables for site structuring were on their way out, and larger displays offered more real estate for multi-column layouts.

Mid 90s sites also featured bold colors, but font styling was simple as was site layout and structure - often just single column without menus or sidebars, and elements like images were just inline with the content. Background images and gifs were used to add visual "flair" to otherwise simple site structures.

I'm using dark themes in a simple single column layout designed to be readable in a narrow viewport/window, but I'm using late 90s styling elements. I'm also using background images, in opposition to the modern trend of large areas of white space combined with simple black fonts.

fonts

Industria
A narrow font that looks good with wide kerning. Stylized, but decently readable. I was hunting for narrow fonts that captured late a 90s cyber/futurism vibe and stumbled across this poster for the film Strange Days on the "Fonts In Use" website. It captured the bold colors and font styling I was looking for.

Montserrat
For the main body text of the site I wanted a strong geometric sans-serif, but also good readability in various sizes. After test driving several fonts I settled on Montserrat. It holds up well against the Industria font in the headers - and the digits look great.

color themes

Blue - home page
Initially it was a simple blue theme based on the welding photo at the top of the home page. Recently (November 2024), I added more colors and tweaked the background image to include some pink/purple hues. I liked how the other themes on the site had a default feeling link colors - in particular the "visited" colors. The Orbit theme on the linkroll page has magenta colored visited links, the Beaker theme on the R&D page red, and the EFC theme here on the lab notes pages, purple. I wanted more contrast between the un-visited, active, and visited links than just shades of blue. So I played around a bit and I'm pretty happy with the result.

EFC - lab notes pages
I was re-watching Gene Roddenberry's Earth Final Conflict series and was intrigued by the turn of the century sci-fi/cyber/futurism aesthetic. In particular the distinctive and consistent purple and pale green lighting used throughout the first few seasons of the show. It's a bit hard to describe, but it's quite noticeable especially when they are exploring dark and moody locations. The theme used on the Lab Notes section of the site is based on the look of the show.

Orbit - linkroll
Initially, the Linkroll page was going to be an archive for old bookmarks pulled from my CD backups. My oldest discs are gold which have a distinct look, very different from modern silver media. I was also at the time looking through old icon repositories to find images to use on the page. I noticed the colors used on the Network Neighborhood icon from the "Space" theme included in the "Plus! for Windows 98" add-on matched the refraction colors of my backup CDs nicely.

Beaker - r & d pages By far the most "mid-90's-geocities-homepage" color theme on the site. Lots of neon colors. The color theme is based on the Windows 95 icon I used on the page featuring a modem and colorful beakers.