Grid Style In Modern Web Design: Showcase and Resources

A Grid is an invisible structure used to guide the placement of elements on your page. Now days using a grid are one of those basic design principles. Over the past few years, there’s been a lot of talk about grid systems and using column grids for website layouts. It’s easier these days to embed a audio/video on the web than it is to set type consistently or align elements to a universal grid.

Most news and editorial designers are working with grid systems someone else designed. No matter what you think about it, how you know about it, you need to understand how to use it. Here, in this Presentation, you’ll find everything you need to know about Grid Based Designs with some excellent resources provided by fallow designers and developers.

For those, who don’t know what is Grid-Style-Based system and what it can do? Then please follow the link below for detailed introduction.

The next generation, representing two decades of excellence. This grid-based system contains everything you need to create high-end design, artistic showcase, portfolios or otherwise very clean and minimal design.

You may be interested in the following related articles as well.

Feel free to join us and you are always welcome to share your thoughts that our readers may find helpful.

Don’t forget to subscribe to our RSS-feed and follow us on Twitter — for recent updates.

Grid-Style in Modern Web Design

Many of the pages that you see everyday using grid for optimizing web layouts. You may not see it but it is there, holding up the elements, structuring design, establishing layout, guiding the page elements. Before deciding when, why, and how to use a grid you need to know the elements of the grid and how to create it. While it is invisible in the final printed piece, you’ll need to be able to see it during page construction.

So, Let’s start with a brief introduction with grid style.

What is Grid-Style-Based Design?

instantShift - Grid-Style in Modern Web Design

A grid is a technique that comes from print design but easily be applied to web design as well. Web developers have only recently started to show a real interest in grid systems. It is hard to say why it has taken so many years for web developers to become interested in something that has been essential to the written medium in general since the 30s. The necessary technology (HTML and CSS) has been around for a while, but has only recently been applied to the implementation of grid-based layout systems for web pages.

If you looking for a effective way to communicate with your audience then grids can be consider as first priority. Grids are often considered to be the fundamental part of any aligned, ordered and optimize web layouts. A typographic grid is a two-dimensional structure made up of a series of intersecting vertical and horizontal axes used to structure content. The grid serves as an armature on which a designer can organize text and images in a rational, easy to absorb manner. It also serves as the framework for page layout which divides the page horizontally and vertically into columns and rows to help work to order the elements of the design. The text and images used on the page fit into place and align with one another according to the grid.

The lines of the grid themselves are not necessarily visible (although in some designs they are) but they are used by the designer to create the proper width and height of elements to align the page. It is commonly seen in newspaper and magazine layout with columns of text and images. One grid, or a collection of grids, may be used across an entire project to achieve a consistent look and feel.

How Does it Work?

instantShift - Grid-Style in Modern Web Design

A grid is literally a net of X by Y pixels. The elements on the page are then placed on the cell border lines and overall aligned on horizontal and vertical lines.

Ratios are at the core of any well designed grid system. Sometimes those ratios are rational, such as 1:2 or 2:3, others are irrational such as the 1:1.414 (the proportion of A4). This first part is about how to combine those ratios to create simple, balanced grids which in turn will help you create harmonious compositions. [markboulton.co.uk]

A grid is a consistent system for placing objects. There is really no limit to the grid layouts that can be created. You can either place all the elements on the unit level of the cells or you can simply define the overall layout in terms of columns and margins. However, in the literature for print design, you can find many variations of grids described but most are based on modular and column grids. Often you’ll encounter a mix of both types of grids.

Contradiction!!

This Grid pattern does not necessary apply to artistic and stylish web sites where the goal is to display an explicit non-standard style. There is no bound for using this style in modern designs if it’s not necessary.

Once the grid is established, it is up to the designer when and how to break out of it. This doesn’t mean the grid system in graphic design will be completely ignored. Instead, elements may cross over from column to column, extend to the end of the page, or extend onto adjacent pages. Breaking out of the grid can lead to the most interesting page designs. [about.com]

Always remember. There is no rigid rule to place elements in cretin way as the grid is only to help you to keep your design as aligned as possible so it can help you to create some smooth pathway for human eye. It is therefore ok for some elements if they are not placed on a grid to create a certain style or effect.

Showcase of Grid-based design

Stumbleupon

instantShift - Grid-Style in Modern Web Design

Official Link

Tastespotting

instantShift - Grid-Style in Modern Web Design

