Web page layout brings stability and structure: Grid layout

The grid can provide a stable structure for the layout of the Web page, providing a reasonable template for the designer to build a station.

Looking at the big Web sites that use the top design, we will find that they are likely to use some grid layouts. The grid can bring stability and structure to the page layout and provide a convenient template for the designer to build a website on this basis.

A grid doesn't mean you have to design your work to be boring. A good designer will apply the basic rules of grid layout and know how to break these rules properly.

"The grid system is an auxiliary function, not a guarantee." It has many uses, and every designer can find a way to use it for personal style. But first we need to learn how to use the grid; Grid design is an art that requires a lot of practice. ”、

--Joseph Miller-Brookman

Basic knowledge of grid

Let's look at some of the terms of the grid first. A grid is a layout division that provides a framework for content layout by incorporating Benbert (margin), spaces, and columns with horizontal and vertical guides.

The grid is generally visible in the publishing industry, but it is also ideal for web design. The grid is not necessarily that you want to make the site like a newspaper layout, but it does help you to create a design on this basis to do a unified structure.

Grids are just a tool for design, and should never be a hindrance to creating creativity in your design.

Understand and follow the rules

When you start to learn any specific new skills, you should follow the corresponding guidelines. Just starting to learn the basics ensures that you can use these fundamentals effectively.

Just start the difference between the grid is not small, you should follow the grid, so that all the design elements aligned, and placed in place. Using a grid in your design can create a structure for your content. It also gives you a place to start, but it should never stifle your creativity.

There are two ways to create a grid template now.

Make a grid template of your own

There are many different theories that can help you set up your own grid, your options are endless, but in the end, you should choose a grid template that works best for your project at hand.

You can split a blank document to create an even or odd number of columns. It is often helpful to consider the raphe (blank space between columns) into your grid system.

Your grid can be very complex, can be very simple, as you like. The more complex and sophisticated your grid layout, the greater the degree of freedom of the grid system. And the simpler it is, the easier it is to understand. The right to choose you.

Here are a few examples of grids created with Photoshop guides (views > new Guides).

Download an out-of-the-box grid template

There are a number of standard grid templates on the web that can help you with web development, and it can save you the time you need to do it yourself.

One of the most popular grid systems is the 960 grid system, which is made by Nathan Smith, and you can select 12 columns, 16 columns, or 24 columns of grid layout.

The birth of this project was simply Smith's "preface" and couldn't help it.

"I found that I had only been attracted to share the grid layout for the past year," he said. If other people benefit from it, it's better. Smith commented on his 960 grid system.

The downloaded package contains files for css,html,photoshop,illustrator,indesign. The design file contains a number of grids that are very helpful in making a structured, concise website.