With any beautiful design or structure, from architecture to painting, there lies beneath it a grid-based layout from which these creations were originally derived. It is, in essence, the unseen mathematical component of all design that, for many web designers, has become standard in the pursuit for the perfect web design.
To understand what a grid-based layout for web design is, we first need to understand why it is referred to as “grid-based.” A grid is a structure consisting of intersecting straight vertical and horizontal guidelines that are made up of margins, flow-lines, columns, rows, gutters, modules, and spatial zones. This potentially complex composition provides the perfect structural base that allows a web designer to create graphic elements from, or to organise content within. It is this reason that grid-based layout is used in web design.
By using grids in the website design a sense of uniformed structure is achieved for the overall website, this helps achieve better usability for website visitors as they are able to navigate and engage with the website much easily than if the content was simply thrown together without structure. Another reason grid-based layouts are used is efficiency. By designing to a grid, the actual design process is simplified because design guidelines are already in place, therefore making it easier to decide on design elements, such as width and height.
When using grid-based layouts in our web design, we can either create our own grid, or download a ready-made grid template. If we create our own grid, we will need to rely on what option works best for us and the web design project we are working on. It is therefore valuable to follow some simple guidelines when creating our own grids. These are:
• Use only enough columns as needed for the web design. In other words, if you are only going to use ten columns, then only create ten columns – and not twenty.
• Watch the spacing. As a general rule, columns should have the same number of pixels across as rows are high.
• Don’t box yourself in. If you need to move outside of the grid for specific graphic elements, then do so. A grid is only there for structural support, and is not the end product.
If creating your own grid-based layout isn’t appealing, or you simple do not have the time to invest in it, then downloading a pre-designed grid template is available. There are many online sources that provide such templates, and by downloading a grid template you can save on time and have, at your disposal, an effective grid template ready to use.
It is important to re-emphasise that grid-based layouts for web design should not be mistaken for a strict rule by which all graphic elements or content must adhere to. Naturally, when creating anything we can move beyond specific rules in order to achieve our creative goal, and grid-based layouts are no different. If we use grids as a structural guide in our web design, then we are better able to create amazing web designs that will not only appear organised on our web page, but will hopefully inspire and engage every website visitor. Article from, web developer brisbane Nets and Webs