The concept of Web page design based on grid and its practical application cases

Some large sites have a very first-class visual appearance, and they are likely to use a grid system at design time. Grid can be the layout of the page is compact and stable, for designers in the design of the site to provide a logical rigorous template.

But using grids does not mean boring design, a good designer can not only apply the rules based on grid layout reasonably, but also break these rules in time.

"The grid system is a-aid, not a guarantee." It permits a number of possible uses and each designer can look for a solution appropriate to his personal style. But one must learn to use the grid; It is a art that requires practice. "

-Josef Müller-brockmann

Grid Basics

Let's look at some grid terminology. Grids are blocks of layout with vertical or horizontal split lines, including boundaries, spaces, and columns, to provide a framework for organizing content.

The grid is often used in traditional printing, but it is also suitable for web design. Grid design does not make the layout of a Web site look like a newspaper, but it does help us design a unified site.

The grid is a simple helper design tool, not something that has a negative impact on the design.

Understand and follow the rules

When you begin to learn any skill, you should follow some of its guiding principles. Learning the basics from the start allows you to apply these rules efficiently.

Learning the grid is no exception. You should design the layout according to the grid and have all the design elements aligned to where they are. Using grids in your design can structure content and give you a design starting point, but this should not stop us from any creative inspiration.

Two ways to build a grid template:

1. Create your own grid system

Although there are many different theories about creating your own template system, it is ultimately up to you to choose the tools that you use most conveniently at hand.

You can divide an empty document into odd or even columns by mathematical principles, and usually take a blank space between columns.

As long as you like it, your grid can be complex or very simple. The more complex your grid, the more free space you have, and the simpler the grid, the more space you have left. It all depends on your own decision.

Here are some examples of Photoshop, which can be viewed in Photoshop using a grid.

2, download the ready-made grid template

Downloading standard grids from the web can also be used to help web design and save yourself a lot of time making grids, compared to making your own grid.

The current most popular grid may be the 960 grid system. It was made by Nathan Smith and allows you to make layouts for columns 12, 16, and 24.

This project is Smith.

"I simply share this grid system with everyone, and if anyone benefits from it, that's great," Smith said of the 960grid system. ”

This download includes the CSS, Html,photoshop,illustrator,indesign, and so on file. The design documentation includes a number of useful documents that are used to build neat and refreshing sites.

Break the Rules

After introducing the basics of the grid, let's break these rules now. Grids are a great way to align elements, making your design look clean, tidy, and user-friendly.

However, as mentioned earlier, we cannot let the grid imprison our inspiration and innovation. To boldly venture out of the grid, to create a work based on the grid does not mean that everything should be aligned.

The more elements that go out of the grid boundary make the artwork look more ... And fluent, not as rigid and boring as a table.

Take a look at the following examples, which are made using 960 grid system to show that the grid can be beautiful and not prim.

A design example based on grid system

Here are some design works with grid systems that are neat and user-friendly. Some of these are strictly in the grid layout, while others break some boundaries of the grid. All this suggests that applying a grid system does not mean a dull design.

Help Your Habitat

Digital Podge 2009

Vegas Uncork ' d

Anton Peck

Brite Revolution

Kiki and Bree.

Arvorecer

Simon Collison

Some tools for designing with grids

Here are some tools to design a grid based layout.

Grid Designer

A fun tool to help set up a grid.

Grid System Generator

Just as the name of the tool Says:it helps generate a grid for you.

Grid Calculator

Another Fun tool to the set up grids.

JQuery Masonry

A JQuery tool that arranges the items vertically and horizontally according to a grid.

Conclusion:

The grid is not a solution to all design problems and does not necessarily apply to everyone. But the grid does provide a good starting point for those sites that need a sense of structure and balance, and that require a stable and refreshing design. Try the grid in your work and you will realize that the grid structure brings you beautiful and unique designs.