Good design is as little design as possible.
This was always meant to be a very simple website. Simple from a user experience and simple in the code it’s built with. The first commit to this website was on July 3, 2019. Since then I’ve thought more about how I want this site to be structured.
The structure now (in it’s most basic form):
> Book list
In the beginning I decided I would use system fonts on this site, thanks to this article. That means no fancy or unique font choices. Which in the current state of the web turns out to be quite unique. This means I get to use Apple’s trademark font San Francisco on Apple devices, Segoe UI for Windows, and Roboto on Android.
Throwing that consistency away, a deliberate choice taken by many to be unique, I take on the attached feelings to the platform the user visits on (And I do love San Francisco).
I thought about how I could simplify the top navigation. It was nearly as simple as it could be but it was still too much.
Easy, remind the users of where they are (an expectation of top navigation) and remove that dumb separator.
I used CSS Stats and Wallace to learn more about my poor css styling by analyzing the information. Then I went through and cleaned up my HTML and CSS structures (one cannot be clean without the other). I ended up installing Wallace CLI to analyze my refactored CSS as I was working on it. I was able to get pretty CSS analytics in my terminal through this.
I decided I needed to pick styles to use consistently as variables.
- Type sizes
- Max width (you see the chosen width on desktop)
For now I have settled on:
And colors of:
Primary ColorsBlueHex: #0070c9TextHex: #333333
Accent ColorsGreenHex: #84fab0BlueHex: #8fd3f4
I went from from:
- 139 Rules
- 512 Declarations
- 8 ID’s
- 89 Classes
- 24 Unique colors
- 16 total color declarations
- 12 unique font sizes
- 23 font size declarations
- 11 margin resets
And reduced it to:
- 87 Rules 37% reduction
- 354 Declarations 30% reduction
- 0 ID’s 100% reduction
- 62 Classes 30% reduction
- 18 unique colors 25% reduction
- 7 unique font sizes 42% reduction