Using the grid system is part of the heritage of web design. It provides a framework within which a designer can quickly and coherently organize elements. The use of a grid allows designers to quickly edit, add and subtract from the overall design, establish a clear visual hierarchy, accommodate multiple screen sizes, and create an environment suitable for seamless collaboration. Does this mean that all good web design involves strict adherence to a grid system? Absolutely not. Talented and irreverent designers are capable of creating eye-catching designs by “breaking the grid” through the use of animation, layering, typography, and abstract usage of white space. The grid system is only a structured set of guidelines, after all, and adhering to those guidelines does not guarantee a successful design.
Museum of Modern Art (MoMA)
It’s easy to see that the designer of the MoMa’s webpage was able to be faithful to the grid system while still creating a fresh, eye-catching design. The landing page contains a wealth of valuable information without feeling overwhelming. The black and white header containing links to all of the most pertinent information sticks with you as you scroll. Regardless of where you are on the page, the “Plan Your Visit” button is right there waiting for you, in a bold, clean black sans-serif font. Your eye is naturally drawn to the alternating blocks of solid color and photography in the body of the page. Here you will find the most exciting and timely events, such as temporary exhibits and museum events.
This webpage contains a lot of information, and it is all easy to locate, easy to read, and aesthetically pleasing. Adherence to a grid system makes sense for a webpage such as this one. The majority of the information on the page needs to be changed out frequently. The grid system affords the designer efficiency in this sort of situation. As well, the clean, somewhat simple design remains unobtrusive, like an unpainted canvas, accommodating artistic images of a large variety and multiple eras without feeling congested.
Elegant Seagulls Digital Creative Agency
This website goes way off the grid, asymmetrically layering animation, typography, photography, and graphic design elements in a seemingly chaotic, yet compelling, and navigable way. This is the website of Elegant Seagulls Digital Creative Agency, an award-winning design agency, so, to be fair, their website should be show-stopping. The constant change in dynamic as you scroll further down the page creates a unique experience for the viewer. You can’t help but wonder what’s next. Each screen-full of the composition feels complete, while simultaneously drawing your focus down the page.
Their judicious use of neon yellow amongst shades of black, white, and grey, lends visual interest to an otherwise neutral color pallet. It also reinforces that urge to scroll, guiding your eye down through the composition. This website gives you a clear indication of not only the talent of this design agency but also their personality. As digital creatives, it is imperative to convey a feeling with your work, and I think their character really comes through in the design of this website. Elegant Seagull’s mission statement is to “keep the web funky, fresh, and converting.” Their ability to break the grid successfully with so many bold elements is demonstrative of their ability to do precisely that.
Amazon
We all get it. Amazon sells absolutely everything. Do they really need to put ALL OF IT on their home page? If the endless barrage of products I have no need for was not overwhelming enough, there is a scrolling animation constantly playing above and behind it. Does it adhere to a clear, logical grid system? Yes. Is there a discernable visual hierarchy? Yes. Is it pleasing to look at or easy to navigate? Nope. Not in my opinion, at least. Feel free to send me a flashlight so that I might better navigate through the labyrinth of menus, sub-menus, and sub-sub menus at the top and bottom of every page. (Fortunately, purchasing things through Amazon.com is much easier than navigating it.) Every time I visit this website, it feels like a visual representation of the gluttony of consumerism. I understand. It is a functional website for an e-commerce giant that makes the Mall of America look like a corner bodega. Still, the amount of information displayed at every click of their website gives me anxiety. Alexa, send help.
There you have it. Successful use of the grid system, successful defiance of the grid system, and successful desecration of the grid system. (Sorry, Amazon) There are innumerable examples of each on the web, and we encounter them in succession every time we open our browsers. Next time you find yourself cringing in frustration at a nonsensical layout, you may find yourself wondering if that designer fell off the grid.
Leave a Reply