Ditching the Grid: Alternative Layout Strategies and Tips
Are you tired of creating building websites using the same old grid-based layouts for every project? Have you been itching to break away from the norm and attempt something a little more organic?
Today we’ll take a look at a few sites that have done just that to see what we can learn about alternative layout methods and how they can be successfully implemented.
2 Million+ Digital Assets, With Unlimited Downloads
Get unlimited downloads of 2 million+ design resources, themes, templates, photos, graphics and more. Envato Elements starts at $16 per month, and is the best creative subscription we've ever seen.
Grid Layouts
Grid-based layout is a cornerstone of modern web design. In a time where clean, minimalist designs are held up as the ultimate ideal (a direct response to the messy design styles of the 80s and 90s), the very definition of “good design” will no doubt include mention of simple and solid alignments.
Ultimately this is a good thing. Grid-based layouts provide unmatched structure, balance and organization. They bring a predictable rhythm and a sense of familiarity to the design and let the content stand out on its own accord.
Grid layouts are incredibly user friendly. We instinctively read a page from left to right, top to bottom and grids tend to reinforce rather than defy this tendency. With a grid-based design, the content is exactly where the viewer would expect it to be, no extraordinary effort required.
We have entire design galleries, like the one shown above, dedicated to grid-based designs. There are countless CSS frameworks and Photoshop templates devoted to helping us achieve rapid grid layouts with minimum effort. If design is a religion, grids are the holy scripture to which we ascribe truth.
If we run with this over-reaching metaphor even further, then today’s topic is nothing less than “blasphemy.” Let’s explore how we can introduce a little more variety into our layouts by abandoning the grid, at least partially, in favor of more organic layouts and graphics. It turns out there are in fact multiple ways you can structure information, just don’t tell the design gods.
Find Other Ways to Direct Attention
Our first example of an alternative layout comes from We Are Empire, a digital design agency. Here’s a screenshot of the homepage of their website.
As you can see, it definitely doesn’t represent your typical web page layout. There are several things to note here. First, the primary objects on the page are circles. Any normal, grid-based website is usually made up primarily of rectangular objects. Grids are made up of rectangles so objects with four edges and at least minimally hard corners work quite well.
By contrast, almost all of the organic layouts you’ll come across utilize circles heavily. Circles feel more organic and seem to fit this layout style better. Further, they present rebellious designers with yet another way to deviate from the norm.
Even more important than the shapes of the objects is the way that they’re connected. Once again, grid layouts can be read very naturally, but organic layouts leave the eye to wander in confusion in search of what to look at next.
By creating a rudimentary path, the designer here has created a clear flow of information for you to follow. Looking at this page, you almost can’t help but to follow the path with your eyes; a simple and extremely effective trick for controlling the user experience.
Fewer Objects
The path helps, but isn’t a complete necessity. This is especially true when there are really on a few objects in the layout. For instance, check out Michael Wong’s page below, which utilizes a similar layout.
Wong’s site uses another popular technique for these types of layouts: mouse-controlled animation. As you move your mouse around on the screen, the objects in the layout move around in a parallax effect that simulates a 3D interface.
Structure Is Still Present
One very important thing to remember as you stray from grid-based layouts is that you don’t necessarily have to abandon structure altogether. As the Melonfree layout below illustrates, your design can still be highly logical.
Here, in favor of a simple grid we find heavy utilization of rounded symmetry. The design is quite attractive and well-balanced. Reading in a circle definitely isn’t the easiest thing in the world but the end result is refreshingly different.
Focal Points
When you’re working with an alternative layout, always attempt to stay keenly aware of where you are creating focal points. The layout above intentionally has a heavy draw towards the center where you’ll find a large graphic of a melon, which represents the name of the company.
In your layouts, use size, color and placement of objects to create specific focal points and analyze how well they work with the visual path that you’re trying to create (from above).
Build a Scene
A very different but still quite popular alternative layout method is to create a scene that serves as the interface for your site. I typically warn heavily against this as it usually ends up going in the direction of a bad, Flash-driven fast-food-type site where you can’t find a single thing.
However, this method can and does lead to some attractive, well-designed sites as well. Consider the iCodeLabs site below, which uses a really great illustrated scene that can be navigated by, you guessed it, moving the mouse around.
One key feature here is that the iCode site reserves the explorative scene as an optional fun element of the site. The primary navigation is a more familiar bar interface at the bottom of the page. No hunting for links here!
Grids: Hidden But Rarely Gone
The big secret to all of this discussion about abandoning grid-based layouts is that they’re rarely entirely absent from a given web design. In fact, if you visit the sites shown above, you can see that there’s still an overall grid structure to many of the pages. The alternative layout methods exist in areas within the greater structure.
The lesson here is that you don’t have to, and often don’t want to, completely abandon the safety of clear, simple and logical layouts to achieve something that looks and feels unique.
Tilted Grids
One clever way of hiding your grid-based layout is to make strong use of diagonal lines instead of vertical and/or horizontal lines. The same exact conventions that are used in normal grids can be applied, the result simply looks edgier.
As you can see, Estilo DLT has the appearance of an organic layout, but in reality it’s conforming to some very strict layout principles.
Conclusion
Breaking away from the norm can be a remarkably refreshing experiment. It helps you to think differently and see design in ways that you never have before. Exploring alternative layout ideas is a prime way to get your feet wet in this arena. Use the examples and information above to get you started in the right direction.
Remember that grid layouts are often broken but rarely abandoned completely and that even when you aren’t using a grid there can still be a very logical structure to your layout. Leave a comment below with a link to any untraditional layouts you’ve come across. Also, let us know whether you’re a stickler for grids or are prone to venture outside the box with your layouts.