The Case for Gridless Web Design Systems - envato.com coupon

Back in the early days of the web, web designers or webmasters, used tables to lay out the content and structure of websites. In most cases, this led to tables nested within tables and empty GIFs used as spacers.

Then CSS came along and slowly things started to change. Grid systems emerged, with 960 grid probably being one of the most popular and oldest grid systems around. Grids have become the cornerstone of the modern web design. They provide readers with a sense of balance and bring about an aesthetically pleasing familiarity.

But as pleasing as grid systems are, they also come with an inherent flaw; where every website out there seems to use the exact same layout and structure, even though grids can be used to create complex layouts.

As a result, some websites and web designers have reacted against the grid system and opted for a gridless design. In fact, recently a number of websites embraced the brutalism trend as a way of rebelling against the grid system concept.

But is gridless design viable in the long haul? In today’s article, we’ll lay down a few reasons for gridless web design systems and showcase a few websites that use it.

Should You Ditch the Grid?

For a long time, grids have been hailed as the holy grail of web design. But many designers have felt stifled by them and forced into a structure that does little for creativity and unique designs.

When you take that into consideration, there are a few valid reasons why gridless web design systems might be better.

1. Gridless Systems Don’t Restrict Creativity

A standard grid system consists of a certain number of columns (usually 12) which are then combined to achieve the desired layout. And although they allow designers to create visually pleasing designs, they often feel restrictive.

If the available space for design is constrained by lines and columns, how can you think outside the box? How can you create something different when your canvas is already filled with an underlying structure?

When you remove the grid, you get a completely blank canvas. You can let your creativity run free and come up with a unique design. The designers behind the brutalist websites point out that you can still create a beautiful and functional website, even without relying on the grid.

2. Gridless Systems Don’t Have a Complex Concept

Grids can be hard to wrap your head around, especially the first few times you start to use them. And if you’re just starting out on your journey as a web designer, they can be even more complicated.

Just think of everything you need to do before establishing a grid – all the math behind it can be mind boggling. Sure, you can always use one of the popular grid frameworks to lay down the foundation, but you still need to spend some time understanding how the particular grid framework, well, works. And if you want to switch to a different grid system later on, the process begins anew.

In comparison, when you ditch the grids, there are no calculations to perform, no extra classes to remember, no additional CSS files or rules to add to your document.

3. Gridless Web Systems Offer a New Approach to User Experience

No matter which website you look at, they are all designed with an end purpose in mind. Whether that’s growing a fanbase for a band, increasing eCommerce sales for an online store, or landing a new job, each and every website is supposed to convert at some point in time.

When most people expect a traditional layout with a header, navigation and three-columns with a call to action or pop-up, it can lead to blindness and actually decrease the overall user experience.

By ditching the grid and opting for a gridless approach, you’re free to come up with new ways to improve the user experience and achieve the website’s goal.

What would happen if you simplified the design? What happens if you break the norm and focus on improving usability of the website instead of following the crowd?

4. Gridless Doesn’t Mean Void of Structure

As a final point in favor of gridless web design systems, bear in mind that just because there is no grid, that doesn’t mean the structure doesn’t exist. On the contrary, many websites designed without a grid still have hierarchy and structure that makes your design logical.

Four Examples of Gridless Web Designs

Now that we’ve covered the reasons why you should consider using gridless web design systems, let’s showcase a few examples of it in actual use.

1. HackerNews

Considered an example of brutalist web design, HackerNews doesn’t employ any grid system, yet it’s still functional and usable. Though it may not be considered as ugly as some of the other brutalist websites, it certainly is not what most consider a beautiful website.

However, there is no denying it that the website itself is an excellent example of simplicity that gets the job done.

2. Apple’s Developer Conference 2016

Apple’s website for their developer conference features plenty of whitespace and simple typography that resembles a code editor’s interface. There are barely any elements present that make it easy to focus on the content of the page.

3. Basecamp

Basecamp’s website pushes all of its content into the center of the website, leaving plenty of whitespace around it. Oddly enough, this doesn’t make the website appear squished and still conveys the main message. It’s immediately clear what Basecamp does, who it benefits, and the typography is large enough for anyone to read.

4. The Verge

The last example on our list, The Verge features a rather busy layout and bright colors with large typography. Though busy at first, the further down you scroll, the more white space shows up, allowing for some breathing room between elements. The large typography is enough to make it obvious which stories are more important above the fold, while the rest of them are all structured in a similar fashion: a noticeable black headline and a featured photo.

Is gridless design the future?

There is no doubt that web trends come and go. Some of them remain popular for a long time, before a new one emerges. For many, brutalist, gridless design is a little too jarring. For others, it’s going back to the basics, simplifying the design, and breaking away from cookie-cutter websites.

While brutalist design has been dubbed as making websites intentionally unusable and ugly, there are cases where ditching the grid has made the design simpler and easier to use.

Before jumping the gridless train, bear in mind that most website owners are accustomed to websites that have more tools and more functionality than what can be accomplished by stripping away the templated and familiar structure. Above all, keep your user’s needs in mind and focus on providing the best user experience possible. With that approach, you can’t go wrong.

 

Ready to abandon the grid and make your own web design? Check out all of our templates on Themeforest. 

_{Feature image: lucadp}

The post The Case for Gridless Web Design Systems appeared first on Envato.

envato.com coupon from Envato http://ift.tt/2liWRKO
envato.com coupon