Welcome to the Grid: Using the Grid Method for Brilliant UI Design
Website grid designs are sleek and navigation-friendly. Every web designer should have an understanding of grid design to create balance on a page and digital spaces they can easily manage and replicate as needed. The finished product doesn’t have to mimic the consistency of New York blocks or a Lego city. In fact, as a design tool, grid layouts enhance a designer’s ability to create a user-friendly interface.
Gridding and the World of Design
Grid layouts aren’t exclusive digital design territory. In fact, print medium artists and designers have used the layout style for hundreds of years. Artists in the Renaissance used grid-related concepts to create a sense of depth and give perspective to works. Newspapers, magazines, and other print media use grids to create clean spaces and inform subject proportions. In a way, grid-related concepts serve as the science behind an artfully designed website layout.
The Basics of Grid Layouts
Whether you create a vertical- or landscape-oriented layout, the first step in creating a grid is to determine the number of columns you need. Gridding works for one column designs as well as several column designs. Rather than slapping content within the confines of a pre-determined grid, designers refer to some fundamental art principles:
- The rule of thirds. In graphic design, photography, and other art forms, the rule of thirds can create a sense of visual flow. The idea is that you should create a 3×3 grid across any subject matter and align visual focal points with the lines of the grid to create balance and an aesthetically pleasing outcome. In web design, this often means creating navigational cues and columns that align with the rule.
- Dynamic symmetry. Along with the rule of thirds, many use the concept of dynamic symmetry to create balance—a practice that flourished in ancient Green designs. The system is mathematically complex, but it uses the golden ratio and root rectangles to create a grid used for aligning a composition.
- Golden ratio. An object follows the golden ratio if it’s length is 1.6180 time the width. In art, students often study works by Da Vinci and Michelangelo containing the golden ratio. The human body is one of the most well-known examples of this concept. You probably recognize Da Vinci’s “Vitruvian Man” which exemplifies the connection between the human body and the golden ratio.
- The Fibonacci sequence. 0, 1, 1, 2, 3, 5, etc.… The Fibonacci sequence is similar to the golden ratio and also appears in the natural world in plant growth patterns, shell patterns, and in the human inner ear. Designers may use this pattern, which creates a spiral, to create a slightly different type of flow pattern.
In concepts like these, you can really see the mathematical and precise nature of famous works of art and web design. An untrained eye may not readily see the patterns without a grid overlay. In fact, the grid isn’t designed to box in subject matter, but to make it appear visually engaging.
With These Tips for Applying Grid-Related Concepts
Whether you’re a self-taught web designer or you’ve taken classes, learning about and incorporating some of these artistic grid-friendly concepts can help you keep your design feeling fresh. Here are some tips for incorporating grid layout ideas into designs for a better UI:
- Always use a grid. Even if you feel completely confident in your ability to create a well-balanced webpage, use a grid. Creating that measured outline will not only help you pay attention to the overall composition; it will help you recreate the design as needed later.
- Play with dynamic site attributes and grid concepts. Think about the placement of navigational menus and sidebars as a user clicks on them. Do they match the overall composition or feel like a lost layer? From interactive forms to a pop-up chat screen, each element affects the visual experience.
- Recognize the role of the grid in responsive design. Google’s Material Design guidelines highlight the use of a 12-column, flexible grid layout. In today’s age, a site design needs to appear seamless and balanced on a PC, smartphone, tablet, and other connected devices.
- Break the rules. If something doesn’t quite match up with the composition you try to follow but it works because of the other elements in the piece, go for it! Grid layouts are designed to provide a starting point that users are comfortable viewing and designers are comfortable creating. If you need to break away from an artistic concept, try it with one caveat: Make sure that the finished product translates well across viewing mediums.
- Study art. The reality is that many of these concepts take time to master. Supplement your research and trial and error work with an art or design class that focuses on composition. Seeing the practice in another art form may give you some refreshing insight into how to make the most out of a digital medium.
- Study psychology. Art isn’t the only place to go for grid design help. UI is largely about creating a positive experience with an interface, which means evoking a psychological reaction. The study of color, reading habits, and attention spans can have profound implications on the way designers choose to lay out their content. Learn about what people are looking for from a digital interaction to narrow down grid layout choices.
- Consider negative space. As you toy around with creating a flexible grid, remember that negative space plays an active role in the design. Don’t be afraid of using empty spaces to make the content on a page really pops. To follow many of these aesthetically pleasing design concepts, you may not always need text or a graphic image.
Some designers find grid systems difficult to use and creatively stifling. Grid layouts aren’t for everyone, but they are worth trying a few times. Improve your responsive UI skills, spatial reasoning skills, and your ability to deliver alluring design works with a layout concept that is as constricting or as liberating as you choose.