Journal tags: veerlepieters

The next speaker at An Event Apart in Boston is Veerle Pieters. I’m going to try liveblogging some of what she’s got to say.

Veerle’s talk is called The Experimental Zone and it’s all about experimentation in web design. People often ask her how she comes up with, say, certain colour combinations but she doesn’t really have a straightforward answer—a lot of it is down to experimentation. So it’s good to learn how to experiment better. Pablo Picasso said:

Inspiration exists, but it has to find you working.

Spirographs seem complex but they are a perfect example of how experimenting with really simple fundamental rules and shapes can lead to a beautiful result: start with a simple, translucent square and start applying the same transform multiple times e.g. scaling 85% and rotate -10 degrees. Object: transform: transform again.

You can also experiment with colours in spirographs. Start with a translucent triangular shape, copy and rotate it by 18 degrees but before that, change the colour values. Try different blending modes and see what comes out. Combine different layer modes with different scaling values e.g. 115%. Try different rotation angles to see how they turn out. An extreme value like 48 degrees applied to translucent circular shapes of different colours leads to some interesting results.

Transparency. Blending. Scale. Rotation. Colour. Experiment with those combinations.

But why play around with this stuff? Well, Veerle used some of the results in client work for some background images on sites and on physical credit card designs.

Start with some circles in the colours defined by the client’s in-house style guide and start experimenting with combinations. It’s okay to try out a dozen versions. When you really need to have control, you can get in there and change the overlapping colour combinations manually.

Veerle also does small experiments not related to work; a little every day. She’s got a folder full of patterns and experiments that she hasn’t used yet but they might come in handy later on. Another example of experimentation was the Duoh Christmas card. She began with a star and started experimenting with repeating patterns. Those experimentations didn’t lead anywhere so she went back to the star and tried a different approach. That’s often the way things work out: you have a starting point, you experiment from there and if it doesn’t work out, return to the starting point and try a different direction. For the Christmas card, scaling the star to different sizes with different colours and opacity lead to the final result.

Logo design works in a similar way. The typeface is the starting point (in this example, Dessau Pro Regular). Veerle tweaked the letter shapes and started experimenting with shapes within the shapes. In this example, Veerle took the bowl of the letter A and starting duplicating and rotating, getting some really nice results. You’re playing around and then suddenly you go “Oh, that’s it: that’s what I was looking for.”

Veerle sketches her ideas down. For her own blog, she started sketching variations based around the letter V but she didn’t like any of the results so she left the sketchbook and jumped into Illustrator. Sometimes it’s a bit of both that works: experiments in a sketchbook and in Illustrator.

If time permits, Veerle likes to leave a design (like a logo) alone for a while. Then come back to it and see if you still like it. For her blog, the initial logo she created didn’t stand up to this test. So she went back to the starting point, the letter V, and went in a different direction, keeping the elements she liked from the previous attempt—like the colours—but experimenting with shapes.

Mood boards can be useful for getting started. For the book cover of Aaron’s forthcoming book Adaptive Web Design, she began with her scrapbook-like collection of images and started putting some together into a mood board, trying to visualise the concept of progressive enhancement. The first design direction was ruled to be a bit too abstract. So the simple cubes were ditched in favour of something more sophisticated. The end result is the chameleon on the cover—it’s built of abstract shapes and many colours, but the result is something recognisable.

“Let’s experiment,” says Veerle.

As Erik Spiekermann has said, you can be inspired by something but you can’t just copy it wholesale. But Veerle likes to begin by reproducing something side-by-side and then, maybe a few days later, try to reproduce it without the original. The result is stamped with your own take on the original. She did this with the book cover for Imaginary Cities.

She started sketching it from memory. Her version turned out different; more cube-based. She imported that sketch into illustrator and started making outlines with the pen tool. Once the tracing is done, she started filling in shapes with translucent colours. She used the colour picker to take colours from some of the overlapping shapes for use in a different layer with a different mode: the resulting colour fill is very different. She didn’t know what the end result would be but she just tried things out. Once the colours have been gathered together, she created some gradients with them and applied them to some of the cubes. Then she added some dashed lines that she recalled from original cover. Finally, she upped the contrast.

But let’s go a step further. Let’s try to do this with CSS.

Alex Walker’s article The Cicada Principle is all about introducing pseudo-randomness into tiled multiple background images: the image sizes are all based on different prime numbers. The result looks random. For the curtain example, a ruffle is the base unit: the first image has 1 unit, the second image has 3 units, the third has 7 units.

Veerle takes this idea and applies to her cube-based design. She went with multiples of 3: 300 pixels, 600 pixels, 900 pixels. The result is a great backdrop of overlapping cubes and no matter how wide your browser window, you won’t see the repeat. You can see in action at http://www.duoh.com/varia/cicada.

Veerle has some practical tips to finish with.

• Name your layers. Turn off that preference in Photoshop that says “Add ‘copy’ to copied layers”.
• If you rotate a bitmap, you sometimes end up with odd shifting pixels that look blurry. Change the point of origin of the rotation: use one of the corners instead of the centre.
• If you paste from Illustrator to Photoshop the result can be blurry. Before pasting, select exactly the size you want to paste in. Experiment to find the right size to avoid blurring.
• Tychpanel by Reimund Trost is a very handy tool for calculating sizes.
• Another useful tool is a plugin called Guide Guide by Cameron McEfee which is particularly useful for grids.
• Extensible baseline grids by Mike Precious is also really handy technique for creating a baseline grid.
• When tweaking letter shapes and spacing, for a logo, for example, try turning the letters upside down to get a different perspective. It can be clearer what needs to be tweaked.
• Colour management is tricky. Some people turn sRGB off for exporting to the web to avoid colour shifting. Actually you need to set up your environment the right way. Calibrate your screen. Then set up colour management for Adobe Creative Suite. Veerle chose the Adobe RGB environment: she works in print as well as web, so just using sRGB isn’t going to work for her. Have your environment set up to have a wide gamut; you can always narrow it down for specific exports like for the web, for example.
• When importing, assign a profile rather than converting to a profile. Converting is a destructive process whereas assigning a colour profile doesn’t actually alter the image file.

Veerle likes to start by forgetting about technical constrains and just experimenting in a free-form way. That can lead to more creative, new ideas instead of limiting yourself. Of course you can’t go too far, but still, there’s a good zone for experimentation.