A dragon motif, in bright orange on a black background, is applied to a repeat grid. Mirroring and flipping of the original unit on the upper left are activated, thus creating a lovely pattern that is almost abstract.
A dragon motif is applied to a repeat grid. Mirroring and flipping of the original unit on the upper left are activated, thus creating a lovely pattern that is almost abstract. The dragon design proper embeds to repeat grids, for the dragon’s scales and spikes.

Unlock the secrets of repeat grids and patterns

Design Essentials: The art of speedy prototyping

Integrated design flows

Repeat grids are trending as design tools for visualizing multiples of grouped elements. Based on columns and rows, the repeat grid feature takes a single design unit, usually consisting of different elements such as labels, text, buttons, or photos, and duplicates it integrating various spacing options.

Horizontal and vertical spacing adjustments are made by increasing or decreasing the space in-between, column and row adjustments, such as off-setting and mirroring, can be implemented for additional layout effect.

A simple repeat grid in two different executions

In this example, a simple two-element unit, composed of a grey square rectangle and a white circular icon, is arranged in a repeat grid. From this one unit, two examples, Figure 1 & 2, are created, illustrating the versatility of the repeat grid function.

In Figure 1, there is equal white spacing between columns and rows, and the second column is offset.

Fig 1. A simple grid structure built from a grey square rectangle with a white circular icon at the lower right corner.
Fig 1. A simple grid structure built from a grey square rectangle with a white circular icon at the lower right corner.
Figure 1. A simple grid structure built from a grey square rectangle with a white circular icon at the lower right corner.

In Figure 2, there is negative in-between spacing, thus creating a solid opaque grey background. The columns are offset, and every second row is flipped. This composition creates a pattern or background design.

Fig 2. The grid structure of the same basic unit as in Fig 1 has a minus in-between unit spacing, thus creating a seamless background. The circular icon now forms a pattern.
Fig 2. The grid structure of the same basic unit as in Fig 1 has a minus in-between unit spacing, thus creating a seamless background. The circular icon now forms a pattern.
Figure 2. The grid structure of the same basic unit as in Figure 1 has a negative in-between unit spacing, thus creating a seamless background. The circular icon now forms a pattern.
The basic two-element unit.

Repeat grids can produce different results depending on grid attributes while the basic unit remains consistent

How does the repeat grid apply to prototyping?

Repeat grids are extensions of the grid principle. In prototyping, we group basic elements within one design unit. Multiplied by the repeat grid, this design unit defines the structure of the screen layout, and thus becomes integral to content building within the app.

Lo-fi repeat grids, especially in a mobile hands-on eco-environment, can quickly and easily be adapted to render many different versions of the same content.

Figure 3 shows explorations of a vertically-stacked scroll repeat grid, suggesting a photo or personal travelogue app. The screen on the left shows the single design unit, the middle three screens show lo-fi variations of the repeat grid, and the screen on the right shows a mid-fi option, with some elements filled in.

This concept illustrates how one design unit (screen on the far left), is used to build content flow. Each variation shows a slight adjustment to the original unit, which is applied to one unit that updates all. The design on the far right shows a mid-fi prototype, integrating images and one brand color. Paris photos on the right by ©kmd248i/IG.
Figure 3. This concept illustrates how one design unit (screen on the far left), is used to build content flow. Each variation shows a slight adjustment to the original unit, which is applied to one unit that updates all. The design on the far right shows a mid-fi prototype, integrating images and one brand color. Paris photos on the right by ©kmd248i/IG.

Design unit adjustments are done to one unit, which then applies them to all units within the repeat grid. Elements can be added or deleted, and can be fully edited.

Figure 4 shows a one-column format of a repeat grid in a dark mode environment. The three screens on the left show a simple set up of a vertical scroll window displaying analytics statements. The two screens on the right explore color variations in mid-fi mode.

Figure 4. An example of a one-column vertical stack repeat grid, exploring analytics displays.
Figure 4. An example of a one-column vertical stack repeat grid, exploring analytics displays.

Let the fun begin with repeat patterns

Repeat patterns are mostly used in surface design, utilizing a motif that duplicates smoothly. They can be as simple as using a logo element, or as complex as the dragon motif featured at the beginning. Repeat grids can get integrated within a design unit. In the dragon design, the scales and spikes are both repeat grids.

Figure 5 shows a breakout of the integrative dragon repeat grids.

Figure 5. An illustration of the multiple integrated repeat grids within the dragon design. The dragon scales are composed as a repeat grid spanning the width and height of the dragon, and then masked by the body shape path. Similarly, the dragon spikes are set as a single-row horizontal repeat grid.
Figure 5. The dragon unit consists of multiple integrated repeat grids. The dragon scales are composed as a repeat grid spanning the width and height of the dragon, and then masked by the body shape path. Similarly, the dragon spikes are set as a single-row horizontal repeat grid.

Explore variations quickly

Figure 6 shows a column stack across four rows. This repeat grid is set up to explore background colors in relation to each other.

Figure 6 illustrates the repeat grid with the dragon design explores background variations. A vertical stack is easily set up by adjusting the in-between spacing.
Figure 6. This repeat grid with the dragon design explores background variations. A vertical stack is easily set up by adjusting the in-between spacing.

Design refinements

To refine further on individual design elements, repeat grids can get released to render each element as an individual path element. Each path object can edited as if it was an original element.

Figure 7 shows the individual dragon units expanded. Each unit features its own color combination. (Note: this type of element refinement cannot be done in repeat grid mode. The grid mode needs to be released).

Figure 7: This set up illustrates a horizontal grid row, which was ‘released’ to its individual elements. Thus, individual color or other path adjustments can be made.
Figure 7: This set up illustrates a horizontal grid row, which was ‘released’ to its individual elements. Thus, individual color or other path adjustments can be made.
Figure 7: This set up illustrates a horizontal grid row, which was ‘released’ to its individual elements. Thus, individual color or other path adjustments can be made.

Try it in your next design

Look for the Repeat Grid command in your software, or for the following icons to activate it.

Wrap up

Repeat grids are excellent design tools for efficient prototyping. They allow for infinite variations based on adjustments to the base design unit.

Repeat grids are particularly helpful for pattern and background pattern design. They are easy to edit.

Above all, repeat grids are fun!

Thank you.

Welcome. I write about design, UX, UI, animation, creative entrepreneurship, art, & life in NYC. UX Director Lelantos Press, Artist, UX GA NYC Bootcamp grad.