Grid Style In Modern Web Design: Showcase and Resources

Dkumar M

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 design trends related articles as well.

Please feel free to join us and you are always welcome to share your thoughts even if you have more reference links related to more design trends that our readers may like.

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?

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?

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.