Separate top sections

It means making the top of the screen (the chief branding & navigation region) separate from the rest (the chief content).

Obviously, this approach is not new to us. This is a good thought and it has been utilized without end but it's being used more than ever now, and the difference is often stronger.

See how clear the "page-tops" are in these 3 samples, even at small scale:

Why distinct top sections are good

The top section says "Here's the top of the page" It sounds apparent but it is always a good feeling to realize, without a doubt, where the starting of the page is.

It also begins the website or page experience with a stronger and bolder statement. This is just oh-so 2.0! We like strong, easy, bold approach.

2 of these top-sections contain just branding (Protolize, Mediconmedia), 1 has just navigation (Cross Connector).

The weakness of Cross Connector, in my view, is that the logo comes after the nav. I prefer the nav to be high-up, and clear (like e.g. Simple Bits).

When & how to use a distinct top section

On any site, both the main branding and main navigation should be obvious, bold and clear.

So it's a good idea to create a clear space at the top of a web site design that positions the logo and nav boldly.

Always place the logo on the top of the screen in the right side. I'd always recommend putting your main navigation right after it.

It absolutely would be a great idea to mark the top of the page with a segment that marks out the high-level screen features as distinct from the main site content.

The top segment must be visually different from the rest of the content of the web page. The strongest way to differentiate is to use a bold, solid block of different colour or tone, but there are alternatives.

Here are 2 examples where the top section is separated with a solid line, rather than being solid colour itself.

And here, the top section contents simply sit boldly outside the main column area.