Redesign

01 Nov 2014

A few weeks ago, I heard a great talk by Miki Setlur on design for developers. Ever since, I’ve been meaning to redesign my blog to reflect the principles I learned from him and the resources he recommended. It’s certainly still a work in progress, but I like to think this is an improvement!

One of the most commonly repeated truisms about great design is that it’s “99 percent invisible”. In keeping with that principle, I focused more on the negative space of my pages. Mostly, this meant allowing myself more white space between blocks of text. I also decided to replace my old header image with a simple blue background for a cleaner, less busy look. Because I did really love the picture, I used ColorZilla to match the blue of my header to the blue of the picture’s sky.

Before the redesign, I was using Flex, a stock Jekyll theme, to style the blog. Flex was great, especially for its built-in responsiveness, but once I had decided to elimiate the cover photo, I couldn’t use it in its original state anymore. So, since I had to modify the theme anyway, I did a little restructuring while I was at it. I moved the comments section into a more natural spot relative to post content. (Full disclosure: the comments section was actually 100% hidden before. Oops. Just about anything is a “more natural spot” than invisible.) I also got rid of a few extraneous borders, cleaned up the link styling, and added a “signature” to each blog post. (Too cute? It may not last…)

What I was most excited about, though, was changing the blog’s fonts. Easily the most valuable resource Miki suggested was Hack Design, a crash course in design (mostly visual/web oriented) broken up into easily-digestible chunks and delivered via email each week. The lesson on typography really captured my imagination, and that was what finally inspired me to execute my redesign plans. After wasting far too much time trying to get perfect scores on the letter shaping and kerning exercises, I got started.

I started by examining the sample texts closely and comparing them to my own page. One of the biggest differences I noticed was that all the fonts on my blog looked incredibly similar, if not exactly the same, while the sample texts went for much bolder mixes. (Sometimes even in the same line! Heavens!) I was afraid of making it look disorganized, but in fact, my perfectly uniform text just looked bland. Encouraged by Hack Design, I experimented with a few different combinations of serif and sans-serif fonts in various sizes and weights, and eventually settled on what you see now. I’m much happier with this variety, and I chose relatively conservative fonts to keep the page from feeling mismatched.

I’ll probably continue to do a little tweaking as I go; design is (obviously) a huge field, and I have so much more to learn. Meanwhile, check out that shiny new comments box. You know, the one that was there the whole time, just invisible.

Molly Huerster

Published on 01 Nov 2014 Find me on Twitter!

blog comments powered by Disqus