Your blog’s role as personal soapbox is obvious; its role in establishing identity is often overlooked. As a designer, your blog speaks volumes not only by what it says, but also by how it says it. If you can’t design your own blog – they will say – how can you design anything else? It was with this in mind that I set out to redesign my own blog.
As an entry point for colleagues and potential clients, your blog’s first impression is crucial. Snap judgements will be made that you may never be able to escape. Your design must inform your readers as to your abilities with grace and flair. It must establish your visual style distinctly and succinctly. It must be both well orchestrated and well rehearsed. It must, in short, be great.
The Design Process
Before setting pen to paper, hand to mouse or fingers to keyboard, I began by thinking about what kind of response I wanted to elicit from my readers. I decided that want it to be warm and inviting, rich in information, and clean and elegant; it should be visually consistent, easy to read, and easy to navigate; most importantly, it should look like me.
This lead to a few clear design goals:
- Strong, consistent typography
- Simple, uncomplicated layout
- Minimal but effective use of color
The design itself went through a number of iterations, beginning with simple pen-and-paper sketches. At the beginning, I imposed a few constraints to help focus my efforts: Single column, 800px width, gridded layout, three fonts. The content would reign supreme. Consistent typography would establish a visual hierarchy.
In The Beginning Was The Typography
(Figure 1.1)
Sorting out the typography goes a long way towards giving your design a strong, cohesive style. It is important to chose two or three fonts (and no more) and to use them consistently. It is also important to use consistent font sizing to establish a visual hierarchy.
I decided on Helvetica (specifically Helvetica Neue when available) for headers and Verdana for body text. Helvetica was chosen for its readability at medium to large point sizes and flat out gorgeousness. Verdana was chosen for its ubiquity and readability on screen at small to medium point sizes.
Rock Out With Your Layout
Most blogs use a two-column layout with a sidebar on the right to display subordinate information. Here, I choose a more minimal approach: a single column with information presented serially according to importance. The home page is streamlined to encourage the reader to discover subordinate content, as will navigation links at the top.
Also, the typography was further refined. A serif font is added for subtitles and meta information (like post date). Finally. the main heading font is pumped a bit to help the major sections pop.
(Figure 1.2)
A quick look at Figure 1.2 will reveal that the initial read is much improved. The main content sections (the latest post and the list of recent posts) stand out as clearly differentiated. There remain, however, some issues with the font sizing and the spacing of elements. Also, the footer’s columns appear rather haphazardly placed.
Coming up in act two, the layout and typography get cleaned up and we add a splash of color. Don’t miss it!
