Building a design layout using the grid system
One of the easiest ways to build an organized design is to apply a grid system. It's a tried and tested technique that was first used in print. Low tech and cheap, this is a great resource for a designer. Grids in interactive design can also help provide a consistent experience across multiple devices with different screen sizes. Users are more comfortable when they see familiar features laid out as they would expect to find them.
The grid system helps align page elements based on sequenced columns and rows. We use this column based structure to place text, images, and functions throughout the design. Every element has its place that we can see instantly and reproduce elsewhere. Look the grids we find in maps; Islands, towns, lakes are on an exact part of a map, on a set of North-South/East-West coordinates. They will always appear in the same place on other maps. A GPS accesses these coordinates to help guide us. Think about the chaos if there were no grid system to keep us right on the road.
The grid system was first used to arrange handwriting on paper and then in publishing to organize the layout of printed pages. It should come as no surprise that we also use it in web and app design. Creating a grid system for the virtual page is a little more complex than for the physical page, browsers handle information differently, and screens vary in size. Even with these differences, the principle remains the same. Some designers feel that the grid limits creativity. While this may be true, it's important to recognize that many designers employ the grid system regularly because it is so effective at organizing information. The best layout is one which provides no distraction from the content. Thanks to its precision, the grid system is a great example of this kind of layout.
A 13th-century French artist by the name of Villard De Honnecourt, merged the grid system with the golden ratio to produce printed page layouts with margins based on fixed ratios. This continues today, as the majority of printed books and magazines show. Publishers, editors and designers place so much effort on keeping the tradition, not only because it's known to be the best way but for another reason. The readers expect to find everything in its proper place. The human eye is drawn to elements. It is also easily confused if it is presented with something unexpected.
In websites and applications, the grid system acts similarly to the print layout in organizing the elements on the page. It also provides a guide for designers to create multiple layouts that support responsive themes for different screen sizes. We divide the web page layout into columns that we separate with margins, using whitespace, between them. The width of the columns and the margins are equal, and we can place content in one or more columns based on the layout of the design. The application of a grid means that the design can be divided into multiple columns that can help designers organize content. We can have one, two, three, six, twelve, or more columns. Today's screen resolutions reach very large sizes compared with what was available in the early days of computers. Even so, using a 960-pixel width can ensure that the design is properly displayed on many computer screens. It can also help designers modify the layout for mobile devices.
The Grid System has been helping artists and writers for a long time. First utilized by a 13th-Century artist, who merged it with the golden ratio, the grid system has been a tried, tested, and trusted methodology for centuries. It first empowers writers to position their handwriting neatly on paper and later on, it became a universal standard in the publishing industry. Publishing houses everywhere retain strict observance of the grid system in producing copy that users find both pleasing to the eye and in line with what they would expect to see. When it comes to laying out elements, grids gives us superb precision. We can see this principle predominantly in maps, noting how locations are pinpointed with grid lines that represent coordinates. The pursuit of accurate cartography allowed navigators to discover new places in the great unknown parts of the world. Now, with the grid lines that mark both longitude and latitude, GPS devices allow us to get wherever we wish to go.
Cartography might be a science, but grids, with their mathematical precision, are brilliant and much-needed tools of artists. Throughout history, artists have been making use of grid lines to plan and paint images of their own, which capture the best, most pleasing proportions. Easy to create, grids also give us web and app designers the ability to lay out our work in an organized and precise manner. By enabling us to insert elements in boxes created by their intersecting lines, grids enable us to make a consistent user experience across multiple devices. For example, the dimensions and layouts of our computer and smartphone screens differ. Planning our work so that it can adjust to appear on different platforms keeps our designs intact, in proportion and in the places where our user expects to find them.
However you decide to use the grid system to build your design, you should keep in mind other principles, such as the Golden Ratio. Striving to create a consistent user experience also involves creating a pleasing user experience that will be consistent across many devices. If you keep in mind that your choices will be working in concert with the known tendencies of the user's eye, you will be able to create eye-catching designs that are better organized, as seen by your users on computer, tablet, or cell phone screens.