Blueprints
Photo by Todd Ehlers

This is the first part of an eight-part series of articles about designing clean websites that still make a big impact, by using simple layout, beutifull typography and striking photography.

It’s not enough to “know how to use” Photoshop in order to be a web designer, but you don’t necessarily need a degree in graphic design either (although it sure helps!). Basically what I am trying to prove (and it’s something I always believed in) is that common sense goes a long way when it comes to web design.

In this article I’ll talk about web page design planning, wireframing and creating layouts, providing some links to really usefull online tools and resources. Let’s go!

Know your audience, know the content

I bet you heard this plenty of times, right? Well, trust me: this never gets old! Proper planning, wireframing and layout will save you a lot of trouble down the road, so you want to make sure you get it right. Users and content should both influence the way you plan the website’s layout and I’ll tell you why:

Determine page width

While 1024px seems to be the standard nowadays, there are times when you need to use 800px. Or on the contrary… maybe 1024px is not enough. It also helps you determine whether a fixed (my favorite) or fluid layout is more appropriate. Your client know his target audience better, so make sure you ask him about it.

Resources:

Prioritize top to bottom

There only so much content you can squeeze above the fold (although I’m not a big fan of the stereotype), so you have to prioritize. Sure, color, font size and other tricks will help you organize things later on, but first you need to determine what your layout looks like from top (important) to bottom (less important).

Use grid based design

Once you have the major vertical blocks in place, it’s time to think about how you will structure the content horizontally. In some cases you might want to use the full page width (header) or split the block into two columns (content + side panel) or even three columns (showcase work, services, etc. on the homepage).

Resources:

When it comes to prioritizing, grids, columns and wireframing, there’s just one article out there that you need to read: Redesigning the ExpressionEngine Site. Period! That’s all you need to know! If you don’t suddenly feel enlightened, with a big grin on your face after reading this article, then maybe you’re in the wrong business, my friend. ;)

Use tabs, sliders, carousels

You want to try and keep your page (especially your homepage) as clean as possible, using a generous amount of white space. At least that’s my philosophy! But there are cases (like for most corporate websites out there) when you have to squeeze as much content as possible on the homepage. And these UI elements I mentioned can do wonders when used properly and with usability in mind.

Resources:

jQuery and JavaScript Coding: Examples and Best Practices – Again, no point runningaround the Interwebs for jQuery resources. This article from Smashing Magazine has everything you need!

Best practices in layout design

Cisco Systems

Layout Cisco

The layout is split into four main sections, from top to bottom, making use of a big carousel in the header (even though in Flash this time) and also a fews small ones in the bottom sections, as well as a dropdown.

It’s a perfect example of how you can make good use of available space, allowing a lot of content on the homepage, but also keeping a clean look. The Cisco website is a also a “short website” (as I like to call them), similar to what Apple is doing for quite some time. Landing page design at its best, if you ask me.

MailChimp

Layout MailChimp

The MailChimp website has been showcased in design galleries and roundups many, many times. And it’s easy to see why! There are so many examples of design best practices in their homepage design (and throughout the website, for that matter).

This time we’re looking at a “long website” (you saw that coming, right?), but it’s also the perfect example to prove “vertical scroll critics” wrong! Vertical scroll is not bad! I agree, it depends on the type of website you’re building, but for a software product website, vertical scroll is not bad! (did I say that already?). You just have to master sections and grid design and you’ll be fine.

Look at Basecamp, for God’s sake! At first you might think they’re doing something wrong, but give that layout 10 seconds and you’ll say to yourself: “My God, this makes total sense!” :) . I’m not saying there isn’t any room for improvement, but the way they manage to squeeze all that info on the homepage and still keep it easy to digest is mondblowing. How they do it? Grid based designm that’s how!

FileMaker

Layout FileMaker

Ok, so the recipe is pretty simple: split the page into sections, top to bottom, then each section into columns. But why stop there? Why not split the columns into more horizontal blocks? No reason why you shouldn’t! Just check how FileMaker is doing it: the third column from section four is split into 2 blocks as well. And if you look more closely, even the first two columns are split into (related this time) content blocks.

Is there a limit to this whole “divide and conquer” strategy? Well… yes there should be. How do you know when to stop? Simple! The content will tell you. Just remember that big means more important, small means less important. You’ll probably say “Thanks for the tip, Obvious Adrian!”, but you’ll be amazed at how many people fail to use this common sense technique properly.

More common sense web design tips?

You bet! This time I won’t stay hidden for too long before posting the next article from the series: Common Sense Tips for Using Web Design Color Schemes. I’ll be leaving on vacation next Saturday, but I hope to get a few more articles ready by then and put WordPress on auto-pilot. ;)