Feb 20
Grid and Column Designs
If you are looking for inspiration for grid and column design, here is a nice collection of 32 column-based websites. These sites show how grid layout can be applied on various type of sites — whether a massive content editorial site or just a personal blog. Check out how the layout can be divided into 3 columns, 4 columns, a mixture of narrow and wide columns.
Editorial Sites
First let’s check out some of the famous editorial sites. Can you imagine how these sites would be organized without a grid system due to their massive content?
- The New York Times
- National Post
- Guardian
- Times Online
- Frieze Magazine
- Wired News
- The Morning News
- Porfolio
- We Are Survival Machines
- UX Magazine
Grid in blog design
Here are some of the blogs that adapted the grid style. I have to specially mention Khoi Vinh, who played the big part in grid web design.
- AI Alex
- 5 Thirty One
- Subtraction
- Astheria
- Jeff Croft
- Hell Yeah Dude
- Jon Tangerine
- Mark Boulton Design
- The Technology Herald
- Gapers Block
Break out of the box
Column design doesn’t mean you have to be within the box. See how you can break out of the box by using images to form unsymmetrical shapes.
- UC Berkeley
- J R Velasco
- Chrizdee
- AIGA Los Angeles
Columns on eye-catchy background
Getting bored of the white background? Here are some good samples of column layout on graphical background.
- 31Three
- A Tennessee Winter
- Sundance Film Festival
- Ungarbage
Boxes and Columns
Content can also be organized into evenly distributed columns and rows.
- Kineda
- Rainfall Daffinson
- Erskine Corp
- Stuff and Non Sense
Useful Links
- Subtraction: Grid Computing… and Design
- TutorialBlog - Web Design Grid System Links
- Design Grid Systems by Mark Boulton
- Smashing Magazine - Designing with Grid-Based Approach
- Mezzoblue - Columns and Grids
- Design by Grid (gallery site)
Review: XHTML Challenge jQuery Tutorials for Designers
Comments
Pages: 7 6 5 4 3 2 1 » Show All
There are 70 comments (+Add)
Pages: 7 6 5 4 3 2 1 » Show All
Post Your Comments
Flash CS3 Components from FlashloadedSpeed up your Flash development with easy to use Flash Components: Menus, Slideshows, FLV Player & more!
Loading ...
70 Web Design Denver http://www.shycon.com
May 5th, 2008 at 2:13 pm
Very cool post. Grid design is a must when it comes to heavy content websites.
69 carlo http://www.tarozzi.net
May 3rd, 2008 at 6:05 am
great page. Thank you
68 hary http://-------------
May 1st, 2008 at 4:12 am
this page make me happ. thanks
67 Felipe
April 24th, 2008 at 6:54 pm
Globo.com is the very good example
66 snarkycat http://www.sharonrosenfeld.com
April 24th, 2008 at 8:42 am
I’m not seeing a lot of ecommerce sites here that really stick to grid layouts. Does anyone have suggestions? I’m doing research.
Thanks
65 Jac
April 21st, 2008 at 4:42 am
Check out http://www.nme.com; It’s one of my favourites
64 Eric http://www.ebenoit.com
April 14th, 2008 at 7:49 pm
really like the NY Times….I think they bring the traditional newspaper style to the web really well.
63 KG Lew http://www.oneyearmillionaire.net
April 9th, 2008 at 4:02 am
This is a great post.. there is so much good inspiration here to have me designing for a while
62 ilan http://www.ucretsizilan.net
April 2nd, 2008 at 10:33 am
Cool. Great post. thank you
61 nexenator http://istylr.com
April 1st, 2008 at 6:25 am
Don’t want to advertise here but I think the iStylr (http://iStylr.com) is worth a mention, too. It allows the creation of multicolumn/grid layouts online in a wisiwig like css generator.