Menu

The Brads – Alignment in Design

Advertisement

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.

This was published on Aug 17, 2009

23 Comments

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

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 Aug 17 2009

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

Matthew Heidenreich Aug 17 2009

very simple and straightforward, nice read.

Sean McArthur Aug 17 2009

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

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.

Design to a grid, NEVER code to a grid.

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

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

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

Jason Santa Maria? He just a n00b. :P

Good article…uh….illustration.

Boussacsou Aug 18 2009

Awesome good info-comic !! very nice .

Jacob Gube Aug 18 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.

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

@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 Aug 19 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!

Good analysis of good page layout and alignment.

Roberto Aug 26 2009

Learning with comics. Nice.

Webdesigner Sep 01 2009

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

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 Mar 17 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!

@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 Mar 18 2010

Interesting. Loved it.

This comment section is closed. Please contact us if you have important new information about this post.

Advertisements
Partners