Grid Systems- all you need to know

5c16ccf1-f9a6-4a0e-af87-a2eef01e325c

If you’re a beginner web designer or you would like to be him some day and you want to know what’s now is the most important in this field you definitely should read about grid system. What is it, how to use and what to avoid? We’ve got answers for all of these questions! And what’s more, we’re not going to hide them.
What is a grid?

First of all, if you want to create something, you have to be fully informed about it. We don’t want to bother you technic definition about grids, so in human language, this is a kind of skeleton on which you, as a web designer, can organize content and graphic elements of website. What’s more it’s very helpful in responsiveness, which except that looks really good, It requires not only good spatial orientation of the web designer, but also able to look at the site from normal users.

Where to start?

You know that the main rule is “the Client is the most important”. You work for him and you’re the end result should be reflection his objectives. That is why first you should discuss with Client range of functionality and information and menu structure. It’s extremely important because, of course, there are grids’ solid foundations but if you want from your design something new, original and interesting, your grid must be deliberated and precisely prepared. What’s more, well-designed grid will be very helpful for all of team in process of making website as a ensemble.

01_richness_home_GRID

What to avoid?

If you don’t want to have problems in future you should remember about what to avoid in this whole process. First of all, elements that extend beyond the grid are not allowed. You can not afford them because they look good only on large screens. On smaller screens, where the resolution is different, they become very troublesome for the user.

What’s more, elements with “fixed” set positioning can cause problems with the proper display on mobile browsers, so these items should also be avoided. Pictures which are smaller than the smallest “eye” on the grid shouldn’t be placed. But if you want to put icons or complementary blocks of text, this rule does not apply.

screen_linie_pomocnicze

Using grid systems

You should definitely remember about few simple but also very important rules. First of all, for your convenience, create an overlay of your grid system for your design. Thanks to this, you’ll always have the opportunity to toggle on and off. What’s more, be restrictive for yourself. It’s not that hard to design grid, it’s very easy to do it. But if you put yourself limitations and high demands, it will be helpful in the future. Working with constraints will definitely pay off, because of the crossing the borders and thinking out of the box. And the last, but not least, be patient. Be patient in everything you do, beginning from the thinking about website, through the whole process and ending on improving what you’ve done.