Drawing inspiration from the cicada when designing tiling graphics for the web.
I first read about this idea about a year ago, in this Design Festival article. In the article, the author proposed a technique for creating repeating backgrounds that avoid the monotony and repetition of the standard web page tiled background image. The first example was a curtain. To illustrate, consider the first image, a basic standard repeating tile, used to create a curtain-like background. Kind of boring, obviously repetitive, not realistic.
Next, consider this composition of 3 small images, each of which tile in the standard repeating way, but when they overlap create a more realistic and varying pattern…
The idea is that if you create tiling images, with some transparent areas, and that have sizes that are based on prime numbers, they will repeat in a way that creates visually unique backgrounds that cover a very wide area.
Following that article, a small community formed around this idea and started posting designs to The Cicada Project Gallery. For each design, you can view it as a full-width background, and you can see the layer components decomposed.
Two of my favorites….
Read more about how to create your own backgrounds like these in The Cicada Principle and Why It Matters to Web Designers. This article feature image created by Alex Walker and made available via The Cicada Project Gallery.
1 2 1 2 1 2 1 2 1 2 1 2 1 2 1 2 1 2 1 2 1 2 1 2 1 2 1 2 1 2 1 2 3 1 2 3 1 2 3 1 2 3 1 2 3 1 2 3 1 2 3 1 2 3 1 2 3 1 2 3 1 2 3 4 5 1 2 3 4 5 1 2 3 4 5 1 2 3 4 5 1 2 3 4 5 1 2 3 4 5 1 2 3 4 5 6 7 1 2 3 4 5 6 7 1 2 3 4 5 6 7 1 2 3 4 5 6 7 1 2 1 2 3 4 5 6 7 8 9 10 11 1 2 3 4 5 6 7 8 9 10 11 1 2 3 4 5 6
