Advertisements

General Musing

blaze your trail

Simplicity Is Key – Trends in Website Design

with 2 comments

I’ve been noticing a trend in the frontpage of website design, which I have briefly modeled below. I have an idea that this might have been inspired by Google’s “more is less” for their landing page, although they tend to go for less simplicity with the exception of search.

Firstly it’s the two or three tone webpage, a colored band of content in the centre of the page separating the top link bar and the bottom rest space. In the top row the navigation is placed slightly left aligned, with or without a small logo preceding it on the absolute left. Usually the sign-in and -up possibilities are aligned at the right of the page.

The centre band usually contains a large logo left aligned or a large non-descriptive image, left there is possible a login box, although usually there is a sign-up or pricing box advertising the paid for version. Underneath there are three boxed the left box containing video or or an interactive feature, the centre mentioning a special feature – or niche feature – of the product offered, and the right hand box containing “Something Special”, which can be anything like mobile applications, Google Apps or platforms supported.

The top of the lower band usually also contains 3 boxes, the left containing video examples – if not used before. The centre contains the other common features of the product. And the right is often a media exposure box, although it can also contain a social media box, such as a Twitter or FaceBook stream. The next row in the lower band usually contains a broad box containing blog or news items, although customer or media feedback is also very common here, and the right box contains that what wasn’t included in the upper box. Finally the last row, if it’s there, contains any 2 or 3 box combination with any of the items not mentioned above, although it often contains a social media box on the right when it hasn’t been mentioned above.

The lowest part of the site, mostly contains a sitemap, with direct links to most of the important pages on the site.

So now you know how it’s made.

Advertisements

Written by Daniël W. Crompton (webhat)

November 10, 2010 at 3:11 pm

Posted in technology, web

Tagged with , , ,

2 Responses

Subscribe to comments with RSS.

  1. Erm, no you don’t. Now you know how it’s structured. Which is obvious if you’ve got brains and look at it.

    Simplicity was always the key to the web user’s attention span. Design was never the way – functionality always is.

    The sooner ppl realize that, from the word “go”, web and design have been 2 entirely different (if not always separate) werlds, the sooner users will have a better web.

    Chielie

    November 10, 2010 at 4:38 pm

    • The tagline was a reference to the Discovery Channel’s program How it’s made. Simplicity is a design decision, which I hope you realize if you’ve got brains. Although I wasn’t explaining the reasons for these design decisions – which I would be glad to elaborate with heat maps some time in the future – there are certainly reasons for structuring your design in these ways.

      This article is a comment on the monotone simplified structure which is being implemented specifically for web applications or websites which are designed for use. When we examine many of these websites you can see that broadsheet webdesign with bars containing menus at the left and right and centered content, which we see in sites like the the Dutch newspaper De Telegraaf or the US newspaper The New York Times, and the tabloid design which is what I describe here and can be seen in the likes of CNN.

      I see a clear trend which is moving from broadsheet to tabloid, and I believe this is due to the use of in-site statistical data such as heat maps or in-page analytics.

      webhat

      November 10, 2010 at 6:55 pm


Please 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: