Web design
When I think of grid designs, my mind immediately goes to Instagram. Every Instagram user’s account page is set up with a simple three-column grid. I love this setup because it can be as simple or as complicated as the user wants their page to be. For example, the screenshot I provided on the left is from my own personal photography account. I choose to make my posts in sets of three so that similar images appear in the same row. Users can further customize the grid if they so choose. One of my favorite examples of this is from Taylor Swift’s account, as pictured on the right. Swift’s account uses several images aligned on the grid to create one big image when you look at the account. However, not all Instagram users are attempting to make an elaborate or aesthetically pleasing account. What makes this setup so great is that it is simple enough for casual app users, yet it provides structure for those who want to do something a bit more advanced. Instagram’s slogan says to “Capture, Create & Share What You Love” and this grid allows their users to do just that.
Magazine Design
Another grid-based design, this time one that is not on a screen, can be found in magazine layouts. For my example image, I chose a page from Teen Magazine. The page is split down the center and alternates between text and images on the left and right columns. This page is very busy, with bright colors, graphic fonts, and big images. All these elements are balanced out with the simplicity of the grid format. The simple layout of the grid paired with the bright and playful design contents make the magazine page appealing to it’s target demographic of readers: teens.
Breaking The Grid
When I stumbled upon this during my research, I just couldn’t pass up the opportunity to write about it. This is a screenshot from the archived Spongebob website, and clicking the image will take you to the restored version of this page. The site is obviously intended for a younger audience, so the layout has to be relatively simple so that children can use the site. However, that doesn’t mean that it has to be boring by any means. This website breaks the traditional grid alignment because it has cartoon characters popping out from content in the page and taking up space in the margins. These quirky characters almost appear to be crashing in on the website, as they peek around corners and fly across the page. The placement of the characters is effective in breaking the traditional grid alignment, but not so much in that it becomes confusing for children to navigate the site.
diagram image
The image above is a wireframe diagram of the Instagram screenshot previously seen in this article. This diagram really shows the simplicity of the website’s format, which really allows the users to use their own creativity and personalize it with their pictures.