Undo(z) Clear(c) Save(s)


The Start

The Canadian Screen Awards wanted to redesign their Fanzone page and one of the references of the sites they liked was the background featured in the Wordpress theme: Eventum

I was trying to figure out what the best method would be to recreate the background. The issue was that there were going to be about 10 or so pages and each one would have a unique color associated with it. The first idea I had was to create it using Photoshop/Illustrator. The pen tools would help me create these interesting triangles and adding a gradient on them would be quick and easy. A couple of the issues I had with this was that it would be so much work for something that may not turn out so well. Then I thought what if I created it in Flash, weird I know but I thought I could use a lot of the same symbols and develop some AS3 code to randomize it almost all of the parameters. Then after thinking for a bit I realized it would be a good example for me to learn jQuery with, so I ended up creating it in HTML/CSS with jQuery. Being well versed in AS3, it was pretty easy to setup the code for jQuery. A lot of the syntax was very similar and the logic for it seemed to make sense.

Some features included being able to fade the triangles (f), toggle between ribbon vs cluster mode (c), showing outlines on the triangles (o), color selection - being able to choose which colors the triangles comprised of, changing the sizes of the triangles (press 1 - 9), and saving your artwork as an SVG file (press s).

The Good, The Bad, The Ugly

I was glad this tool didn't take too long to make. It let me quickly make several backgrounds with little to no time. Also when the clients wanted to change the way a certain triangle looked I could throw the SVG file into Illustrator and make any necessary changes.

The clients didn't like my original outputs. Some of the issues included: the triangles were too clustered, and some of the outputs just didn't look right.

The issues the clients had could have been resolved very quickly, but they decided to take the site into a different route.