I continue to learn a lot about content design and web development from the GOV.UK design system. Inspired by the idea of having all styles and patterns and components in one place, I started to think: how can design systems apply to personal websites?
My first thought is to think about this in terms of a “website style gallery” – a place where I can curate and collect styles for my website. I don’t like the idea of a “style guide,” the connotations being more about restriction than creativity. Rather, I wanted to build a place of reference: somewhere I can go to see all the main styles of my website.
I now have a Styles page on which I document both styles and components used on my website.
The page is made up of three parts:
- Reference material, useful for development (i.e. variable names, colours I use, spacing sizes).
- Visual material, useful for me to skim to see how my blog styles look in aggregate (i.e. blockquotes, link styles, lists).
- Components that I can re-use across different pages.
The value in this project may be in the making: in how the way I think about design evolves.
Throughout building this page, I have realised it is incredibly useful to have a single place where I can skim through to see how different elements looks. This page gives me visual reassurance that elements look as expected. In building the page, I realised, for example, that alt text was not set to the body text colour, making it stand out as the only white text in dark mode or the only pure black text in light mode. summary tags, too, did not have proper text colours.
I made several fixes as a result of putting all elements on the page – a great result!
I also started to think more about the text sizes on my website. I think I need to learn more about the ideal scale for spacing. I am happy with how spacing looks on my website, but I feel like I may need more depth to express different spacing: maybe smaller and larger spaces for extraordinary circumstances. I find myself designing more components that need different spaces, and I have not yet standardised them. I will need to look for inspiration! Any thoughts would be appreciated!
When I was working more on this project a few days ago, I started to think about code I had duplicated across my site. I decided to make my search box a component since it is re-used on two pages and has the same code. I also started to think about generic patterns that could be useful, like CSS classes to represent different grids. I find myself interested in the idea of experimenting with different layouts, but the current page layout is very rigid and defined at the HTML element level. Styles are set directly body and main.
As part of this project, I also thought about the questions I ask in the back of my mind when I design my website. I started to codify what you could consider a design and development philosophy for the pages I make here. I wrote:
When building a new page, ask:
- Is the page accessible?
- Is the page fast?
- Is the page readable?
- Is the page navigable?
- Is the page findable?
- Does the page work in both light and dark mode?
- Does the page work on desktop and mobile devices?
It matters greatly to me that my web pages are accessible, fast, and readable. I want my site to work on as many devices as possible. I want my website to work well on slow internet connections.
I realise the above list is missing something: When building new pages, I like to keep in mind how I can make the page whimsical or delightful. I love web pages that make me smile. I love desiging such pages, too.
I don’t see the style guide as a definitive source on how I should make my blog, so much as a space that can evolve over time. I have been excited to fill in all of the gaps that I found by putting all styles and components on one page, and I now find myself thinking more about how I should design scales for spacing and type and more.
I would love to hear your thoughts about style galleries and design philosophies. I encourage you to share your thoughts on your blog. You can email me too!
