Whoever said grid-based web designs are limited to professionals with portfolio-based projects. Currently, grid based web design is very much in vogue and there’s no questioning why this layout has gained so much popularity.
So, what is a grid-based web design and what does it feature? If you are even slightly well-acquainted with web designing, you might be familiar with the term “grid layouts” or possibly have worked with one. The grid system works as a base for your website the same way a steel frame is constructed to build a house. It creates an order for the graphical elements we wish to place on our webpages (i.e. images, text boxes, headers, sub-headers, sidebars, newsbars, etc).
Why do we need grids for our webpages? It all bottles down to the fact that it creates a coherent structure that has its own aesthetic value. Many would argue that it restricts a designer’s creativity and leaves little freedom to spice up a page. This, however, is a misconception.
With some of the most fantastic and inspiring grid-based examples, we will prove that grids are engaging and have aesthetic layouts with plenty of flexibility. Here are some of the best picks!
Mobile Mozaic
Not only does this website have a visually appealing grid-based layout, but also a grid based brand name and logo. Mobile Mozaic is a gallery dedicated to some of the best iPhone applications available to mobile users. You can rearrange the elements displayed within the grid by selecting the “type” or category you are interested in.
UnHeap
Unheap labels itself as a “tidy repository of jQuery plug-ins”. We can’t imagine how “tidy” it would have been without the grid-based layout. Although, most of the page is covered by the grid, the top and left bars are reserved for menus, search boxes, icons, and buttons. The slide-out menus make this design a highly economical one without hurting ease of navigation.
Berndkammerer
Here’s a portfolio-based grid layout you can’t get enough of. Bernd Kammerer is a photography enthusiast who loves taking pictures of anything, anywhere in the world. The photographer has pictures of cars, people, landscapes, products, and much more. Most of his photos were successful magazine-based projects or photos used for ads or brochures. He also has a brilliant collection of stock photography web designers can download and use. It’s a simple, clutter-free website that does justice to his spectacular photography.
Faebric
Faebric proves that grid based designs are not limited to photography or paintings. The website is dedicated to the world of fashion and those who wish to enter it. This is basically an “online magazine” that details projects, courses, ideas, creations, and information about people who founded a label and fashion fanatics the audience can learn something from. The creative effort is a means to inspire young individuals and share all sorts of fashion work from all over the world.
Touch
Touch is a fantastic grid-based website that lights up an image at every “touch”. Touch is creative agency based in Scotland and the website it runs is a brilliant collection of all sorts of creative projects. The projects are not limited to one type (i.e. photography or art). Rather it is full of several skills combined: photography, logo design, business card design, print and digital design, as well as copywriting.
Karl Anders
You don’t have to limit you grid based web design to images one after another. Karl Anders proves otherwise by developing a creative and gorgeous grid based blog that has both images and text boxes placed in his grid system.
Killingsworthstation
The K Station website is another one that has been keeping up with the grid-based trend. The complete website is laid out on a grid leaving little room for any white-spaced gaps. The K station web site is no one’s personal effort at photography or art. This is a full-fledged real-estate business that aims to “to develop cutting edge, sustainable residential and commercial units”. What occupies the photos in the grid for a real-estate business? A gallery full of photography of people, places, and homes of their projects of course!
Word Work
Wood Work is a creative agency that has one of the most creative grid-based designs you will spot over the web. They work on film, graphics, and production. Their fun and unusual portfolio has long columns of their work with caption labels of the work, which is also grid-based and orderly. As you scroll to the right, the portfolio unfolds like a film reel and reveals more work. This is a compelling design that would clearly win the heart of high status clients such as Adidas, Unilever, Play Station, Heineken, and many more.