Unit 1: Intro to Design
Unit 2: Figma Fundamentals
Unit 3: The Creative Process
Unit 4: Color Theory
Unit 5: Introduction to Illustrator
Unit 6: Typography
Unit 7: Layout
Unit 8: Typesetting
Unit 9: User Interface Design
Unit 10: Design Systems
1 of 2

Breaking Out Of The Grid

As is true in all areas of design, there are no hard rules when it comes to grids. Breaking out of grids in subtle ways adds depth and variety to designs. In web design, for example, you often see full-width images that fill the background of a section. Some designs also incorporate images, illustrations, and other decorative elements that float around the edges of a layout, seemingly at random.

The key function of grids is to contain, align, and organize crucial content in a design. Breaking the grid now and then with decorative elements is totally acceptable, so long as it doesn’t detract from the message of the overall design.

Approaching the grid as a set of guidelines, instead of hard rules, opens up the opportunity to try something different while **maintaining a solid foundation. Here are some of the ways you can effectively break out of the grid.

1. Animation effects

Adding subtle animation effects to your UI designs lets you break out of the grid and introduce some dynamism into your projects. You can use animations to make an element stand out, provide visual delight, encourage interaction and user engagement, or offer contextual help.

Here are some examples:

At first glance, the Deer Run Media homepage looks like it follows a strict grid. However, if you hover over the large content boxes, they’ll slide smoothly from side to side based on your mouse movement.

Creative agency Leeroy’s website encourages visitors to drag the scroll bar down to view the company’s portfolio. Each portfolio item appears with a zoom-and-slide animation that’s designed to break the grid and draw in the viewer’s attention.

2. Parallax scrolling

If you’re following a modular grid system, you can break your UI design’s horizontal grid using parallax scrolling. Parallax scrolling effects make it look like the background of the web page is moving slower than the foreground. This creates a 3D effect as the user scrolls down the page while maintaining focus on the content.

Let’s look at some examples:

The A-dam Underwear website implements a parallax scrolling effect to break the grid horizontally. Notice how the tiny icons move across the screen as you scroll down the page? It creates visual delight and improves the website’s overall visual appeal.

The Myriad website is a great example of how you can use vertical parallax scrolling to break out of the horizontal grid and vertical grid. Take a look at how the text moves into the center of the screen and the content box moves from the bottom up when you scroll down.

3. Layering

Overlaying images with text or icons creates a layering effect in web design that gives the appearance of UI elements breaking out of the grid. When done right, it appears as if the top layer is overlapping the grid’s guidelines. This also creates a perception of separation and depth between the layers.

Here’s a look at some examples of layered web design:

Aaron Grieve uses a layered design technique in his portfolio website to break out of the grid. Browsing through his portfolio, you’ll see how he layers text, images, icons, buttons, and background to create a visually appealing design.

The Artists Web homepage uses a unique animation effect to layer text and a 3D image when you mouse over them. It gently breaks the grid and creates a dynamic design that’s anything but boring.

4. Collapsing the gutters

As we mentioned above, most popular grid systems have gutters (usually 10px or 20px) that are there to create space between columns (and rows, in the case of a modular grid). They improve readability and let your design breathe. Collapsing gutters in your designs is an easy way to break out of the grid while still maintaining organization and structure.

Here are some examples of websites that create a grid-breaking design by eliminating gutter space:

The Woodwork website has a layered, collapsed grid effect on its homepage that’s designed to showcase the portfolio.

The Verge also implements a collapsed grid-like design to draw in the reader’s attention to featured articles and stories. Notice how the byline design on featured articles gives the illusion of a broken grid.

5. Containers

Grouping elements together in a container lets you break out of the grid while maintaining cohesiveness. You could use a background image, content boxes, or layering to group elements together in container layouts.

Let’s look at some examples:

The Digital Horizon website’s homepage features a video background with text and a pull quote layered on top. And although the design clearly breaks the grid, the video background acts like a container making it look like the different elements are grouped together.

6. Whitespace

Creating purposeful whitespace in your designs adds emphasis to the focus point. There are many ways to break out of the grid by adding some whitespace to your interface designs. That said, it’s important to note that breaking the grid doesn’t mean you have to forego alignment.

Here are some examples of websites that use whitespace to break out of the grid:

Fabio Carretti uses well-proportioned whitespace on his portfolio site to break out of the grid layout. The design establishes typographical hierarchy to improve readability.

The Volta Footwear online store uses whitespace and layering techniques to break the grid above the fold. Notice how the image is slightly off center thus drawing attention to the product name and creating contrast at the same time.

7. Accent colors and elements

Remember how we said you need first to establish a solid grid system to be able to break out of it effectively? Using accent colors and elements lets you just that. Once your UI design is ready to go, consider adding accent elements to break out of the grid.

Accent colors, for example, are excellent for encouraging visitors to interact with your site or take action. You might consider using accent colors in call to actions or other clickable elements.

Accent elements create aesthetic appeal and can help subtly guide the visitor through your content. Using absolute placements will make it so the accent elements fall outside of the grid and stick absolutely to the nearest element.

Let’s take a look at some examples:

Grana uses its logo’s red color to accent the dynamic, grid-breaking View links on product images. The links encourage the viewer to click through to take a closer look at the product.

The Cancer Research Foundation website uses orange accent boxes to break out of the grid. It’s an attention-grabbing design element that matches the company’s brand.

8: Typography

Getting creative with typography opens up many opportunities to break out of the grid. You can play around with different font styles, font sizes, margins, spacing, line heights and alignment. The great thing about using typography to break out of the grid is that it lets you maintain structure in your designs.

Even something as simple as altering a chunk of copy to look a little different will make the design feel like it’s breaking out of the grid.

The M website quite literally uses typography (and a little animation) to create a grid-breaking design.

9: Illustration

Illustrations in web design make it easy to break out of rigid grid guidelines and create visual delight. An easy way to get started is by intentionally positioning illustrative elements in a way that overlaps the grid.

Here’s a look at some examples:

The Spicy No Spicy website uses sketch illustrations and layering with text to create an engaging broken grid design.

Calar uses an illustrated font to captivate the visitor’s attention and create visual delight.

10. Pull quotes

In the context of design, pull quotes bring many possibilities to the table. You can use different typefaces, weights, alignments, formatting, and sizes to make them stand out. For similar reasons, they make for excellent grid-breaking UI elements.

Here are some examples of websites that use pull quotes to break out of the grid effectively:

The Paperock Creative website uses pull quotes on its homepage to create a visually appealing design that also features illustrations and layering. The grid breaks more and more as you scroll down the site.

Scroll to Top