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
When & how to use a distinct
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
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
And here, the top section contents
simply sit boldly outside the main column area.