Introducing The Grid System

thegridsystem.jpg

So as many of you already know, I’m freakin’ obsessed with grids. A lot of designers either don’t want to be bothered with grids or just don’t understand them, so I wanted to spread the love a little.

So I created The Grid System.

It’s basically an ever-growing resource site on the topic of grid systems and anything associated to it, like the golden ratio and baseline grids. My goal for the site is to be a one stop shop for all designers to learn about grid systems, how to design them and how to use them.

The site features links to articles, tools, books as well as templates and other goodies. I’ve also added the ability to show the grid that the site was built on, this way visitors can learn about the structure and how it was applied to the design. Let me tell you, it was a pain to get everything to sit on the grid and baselines and to stay consistent across multiple browsers. As of now, the site lines up perfectly with the grid in Safari and Firefox on a Mac. I assume it would be the same on the PC but I haven’t had the time or a computer to test it. I do plan on making it work in all major browsers on both platforms, even the dreadful IE.

I’ve also partnered up with YouWorkForThem to bring a great collection of books to the site. Over time the site will grow in content (I have a backlog of articles and tools to post) as well as features. I plan to add a forum where people can chat about grid systems and design in general, and other small things like wallpapers. Additionally, I’ve created a Flickr group as an extension of the site.

Check it out and let me know what you hate and what you love. I’d love to know what you think.

Posted on Posted in Design, Grid Systems, International Typographic Style, TypographyTagged , , , , , , , ,

31 thoughts on “Introducing The Grid System”

  1. Nice Antonio! Looks like it’ll be an awesome resource. Great job on the design.

    I still can’t believe you were able to line everything up to a baseline grid. I recently used a baseline grid for a web project and it’s a huge pain in the ass.

    If you don’t mind me asking, I’d love to know how you dealt with the headings. Did you apply negative top margins to them? Even if you make the line-height of the heading equal to the baseline grid (or a number that will line up to the baseline grid), there is an odd top margin that gets in the way… at least in my experience. Sorry if everything I wrote seems really confusing…

  3. Very great. Nicely concepted and layouted. I’m about to redesign my blog into a strict grid design.

    Will bookmark it.

  5. I love it, as kapetan says, you are shaping up to be quite the modern champion of the grid! Keep it up!

  6. i really like seeing the grid. great resource. thanks for the effort to make us all more knowledgeable!

  11. Thanks folks. Glad everyone likes it.

    @Kapetan & Michael
    I don’t know if I’m a pioneer but thanks anyway!

    @Amanda
    Thanks for the info. So it all lines up on a PC?

    @Joey
    It is a pain in the ass but it’s very much worth it. Headings are a pain and were my biggest challenge. The main issue is that Safari and Firefox render text a little differently from each other. At small sizes like 12px, there are no problems, it’s when you get to bigger sizes like 24px and above that you start seeing a shift. I haven’t figured out which browser has the shift (I think it’s Firefox) but one of them does and it’s around 1-2px. You can see it in The Grid System. Turn on the grid in both Safari and Firefox and you’ll notice that headings line up perfectly in Safari but are shifted 1px up in Firefox. Anyway, make sure all your headings are in heading tags and define their styles in CSS that way you have full control over them. Let me know if you have any questions. Good luck!

  12. At Last! A dedicated site honoring the grid. Cheers for this! I’m sure it’s going to be very popular. Good luck with it and congratulations on a site well done,

  14. Looks fantastic!

    Great inspiration since I hope to be launching my blog by the end of the year. It’ll be no where near as clean of a setup as yours, but hopefully over time it will be.

  18. Congrats Antonio! Nice to see YouWorkForThem joining in on this venture, you guys are making a good team.

    -MP

  19. Christmas has come early! This is going straight into my delicious – I will be consulting it for my blog re-design/re-jig next year.

    BTW, is your arm aching yet from holding up Müller-Brockmann’s flame 😉 ?

  21. great work! i love the site. it’s an awesome resource. i’ve passed it on to all my design friends and colleagues. kudos! 🙂

  26. great tool archive for editorial and webdesign, i’m working alot with indesign and those templates are really helpful. and that “show grid” feature is a nice touch

  27. Wow… I didn’t know their were other grid lovers out there – outside the studio I learn to draw from. The Barnstone Studios could be a great resource for your quest. Myron Barnstone trains his artists to design and to design on grid…. specifically on the gribs created with in Golden Section and Root rectangles.

    On this site you can find audio interviews with other designers/artist that employ grids to organize their artwork. Also you can find video lectures… check out Welcome to the Golden Section, What is ART? and a really great one … Pablo Picasso and the Golden Section. You can also checkout the student galleries and see the Article on the Golden Section and how the artist of old employed these universal grids in their work.

    Keep up the great work. And I look forward to seeing you grown in this journey.

Comments are closed.