Official Link

PhilCoffman

instantShift - Grid-Style in Modern Web Design

Official Link

Nytimes

instantShift - Grid-Style in Modern Web Design

Official Link

Silnt

instantShift - Grid-Style in Modern Web Design

Official Link

TimesOnline

instantShift - Grid-Style in Modern Web Design

Official Link

Noobr

instantShift - Grid-Style in Modern Web Design

Official Link

MichaelPaulYoung

instantShift - Grid-Style in Modern Web Design

Official Link

Guardian

instantShift - Grid-Style in Modern Web Design

Official Link

Area17

instantShift - Grid-Style in Modern Web Design

Official Link

NationalPost

instantShift - Grid-Style in Modern Web Design

Official Link

Aialex

instantShift - Grid-Style in Modern Web Design

Official Link

Spanish-Portuguese

instantShift - Grid-Style in Modern Web Design

Official Link

Macalicious

instantShift - Grid-Style in Modern Web Design

Official Link

Frieze

instantShift - Grid-Style in Modern Web Design

Official Link

Sundance

instantShift - Grid-Style in Modern Web Design

Official Link

Wired

instantShift - Grid-Style in Modern Web Design

Official Link

TheMorningNews

instantShift - Grid-Style in Modern Web Design

Official Link

Portfolio

instantShift - Grid-Style in Modern Web Design

Official Link

Coma

instantShift - Grid-Style in Modern Web Design

Official Link

We Are Survival Machines

instantShift - Grid-Style in Modern Web Design

Official Link

Uxmag

instantShift - Grid-Style in Modern Web Design

Official Link

Wearehunted

instantShift - Grid-Style in Modern Web Design

Official Link

Subtraction

instantShift - Grid-Style in Modern Web Design

Official Link

Jrvelasco

instantShift - Grid-Style in Modern Web Design

Official Link

TheGridsystem

instantShift - Grid-Style in Modern Web Design

Official Link

Aigalosangeles

instantShift - Grid-Style in Modern Web Design

Official Link

Ungarbage

instantShift - Grid-Style in Modern Web Design

Official Link

Jansochor

instantShift - Grid-Style in Modern Web Design

Official Link

Tnvacation

instantShift - Grid-Style in Modern Web Design

Official Link

Edwardguillen

instantShift - Grid-Style in Modern Web Design

Official Link

Qbn

instantShift - Grid-Style in Modern Web Design

Official Link

Tutorials on Grid-Style-Based Design

Five Simple Steps to Designing Grid Systems

instantShift - Grid-Style in Modern Web Design

Following article written by Mark Boulton to elaborate, in some way, on how to correctly design grid systems. It’s quite a complicated field and so distilling it into ‘Five Simple Steps’ has proven to be quite tricky, so much so that He thought He wrote these series of tutorial to give you quick lessons about grid based designs.

Preface Part-I Part-II Part-III Part-IV Part-V

Designing Grid Systems for Flash

instantShift - Grid-Style in Modern Web Design

In this Tutorial you all can walk through the process of creating a grid for a Flash based site that will work for screen resolutions of 1024×768 and up. The beauty of creating a grid for Flash is that you can create a fixed grid and don’t have to be concerned with the user changing type sizes and screwing up the entire grid of the site. The only time you have to be concerned with a fixed grid is if you build a Flash site where the contents of the site repositions based on the size of the browser window, in which case you would have to figure out a fluid grid.

Tutorial Link

Using a Background Image Grid to Lay Out

instantShift - Grid-Style in Modern Web Design

you can apply the grid to the body of your page as a background image so that it displays behind your site. Thus you can use it to precisely line up your layout.

Tutorial Link

Setting Type on The Web to a Baseline Grid

instantShift - Grid-Style in Modern Web Design

In the long slow battle with browser support and platform inconsistencies, we’ve been able to bring more and more sophisticated print techniques onto the web—sometimes kicking and screaming. In following article you can learn how to setting type on the web to a baseline grid.

Tutorial Link

When and Why to Use Grids in Page Layout

instantShift - Grid-Style in Modern Web Design

Many of the pages that you see everyday have a grid. You may not see it but it is there, holding up the design, establishing structure, guiding the page elements. Here in the tutorial you can learn when and why to use grids in page layout for web design.

Tutorial Link

How to Gridding The 960

instantShift - Grid-Style in Modern Web Design

