MoM Blog Design

In Uncategorized on October 18, 2010 at 7:00 am

For the redesign of the MoM blog we agreed on several issues: we wanted to make better use of screen real estate; we wanted to present more postings in a single overview; the presentation of the postings should be more inviting and engaging. We decided on a layout based around time-based hierarchy, giving the most recent posts more space on the front page, and set out to each make individual designs around these concepts. I was to concentrate on fonts and colour schemes.


I decided to go with a green theme, as green is evocative of computer design (circuit boards, terminals etc). I chose to use a lighter green for the titles. The colour I chose (hex# 6c8769) gives a fresh and inviting look to the titles, attracting the eye without causing clutter or distraction. The font for the titles along the top row (the most recent posts) is Georgia bold italic, in a large size. The size is dependant on the final layout of the blog, but a size of around 28 would be ideal. The body is in Trebuchet, size 14 (again, this is dependant upon the final layout and spacing). The larger font sizes attract attention and make it easier to read in a single glance, allowing the user to quickly scan the available postings. The colour of the body text is in a dark grey, a couple of shades lighter than black. This makes the text look softer and more pleasant while still retaining readability. The name of the author, the date of postings and the tags are in Trebuchet italic, in a smaller size (11) and in a lighter shade, so as not to distract from the body.

Clicked links would become underlined.

The posts beneath the top three most recent drop down in font size and get less space. The titles are no longer italicized. This is both because in smaller font sizes, italicized fonts become harder to read, and to differentiate between newer and older postings. Again, font sizes are dependant on the final designs, but ideally the sizes wouldn’t drop below 18 for titles and 12 for body.


The background is checkered white/ light grey (hex# f0f0e3), to segment the page and make it easier for the eye to shift focus from one section to the next. A single colour background with a lot of postings sharing screen real estate would become too much of a wall of text and would run the risk of disorienting the user.


As the posts descend further, the layout switches from a short excerpt of the post to displaying only a title. These titles would be presented in Arial bold, size 24, with the name of the author and the date in Arial Italic in a smaller size, around 16. The switch to Arial is to add more dynamic to the design and to further differentiate between the different posts.  These links would be set against a background, descending from dark green at the top most link and getting lighter further down. After several of these links, the oldest postings would be displayed in a simple list form, in Arial , font size 16 or so.

The different styles, fonts and shades of green within the design make for a more dynamic look while retaining readability and making it easy to navigate by clearly segmenting the page. The lines of green in different shades evoke an 8-bit, pixelated feeling while allowing for a clean, open look.

I haven’t put any work in designing a header. This one is merely a placeholder.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: