Desigining My Dream Website Part 5: The Road so Far
Last updated: 28 minutes ago
Metaphorically laying face down on a desk. I'm stumped. Time to write a blog post and think out loud.
Since last time, I took all the steps I wrote down. I created a mock website using Markdown and Obsidian. I created the main navigation with the items outlined in the last post.
On the homepage, I sketched (as in wrote code) the sections for webrings, buttons, badges, and embeds (status.lol, status.cafe, and piclog). For the webrings, I copied the codes on my current site at maryseph.com (the first half on the list). For the buttons, I ended up moving the webmentions and indieweb elsewhere, adding a few more such as Shen's various campaigns and a couple from sweetfish's 2025 advent calendar. For the badges, I moved the People Pledge to the buttons section and the CC BY-SA 4.0 to the footer. Then, I added code for the status.lol and status.cafe embeds; piclog pending.
Last but not least, on the footer, I added all intended items (except guestbook for some reason). Here is where I added 88px buttons for Indieweb, Webmentions, and HTML5 (unplanned).
As for the pages themselves, I copied the contents from the other two websites and created some new slash pages. These are /accounts, /blogroll, /bookmarks, whereas others like /accessibility are getting a overhaul. The rest of the slash pages are from my main site. I particularly enjoyed putting together /bookmarks where I compiled all the relevant links I have found on the past year. My favorite page so far.
That's it for setting the stage. As I mentioned at the beginning, I got stumped into where to go from here. I'm not too keen on the idea of designing a website from scratch so I took at look at Berry House's templates. I had perused them before and they looked rather pleasant to the eye and well-designed.
At this point I wasn't sure what I was looking for but I knew what I had. I think that the difference between these templates and others I have used such as the one from my main website and bearblog, are rather bare bones. Whereas the ones from Berry House feel like a finished product. In more craftsy terms, it feels like being given a machine with an instructions manual versus being given a knife and a piece of wood. Due to the complex and polished nature of the templates, I feel less creative to tear them apart and build my own thing.
Another metaphor, it's like ordering an intricate piece of cake and feeling bad for having to eat. In other words, it's too beautiful, I CAN'T! Thus the conundrum.
I got as far as installing Hugo on my machine and deploying one of the Hugo themes. It's so beautiful but my site is not a weblog and it seems the kind of aesthetic I'm looking for is not this, despite how much it pleases my eyes. Hope to use this template one day though.
So, I am writing this post because I am doing research on the kind of design I want for my website. On the spirit of, "stop lying to yourself," I am stating that my dream website has to have a frutiger aero aesthetic. I hold a lot of nostalgia for this aesthetic. I grew up using Windows XP, Vista, and 7. At the time, I didn't paid much attention to the UI. Nowadays, seeing archives never fails to bring me joy. So while I'm usually critical about product advertisement aiming to evoke being in nature when in fact it's those same companies are driving environmental degradation, I also really love nature and my art tool of choice is the computer.
Anyways, what's Frutiger Aero? Frutiger is a type font and Aero is the aesthetic Windows designed back in the 2000s. Two really great websites from other enthusiasts are a Neocities website called Frutiger-Aero and a Frutiger Aero Archive.
The former is a much smaller website with a set of tutorials to recreate the glassy style on nav bars, panes, and buttons. The latter is a HUGE website filled with resources and collections to customize devices and much more.
Here is a list of resources I bookmarked related to web design.
- Ultimate CSS Gradient Generator, an online CSS-gradient generator. Exactly what I had in mind to create gradients for that glassy look. Would probably use this instead of designing graphics using the tutorials above but we'll see.
- WAVE Web Accessibility Evaluation Tools, as this will likely be my most hands-on website till date, I need a tool to check against current accessibility standards.
- MDN's ARIA attributes page, I would like to learn more about this as it's a key element of web accessibility.
- Sanitize.css, similar to normalize.css, "a CSS library that provides consistent, cross-browser default styling of HTML elements alongside useful defaults." I have never used a CSS library so it would be interesting to try one.
- skyweaver.nekoweb.org, a personal website with a Frutiger Aero aesthetic. I particularly enjoy their 2025 portfolio, specifically their aero os mockup and UI design for Score! app. I'll likely be using them as inspiration.
- Real World Graphics, a website that offers graphic editing software and various graphics free to use. Cursors tagged aero.
- How to nail the Web 2.0 Gloss look on your website, a guide by Frutiger Aero Archive on how to code some of the stylistic features of the aesthetic into a project.
- Frutiger Aero Archive The Official Forums is a forum by the Frutiger Aero Archive website itself.
- Frutiger Aero Community is another website dedicated to the aesthetic and those around the early 2000s made by some of the same people. It's geared toward the social side highlighting community contributions. I really like its Community Values section. It seems there are others like me who have connected the aesthetic with the broader environmental movement.
Next Steps
After visiting several websites and pages, I think the next tangible step I can do is just create the very bare bones of the website. In techinical terms, Frutiger Aero belongs to the realm of CSS, and I don't have my site on HTML yet. I should put some blocks together in a way and think about the nice coats of glossy paint later. I think I could even use my current website as a base.