Content design – what makes a good landing page

Photo by divemasterking2000

I want a redesign. I need it to be forward thinking with easy access to most sections of the site. Although this sounds like I’m trying to sell something to a client, please bare with me. Creating an effective landing page (in my case the front page) is a must. This is not a tutorial, but a discussion, a way to put into perspective several elements of effective web-design. I’ll analyze a few blogs and web-sites that make good use of their front page and try to draw some conclusions that will help me in my own quest towards a full redesign.

There are several flaw in the current design, conceptual and technical. Technically there are some issues with IE that simply annoyed me to the point that I just ignored them. I want to integrate threaded comments and the footer isn’t exactly what I would like it to be. Also, I never got a chance to update to the latest Thematic version on which this blog is built because I didn’t need any of the new features. The content I had was simply happy with the current design.

From an usability point of view there are bigger problems with the design. Right now the articles are accessible through a right column with nothing but text and to be honest it looks like a big blurb. I want a better way to differentiate my categories, WordPress Themes and the services page.

To make it clearer this is what I want to achieve with this new redesign:

• Better navigation
• Easy access to all of the content
• Article suggestion at the end of each post
• Pixel perfect in all modern browsers
• Instant understanding of what this blog is about by new visitors (tough an about widget perhaps?)
• A more useful footer. This should be a place where one can find other info site related and introduce the visitor further inside the website

Inspiration

I’ve browsed around for ideas. Seeing and analyzing how others have solved their problems will help me come up with my own solutions for the content I have. There are quite a lot of websites and blogs that have really good content design and this is really important if you want your users to stay more on your website.

1. http://boagworld.com/ – Boagworld is the blog of Paul (the Wurzel) Boag who lives in the heart of rural Dorset. He produces a weekly podcast with Marcus (pop star) Lillington on all things relating to building and running websites.

What I found interesting were 4 areas:

1. The main menu. It’s one of the first things you see when you enter the website. The fact that it has only 4 elements (and one of them the search box) means that they removed a possible home link or a contact link thus giving more importance to the remaining 3 links
2. The banner. I really like this! Not just the graphics, but the idea behind it. This is the first thing I read once I entered the website. It has a clear message and you instantly know what to expect from this site: A podcast for those who design, develop and maintain websites. The RSS and iTunes buttons are a really nice touch also.
3. The blog post introduction. Made to draw your attention, it dose so not through graphics, but using a short and differently styled text that makes you curious. What do they have to say next?
4. Latest Shows. This is probably the second thing you see when you view the page, right after the banner. The way this was orchestrated is simply beautiful. We normally read from top left to bottom right, thus after you find out what this blog is about (which is a podcast) you immediately find the latest shows. There is absolutely no effort from the user to find what he’s looking for.

2. Lifehacker.com – Tips and Downloads for getting things done.

This is one type of design that is not really common online. Most themes and designs follow the header->menu->content->sidebar design. This on the other hand has several differences:

1. Top Featured Articles. Lifehacker dosen’t lose time introducing you to the latest and hottest news and articles.
2. Article Listing. There isn’t anything spectacular here. Each article excerpt has an image to the right and little text, but since there are so many articles here, the short info makes it easy to scan through and view just the ones that interest you.
3. Latest Comment. Instead of putting ads in the right bottom corner, they chose to engage the users in the conversation. While most blogs display just the number of comments, they show you the latest comment on that article.

2. Themeshaper.com – a WordPress-powered thinking machine disguised as a Blog, home of Thematic, the popular and free WordPress Theme Framework.

I really like the new Themeshaper redesign. As Ian said in a blog post, there are several reasons why this design works! This kind of complex landing page makes for a really good introduction and urges the user to go deeper into the website.

1. Featured product. This is the biggest thing on this page. It’s the first thing you see when you enter the website and you’re compelled to read about the product. There must be something good there, otherwise this wouldn’t be so big!
2. The short description. Meant to introduce new users to the site it dose a good job attracting attention. The color difference make it stand alone and clear, even when there’s so much info around it
3. The good, the bad and the ugly. Or more exactly “Must Read Ideas”, “Blog Design Tips” and “Recent Items From the Blog”. These are your introduction into the large article archive. From here you can navigate to different sections of the web-site and get your share of useful information.

As you can see what I’m really interested is a different content design, a landing page that will help users better navigate the entire web-site. The three web-sites I’ve presented are just a few. If you are looking for more great ways to arrange your content I would suggest taking a good look over:

• darrenhoyt.com
• outlawdesignblog.com
• problogger.net – there is a lot of content here, but somehow it’s manageable… the way color is used makes this possible

Now that I’ve done my homework is time to actually start arranging my content. I will come up with a wire frame shortly and hopefully you’ll be able to give me some feedback.