Grid-based design is obviously a popular approach in modern web design. For designers that use grids, this post includes links to useful tools that can improve your efficiency and effectiveness, as well as some articles for advanced techniques. For those of you who are not as familiar with the details of grid-based design, there are plenty of articles and learning resources here.
Articles:
Grids Are Good - Presentation in a PDF document
Grid (page layout) - Wikipedia
Why Use a Grid - Mark Boulton
5 Simple Steps to Designing Grid Systems: Preface - Mark Boulton
5 Simple Steps to Designing Grid Systems: Part 1 - Mark Boulton
5 Simple Steps to Designing Grid Systems: Part 2 - Mark Boulton
5 Simple Steps to Designing Grid Systems: Part 3 - Mark Boulton
5 Simple Steps to Designing Grid Systems: Part 4 - Mark Boulton
5 Simple Steps to Designing Grid Systems: Part 5 - Mark Boulton
Feeling Your Way Around Grids - Mark Boulton
Oh Yeeaahh! - Subtraction
The Funniest Grid You Ever Saw - Subtraction
Grid Computing… And Design - Subtraction
Grid-Based Design 101 - Most Inspired
Grid-Based Design: Six Creative Column Techniques - Smashing Magazine
Using a Background Image Grid to Layout Your Website - Smiley Cat Web Design Blog
Thinking Outside the Grid - A List Apart
Setting Type on the Web to a Baseline Grid - A List Apart
Columns and Grids - Mezzoblue
Grid Design, A Classic Beauty for Whitespace Freaks - Wisdump.
Design Grids for Web Pages - Web Style Guide
Grid Tips for Photoshop Users - Made by Elephant
Grids: an Invisible Foundation - Ideabook.com
Using Spreadsheets to Brainstorm Grid Layouts - The Design Canopy
Grids Make Eyes Happy: How to Use Grids - CROWDCTRL
Grids: Show ‘Em if You Got ‘Em - Apples to Oranges
Designing Grid Systems for Flash - AisleOne
Gridding the 960 - Cameron Moll
Vertical Grids - Position is Everything
Grid-Based Design - Welie
Introduction to Layout Grids - Adobe
Cutting and Sewing Grid-Based Design: Working with Other People’s Comps - urlgreyhot
Grid-Based Design: Designing Blog Theme Templates - urlgreyhot
The Grid: Structure of Design - Poynter Online
Developing the Grid that Supports Your Design - Emmanuel Blogonic
Grids: Order Out of Choas - About.com
Gridlasticness - SimpleBits
Ruler from Airbag - Creating a background image to help with your grid design
Galleries:
Design By Grid - CSS gallery for grid-based design
Gird and Column Designs - Web Designer Wall
30 Blogs with Grid Based Design - CSS Juice
Tools:
Grid Designer 2 - A popular online tool for setting up a grid
Grid Maker - A simple web application to design a grid
GridMaker 2 - A downloadable tool to assist with creating mockups
960 Grid System - Set up a grid for the common 960 width.
Grid Calculator - Another online tool for creating grids
TypoGridder - Helps with the baseline grid
CSS Grid Calculator - A simple online calculator for setting up a grid
Web Page Layout Grid - A large image to use in the background when designing with a grid
Browser Grid - Shows the maximum safe sizes for different resolutions
Layout Grid Bookmarklet - A design tool from Andy Budd
Grid Overlay Bookmarklet - A variation of Andy Budd’s tool
Phiculator - A simple tool which, given any number, will calculate the corresponding number according to the golden ratio.
Blueprint CSS:
Blueprint CSS - CSS framework which aims to cut down on your CSS development time
Links to Blueprint Resources - A number of resources are linked here, so are mentioned below
Photoshop Template for Blueprint CSS Comps - Helps you to create grids with Photoshop.
Yahoo Developer Network:
Page Grids - An article about designing with grids.
YUI Grids CSS - Foundational CSS with 4 preset widths.
CSS Grid Builder - Grid-building tool from YUI.
How to Play with Yahoo Grids CSS - Article from Black Mountain.
WordPress Themes:
Particles - A free grid-based WordPress theme.
unGrid - A free grid-based WordPress theme.
Bedrock - Premium grid WordPress theme for charity.
April 1st, 2008
This is one comprehensive guide list thathelps me understand what this is, something new to me and it’s gonna take me along since every step is pathed for me.
April 1st, 2008
This is the best guide I have seen on the net.
April 1st, 2008
[...] 65 Resources for Grid-Based Design Related Stuff70 Resources Professional Web Designers Choose to Follow6 Web Design Tips from Leonardo da VinciNiche GalleriesHow to ruin your website in 10 easy stepsWhat type of designer are you? : Alicia Harper DesignQuestions to Ask Yourself When a Design is Coming Up Short of Your Expectations | Vandelay Website Design99 Graphic Design ResourcesGrid Designer 212 Steps to Creating a Professional Web Design | Professional Web Design BlogWeb Design: From Good to Great in 25 Links ~ Ten Thousand Things [...]
April 1st, 2008
useful indeed…
April 1st, 2008
65 Resources for Grid-Based Design…
[...]A collection of tools, article, tutorials, galleries, and more for designers that use grids or want to learn more about designing with grids.[...]…
April 1st, 2008
Thanks for featuring my theme, Steven. This is a great resource you’ve put together.
April 1st, 2008
A great baseline grid tool for Firefox/Safari users:
http://robgoodlatte.com/2007/07/31/syncotype-your-baselines/
Kevin
April 1st, 2008
[...] maquetados. Para los que no tengan muy claro de que va el diseño con grid, desde vandelay sacan un recopilatorio con enlaces hacía información y recursos sobre el tema. Encontramos artículos y otras listas, [...]
April 1st, 2008
65 Resources for Grid-Based Design | Vandelay Website Design…
Grid based design is obviously a popular approach in modern web design Ford designers that use grids this post includes links to useful tools that can improve your efficiency and effectiveness as well as some articles for advanced techniques For th…
April 1st, 2008
[...] 65 Resources for Grid-Based Design | Vandelay Website Design Grid-based design is obviously a popular approach in modern web design. Ford designers that use grids, this post includes links to useful tools that can improve your efficiency and effectiveness, as well as some articles for advanced techniques. For those of you who are not as familiar with the details of grid-based design, there are plenty of articles and learning resources here. [...]
April 1st, 2008
[...] Layout Grid Bookmarklet (via Vandelay Design) April 1, 2008 [...]
April 1st, 2008
[...] 65 Resources for Grid-Based Design [...]
April 1st, 2008
Hi everyone,
Thanks for your comments. I’m glad this collection will be helpful.
Kevin,
Thanks for the additional resource.
April 2nd, 2008
[...] la mode. Voici une compilation de ressources pour comprendre et maitriser “la chose” : 65 Resources for Grid-Based Design. <début parenthèse>Pendant qu’on y est, je tenais à vous informer que le nouveau [...]
April 2nd, 2008
[...] 65 Resources for Grid-Based Design | Vandelay Website Design [...]
April 2nd, 2008
[...] 65 Resources for Grid-Based Design | Vandelay Website Design (tags: grid css layout resources) [...]
April 3rd, 2008
[...] - 74 Great Web Apps for Web Designers we have forgotten about- 70 Resources Professional Web Designers Choose to Follow- 65 Resources for Grid-Based Design [...]
April 4th, 2008
[...] 65 Resources for Grid-Based Design | Vandelay Website Design [...]
April 6th, 2008
[...] 65 Resources for Grid-Based Design [...]
April 8th, 2008
[...] 65 Links zum Thema Grid Layouts [...]
April 9th, 2008
[...] 65 Resources for Grid-Based Design [...]
April 12th, 2008
[...] 65 Resources for Grid-Based Design [...]
April 12th, 2008
[...] 65 Resources for Grid-Based Design: de titel zegt genoeg! [...]
April 12th, 2008
WOW, amazing resource. There are some really great tutorials listed, thank you very much…
Bookmarked!
April 14th, 2008
Thanks for the great resource! bookmarked
April 17th, 2008
[...] content and whitespace and how to best position elements to achieve a positive user experience. Vandelaydesign has an excellent post on grid resources with links to the most useful articles, tutorials and tools [...]
April 19th, 2008
[...] 65 Resources for Grid-Based Design | Vandelay Website Design [...]
April 20th, 2008
[...] Link: Vandelay Website Design [...]
April 26th, 2008
WOW, ultimate resource. There are some really great tutorials listed here with, thank you very much…
May 3rd, 2008
[...] 65 Resources for Grid-Based Design [...]
May 4th, 2008
I’ve put together a simple photoshop template which gives a great starting point for designing web sites in Photoshop. It’s available for download here.
http://www.designinginteractive.com/design/sharing-the-grid/
May 5th, 2008
Here we have designed plethora of websites & having a huge customized web designed portfolio. But right now we are lagging behind from client list.
Why & how my competitors are fetching my clients.
May 6th, 2008
[...] 65 Resources for Grid-Based Design [...]
May 6th, 2008
[...] 65 Resources for Grid-Based Design [...]
May 21st, 2008
[...] Subtraction - Oh Yeeaahh! (or How to Use Grid in a Layout) Tutorial Blog.Vandelay Design - 65 Resources for Grid-Based Design.W3 - CSS and Grid Layout. Web Designer Wall - Grid and Column Designs. Revolution - The Premium [...]
June 9th, 2008
[...] Vandelay Design - 65 Resources for Grid-Based Design. [...]
June 28th, 2008
[...] 65 Resources for Grid-Based Design | Vandelay Website Design 65 Resources for Grid-Based Design [...]
June 30th, 2008
[...] o retícula (grids) de fondo. es un enfoque popular en el diseño actual de páginas web. En VANDELAYDESIGN tenemos el artículo 65 Resources for Grid-Based Design, incluye enlaces a herramientas útiles que [...]
June 30th, 2008
[...] Für Gridnicks [...]
July 5th, 2008
[...] Vandelay Design - 65 Resources for Grid-Based Design. [...]
July 5th, 2008
[...] it’s here [...]
July 11th, 2008
Thanks so much. It useful for me !
July 20th, 2008
[...] 65 Resources for Grid-Based Design [...]
September 14th, 2008
[...] 65 Resources for Grid-Based Design [...]
September 25th, 2008
[...] Recursos para el diseño basado en retículas (escribiré más adelante sobre ello…) y una aproximación a los Frameworks CSS. [...]
March 13th, 2009
[...] Grid based resources from Vandelay Design Blog [...]
May 2nd, 2009
[...] 65 Resources for Grid-Based Design [...]
May 9th, 2009
Hi,
Great list of grid resources! Designing to some kind of grid has greatly sped up my designs and made them better and cleaner too. I use several different grid layouts to help in the early stages of a design.
I recently made available a Photoshop Template that I use to design on a grid, which combines all of the different grid options.
The Web Design Starter Grid has 10×10, 60×60 grids fitting into a 960px layout and 50×50 grids for a 1000px layout. It also has browser overlays to keep in mind what the site will look like on smaller screens.
It is available for free download here.