Header container alignment with the body container

Question

I always have this dilemma of choosing whether to align the navigation/header container with the content/body container.

here are two example images that shows what I am talking about. I outlined the alignment with green borders just to emphasize it. This first image shows a header that is aligned to the width of the content.

ALIGNED HEADER WITH CONTENT            

This second image however shows the header is unaligned to the content.

UNALIGNED HEADER WITH CONTENT

Every single time I am developing a website, I always find myself stuck in a rut when it comes to deciding which of the two alignments should I choose.

Of course it all comes down to "Which one fits the user experience the best". But in the case of a current website that I am developing, both of them are great, and this might not be a big of a deal, but I want to know and hear about your opinions whether to align it or not.

Maybe there is a psychological explanation about each design but that is beyond me.

For the sake of argument, I will explain my point of view with both of these designs.

Aligned header To my experience and "taste", this aligned header seems to subconsciously provide uniformity. No matter what the website is about, as a web designer/graphic designer, whenever I see a site that has aligned header and body content, it tells me that this website if "formal". If so, then I (or people like myself) who are keen on observing those details, would subconsiously expect that the contents of the website are "formal". More like a business type of site.

UNALIGNED DESIGN On the other hand, when I see an unaligned type of header design, it somehow makes me think about the freedom of designing without any boundaries. Not abiding by a constrained border. It somehow makes me feel free, as if there are no boundaries and that the contents of the website are not too "Formal".

Both of these designs can be integrated with any kind of company and most of the time, it just comes down to what most people like. But to put an end to this, I want to ask for your opinions as to which design should fit my needs better.

To make it easier for you to help me, here are the categories of the website I am developing.

• Music Blog posting articles, reviews, videos, chords, and almost anything related to music.
• Social networking I am also incorporating a social networking style of approach here where users can post their own articles, reviews, videos, chords, etc.

I intend for the homepage to show articles posted in the site, more like a typical blog. But you can also create an account and start posting.

This is where my dilemma comes into place. Which of the two alignment designs do you think fits best for my needs?

I am aware that I am overthinking things sometimes, but the web had tons of people like me who rarely shares these kinds of things, and a lot of times, these are the things that improve web/graphic design. It is how we improved the design of the web. Nevertheless, I want to hear your advice.

Answer 1

Alignment is one of the basic Principles of Design. It defines a reliable and predictable pattern of human behaviour. There are up to eight of them, depending on your reference source.

It is taken from the "Psychological Principles of Simplicity" formalized by Gestalt psychologists in the last century around 1920.

You've put your finger on exactly why alignment is such a powerful concept.

Alignment of design/page elements by edges or by their centres suggests by implication formality, order, organization, rigidity, etc. Think of anything appearing official. It's as you've mentioned.

Lack of alignment emphasizes freedom from those qualities. Variety, spontaneity, the sudden, and the unexpected. Think of a happy, busy kindergarten playground at recess.

Fine. You want opinions.

Let the content drive your presentation of it. Once you've come to an understanding of the content, you can/will find it easier to decide what it should look like.

Music Blogs suggest excitement to me. Fun, shiny, busy, distracted, urgency, privilege, excitement, enjoyment, fleeting opportunity, etc.

Social Networking suggest strong need for identity and association. Calm, cool, and collected would be my direction. Strength, unity, purpose, direction, etc.

One more thing™ Whatever design direction you choose for each specific case, consistent functionality (preserve the metaphor) will be appreciated by your "audience."

Answer 2

Sometimes a header is intended to be seen as separate to the content. I often find myself considering the times when we used to use frames and frameset to build our websites.

In your examples you have shown exactly what that visually leads to.

The first example can bee seen as one congruent frame. The header remains the header for that entire block. Just as the Graphic Design header does here on Stack Exchange.

In your second example, you needed to draw two boxes. They are seen as two separate groups of information. The website used doesn't seem a great example of the why but the way you saw the data shows it.
Again, take Stack Exchange as an example. While the content is aligned anyway, there is a clear distinction between the Stack Exchange top bar and the Graphic Design header here.
This helps to distinguish that while Stack Exchange is the top level container for this page, it is not actually part of the content.

Perhaps an example is if the header is the front page of a novel, hinting and informing of the content contained within; then an aligned header makes it feel as if they are connected. If the header is a display folder that a company is storing a welcome pack and company information in; then the header is branding and not tied directly to the content, they are detached from one another.

Often, it seems the decision is simply that it's easier to get one line of known length to size well to fit the width of your screen, but when it comes to variable content it's easier to have a grid of fixed breakpoints.

Answer 3

I don't know which one is better for your needs, but in perception is quite easy to explain.

At the left we see a rectangle inside a square. The square perceptively is a very strong figure since itself is one of the three main geometric shapes. So the inner rectangle is subordinated to its presence.

The right image shows a T made inside a square. In that case, the T is an irregular shape and takes away strength from the square, it is more immediate to perceive and for that reason more relevant visually.

In other words, at the left a rectangle inside a square, visually the square wins. At the right, a T inside a square, the T wins.

In web design I always see the first case like a design subordinated to the browser limits for some kind of practical needs. That's the case of many newsletters.

The second case is more valid as a design resource because take the browser window not as a reference but as a graphic design element: the frame.

On the other hand, if the browser has its own horizontal menu at the top, the first option appears subordinate to it, while the second creates its own submenu below, relegating the browser menu.

If the browser puts its limits, why create new ones?