Over the last few months, it has become painfully clear how much our blog needed a facelift. For the last week, I have designed and developed our new blog. I made some intentional decisions during the design process, which I will elaborate on here.
The design we were using before we whipped up in a matter of hours. It was a sort of after-thought that went along with a redesign of the Mail Pilot microsite. It put a large emphasis on the first image of a post and a post’s headline. This design worked best for announcements, so that’s all we posted: our email announcements, slapped into the blog.
Besides the fact that that’s not what a blog is for, nor is it its best use case for a company, it showed its cracks with the design rather quickly. Graphics designed for our emails were confusing when used in our blog. Since graphics for emails have headlines in them, you end up with two headlines when you reuse the images for a blog post. This is cluttered and confusing.
The blog had a “flat” feel with a white background. This caused an unforeseen issue that emerged shortly after we posted the design. Our Mac app started taking up many of the posts, screenshots included. Our Mac app’s interface also has a white background, so any clipped screenshot became visually confusing.
With these big white images, you could never tell when an image was part of an article, or starting a new one. That was a major design flaw.
A new design
With the old design, it was hard to tell what was where and why. I worked to address these issues when designing our new blog. I also wanted to craft a design that would inspire us to post more than just announcements (starting with this post about design!).
Clarity was the primary goal. Readers should be able to quickly differentiate article content from other content, and from other articles. The first solution is article text is in a serif typeface, while all other elements (captions, navigation, etc.) are in a sans-serif typeface.
The grey background behind an article helps emphasize and contain it. It draws your eyes in. And it helps show what is inside the article versus what is not.
The headline is not in the grey box, for stylistic reasons. Though since it is not in the grey box, the sidebar must appear below the top of the grey box, otherwise it commands as much attention as the headline. By moving the top of the sidebar to be just below the top of the article, your eyes can correctly flow from the headline to the article, and then sidebar.
Images are bordered and captioned. They are wider than the text of the article, but still bounded by the article’s box. By making them wider, it (ironically) makes it visually clear that this image is a part of this article, flowing form top to bottom. On our previous design, an all white background where the text and images were the same width made it unclear if an image was associated with the text above or below, or if it started a new article altogether. The image’s borders and captions also help make this clear. Further, it is clear when a new article begins because of the article box, and because images that start an article are the only ones to take up the full width of the box.
The sidebar allows us to move any actionable items out of the articles. This way, the article can be just an article, and not a spam-like piece of marketing. It also allows us to ensure actionable items are always up-to-date. If someone lands on an old article, it may have an old link. Now that these items will be in the sidebar, they will always reflect the most up-to-date actionable items.
While developing this theme in WordPress, I made it enforce a few guidelines. It only allows for one level of sub-header in an article’s body, which will keep us from writing anything too complex. The goal is to tell stories; to tell our readers what’s going on here in Blacksburg. That should not need many levels of sub-headers.
Videos can be use instead of featured images to begin posts, which are also shown full-width (and are responsive; not a terribly easy trick). We will rule out having text in the featured images to avoid the ‘double headline’ issue. If a featured graphic has to appear with text, the text will appear in a sans-serif font, and to the left or right of other elements in the graphic (not above or below). This way, the text will be visually distinct from the article headline and content.
I developed the theme on top of Bootstrap. This helped me make it responsive with minimal effort. The theme also generates social sharing links for each post, showing them under articles. Finally, I hooked all the features of the design in to the WordPress post editor and admin pages. This allows us to take advantage of the design’s elements without having to memorize a ton of short codes.
I hope you enjoy our new blog design as much as I enjoyed creating it. It clears up a lot of the visual confusion that came with the old design. And I hope it encourages us to write posts like this one more often. Until next time.