The Brads – Alignment in Design
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 Bads – Alignment in Design
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