Grid In Web Design

#GuruChats: To Grid Or Not To Grid In Web Design

From afar the dilemma about grids is a whirlwind of mixed views – while some web designers and developers have an aversion to grid systems, others seem to like it or rather need it. Which side are you on?

We gathered valuable insights and advice in #GuruChats this time, vis-à-vis the use of grids in website design. It was an exciting and educating Wednesday with an expert panel of experienced web designers.

Emilio Takas

Norman Wright

Before diving deep into the questions, I’ll give you an overview of the topic. Web design as you may know is a prerequisite for businesses to survive in an unforgiving digital age. The challenge for designers however, is how to design an aesthetically powerful user-interface and create a functional user-experience for companies and users alike. On one hand, there are designers with a modern and minimal perspective who prefer to break the rules of alignment and layout. On the other hand, there are those who stick to a frame of units for an inch-perfect composition of content and visual hierarchy. With this chat, we wanted to see whether or not grids are a must in the creation of websites.

Q1. What Is A Grid System And Why Do We Need It In Web Design?

It is a framework of measurements a designer can use to structure images and text in a visually pleasing and directional way on a web page. Graphic designer, Josef Muller once said “The grid system is an aid, not a guarantee. It permits a number of possible uses and each designer can look for a solution appropriate to his personal style. But one must learn how to use the grid; it is an art that requires practice.” For web designers, a grid system is an “invisible” parameter to design freely with responsibility. You don’t need to stick with one type. You can use grid and layout trends to design websites.


Q2. Which Is The Best Way To Go About Grids: Creating Your Own Or Buying A Pre-Set Like Bootstrap?

Front-end designer and developer, Jan Drewniak isn’t a fan of presets like Bootstrap. For him, customizable CSS grids with editable containers, rows, columns and gutters give website creators the liberty to be independent and innovative. Perhaps “experimentation” is a step designers shouldn’t be deprived of. Nevertheless, it depends on the designer. Norman Wright for instance feels that preset tools also give designers the option to modify grids.


Q3. Do Responsive Grid Systems Solve User Experience Issues In Modern Web Designs?

Craig Sharkie & Andrew Fisher in Jump Start Responsive Web Design elucidate the importance of responsive web design for user experience. They say it’s about “ensuring the user enjoys the best experience possible when visiting your website.” A modern website firmly focuses on users; in fact icon designer Susan Kare once said that a good web design doesn’t need a manual. In this case, a responsive grid seems like a necessity to keep up with the “pace and breadth of the change” in devices.


Q4. How Do Grids Hinder Designing With Visual Hierarchy?

Visual hierarchy gives a purpose to a website. It is a way to strategically put design elements and principles in place to guide users from one point to another, to prioritize information such as call-to-actions, and to ease comprehension. Grid systems support this practice.

On the other hand, some designers feel restricted when it comes to using grids.

Q5. Do You Think Minimalist Trends Will Eliminate Grid Systems From Web Design? E.G. Apple Plans To Do.

Just because it’s a minimalist website, it doesn’t mean it was easy to make. Romanian painter, Constantin Brâncuși said, “Simplicity is complex resolved.” This is something we know yet fail to realize that the journey from complex to simple is taxing. Even the most modest website trends need a pattern to follow and a guide to work with.


Q6. Ais Vs. Human Web Designers: Is There A Competition?

Websites like The Grid and Wix already have an algorithm in place with a set of questions for designers to create a grid on the basis of their preference. Artificial intelligence is a futuristic and entertaining idea but for conversational commerce for now. When it comes to laying the grid for a website design, there is a problem – it doesn’t seem practical.


Q7. What Are Your Best Advice For Following Grids?

There is no predefined formula of success when it comes to grids. There are both restrictive and customizable tools to plan a grid to design a website. This chat may have steered in favor of grids in design…

But as Norman highlights, it is important to know the ways in which a grid works to be able to use it in web design and development. In response to this, Emilio has a great tip for you.

A visual design blogger passionate about interactive, experiential and captivating techniques designers, marketers and brands use to accentuate messages, tell stories, and spread awareness. I’m a visual addict like Alice, who finds books (or anything) without pictures boring! My writings focus on graphic and web design, branding, and visual marketing. My hobbies are to write poems, draw zentangles, read mysteries, and watch YouTube videos.

Leave a Reply