A recap of my presentation ‘The Experimental Zone’

12 Jun 2012

On May 22th (2012), I spoke at MultiMania in Kortrijk, Belgium. My talk was all about the experimentation phase during the design of a project. This presentation was mostly based on my talk at An Event Apart Boston (U.S.) last year. I decided to talk about this subject because people often wonder how I end up using that particular composition, pattern, or that particular set of colors etc. There is never a straight answer to these questions, because it's always different for each project or design. A lot of variable factors are at play during the design phase, but one thing is certain, it all connects to experimenting, trying out stuff… To me design is a lot about experimenting, to try to push boundaries, and following your instinct. Today I'll give you a brief overview of what I talked about, with the focus on sharing the resources I shared in my presentation.

Inspiration

Design starts with inspiration, but inspiration can be triggered while trying out different things… It's like Picasso once said "Inspiration exists, but it has to find you working". This is so true. A perfect example of this are the creations of geometric formations such as spirographs

Experimenting

There is a lot you can create starting from a simple shape by using a repetitive effect like rotating, resizing, while duplicating, in combination with color effects, transparency and layer modes. The possibilities are really endless.

Spirographs

In my presentation I showed the basic technique of how each of these spirographs were created, which I also explained a while ago in this article. In most of the examples I showed, the starting element was a circle, but by duplicating and rotating it in a certain sequence, applying transparency layer mode effects, and a certain color combination, a surprising result was achieved.

Phantasm Studio CS

At some point I also experimented with an Illustrator plug-in called Phantasm CS. It's a plug-in I mainly use when I want to modify the hue, saturation, or contrast of an object in Illustrator, which can all be applied as a Live Effect. However, there is also this powerful feature called "Halftone" that creates these interesting results. It's perfect for experimenting. In my presentation I showed an example design where I've used some of these Halftone settings. The great thing about these effects is that they are all applied as Live Effects, which gives you the flexibility to edit this at all times, just by double clicking it in the Appearance palette. This plug-in can do more than these effects or changing the hue, saturation, contrast, levels, curves etc. Phantasm CS Studio has some neat prepress features which can be very handy for print designers such as the Quick Separations option, and Overprint Object Preview option.

On my previous blog I wrote an article about this plug-in where I explain these Halftone settings in a bit more detail.

Simple masking technique

Next, I shared the masking technique I used on a header illustration for our Duoh! new years newsletter we've sent to our clients. A while ago I also wrote a tutorial explaining this technique.

Sketching & doodling

A lot of my basic design ideas and concepts started from a doodle or sketch. Inspiration can come while you are sketching or doodling. I try to reserve 15 minutes per day to just experiment a bit, totally not work related. Just freely doing some random doodling. Sometimes these small sketches end up as the basic idea or concept for a design of a project (e.g. top right sketch from the image below).

Some examples of sketches and doodles

The Smashing Book #3 cover designs also started from some simple sketches. I shared the process of this design in short in my presentation, but you can read about the process more in detail in this article.

Mood boards

Sometimes when I start a project I try to find the right color palette and typography first, while also trying to shape the general idea or concept by creating a mood board. This is what I did for the book cover design for Aaron Gustafson about ‘Adaptive Web Design’. You can read the design process I shared a few months back.

Mood board for Adaptive Web Design book cover design, containing some ideas for the color palette and images that inspire me.

A small experiment

In my presentation I also shared a small experiment based on something that Erik Spiekermann once said in an interview. He explains a simple trick to avoid copying an inspiring design. First you draw it exactly the same, so actually copying it. Then, you let it rest for a couple of days. After that, you redraw it from memory. Chances are you create a new design inspired on what you saw. I found this idea most interesting to try out, and so I did. I ended up with something similar, yet a bit different. In the image below to the left is the design that inspired me, and to the right the design I created.

The design that inspired me to the left, and the design I created to the right

The Cicada Principle

Then additionally I also applied a CSS experiment on this design, using the example of the Cicada Principle by Alex Walker, and this was the result. There is some fun stuff you can do based on this same principle, think of a curtain background, a skyline, clouds,… or maybe you can consider using no images at all, only CSS instead to create a random repeating color striped background.

Small lifesavers

Towards the end of my presentation I shared a few small tips and good finds. Here is a short overview:

  • A small tip for the super organized among us… Are you also annoyed that whenever you copy a layer or a layer group in Photoshop that the word "copy" is added at the name of the layer or layer group? This seems to be an option that is enabled by default (still so in CS6). You can uncheck this option in the Layers Panel Options.
    Photoshop's Layer Panel Options
  • Tych Panel, a wonderful Photoshop extension by Reimund Trost that automates the creation of diptychs and triptychs. I use it for some of my blog posts, and for all the layout of the squared product images for Fab's web site, iPone and iPad app design. It does all the calculation and scaling for you in no time. You can keep the images flexible and scalable by checking the option to convert the images to Smart Objects. What would take minutes to create, just takes a few seconds now.
    Screenshot of Tych Panel extension
  • A Photoshop plug-in called GuideGuide by Cameron McEfee lets you set guides in your document in one click just by entering the necessary values like column width, amount of columns or rows, gutter, margin…
    Screenshot of GuidGuide panel
  • Extensible Baseline Grids by Mike Precious on Method & Craft shows you how you can create a baseline grid by creating a set of pixel based patterns. There is also this user-friendly Modular Grid Pattern app that lets you create your preferred grid online in your browser, with the option to download a Photoshop pattern file that you can then load into Photoshop to use in your documents. There is also the option to download a Photoshop panel extension (requires Photoshop CS5, so not sure about CS6).
    Screenshot of Modular Grid app
  • I ended with this last tip that I learned from my design teacher at school years ago… To help you kern letters better, for example for the design of a logo, turn the letters, or logo upside down. I still use this simple technique from time to time, whenever I have some doubts, or just to double check.

Color inspiration

Getting back to the subject of inspiration… Color inspiration can be found anywhere: from objects around you, your environment, from nature,… but if you want to be spoiled by colors, and color combinations from the web, I can recommend you these 2 resources:

Presentation background wallpaper

Upon request, I created a wallpaper set of the background I used in my presentation. You can download it here:

Hope you enjoyed my presentation's recap. Keep having fun, keep on experimenting!

Comments

  1. 1 Peter 13 Jun 2012

    Very interesting information. The Spirographs are really inspiring!

  2. 2 Martin 14 Jun 2012

    thx for sharing - of course very “inspirational”

The Deck

Ads via The Deck