Some large sites have very good visual appearances and are likely to be designed using grid systems. The grid may be a page layout that appears compact and stable, providing a logical template for designers to design sites。
However, the use of grids does not mean that the design is dry, and a good designer can not only reasonably apply the rules based on grid layouts, but also break them in due course。
"the greek system is an aid, not a guaranteeBut one must learn how to use the grid; it is an art that requires practice."
- josef müller-brockmann
Grid foundation
Let's look at some grid terminology. The grid is divided by vertical or horizontal dividing lines to include boundaries, blanks and columns to provide a framework for organizational content。
The grid is often used in traditional printing, but it is also very appropriate for web design. Grid design doesn't make a website look like a newspaper, but it does help us design a unified site。
The grid is a simple assistive design tool, not something that adversely affects design。
Understand and follow the rules
When you begin to learn any skill, you should follow some of its guiding principles. Learning from the very beginning what is fundamental will enable you to apply these rules efficiently。
The learning grid is no exception. You should design the layout according to the grid and align all design elements to their location. The use of grids in design can structure the content and give you a design starting point, but this should not prevent any creative inspiration。
Two ways to create grid templates:
1. Create a grid system of its own
While there are many different theories for building your own template system, ultimately you have to choose the most useful tool at your disposal。
You can divide an empty document into odd or even columns in mathematical terms, and usually take the blanks between columns into account。
If you like, your grid can be complicated or simple. The more complex your grid, the more freedom you have, the simpler the grid, the more space you leave. It depends entirely on your decision。
The following are some examples of those produced using photoshop, which can be viewed with a grid in photoshop。
2. Download a ready-made grid template
By comparing the creation of your own grids, downloading some standard grids from the web can also be used to support web-page design and save you a lot of time in making your own grids。
The most popular grid is probably 960 grid system. It's made by nathan smith, allowing you to make layouts for columns 12, 16 and 24。
This project is smith
Smith, referring to 960grid system, said: “i am simply sharing this grid system with you, and if anyone benefits from it, it would be better.”
This download includes documents like css, HTML, photoshop, illustractor, indesign, etc. The design documents include many useful documents that are used to create a clean and clean site。
Break the rules
After presenting the basic knowledge of the grid, we will now break those rules. The grid is a very good way to align the elements, and it makes your design look clean, neat and user-friendly。
However, as mentioned earlier, we cannot hold the grid hostage to our inspiration and innovation. To venture bravely beyond the grid and create a work based on the grid does not mean that everything has to be right。
The elements that cross the grid will make the work look better. And flow, not as rigid and as dull as a table。
And look at the following example, they're made from a 960 grid system that shows that the grid can be beautiful and not rigid。
Examples of grid-based design systems
Below are some of the designs that have applied grid-based systems that are very well organized and interfaced. Some of them are organized strictly according to the grid, while others break some of the boundaries of the grid. All of this indicates that the application of grid systems does not imply a dry-looking design。
Help your habitat
Digital podge 2009
Vegas uncock'd
Anton peck
Brite revollution
Kiki and bree
Arvorecer
Simon collison
Tools for designing using a grid
Here are some tools for designing grid-based layouts。
Grid designer
A fun tool to help set up a grid.
Grid systems generator
Just as the name of the tool says: it helps create a general for you.
Grid calculator
Another fun tool to help set up glids.
Jquery masonry
A jquery tol that arranges places vertially and horizoI'm sorry.
Concluding remarks:
Grids are not the solution to all design problems and do not necessarily apply to all. The grid does, however, provide a good entry point for sites that require a sense of structure and balance and that require stable and clean design. Try the grid in your work, and you'll see that the grid structure brings you beautiful and unique designs。
( )
