When building most things, it’s important to have a good base. For a car, it’s the frame. For a house, it’s the foundation. For pizza, it’s the dough. A grid layout for a website works the same way. It is a tool that provides you with the foundational properties to appropriately size your sections, images, objects, etc. and layout a clean visual for your viewers. Last night, while looking for the end of the internet, I stumbled upon a lot of websites that make good use of grid-based design, some that missed the mark and others that “don’t need no stinkin’ grid” and successfully (also literally) thought outside of the box. Let’s review some of my findings.
Well Done
The internet is a vast and scary place, so initially I wanted to just look at automotive manufacturer websites, and from what I found, they all follow the same recipe. Some do it better than others, but I couldn’t find any companies doing anything earth shattering or next level, so I decided to expand my reach into the depths. While I was perusing auto websites, I paid a visit to Tesla. It’s no surprise that this company has a clean, intuitive, well designed website. This site has no flashing ads, no videos, no nonsense. Just clean, large images of their cars (and some other products), a consistent font and some weird auto scrolling feature that I have never seen before. The site gets even better once you click into the sub-sections, but I won’t spoil it all for you.
While I wouldn’t say this page follows a grid in the traditional sense, it doesn’t exactly break any rules either. This is a clean and organized structure that captures your attention with images and some text/buttons overlaid. Technically the large scale images are on a grid, they just go the distance. The header and footer fall into a traditional grid and the header follows you as you scroll. The site is extremely easy to navigate and is laid out logically. Because the landing page doesn’t follow the traditional grid layout to a tee, I wanted to share a subpage. The design is consistent on each model (or product even). The subpages use what looks to be a two column format. Column one on the left occupies about 80% of the page and column two on the right, the remaining 20%. In the subpage example below you see an image of the vehicle occupying the majority of the page, while the right-side column scrolls through your options. As you scroll down, the image changes to represent the option you are viewing.
I would say the designer was going after a clean, consistent user experience that feels on brand with the customer’s perception of the company and they nailed it.
Bonus: After visiting Tesla, I checked out the websites of the other companies Elon Musk owns. SpaceX, The Boring Company, OpenAI, Starlink and Neuralink all follow a similar design theme and they are all pretty awesome. I would check them out. OpenAI pushes the grid a bit and is really nice.
Nope
I feel like I am constantly going back to AOL to see if they got with the times and updated their site. To my surprise (the last time I looked was in February) it has actually gotten worse. This isn’t the first time I have used their site as an example of bad design.
Let me first state what I think makes the site painful to view from an aesthetics standpoint. The layout in general is confusing. There is to much to look at and nothing that draws you in. The image carousel has 65 images in it. That’s right, 65. Do they honestly think people are going to click through 65 images? There are embedded videos that either lag or don’t work and I found a number of dead links on their page as well. The fonts are inconsistent in style, weight and size and the further down you scroll, the worse it gets. A cornucopia of images and lists. Square images, rectangular images, rectangular images with rounded corners. They couldn’t just throw some circles and triangles in there to check all the boxes?
Good golly, the grid. So I get that the use of white space helps in certain scenarios, but please tell me what that large blank area in the upper right hand corner is accomplishing? You could easily slide everything up and not doing so actually does a disservice to your attempt at using a grid. Now you have text intersecting with images or tables and lists. The gutters are all different sizes. Another thing that haunts you as you scroll is the search bar. Why doesn’t it run the full length of at least the carousel? I would be happy if it lined up with anything, but it doesn’t.
I’m really not sure the look that the designer is going for with this page. My guess is at some point they made an attempt to modernize their page to stay relevant and then forgot about it. It’s just too much content to scroll through, read through or even too many images to flip through. And remember, the madness follows you on the subpages. I can’t imagine having so much content that you need to have a landing page this hectic and have enough unique content for subpages. A quick study of “less is more” would serve them well.
Rulebreaker
Finding a website that really breaks the conventional design is difficult, unless you are specifically searching for them. Being that artists typically like to break the rules, I checked out a number of museum websites and stumbled upon this beautiful masterpiece. Behold the Brussels Museums website.
What’s not to like about this page. A carousel of images that you can pause, if you please. Text overlays. Great use of typography. Consistent/clean fonts and a unique mustard colored theme. Links that are typically reserved for a header, are turned vertically and overlay the main image carousel. Like a header, it follows you as you scroll and even better, those options slowly become highlighted when you hover over them. The main real estate on this page just doesn’t follow any traditional grid rules at all. What’s important here is that even though it doesn’t follow the grid, it feels cohesive and the elements above help tie everything together.
As you scroll down, it switches from the landing page to some cards with clean images and text that direct you to the different museums in Brussels. Not only do these cards not conform to a grid, but when you hover over them, they overlap the adjacent card. The subpages are equally stunning and also have overlapping text and images. There are some minor things that don’t work for me on the main page. There is a logo all the way at the bottom that doesn’t land on the grid (one of the only grids they use on this page) with the other icons and I don’t quite understand the thumbnail image that pops up when you over the title of the news articles.
I feel like this designer wanted to grab your attention and try some new things and by using typography, consistent color and overlays they accomplished just that.
Closing THOUGHTS
I hope this gives you some insight on grid layouts as a foundational tool. There are ways to use them well, ways to try to use them and fail and ways to break them with grace. They are merely guidelines, after all.