Vandelay Website Design Blog

65 Resources for Grid-Based Design

Resources for Grid-Based 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.

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

Blueprint Layout Tool -

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.

Originally Published March 31st, 2008

45 Responses

  1. Etienne Teo | April 1st, 2008 at 1:24 am

    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.

  2. Homebizseo.com | April 1st, 2008 at 2:36 am

    This is the best guide I have seen on the net.

  3. » 65 Resources for Grid-Based Design Webcreatives | April 1st, 2008 at 3:34 am

    […] 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 […]

  4. imsraaia | April 1st, 2008 at 4:56 am

    useful indeed…

  5. Web 2.0 Announcer | April 1st, 2008 at 5:31 am

    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.[…]…

  6. Armen | April 1st, 2008 at 6:00 am

    Thanks for featuring my theme, Steven. This is a great resource you’ve put together.

  7. Kevin | April 1st, 2008 at 9:53 am

    A great baseline grid tool for Firefox/Safari users:

    http://robgoodlatte.com/2007/07/31/syncotype-your-baselines/

    Kevin

  8. 65 recursos para diseñar con grid | Isopixel | April 1st, 2008 at 11:44 am

    […] 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, […]

  9. roScripts - Webmaster resources and websites | April 1st, 2008 at 12:15 pm

    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…

  10. Internet Brain » 65 Resources for Grid-Based Design | April 1st, 2008 at 12:36 pm

    […] 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. […]

  11. Experience is Everything » Blog Archive » Grid-Based Design | April 1st, 2008 at 4:50 pm

    […] Layout Grid Bookmarklet (via Vandelay Design) April 1, 2008 […]

  12. HighFivez.com: Your Guide Through The Blogosphere. Find Blogs and Blog Posts. | April 1st, 2008 at 6:07 pm

    […] 65 Resources for Grid-Based Design […]

  13. Vandelay Design | April 1st, 2008 at 6:58 pm

    Hi everyone,
    Thanks for your comments. I’m glad this collection will be helpful.

    Kevin,
    Thanks for the additional resource.

  14. Le best of Mars 2008 : le meilleur des liens et ressources | April 2nd, 2008 at 10:21 am

    […] 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 […]

  15. 65 Resources for Grid-Based Design | helpmechris.com | April 2nd, 2008 at 2:06 pm

    […] 65 Resources for Grid-Based Design | Vandelay Website Design […]

  16. links for 2008-04-02 « toonz | April 2nd, 2008 at 7:32 pm

    […] 65 Resources for Grid-Based Design | Vandelay Website Design (tags: grid css layout resources) […]

  17. Resurse pentru webdesigneri şi webmasteri | CNET.ro | April 3rd, 2008 at 4:08 pm

    […] - 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 […]

  18. Wayne State Web Communications Blog » Blog Archive » [Friday Links] The List of Lists Edition | April 4th, 2008 at 2:56 pm

    […] 65 Resources for Grid-Based Design | Vandelay Website Design […]

  19. 60+ Unusual WP Blog Designs | April 6th, 2008 at 4:14 pm

    […] 65 Resources for Grid-Based Design […]

  20. Grid Layouts | M wie Michael | April 8th, 2008 at 3:48 pm

    […] 65 Links zum Thema Grid Layouts […]

  21. 60个非比寻常的Wordpress博客设计 | 帕兰映像 | April 9th, 2008 at 6:54 am

    […] 65 Resources for Grid-Based Design […]

  22. Problogging » In rilievo Wordpress » 60 Temi Inusuali per Wordpress | April 12th, 2008 at 12:11 pm

    […] 65 Resources for Grid-Based Design […]

  23. Linkdump 12-04-2008 — Adverto | April 12th, 2008 at 12:15 pm

    […] 65 Resources for Grid-Based Design: de titel zegt genoeg! […]

  24. Jen - cosmetic surgery forums | April 12th, 2008 at 9:43 pm

    WOW, amazing resource. There are some really great tutorials listed, thank you very much…

    Bookmarked! :)

  25. Kostas Mavropalias | April 14th, 2008 at 9:00 pm

    Thanks for the great resource! bookmarked :)

  26. Resources for Grid-Based Web Design | April 17th, 2008 at 10:59 pm

    […] 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 […]

  27. Valontuoja » Blog Archive » Kaoottinen linkkidumppi | April 19th, 2008 at 4:40 pm

    […] 65 Resources for Grid-Based Design | Vandelay Website Design […]

  28. Two Mad Geeks » 65 Resources For Grid-Based Design | April 20th, 2008 at 4:20 am

    […] Link: Vandelay Website Design […]

  29. Dexterous SEO India (Search Engine Optimization) Company | April 26th, 2008 at 3:08 am

    WOW, ultimate resource. There are some really great tutorials listed here with, thank you very much…

  30. Amazing, Adorable, Ambitious and Astonishing Links of April | Malene Hald | May 3rd, 2008 at 5:28 pm

    […] 65 Resources for Grid-Based Design […]

  31. Josh Walsh | May 4th, 2008 at 11:10 pm

    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/

  32. Web Designer India | May 5th, 2008 at 3:18 am

    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.

  33. 60+ Unusual WP Blog Designs | SEO & Web Design | May 6th, 2008 at 4:01 am

    […] 65 Resources for Grid-Based Design […]

  34. 60+ Unusual WP Blog Designs | SEO & Web Design | May 6th, 2008 at 4:01 am

    […] 65 Resources for Grid-Based Design […]

  35. NETTUTS - Web development tutorials and links - Which CSS Grid Framework Should You Use for Web Design? | May 21st, 2008 at 7:49 am

    […] 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 […]

  36. CSS Dev Kit » » Which CSS Grid Framework Should You Use for Web Design? | June 9th, 2008 at 12:40 pm

    […] Vandelay Design - 65 Resources for Grid-Based Design. […]

  37. Internet Brain » 65 Resources for Grid-Based Design | June 28th, 2008 at 5:19 pm

    […] 65 Resources for Grid-Based Design | Vandelay Website Design 65 Resources for Grid-Based Design […]

  38. 65 recursos para diseñar con cuadriculas de fondo » Cosas sencillas | June 30th, 2008 at 1:36 am

    […] 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 […]

  39. Für Gridnicks | André Friedrichs’ Web site | grid design, grid systems, raster, rastersysteme, webdesign | June 30th, 2008 at 4:18 pm

    […] Für Gridnicks […]

  40. Ethos Blog » Blog Archive » Which CSS Grid Framework | July 5th, 2008 at 7:38 am

    […] Vandelay Design - 65 Resources for Grid-Based Design. […]

  41. opti » Great Grid-based Design Ressources | July 5th, 2008 at 1:02 pm

    […] it’s here […]

  42. Danhbaweb20.com | July 11th, 2008 at 11:07 am

    Thanks so much. It useful for me !

  43. 60+ color amazing design wordpress themes collection | Themehook | July 20th, 2008 at 11:13 am

    […] 65 Resources for Grid-Based Design […]

  44. Amazing wordpress Designs | download | September 14th, 2008 at 12:32 pm

    […] 65 Resources for Grid-Based Design […]

  45. Links fundamentalistas de la semana: 25/09/2008 « Luis Miguel Martín | September 25th, 2008 at 4:22 pm

    […] Recursos para el diseño basado en retículas (escribiré más adelante sobre ello…) y una aproximación a los Frameworks CSS. […]

Leave a Reply