Anthology of Interest I

29 September 2013 Tagged with: design, typography, and color

During the design of the site, I wanted to focus two main things: typography and color.


Being a sucker for mobile first development, it made sense that content should be the starting point of the re-design. I had the good fortune of having three to four posts and the homepage content left over from the previous site so I had real content to design around, with the exception of this page to cover any missed options.

I tried something new when designing this site by paying close attention to how the content was going to be viewed. Trent Walton’s post on fluid type helped me greatly as the basis for my grids, the sidebar should be just shy of the 75 character mark, and the text is sized across various screens appropriately to meet this line length mark. This way of thinking flowed through in development, as it forced me to think in terms of em’s rather than px. I capped my content sections at 36em, that way even if a grid spanned say 60% of the screen, the text inside would still be nice a readable length.

While this is common knowledge for designers, it was interesting learning the reasons for design decisions and core user experience concepts.

Keeping with the concepts from my early designs of the site, I used serif fronts for headings to contrast against the clean, sans-serif copy and a dash of cursive / hand-written for navigation.


Ms Laura Kalbag was a massive influence1 for using color in design. In a similar way that she used color across the areas of the site, I wanted color2 to break up parts of the page. My palette consisted of the yellows from the giraffe into the red headers, complimented with the blue on the home page.

My starting point was the blues of the color strips and blog headings that made up the home page, using the cool tool color code. A complimentary red was needed for the mast head of the page and with that I had my pallet. Its always daunting for me staring at a blank white canvas when designing as there are infinite options. Playing around with this color-by-math theory3 helped point me in the right direction with the analogous purples and blues of the posts lists and contrasting header.

The next step would be to make sure these colors are accessible as I only did a basic black and white contrast comparison. Baby steps…

Next time on Anthology of Interest

Style tiles and designing in browser, yesh!

  1. Imitation is a form of flattery right?

  2. Color/colour, ugh

  3. tutsplus cleary do a better job than I could

Recent posts are recent

  1. Oct 28 2014
    This is !normal
    It took over a year and a lot of help from some close friends to realise that my job was making me unhappy.
  2. Feb 16 2014
    New feature - Coderay
    After some behind-the-scenes drama, syntax highlighting is finnaly running!
  3. Feb 13 2014
    jQuery conventions
    Javascript (read: jQuery) was something I struggled with in my early days as it can be quite intimidating at times. Here are some of the techniques I have picked up over the years.