Lukas Murdock
Subscribe for updates and more.

Redesign

Planted 02020-02-05

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):

About
      > Capabilities
Resources
      > Book list
      > Principles
Writing
Contact

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
  • Colors
  • Max width (you see the chosen width on desktop)

For now I have settled on:
Extra small
Small
Medium
Text Size
Medium-Large
Large
Extra Large

And colors of:

  • Primary Colors

    Blue
    Hex: #0070c9

    Text
    Hex: #333333

  • Accent Colors

    Green
    Hex: #84fab0

    Blue
    Hex: #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