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: 11 10 9 8 7 6 5 4 3 2 1 » Show All
There are 105 comments (+Add)
Pages: 11 10 9 8 7 6 5 4 3 2 1 » Show All
Post Your Comments
Loading ...
105 Ash http://www.smallbizexpress.com
June 10th, 2009 at 5:12 am
Some very good work here . Definitely Impressed .
104 Website Designer Steve http://www.microedge.co.uk
May 10th, 2009 at 8:03 am
Probably the most inspiring array of website designs all in one article. Website designers can learn a lot from this article.
103 outthislife
February 9th, 2009 at 3:57 pm
most of those are pretty bad imo. also wtf is w/ the letter spacing in fields?
102 Spotless http://www.teknikleen.co.uk
February 7th, 2009 at 12:51 pm
Great designs. Such inspiration.
101 visit
January 30th, 2009 at 2:42 am
This site is interesting as well as informative. Enjoyed browsing through the site. Keep up the good work. Greetings..
100 Colin http://www.memorymattress2go.co.uk
January 26th, 2009 at 4:26 pm
This has made me think about re designing our site!
99 sanat http://student.cankaya.edu.tr/~c0511055/
January 22nd, 2009 at 11:25 am
thanks
98 linda http://www.internetmemorymattress.co.uk
January 20th, 2009 at 4:28 pm
Wow, too much selection, really great layouts
97 Stephen Fairbanks http://www.ghosthorses.co.uk
January 19th, 2009 at 8:10 am
This is really helpful. There’s too many examples around to do with certain popular graphical styles, yet few people take the time to get the grid structure correct.
Thanking you once more.
96 Steve | Web designer http://www.stevesims.com
December 16th, 2008 at 1:55 pm
It makes you wonder how some people come up with the inspiration for these sites in the first place, let alone code some of them…