Everyone who has ever tried to draw a website has had this feeling. No matter how much you turn and shift the elements on your composition, there seems something off. Well, there is actually a big chance that somewhere in that turning and shifting you already placed them perfectly. But instead of placement, the proportions of your elements were wrong. A great way to make sure that the proportions are correct is using a Grid layout.
The idea of dividing elements of a composition was first discovered by Pythagoras and his followers “the Pythagoreans”. They learned that there is a specific occurrence that frequently showed up in geometry. Don’t worry, there is no need to get cold feet. We won’t get into geometry. All you have to remember is that this occurrence is called “the golden ratio”.
If you are designing for longer you might have heard about the golden ratio before. The golden ratio is a number: 1.62 (1.61803398875… to be more precise).The idea is that you take the measurements of your composition and divide them by the golden ratio. So, if the elements of your composition are proportional to the golden ratio, they are appealing. This is not always true, but is a good point to start from.
But what does this have to do with grid layouts and how does it help us to design websites?
3-Collumn grid
3-collumn grids are based on the rule of thirds. The rule of thirds is a simplified version of the golden ratio. Whereas at the golden ratio we take approximately 38.3 percent of one side, with the rules of thirds we take 33.333 percent of each side, dividing our canvas in 3 equal pieces.
Next you should divide every collumn by two by adding another vertical line. This is also stated in Jason Beaird book “The principles of beautiful web design”. Now you will have a 3 collumn based grid on which you can start to experiment placing your elements. Note that all elements should touch a vertical line but not necessarily have to stay in the same collumn.
Note: It is best to draw multiple layouts to find the best one for your project.
12-Collumns grid
Another popular grid layout is a 12-collumn grid. This is undoubtedly because of the use of a 12 grid layout in Bootstrap. Bootstrap is a front-end framework made by Mark Otto and Jacob Thornton at Twitter. Bootstrap was made to achieve consistency between internal tools.
Originally bootstrap used a 16-collumn based grid. But since the release of Bootstrap 2 Bootstrap switched to a 12-collumn based grid. The reason for the change was the difficulties encountered while optimizing 16-collumn based grid for mobile and tablet devices. Another reason is that it is impossible to achieve a 3-collumn based layout using the 16-collumn based grid. As stated in this article.
In order to achieve a 12-collumn grid divide your canvas in 3, just as with the 3-collumn based grid. But instead of dividing each collumn in two, you should divide each collumn by 4. This will give more depth to your composition. So divide each collumn in 4 smaller collumns using vertical lines.
When designing inside a grid layout you will quickly see that all your elements feel more natural. But always keep in mind that using a grid is not a certitude to make a beautiful design. It is still possible to design a bad layout inside a grid. Experiment a bit inside your composition and create different layouts to find one that fits your project.
Good luck designing!
The post How using a grid layout makes your website appealing appeared first on earn with a website.
