Making better repeat patterns

A most zen-like practice
Maria Matveeva

Director of Design

Maria Matveeva

I enjoy the look of hand-drawn things. And I use patterns a lot. But when the two are combined, the results are often disappointing. My least favorite thing is to see a pattern where identical copies of a hand drawn object were repeated without variation. The automatic repetition here is not appropriate to the shaky handmade look of the art.

The effect reminds me of Office circa 1995 (remember the classic marble and granite patterns?) or the obviously tiled walls in video game environments. In a 3D environment, a small size of the tile that causes this obvious tiled look is a necessity to conserve processing power.

Remember these? bad textures

Because I want to use hand drawn repeat patterns in my work, and it would be impractical to draw a thousand individual pieces to create the pattern, I experimented to determine exactly how many pieces I need to preserve the varied look, while being able to tile.

When I intentionally draw similar objects, I found that 15-30 copies will make a decent repeat pattern. I draw more than I need, then squint and get rid of a few that are too dissimilar. Once pieces are arranged on the pattern, there will always be a few that stick out and attract attention to the “seams” between your pattern tiles. To solve this, I leave only a small amount of variation in both shape and placement, and I repeat a few of the shapes several times in a single tile. This distracts from the “edges” of the tiles because repetition happens on two different rhythms.

Pattern element 2 is repeated several times within one unit. repeat pieces

Trying to get as far away as I can from the obvious square tiled look, I also experimented with other manners of tiling. Adobe Illustrator offers brick (offset), hexagonal and other options, but I eventually need to go back to a rectangular repeating unit because I want to use my pattern in browsers.

A rectangular repeat unit is used to make hexagonal tiles. repeat hex

Here is one of the patterns I ended up making in this non-repeated style.

One unit of the repeat pattern. trees

I used this tree, circled, several times inside one repeating unit. more trees

The pieces are aligned to the grid, of course, but they are hand drawn so sizes are slightly off. I intentionally spaced them slightly off the grid as well, but preserved the overall balanced appearance (just squint and fix whatever looks off - very scientific!) even more trees

And finally - here are the patterns!

swatches

Download the Illustrator file and use these patterns in any project. We only ask that you do not resell them. Enjoy!

Newsletter

Stay in the Know

Get the latest news and insights on Elixir, Phoenix, machine learning, product strategy, and more—delivered straight to your inbox.

Narwin holding a press release sheet while opening the DockYard brand kit box