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: 13 12 11 10 9 8 7 6 5 4 3 … 1 » Show All
There are 124 comments (+Add)
Pages: 13 12 11 10 9 8 7 6 5 4 3 … 1 » Show All
Loading ...
124 Data Centre Cleaning http://www.8solutions.co.uk
August 23rd, 2010 at 6:08 am
Simple clean layouts work for me…the clearer the better. Grids are perfect for this
123 jonathan Smith http://www.sugarfreemedia.co.uk
August 18th, 2010 at 8:47 am
Great resource…don’t forget the SEO part!
122 Energy Manager http://www.tcsbasys.com
July 16th, 2010 at 4:14 pm
We have recently redesigned our website using 960. It’s a wonderful framework.
121 Basit Khan
July 1st, 2010 at 3:53 am
very nice I will follow your resource
120 Webdesign Berlin http://www.netgenerator.de
June 15th, 2010 at 12:32 am
Hey great compilation and very inspirative. Thanks a lot, that will be bookmarked right now
119 Minilik Tefsfaye
May 17th, 2010 at 11:44 am
Really, You are great. You showed me I am far behind you.
I will follow your resources.
118 Web Design http://exmmedia.com
April 28th, 2010 at 8:42 pm
very c ool thanks for sharinG!
117 Melanie http://www.gutschein-news.com
March 25th, 2010 at 9:07 am
Very nice collection of Grid and Column designs. We are planning a new blog, maybe we use such a style, too.
116 Stefan http://www.domainhandelnews.com
February 26th, 2010 at 4:54 am
Very nice collection. This is very inspiring for new projects.
115 Aditya Dipankar http://www.pixelguy.in
January 7th, 2010 at 1:10 pm
Utterly useful stuff. Specially for those beginning to getting introduced to grids in web/graphic design.