<

Learn how to a build a cloud-first strategyRegister Now

x

Design Battle: Grid Based Websites vs Grid Based WordPress Themes

Published on
4,021 Points
621 Views
4 Endorsements
Last Modified:
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
Minimalism these days seems to be trending in web design. No wonder you see all those simplistic web layouts here and there while surfing the net. For the past couple of years, we've gotten used to seeing well-structured websites. Strict lines and light backgrounds leave nothing to the imagination. Yet, everybody wants to try it for their own project. Today I'd like to take you on a ride to the land of grid based layouts. Let's get a little deeper into what grids are and why we love them so much.
  
In short, grids are intersecting horizontal and vertical lines having regular intervals between them. Grids are the synonym of structure and order.  Some even think it's impossible to organize the visual objects on the web page without grids. So, there are a few quite obvious reasons for grids being so popular:

  1. grids create the content structure
  2. grids improve readability
  3. grids help to unclutter your design
  4. grids are flexible
  5. grids make your job quicker
 
To understand what grids do for a website layout, take a look at these two images:
 
ErAsahSrGjii3D35iux6zjNU07EyQTA9qsBv8gas 
Source: Guides​ Vnda Brazil 
jsfA56MEr-F3YO-Ifvs7XQkAwq5hF4NKe-8j-QXl 
Source: Guides Vnda Brazil

This is a sample design overlaid with grids. Thanks to these grids, the website sections are in better order. Also, the elements are placed inside the measures of grids and there is a fixed space between them. It makes the design look more cohesive.

There are many tools, generators, and frameworks allowing fast and comfortable use of grids.
I bet, designers here have used the 960grid CSS framework. Or at least heard of it. Photoshop also has grid plugins like Modular Grid Pattern or 960px grid PSD.

With growing pixel densities of modern screens, frameworks like 1140 CSS Grid have appeared. It's now retired, but you can check out the archive. Responsive designs demand responsive approaches in using grids. That's why Skeleton Grid System came round.
  
Not only you can learn how to choose the grid structure for your website, but create grids on your own as well. Also, "Grid System in Graphic Design" by Josef Muller-Brockmann will be a great read. 
There is another trend that derives from the grid based layout - Masonry layout. Designers may refer to is as a 'card based layout' or 'Pinterest style layout'. This is because Pinterest was the first online project that used this kind of layout. Based on columns, the rows don’t have a fixed height. This leads to better organization of elements within a web page.
  
6cE38LYzYWubixbM5v-15R64xh3Ra88EG894EnGl 
Source: W3 update tutorials 
Enough with theory, let’s proceed to practice. Just take a look at several live examples of websites using a grid based structure. No secret, masonry grid style layout is trending in web design. It makes a website look clean and organized. Uncluttering the content structure is a real perk of using this method. Masonry galleries allow visitors to pay more attention to your work. Isn't it an optimal solution for designers and photographers?

  
Efp7zirJvheyfWC9nbe6ZZgfgTakG1DaXkb0fX-P 
Source: Rodgers Townsend Branding Agency 
Observe a great example of masonry gallery. The tiles of images lead to a particular website section. This kind of structure looks artsy and handy at the same time. The same-sized squares of images look organized, yet with a hint of chaos. The intersection of text and imagery makes the homepage look a little like a collage.

  
4o-55N4cA-NdF-8-B1h3f5-uNR41-_6HJKI-fxHg 
Source: Faebric Design Store 
This one is a perfect way to make a product highlight or showcase product cards. Every image tile leads visitors to a separate website section. And the sub-sections also have this masonry principle in mind. This way a website looks edgier.  
  
CN6rzwSNN9YE9YG421Z3noaEOG-1Z8F_kNr3XgEm 
Source: Teruhiro Yanagihara Home Page 
Our third example also utilizes the masonry grid based layout. The only difference is in tiles separated from one another. This one reminds of a card-based layout. A bit of asymmetry gives it even more charm. That’s a really cool way to design a blog.
  
More and more people today use WordPress themes for their websites. And not for nothing - they are quite handy and offer many customization possibilities. Template providers follow the web design trends and embody the best practices in their products. This is why grid based layouts are quite common in pre-made designs lately.
  
Grids are versatile, so it's possible to apply them in business and personal websites. Let's take a look at several examples of WordPress themes that make good use of grids. Let’s take business first. Not a secret that real estate business is Internet dependent. Since there's a need to showcase housing online, all content needs structure. You can see masonry grid based layouts in many real estate WordPress themes.   
  
cX5EItgReVULDCmWnWvRt8MAawUhuWRYMRkIWm7B 

Combined with flat design, a layout like this gives space for showcasing business deals. Grid alignment alone creates professional look and feel. Grid layouts are perfect for product-based businesses. They create better user experiences and allow visitors surf the website nice and easy.  
  
But what if your project is not a business related one? Social websites are quite popular among different demographics. People get engaged in different social and religious activities and organizations. This is why these types of online resources must look neat and have a well-structured content. And here's where grids come along. Take religious WordPress themes, for instance. Even though they don't use masonry structure, they still have a basic grid alignment. Thanks to this navigation becomes easier and handier.
  
IwrXpAeyUEr37uHuvgBFEwzk61lZa7BFlV83OVto 
And what about creative projects? Do they exploit the strict grid structure in the design? Some may think that grids can make a music website look too strict and boring. This is not quite true. Contrary to this popular belief, grids become quite helpful in laying out the discography. Or creating an exciting gallery for a singer or a band. For this reason music WordPress themes are great for creative projects.
  
WH2wPfJT60Ox14GGlbd7Mv0sCa8_ACdmcwzXLjZK

Even though grids associate with structure and organization, they're not rock solid design principles. It's wise to think of grids as a design metaphor that should guide and not restrain your imagination. Grids are invisible, yet a grid based website channels structure. As you can see, grid based layouts are a "here to stay" web design trend. So, don’t be afraid to use it in your projects!
 
4
Comment
Author:Irene Adler
1 Comment
 
LVL 66

Expert Comment

by:Jim Horn
Nicely done.  The graphics support the content very well.  Voting Yes.
0

Featured Post

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

Join & Write a Comment

The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…
Suggested Courses
Course of the Month20 days, 19 hours left to enroll

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month