During the design of the site, I wanted to focus two main things: typography and color.
Content
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.
Color
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!