You might recall a certain dialogue on this site about optimal layout width for 1024px. And perhaps your astuteness leads you to recollect the ensuing dialogue about fluid vs. fixed width. in this article you can find background image grid + pixel ruler + column divisions for 960px-width layout, all in one mean little package.

Tutorial Link

Developing the Grid That Supports Your Design

instantShift - Grid-Style in Modern Web Design

Most of you might had many question about grids like Why is the grid important? You can live without a grid system, but should you? You can find your answer to all of your questions in this article.

Tutorial Link

Designing Blog Theme Templates With Grid-Based Design

instantShift - Grid-Style in Modern Web Design

Here you can learn how to design grid-based theme for open source content management systems, e.g. Drupal and WordPress. The purpose of this article is to give you an idea of how to approach blog theme design using a grid system. After reading this, you should be able to create a fully-functional grid-based design and HTML prototype that can be converted into a theme template.

Tutorial Link

Articles Related to Grid-Style-Based Design

Free WordPress Themes Using Grid-Based Design

Particles

instantShift - Grid-Style in Modern Web Design

Features Live Demo

UnGrid

instantShift - Grid-Style in Modern Web Design

Features Full Preview

Gridalicious

instantShift - Grid-Style in Modern Web Design

Features Live Demo

Grid-Focus

instantShift - Grid-Style in Modern Web Design

Features Live Demo

Equilibrium

instantShift - Grid-Style in Modern Web Design

Features Live Demo

Tools for Grid-Based Design

  • Grid Designer 2 – Popular tool for setting up simple grid layout.
  • Grid Maker – Tool which help you design a grid
  • 960 Grid System – Grid system for the typical 960 width
  • GridMaker 2 – Downloadable application for grid-based web design mock-ups
  • CSS Grid Calculator – Online application for page layout visualization to draw grid.
  • Grid Calculator – Online calculator for creating grids.
  • TypoGridder – A LGPL JavaScript to add baseline grids
  • Web Page Layout Grid – A large image to use in the body background of your page to help you lay it out.
  • Layout Grid Bookmarklet – One more Photoshop style Layout Grid image to use in the body background
  • Grid Overlay Bookmarklet – variation of Layout Grid Bookmarklet.
  • Phiculator – A smart application to calculate corresponding number by entering any number according to the golden ratio (1 : 1.61803399…)
  • Typographic Grid – Tool for getting things to line up according to a strict horizontal and vertical grid.
  • GridFox – GridFox is a Firefox extension that overlays a grid on any website
  • Ruler Tool – A simple background image that will help you get an idea what’s going on between browsers and platforms
  • Browser Grid – A browser grid to help you know the safe area for different resolutions of the picture.

Find Something Missing?

While compiling this list, it’s always a possibility that we missed some other great resources. Feel free to share it with us.

Like the article? Share it.

LinkedIn Pinterest

15 Comments

  1. This is one kickass post! A wonderful resource for everything grid and very very useful. Thanks!!

  2. As usual, very good grid based designs. Cool really.

  3. Great article, I bookmarked you link for one of my resource article.

    I also want to share to you a tool for web designer called Design by Sprymedia. This tools is my favorite one :D

    Design is a suite of web-design and development assistive tools which can be utilised on any web-page. Encompassing utilities for grid layout, measurement and alignment, Design is a uniquely powerful JavaScript bookmarklet.

    goto: http://sprymedia.co.uk/article/Design

  4. Great post thanks for all the useful info

  5. Nice collection, but neither of your first 2 examples even line up with the grids displayed on them :P

  6. Nice article :D this is going to help me a lot on redesigning of my web site!!! thanks

  7. This is a great post and thank you very much for putting in the time to research and put it together. I have mentioned it on my Josef Müller-Brockmann blog.

  8. To use a grid design system is really good and professionally made. The elements in the web page are well manage and segregate. Business sites must be designed with that kind of grid system.

  9. Any idea what CMS is used by the second example tastespotting.com
    The page source of that site doesn’t say wordpress anywhere.

  10. This website uses WordPress as the CMS and seems like it’s inspired by sites like NOTCOT.

    Website: http://www.environmentteam.com/concept/

  11. Yes. this is very timely and a great resource.

  12. Very impressive post!!

  13. Another classic showcase you have posted. Love it.

  14. good collection of images and i will used as possible in my site..

    Thanks

  15. superb postings!

Leave a Comment Yourself

Your email address will not be published. Required fields are marked *