Again within the early days of the net, internet designers or site owners, used tables to put out the content material and construction of internet sites. Typically, this led to tables nested inside tables and empty GIFs used as spacers.
Then CSS got here alongside and slowly issues began to vary. Grid methods emerged, with 960 grid most likely being some of the standard and oldest grid methods round. Grids have develop into the cornerstone of the trendy internet design. They supply readers with a way of steadiness and produce about an aesthetically pleasing familiarity.
However as pleasing as grid methods are, additionally they include an inherent flaw; the place every website out there seems to use the exact same layout and structure, regardless that grids can be utilized to create advanced layouts.
Consequently, some web sites and internet designers have reacted in opposition to the grid system and opted for a gridless design. Actually, just lately a lot of web sites embraced the brutalism trend as a means of rebelling in opposition to the grid system idea.
However is gridless design viable within the lengthy haul? In at present’s article, we’ll lay down a number of causes for gridless internet design methods and showcase a number of web sites that use it.
Ought to You Ditch the Grid?
For a very long time, grids have been hailed because the holy grail of internet design. However many designers have felt stifled by them and compelled right into a construction that does little for creativity and distinctive designs.
Whenever you take that into consideration, there are a number of legitimate the explanation why gridless internet design methods may be higher.
1. Gridless Methods Don’t Limit Creativity
A regular grid system consists of a sure variety of columns (often 12) that are then mixed to realize the specified format. And though they permit designers to create visually pleasing designs, they usually really feel restrictive.
If the accessible house for design is constrained by traces and columns, how are you going to assume exterior the field? How will you create one thing completely different when your canvas is already crammed with an underlying construction?
Whenever you take away the grid, you get a very clean canvas. You may let your creativity run free and provide you with a singular design. The designers behind the brutalist web sites level out you can nonetheless create an exquisite and purposeful web site, even with out counting on the grid.
2. Gridless Methods Don’t Have a Advanced Idea
Grids might be exhausting to wrap your head round, particularly the primary few instances you begin to use them. And if you happen to’re simply beginning out in your journey as an online designer, they are often much more difficult.
Simply consider every thing you could do earlier than establishing a grid – all the maths behind it may be thoughts boggling. Certain, you possibly can at all times use one of many standard grid frameworks to put down the muse, however you continue to have to spend a while understanding how the actual grid framework, properly, works. And if you wish to change to a special grid system afterward, the method begins anew.
As compared, while you ditch the grids, there are not any calculations to carry out, no further lessons to recollect, no extra CSS information or guidelines so as to add to your doc.
three. Gridless Internet Methods Supply a New Strategy to Person Expertise
Regardless of which web site you take a look at, they're all designed with an finish function in thoughts. Whether or not that’s rising a fanbase for a band, growing eCommerce gross sales for an internet retailer, or touchdown a brand new job, every web site is meant to transform in some unspecified time in the future in time.
When most individuals anticipate a conventional format with a header, navigation and three-columns with a name to motion or pop-up, it could result in blindness and really lower the general consumer expertise.
By ditching the grid and choosing a gridless method, you’re free to provide you with new methods to enhance the consumer expertise and obtain the web site’s objective.
What would occur if you happen to simplified the design? What occurs if you happen to break the norm and give attention to enhancing usability of the web site as a substitute of following the gang?
four. Gridless Doesn’t Imply Void of Construction
As a last level in favor of gridless internet design methods, keep in mind that simply because there isn't any grid, that doesn’t imply the construction doesn’t exist. Quite the opposite, many web sites designed and not using a grid nonetheless have hierarchy and construction that makes your design logical.
4 Examples of Gridless Internet Designs
Now that we’ve coated the the explanation why it is best to think about using gridless internet design methods, let’s showcase a number of examples of it in precise use.
1. HackerNews
Thought-about an instance of brutalist internet design, HackerNews doesn’t make use of any grid system, but it’s nonetheless purposeful and usable. Although it might not be thought-about as ugly as a few of the different brutalist web sites, it definitely will not be what most take into account an exquisite web site.
Nonetheless, there isn't any denying it that the web site itself is a wonderful instance of simplicity that will get the job accomplished.
2. Apple’s Developer Conference 2016
Apple’s web site for his or her developer convention options loads of whitespace and easy typography that resembles a code editor’s interface. There are barely any components current that make it simple to give attention to the content material of the web page.
3. Basecamp
Basecamp’s web site pushes all of its content material into the middle of the web site, leaving loads of whitespace round it. Oddly sufficient, this doesn’t make the web site seem squished and nonetheless conveys the principle message. It’s instantly clear what Basecamp does, who it advantages, and the typography is giant sufficient for anybody to learn.
4. The Verge
The final instance on our record, The Verge incorporates a quite busy format and vibrant colours with giant typography. Although busy at first, the additional down you scroll, the extra white house reveals up, permitting for some respiratory room between components. The massive typography is sufficient to make it apparent which tales are extra essential above the fold, whereas the remainder of them are all structured in a similar way: a noticeable black headline and a featured photograph.
Is gridless design the longer term?
There isn't any doubt that internet developments come and go. A few of them stay standard for a very long time, earlier than a brand new one emerges. For a lot of, brutalist, gridless design is a bit of too jarring. For others, it’s going again to the fundamentals, simplifying the design, and breaking away from cookie-cutter web sites.
Whereas brutalist design has been dubbed as making websites intentionally unusable and ugly, there are circumstances the place ditching the grid has made the design less complicated and simpler to make use of.
Earlier than leaping the gridless prepare, keep in mind that almost all web site house owners are accustomed to web sites which have extra instruments and extra performance than what might be achieved by stripping away the templated and acquainted construction. Above all, maintain your consumer’s wants in thoughts and give attention to offering the very best consumer expertise potential. With that method, you possibly can’t go incorrect.
Able to abandon the grid and make your individual internet design? Take a look at all of our templates on Themeforest.
Function picture: lucadp
