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
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.”
Attribution
Source : Link , Question Author : Seighth Hellsing , Answer Author : Stan