January 25, 2008. The blog homepage.

Revising the first draft

Earlier this week, I wrote about using the typeface Dolly in both experimental layouts and in a first draft of a homepage design. On reviewing the design, however, I found that it didn’t quite fit with what I wanted to achieve visually. Let me show you why it failed.

For those that missed it, here it is:

An abandoned homepage design

Although it contains almost every piece of required content for the homepage (with the exception of the price guide), it just doesn’t look right to me, for a few reasons. Four in particular really bothered me:

Problems with the first draft

Problem 1: the logo

I originally intended for the logo on the homepage to be larger than on interior pages, so that when a visitor comes there, they know straight away the name of the company.

Unfortunately, when I mocked up some sample interior pages, moving between them and homepage introduced a rather jarring visual effect. This change in the header also masked any changes in the navigation made between sections of the site.

Another problem it suffers from is one of size. To fit in with the hook, I had to make it quite big and, in my view, it is now obnoxiously so.

Problem 2: the hook

The words of the hook are disproportionately large and would hog the attention of the visitor. The hook therefore has all the subtlety of an air horn, making the page unbalanced.

I do think Dolly works well at this size but, in relation to other page elements, it’s just too much. This text must be shrunk.

Problem 3: the portfolio sample

The text here is very cramped… between three and five words a line. This makes reading difficult.

Of course, the text here is never intended to be very long, but once it exceeds two lines of text it becomes rather frustrating. This introduced an uncomfortable limitation in what I could write. I need more room!

Problem 4: the client quotes

In this first draft, I laid out the three sample quotes neatly along with the attributions, thinking I could frame them later. However, once I tried this, I found there was no room for a box, speech bubble, or anything of the sort.

There’s also no room for any controls such as links to more quotes on either another page or by scrolling through them.

More issues

I also felt there was too many type sizes. Both 14px and 15px sizes both appear, for reasons that made sense at the time but on review aren’t good enough. Dolly’s italic should not have been used for headings as the contrast between it and the body text was not strong enough.

But one of the biggest problems with this homepage design is the effect it has on the interior pages. I’ve used a six-column grid here, and I discovered that using this grid on the interior pages constrained me too much. For example, I found it impossible to design an article layout which contained pull-quotes and large images which was balanced correctly.

I threw out this version and recreated it with a twelve-column grid and, once this was done, resized and rearranged the page elements to suit.

Revised version

In my view, the version below fixes all of the above issues and looks damn good.

The revised design of the homepage

If you have any comments or questions, please post them below.

This is an Article. It was posted on January 25, 2008.

1 Comment

  1. Lar on Jan 25, 10:55 pm

    Really like it. Looking forward to seeing it in action

Commenting is closed for this article.