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

2024-11-27

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

2024-11-27

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

2024-11-27

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.

icons

2025-03-11

I started using 32x32 icons in the changelogs on the home page to indicate different categories of work. During a recent round of web-surfing I found Lynn Fisher's homepage and was inspired by the large icons and styling. I riffed on the idea but with a "vintage" twist. I found a large Windows icon archive on archive.org and pulled out some obscure images to use in the navigation menus of the site.

I used GIMP to scale the icons to oversize proportions, pikopixel to edit them, and tinypng to compress them. I really liked the style and color they added to the site.

So far so good, but I also wanted to add some auto-scaling to reduce the icon size for narrow viewports like Lynn's homepage. And I also wanted the menus to be generated by the Datenstrom Yellow system instead of hard-coding them on every page.

I dug in to the Yellow code and found functions I could use to generate menu links and with a bit of php and css styling I built custom Datenstrom Yellow layouts that auto-generated icon-based content nav menus with over-sized icons that scale down for narrow screens with the rest of my content. I also added a custom layouts for top nav menus on the home page and the sub pages that integrate icons into the nav.