deliberate design principles
My blog is undergoing some CSS renovations, mainly centered around the desktop layout for my homepage. It's been a nice chance to think about what the general principles behind my own aesthetics are, to keep a sense of consistency within the site and not tweak willy-nilly, since that takes up a lot of energy I could be using to write (or read, or watch, or listen) instead.
These are the core principles which I articulate the design of this website around:
1. Function
The most important thing is having a design that serves the function of this site. Right now, those functions are:
- Encouraging my writing and introspection, since they tend to fall by the wayside when I'm not feeling inspired, and I want to be consistent even when that spark of inspiration is missing.
- Helping me move away from social media; since the primary uses I give my socials (Tumblr, Mastodon) is to update my friends in the goings on of my life as well as collecting things that scratch my brain in various ways, those are the things I need my site to do.
Thanks to the embed post function and the per-tag RSS feeds, I can use the regular posting function to create three types of entries with their own topics that may or may not overlap, to have a fast way of adding statuses and images or quotes for my scrapbook, and then take my time to write longer entries without needing a separate space for them online.
- Tag posts by type, not topic
- Keep the amount of types small
- Don't re-sort old posts; focus on your current relevant types
2. Curation
In essence, what I mean by curation here is to make a deliberate choice in what I'm showing and what I'm hiding, what I'm reducing friction for for vs. what needs an effort from the reader and from me.
- The content of the post takes precedence over everything else.
- The majority of content of this site must be text.
As someone with a visual impairment that occasionally relies on screen readers, these decisions come from a very personal place and are hardly universal maxims. Using semantic elements in my layouts and being sure to emphasize the content of the post rather than the frills both visually and functionally doesn't have inherent meaning as a principle, you have to decide what's frills and what's at the core of what you're showing.
- Remove timestamps from everything but time-sensitive posts (like statuses)
- Choose the most poignant fragments of a scrap and link to the source
- Add alt text to every image; it will increase friction not to use them and make their use meaningful and accessible
3. Maintainability
Once I know my principles to determine the content of the site, I must make my own work legible to myself so that I'm not constantly going back to tweaking after noticing something needs to be fixed and falling down a rabbithole. This also helps if at some point I choose to change something, to pinpoint the exact bits that need changing without having to redo the whole site from scratch.
- I want to keep the palette as small as posible, so that the automatic theming for light and dark mode remains smooth and I don't have to run a ton of checks. Right now, this means sticking to grayscale.
- Keeping Javascript to a minimum is a must; I'm not very good at writing and tweaking it and relying on it too much can make the site break in browsers that don't support or block it. Bearblog itself uses very little JavaScript for non-essential function, so I can't get rid of it entirely, but I'd rather not use it on my end.
- Avoid custom fonts, since they increase loading time and are a pain in the ass to pick.
I will admit that I'd like an accent color in my sea of grayscale, but I still haven't found anything that meets the criteria of me liking the shade and it working fine on both my dark and light mode palettes.
- Use CSS variables to handle the site's color palette
- Use a font stack with a series of pre-installed fonts from different operating systems
- Avoid Javascript to keep site bloat and rabbithole headaches to a minimum
When you're organizing your blog, be it through CSS or through the content itself, do you keep any ideas like these in mind? I would love to know what everyone's thought process is when they design their own corners of the web :)