The Brads – Alignment in Design

Aug 17 2009 by Brad Colbow | 23 Comments

The alignment of elements in a web page is a very important aspect of a good web design. In this info-comic, The Brads illustrate important concepts and best practices for alignment.

The Brads - Alignment in Design - leading image

The Bads – Alignment in Design

The Bads - Alignment in Design - info-comic

Links mentioned in the webcomic

Other info-comics by Brad Colbow

About the Illustrator

Brad Colbow is a freelance graphic and web designer based in Cleveland, Ohio. He’s also the creator of the web comic, The Brads. You can see his work at Brad Colbow Design. If you’d like to keep up with Brad, follow him on Twitter or connect with him via LinkedIn.

23 Comments

Mike H

August 17th, 2009

Whoops – typo: reading right-to-left? Not in my western society!

Andy

August 17th, 2009

I’m an opponent of grids for the following reason:
You can’t change the layout through CSS without also rewriting the markup, something that goes against the principle of Separation of Concerns. In that sense, it’s very much like a table.

Sonali Agrawal

August 17th, 2009

Wow…This is just awesome…Loving it already :)

Matthew Heidenreich

August 17th, 2009

very simple and straightforward, nice read.

Sean McArthur

August 17th, 2009

You said it twice: We read from right to left. Which is backwards. :/

Jon

August 17th, 2009

Great post. I completely agree with the concept of grid-based layouts. There is so much freedom when a little bit of structure is provided.

I did want to point out through that we are conditioned to read left to right, not right to left.

Cheers.

Liam

August 17th, 2009

Design to a grid, NEVER code to a grid.

Brad C

August 17th, 2009

Not sure how that one got past me. You’re all right, it is left to right.

Deus

August 17th, 2009

A comic-style ‘tutorial’, or any piece of useful information for that matter, is fun to read and never gets boring :) Great job!

liam

August 17th, 2009

Another fantastic comic with some real useful pointers. Nice work Brad.

Leon

August 17th, 2009

Jason Santa Maria? He just a n00b. :P

Good article…uh….illustration.

Boussacsou

August 18th, 2009

Awesome good info-comic !! very nice .

Jacob Gube

August 18th, 2009

Hi everyone, we’ve updated the info-comic and I apologize for my oversight on the matter. Brad was kind enough to revise it as needed (thanks @Brad C).

@Andy: I like the grid, and I would use it simply because it’s the most popular/recognizable layout (the concept itself dates back to World War II’ish era) which people are accustomed to and it makes laying out a web page a systematic process (like @Jon said – it gives us some structure). I also find it aesthetically-pleasing and harmonic.

With that said, I won’t follow grid-based alignment if I think another way is better and I have no qualms with breaking the grid for just some elements on a web page even when everything else is grid-aligned.

Marcel

August 18th, 2009

Great job with The Brads. It’s funnny and straight to the point!

Andy

August 18th, 2009

@Jacob Gube: Just to make myself clear so there are no misunderstandings. I have no issues with the practice of aligning things according to a grid, all is fine and well with that.

My issue is that of people doing that with markup (e.g. classnames that read “grid01″ etc) which would lock up the layout even for future iterations of the site. Instead of using grids in the markup I’d instead suggest to use them during the design process (photoshop and the like) and then use classnames that describe the content rather than the layout.

Ashely Adams

August 19th, 2009

wow! a webcomic to make you understand the importance of grids. i like that very much.i too agree with the grid based designs. they are a lot less chaotic and looks good!

Mark

August 19th, 2009

Good analysis of good page layout and alignment.

Roberto

August 26th, 2009

Learning with comics. Nice.

Webdesigner

September 1st, 2009

Nice one, there is so little magic needed to make a website looks better…

adam

September 18th, 2009

i wasn’t especially interested in the content — relevant thought it is — but the comic style knocked me out. stand out high class creative stuff. if only i could……..

Wills Bithrey

March 17th, 2010

Wow, this is a really cool article. I’ve never seen “The Brads” before but i’m hunting more comic strips down now, this is awesome!

Thanks!

Jaime

March 18th, 2010

@Andy: The point of a grid framework is not to deploy to production with alpha, omega, grid-04, etc classes. You design to a visual grid, prototype with the framework code, and when you’re got everything ready you revise your markup to make it semantic and adjust the css to match it. People that leave the frameworks grid classes on the markup are just doing it wrong regarding semantics. You might think it’s not worth it to have the prototyping step and go directly to the endgame… but trust me, adding the step makes everything easier and faster.

Pusparaj

March 18th, 2010

Interesting. Loved it.

Leave a Comment

Subscribe to the comments on this article.