I use various grids for the websites that I’m working on and have always either built grid layouts from scratch or used already finished solutions from providers such as Bootstrap and SemanticsUI. Still, after learning about this topic in class, I started to pay closer attention to how various websites use this technique. I noticed how many prominent websites don’t have a concrete grid system and how some other websites structure their websites in more unique and appealing ways. In my opinion, websites that contain a lot of data, such as analytics websites, websites that contain customer data, and other similar providers, should always try to use the grid layout to provide a better structure for its’ users. Still, for websites that strive to be more flashy and modern, it is important to play with grids to create more unique looks and feels. Below, I will demonstrate which website I think has a good grid structure, a bad grid structure, and what website has disrupted the grid structure to its benefit.
Successful Grid Layout – Google Analytics
I use the Google Analytics website to look at how many people have visited my websites and how people interacted with them. I never paid close attention to the website’s grid layout, but now I can see how well done this grid layout is. After researching the history of Google Analytics, I found how almost every iteration of the product contained a great grid layout.
In my opinion, sites like Google Analytics should do everything possible to provide this data in a well-structured way. They do not need to be flashy but should make data highly accessible and easy to find. The website looks consistent, and I always remember where the information I need is located, even if I haven’t visited the website in a long time.
Breaks The Grid – Stripe
When I think of the website that does an outstanding job disrupting the traditional grid layout, Stripe’s online payments platform is one of the first to come to mind. Stripe mixes great colors, fonts, and graphics. More importantly, is how Stripe utilizes grid layout.
In my opinion, Stripe does a great job of not overusing the grid layout, placing one grid on top of another, and making some grid cells have non-horizontally centered edges. Stripe’s website has a modern look and feel and does not look boring. Stripe has a great developer blog where the engineering and designs share how they constantly redefine how front-end and back-end development is done.
Unsuccessful Grid Layout – Glassdoor
In my opinion, the websites that fully utilize the grid layout have to have a memorable layout. A memorable layout can be described as when a user visits such a website a month later. They have to remember what is located and where. I think this is where the Glassdoor website fails.
In addition to having a bad grid layout, Glassdoor presents information in a very condensed and overpopulated way. The grids are different on every page, some job postings look one way, and others look completely different. That makes the website inconsistent. I think consistency one of the most important concepts to keep in mind when creating a website, and that is one of the many things that Glassdoor is lacking. To Glassdoor’s defense, it is not the only job posting website that has these issues, after doing some research, a lot of prominent job posting websites have such inconsistencies, but I also constantly see new startups in this area that try to reinvent this experience and provide users and more appealing and memorable experience.