Great websites all share a sense of artistry and balance. That isn’t by accident. Like some of the greatest painters and sculptors of all time — da Vinci comes to mind — mathematics plays a large part of the creation process. For web designers, that usually means strictly or loosely following a grid system.
What Is a Grid System?
Think about your most-visited websites. What do they all have in common? Chances are good they have layouts that are somewhat similar. There are probably blocks of images, blocks of navigation bars, horizontal columns, and vertical columns. In the majority of cases, the professional web designers either created the site on a grid pattern, or overlaid a grid pattern onto their designs.
A grid can be any series of intersecting horizontal and vertical lines that form squares, rectangles, and similar shapes. As a web designer, you can actually create the grid that works for your project. For instance, you may want to flesh out a site that has a newspaper feel with columns. To help with this design, you would generate a grid system with the appropriate column number.
On the other hand, perhaps you want your website to mimic the look of a social media site like Pinterest. In that case, it would make sense to have a grid system that gave you a clear idea of where to put blocks of images and texts.
All grids are potentially unique, which gives web designers a great deal of freedom.
Why Work With a Grid System?
The underlying point of a having a guiding grid is several fold:
- You’ll be able to make sure your website is well-balanced. This doesn’t mean symmetric, if asymmetry is your goal. It just means everything on the page seems to fit.
- Better Sense of Available Page Space. You’ll have a better understanding of how much room you actually have on one page. A grid system can give you a more comprehensive look at space you might have missed or space that’s too cluttered.
- Ease of Moving Different Elements. You’ll be able to more easily move elements in your web design program. Rather than moving an element to a random spot on the page, you can guide yourself using the horizontal and vertical boundaries. This assists you in making the move seamless.
- Better Design. Your text and images will be better spaced, which is something visitors will notice — even if they don’t know why they find your site attractive or appealing.
- Easier to Explain. You can show your clients why you chose certain design aspects or elements.
Beginning to see the benefits of a grid for your web design? Read on for best practices.
Common Concerns About Grids
Even with the advantages to following a web design grid system, some people can be hesitant to adapt to this way of thinking about bringing a site to life. Concerned web designers often feel like a grid system will take away their ability to innovate or will force them to churn out boxy, uninspiring pages.
While it’s true that new web designers can occasionally fall into the “blocky” web design pattern, they typically get better as they go. If you’re worried that a grid-based web design will cause you to create an unnatural-looking website, it’s time to think outside the box — and the grids. The more imagination you bring to the process, the better the outcome.
When to Use a Grid System
A grid system can be used as you’re designing, or it can be used afterward.
If you have a grid on the page while you’re forming a website, you can actively use the lines. Some web programs allow you to turn the grids on and off. That way, if you find you want the grid only part of the time, you can make that happen.
Still not convinced you want to see a grid while you’re in the artistic design phase? No problem. Turn off the grid pattern and design your website freehand. Then, turn the grid on and overlay it onto your site. Do you notice anything that seems to be out of proportion? Is there an element you’ve missed? Have you weighted text and images incorrectly? Your grid will provide you with the foundation for those answers.
Even if you’ve never tried a grid system before, it’s worth the experience. You may just find it to be the most efficient way for you to get your site design ideas into viable forms.