Designers have long been taught grid-based design in order to organize content. Let’s take a look at some designs that use the grid successfully, break the grid intentionally, and some that fall a little short of implementing an interesting grid use.  

An example of a successful grid use in my opinion is this site for French law firm Quincy Requin Associates. The site is meant to convey basic information about the firm. Who they are, what they do, contact, and address are included. What I think works about the site is its use of white space within the grid. Text is given a lot of room to breathe. A simple, clean design with a minimal color palette is broken up with an image that invites the user to scroll down. The image more or less shows the grid but is broken up with content. Further down the page, text content and images are connected. I think this design is a success due to its ability to use the grid to lead the reader down the page in an engaging way. The lack of spacing between the content also adds to this effect. Since the client here is a law firm, they aren’t going to focus on specific cases as each one is different. What they need is to present basic information about their firm in a simple, attractive way. This site delivers exactly that. 

Next is an example of a site that doesn’t work so well for me is for NMG Group, a global financial firm. The background image is fine on its own but the presentation of the overlapping buildings seems to be at odds with the grid. Besides red, the color scheme is almost entirely in grayscale. A large gray bar with text further obscures the image. The nav bar at the top and the elements below seem to be on different grids entirely and the image between seems out of place. When hovering over the nav elements, the drop-down menus don’t align with the grid at all. I don’t find this to be a successful design because it feels not only disjointed but boring. It seems that the designer might have paid more attention to simply applying content to the page rather than the site’s appearance or functionality. As a relatively new web designer, I don’t feel comfortable giving a scathing review of another’s design. Sites like this give me a good idea of what to look out for and avoid in my own work. 

An example of a site that breaks the grid in a non-traditional way, is this site from Anakin Design Studio. Where the NMG site seemed to not fit together well, the Anakin site embraces the chaos. As the user scrolls down from the main landing page constructed from spliced images that don’t appear to be attached to a grid whatsoever, they are greeted with images, geometric gradients, and typographic elements in motion. The gallery showcasing their work is very unconventional, at times using a clipping mask “X” instead of a standard thumbnail frame. The neutral colors from the first page shift to more vibrant ones. A sanserif typeface is paired with an italicized serif. The composition is exciting and experimental, giving the site a modern and original feel. It’s no surprise Anakin is the recipient of numerous awards and has clients by the likes of BMW. This site is an inspiration. 

Edit: Since my original post, the Anakin site has updated their landing page.  Sections of orange and light blue watercolor swirls have replaced the diagonal, neutral tone slabs. It looks like the new images were added to the same containers as the first version. I like this version even more! It still works against the grid, but is not as jarring without the diagonal lines. I know it is bothersome for some when elements such as these don’t line up, but in this case, I think it works extremely well.