Web Design Using Grid
How do web designers design a website so that the website provides maximum benefits to its users? so that users can consume the information on the web comfortably, users can use the web efficiently, users can get what they are looking for on the website quickly. In other words, users can get a pleasant experience from the website which is called user experience (UX).
Many things can be discussed related to this user experience because the scope is so broad. However, one that I will discuss related to user experience in this article is the layout aspect, namely the grid — Web design uses a grid.
Grid
What are grids?
Grid is a structure consisting of horizontal lines or a combination of vertical and horizontal lines that meet each other that is used to arrange layouts or interfaces. With this grid we divide a layout based on columns, then with these columns the content is arranged and placed.
Grid is not something new in the graphic design world, it is used as a tool to design print media such as book layouts, brochures, posters and so on. Grids provide guidelines to designers where design elements should be placed in a layout.
Benefits of Grid in Web Design
One of the goals of a web designer is to create an interface where users are easy to understand, easy to navigate, easy to read the content and also assist users in following the flow of information conveyed through the website. For this reason, an efficient design is needed, namely a design that does not take up the user’s time but is also effective, namely a design that successfully delivers messages to its users.
Grids help designers map out different design elements to be placed on the layout and connect the elements that make up the layout of the web page. So that it gives the impression of order on the web page, which in the end visually produces a clear and organized layout structure.
Goals achieved with Grid
Whatever the method or technique used in designing a website, of course the main priority is the user, not the owner or the designer himself. How to design a web that makes it easy for users to access it, comfortable in finding the information they need, there are no things that interfere with user comfort, navigation is not confusing, everything is clear and orderly. The key word is user experience, it is important and becomes the main consideration for every decision in the design process.
Thus what is the role of the grid in achieving the above stated objectives? So that users can get a pleasant experience from the website. The role of the grid here is to help designers design a web that is structured and organized in terms of layout, the grid system helps designers place elements that are different but still harmonious and balanced. This results in a design that is efficient, effective but still visually appealing.
Also Read:
Creating HTML Grid Layouts with Less
Application of Grid in Web Design
The use of grids in web design is by making vertical lines on the website layout that will be created. These vertical lines will form columns with the same width with the distance between columns with the same width. We do this process when the new design stage is at the wireframe draft stage or it can be at a further stage, namely when making a design comp.
Also Read:
Take advantage of Wireframes as an Early Stage of Web Design
grid
Image 1
grid2Picture 2
In the example above (Figure 1), we use the 960 grid system which is popular among web designers and developers. In the example above using 12 columns with a total width of 960px, the width of each column is 60px. Columns are represented by pink vertical blocks. By using this grid system we align the design elements that we create based on these columns.
We take the example of navigation elements (menus), let’s say there are three menus (menu1, menu2, menu3) on this web. These three menus will take up 12 columns in total, meaning that each menu will take up four columns equally. To see the results of the grid on the design, see (Figure 2). In (Figure 2) we can see that the grid helps the designer to make the design more organized, more structured with the width of each element balanced.
Conclusion
To get a good user experience on a website there are many things that must be done. This is because the user experience includes everything on the website itself, such as typography, interface, information architecture, content, readability,