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.
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.
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.
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.
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.
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.
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).
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!
All illustrations © Eva Schicker 2021.
Read up on more design ideas and tools:
Thank you.
