Grid forms the basic structure of a website and is a very important part in creating a good user experience website as well as an organized user friendly and nice-looking user interface. It serves as horizontal/vertical guidelines that provide a framework with spaces and sections for the organization of contents. Since grid is like the underlying skeleton that is often being created in the first step in designing a layout, it can be easily neglected and sometimes “hidden” in the final representation as the underlying columns and rows may not be the first thing that users put their focus on when looking at a well-designed website. However, once you put notice into the structures and try to observe the way designers organize contents, there is always a grid layout that can be interpreted underneath any of the good interfaces that are carefully designed.

 

A Good Example With a Well-Organized Grid Layout

One of the good examples I can think of with quite an obvious and simple looking grid layout is Netflix. Whether it’s on their website or app, the first thing that came to mind as I see their interface is that the layout design is very well organized and is easy to navigate as most of the contents in their layout are aligned next to one another and in rows that are separated by categories.

Once I started to take notice of the details, I found that even though I can clearly tell that there is a section of grid located at the very top of the layout (which is where the navigation bar is located), the section however does not have a clear border or a solid background that separates it with the section below. In fact, the entire section is in a transparent background that overlays the images/videos shown in the section below.

The Navigation Bar Overlapping With Another Grid’s Content

This kind of overlapping design creates a low sense of presence to the navigation bar and saves up some space with making the more important contents to fill up the space and catch the users’s eyes. The right use of color(texts are in white with a transparent gradient dark background) in the nav bar also makes it a successful design as the texts of the nav bar can still be easily readable and doesn’t seem to be mixed with the contents underneath.

 

As I mentioned above, even though Netflix uses a simple and organized grid layout with every content aligning to one another, they still uses a little bit of overlapping technique that sort of count as a creative element which “breaks the grid.” Some of the more creatively designed websites uses a lot more of these kinds of “techniques” that are able to free their contents from being limited in staying in the standard grid layout. There is, however, still a grid layout exists underneath, but some contents or elements such as texts or images can be intentionally designed in a position that does not fit into a single grid section. It can be overlapping or stacking elements(like collages!), varying alignments, or changing columns in width and height asymmetrically. In fact, these kind of layouts is called broken grid layouts. It may not be suitable for every websites, but it definitely brings more creativity, personality, and uniqueness into the pages.

A Creative Example Using Broken Grid Layout

For example, the website of UpperQuad uses broken grid layouts in every page of their website. The most obvious thing that “breaks the grid” is how the texts are designed to be extended outside of each grid.

 

The first page of their website shows a huge rectangular grid in the middle of the page. Inside the grid there is an animation playing in the background and texts showing “we are–––”, as well as another huge chunk of text showing “A creative company” that extends outside of the rectangular grid. This creates a popping out effect that catches people’s attention immediately since it is the elements that are special and unique that pops out the most.

 

 

Another interesting design they have in one of their pages is the overlapping of grids and images, along with irregular shapes of grid containing texts that are not fitted inside the grid. With layers of texts and images overlapping each other, but still in a consistent way that is clean and readable, broken grid layout really can create a lot of dimensions and originality to provide a much more fun and interesting user experience.

The Overlapping of Grids and Images & The Irregular Shapes of Grid With Texts Extending Outside the Grid Brings Dimensions and Personality to a Website

 

 

 

Lastly, I am going to talk about some of the bad examples of grid layouts. The first thing that came to mind is a website I once used for one of my digital art classes, it is a website called the collection of eliterature which contains a list of people’s electronic literature artworks that users can navigate through the page and read the descriptions of each one, and once you click the “BEGIN” button it links you to the correct website of each artwork. However, I think that this website is designed very poorly and is a very bad example when looking it through the grid system perspective.

A Bad Example of Grid Design

As you can see in the main page, even though there is a simple and sloppy grid shown in the layout, everything is so small and packed up together that makes it really hard to read. The website title is included in one of the grids but is very hard to recognize and can easily be misinterpreted as one of the artworks that can be clicked upon.

The Grid of the Layout Is Designed Poorly, Making the Page Look Cluttered

Inside the artwork page, everything seems so tight up together and the columns or grid are not designed well and obvious enough for the contents to look organized, users can only see rows of paragraphs with images inserted in-between the lines. With all the contents being so tightly packed up without any spaces or division lines to separate and organize them make the website looks cluttered and messy and make users like me feel anxious and overwhelming.

 

To conclude, creating grid layouts is definitely an important step that every designers should take in the first place when designing a website. Well designed websites have well structured layouts, whether you wanted to go for a simple and organized design or a creative and unique one, there is always a grid laying underneath the surface.