Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Grid Design: It Doesn't Have to Be Boring

DZone's Guide to

Grid Design: It Doesn't Have to Be Boring

Color, typography, and other things are appealing, but the structure is what keeps a visitor’s focus.

· Web Dev Zone
Free Resource

Learn how to build modern digital experience apps with Crafter CMS. Download this eBook now. Brought to you in partnership with Crafter Software

Great design is a matter of who is defining it. To the designer, it may be defined by art and creativity; to the client, it may be defined quite differently – its look, of course, but, as well, it’s utility and the user experience and interface. The user must be able to see consistency, organization, and structure so that content presentation is clear and understandable. Color, typography, and other things are appealing, but the structure is what keeps a visitor’s focus. Welcome to the world of grids — understand that using a grid system can be seen as something that enables you rather than restricts.

The Basics – Defining the Grid Structure

 At its most basic, the grid system is just a series of vertical and horizontal lines on a screen. They intersect at certain points and are used as the background upon which to arrange your content. When grids are used, content can be laid out and placed so that it is readable and viewable in an organized way.

 Grids have always been used in hard copy print publishing. Their incorporation into web design was only natural, as a variety of CSS grid options began to surface. Today, they have become standard and form the base of which you will be able to grow a design that users will find familiar and consistent. Do some designers “break the rules” and veer away from grid systems? Yes, they do on occasion but only after understanding and implementing grid systems first. Then, they are able to experiment with small variations.

Advantages of Using a Grid System

Proportion is the most critical piece of visual presentation. When art students create portraits, for example, they use a grid system to get the right proportions of the face and body. Even when presenting inanimate text and visual objects, there must be proportion. Elements of your design must be balanced based on importance and layout placement.

The other advantage of a grid system is seen when the design must be coded. Those elements that are uniform can be identified and then applied to your CSS structure.

Are There Disadvantages?

Yes. New designers can find grids really restrictive, and it takes a lot of time to get used to utilizing them. They seem almost like trying to impose a clinical solution to a creative endeavor. There is a possible solution for this that even experience designers use.

Play around with your elements and lay them out without a grid structure first. Find a layout that you feel looks right to you. Then, you can overlay a grid, or several different grid structures until you find one that you think may work with the general layout of your elements. If you cannot find at least a loose match, then either continue to look for other grid options or play with your elements some more. Chances are, you will find a grid that works with just a bit of tweaking of your layout or the grid. 

Another disadvantage is that grid systems are just hard. It takes discipline and willpower to work with them, and you will initially be frustrated. Some designers have “aha” moments as they use them; others struggle and practice for long periods of time before they get used to them and see their value. The best advice in this arena is to keep at it, to keep experimenting with a larger variety of grid structures. It also helps to study other web designs that you really like and overlay grids on them to see how those designers have used their grids. Doing this can also help to generate ideas as you are playing with your elements and optional grid systems. 

The point to be made is this: There are great, wonderfully creative, compelling and engaging designs out there that were built around grid systems. They are anything but boring.

Some Tips for Using Grid Systems

Here are just a few practical tips to keep in mind as you work with grid systems:

  • Place an overly of your selected grid on your design. If you are “in-browser” designing with a chosen CSS framework (canned or original) and you are comfortable doing that, then go for it. If you are not, however, consider crafting an overlay of your selected grid system. Then, no matter what graphics program you are using, set your grid as the top layer and lock it into place. You can always turn it on or off, but it will be there as a reminder as you are placing elements. And, if it is just not going to work, dump it and find another to overlay that is going to fit your concept better.

  • Identify your grid column edges by crafting guides for the beginning and the end of each of those columns.

  • Experiment with restrictions. While you may think that working within s grid system is plenty restrictive, whether it is original or not, this may not be the case. You may have a grid with 12 columns – the greater the number, actually, the less restrictive your system is – but try to force yourself down to, maybe, six instead. Doing this will give you good practice in focusing on the relative importance of your elements, especially for users. Over time, you will come to prefer fewer columns for a lot of your designing.

  • Spacing is crucial. Designers tend to focus on the columns – the number there are and the gutter space width between them. This tends to cause a designer to “think” horizontally. Remember that you have vertical space too. Both horizontal and vertical spacing are important, especially when you are looking at how much space should be provided around all of your elements. For example, when you have chunks of text that must stand out, your content layout must look at the entire surrounding space. You can use TrustMyPaper for helping with the creation of unique text. It helps to have the same amount of gutter space vertically as you do horizontally.

Old-World Practice

When you find yourself in between jobs, get out paper and pencil. Experiment with grid systems, either your own or frameworks that already exist. Then play with design elements and their placement. The more experience you get working with grid systems, the more comfortable you will become. And the more comfortable you become, the more creative you will see you can be.

Crafter is a modern CMS platform for building modern websites and content-rich digital experiences. Download this eBook now. Brought to you in partnership with Crafter Software.

Topics:
grid ,web dev ,design

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}