So, it was a little over three weeks ago that we launched the Cicada Project, our community-driven gallery for backgrounds exploring the cicada principle. The plan was to see where lots of different minds would take the idea — while juicing up the competition with an iPad 2 giveaway. It seems to be working!
With a week to go and more than 30 strong entries on display, I thought it might be time for a quick update. While there is still plenty of time to make your own grab for glory, here are some of the most-voted-for designs so far.
As I discovered talking to Scott Moorhead (AKA @fischerwest) on the DesignFestival Podcast, he’s a guy who has been thinking about pattern for quite a long time. In fact, he has some interesting pattern experiments dating back to 1998 that still stand the test of time.
So far he’s contributed three designs, and he may even have a few shots left in the locker. Li2ard is based on some lizard line-art from M. C. Escher but uses the cicada principle to mix and shuffle their colors and patterns into a reptilian mardi gras.
Cubes is a mock 3d design by @EffDeeKaa that feels like Escher-designed video game to me. I have a nagging urge to play it.
It’s a monochrome design and uses clean, flat color, which lets it tip the scales at a very respectable 82kb — despite blending seven layers of imagery.
This seems like the kind of isometric design that could sparks off new ideas in other minds.
Leafbed is a lovely photographic, autumnal design from Sydney designer Debbie Teakle of naptimewebdesign.com.
Although the file size total is a touch on the heavy side, it’s a nice case study on obscuring the naturally square character of background tiling.
While the simple charm of the design is obvious, it’s easy to overlook some of the intricate detail going on. The geometric shapes in each colored panel keep mixing and recombining to create new and kaleidoscope-like patterns.
Subtle but quite lovely.
Gary Jay from Nomnomlabs found very creative, original approach for his entry. By layering up old-timey print ads from the 1930′s-50′s, he was able to generate almost endless panels of retro newspaper.
Like Leafbed, it’s no lightweight, but it’s so fun that you don’t seem to notice the total file size.
Kari Sletten has given us this simple but very well-executed fluffy cloud design. It’s lightweight (37kb), versatile, tasteful and could drop into any number of blogs out there seamlessly.
I think I’d like to wallpaper my apartment in this one. If only I could stop hearing ‘The Simpsons’ theme in my head every time I see it.
Another @fischerwest design and, I have to say, my personal favorite so far. We’ve been surprised how many designs look great behind Design Festival, and I’d probably be happy to leave this one. Impressive work.
Anyone who’s ever jumped a mushroom while avoiding a high-speed turtle will likely have a soft spot for Sam Beckham’s Mario Brothers-inspired design. The demo here probably isn’t wide enough to show off just how clever this design is. but you’ll get the idea.
And the whole thing weighs in at 33kb — you gotta love those 8-bit graphics.
Sudhanshu Arya has constructed an awesome seven-layer, organic Pacman maze compete with ghosts. Apart from looking great, it got Dan and I thinking about the possibilities of getting random-looking animations by GIF-animating the ghosts with prime number frame timings. Hmmm, interesting…
Of course, these are only a handful of what’s on show. Check them all and vote for whoever you like.
Using the Cicada Principle in your CSS
Outside of the Cicada Project, we’ve also seen some really interesting ideas that take a lead from the original article.
I’m particularly excited with German designer Frank Fuchs‘ approach. Rather than using layers of imagery, Frank is effectively layering CSS3 rules to give his Flickr gallery page a loosely shuffled look.
If you’re interested, he’s written up a detailed explanation in German on his site but the basic idea works something like this:
- We start with a garden-variety thumbnail gallery which has been marked up as a standard unordered list.
- Next we might rotate all thumbnails (let’s say) 3 degrees to the left using CSS3 transform rotation.
- CSS3 also allows us to target particular child items with in set via the nth-child selector. Using this we can target every second thumbnail and rotate it 4 degrees to right. Remember two is a prime number.
- Following the same process, we then target every third thumbnail and rotate it (lets say) 6 degrees to the left. You can see where this is going.
- Layering up our rules, we in turn target every 7th, and then every 11th thumbnail, giving each one a random twist in one direction or the other.
The result is an attractive gallery layout that has a usable structure but also keeps a loose human feel — all without needing a single extra class or ID.
To me, that’s tantamount to CSS magic.
So what now?