2

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 enter image description here            

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

UNALIGNED HEADER WITH CONTENT enter image description here

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.

  • Why not make use of that space along the side of the main (centered) content? – Zach Saucier Jun 24 '18 at 13:11
  • In web design, there is constant use of white space which leaves most people with the same question as yours. The reason for leaving those spaces is to have a visual buffer. Something to let your eyes rest on. If they were to put something on those spaces, the website would appear cluttered and if not done correctly, would beat the purpose of placing the elements/articles in the right place to capture the attention of the users – Seighth Hellsing Jun 24 '18 at 17:07
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."

  • I like that there was actually a psychological study about these topics. I know that it was hard to answer my question, but you have given great points about this. I ended up creating a "Change Theme" feature because I can't decide which of the two designs I would choose. Now with two themes to maintain, the alignment is the least of my concerns and I am loving both these themes and find myself constantly switching between them. I guess the best answer here is to "use both.". Which in my case is what I actually did. The question is only about my "dilemma" after all. – Seighth Hellsing Jun 28 '18 at 15:04
1

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.

Graphic Design header 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.

Stack Exchange top bar

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.

  • I wish I could vote for two correct answers but sadly I can't. You also gave nice points and insights for this, I appreciate that. But actually, the stackoverflow header that you mentioned is also aligned with the content body. Nonetheless, I understand what your point is and is educational for me. I will keep these things in mind for future projects! – Seighth Hellsing Jun 28 '18 at 15:08
  • @SeighthHellsing if you think that more than one answer adds to the conversation, you can upvote them – Luke Jun 28 '18 at 22:52
0

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

squares

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?

limits

  • This is simple re-phrasing of the original question; but, it does not answer the question. It is a lengthy comment. – Stan Jun 26 '18 at 20:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.