New Website Header for Stuff & Nonsense

In today’s modern age of cookie-cutter web design many designers and developers are turning to custom illustration in order to stand out from the crowd, and bring the “soul” back to web design. Andy Clarke of Stuff and Nonsense, is a leader in this movement, and I’ve been honored to have had the opportunity to work with him in creating fun, memorable illustrations that help brand Stuff and Nonsense as a pioneer in unique, responsive website solutions.

The latest iteration takes things further. For the past few years the file format SVG has dominated the conversation for website illustration. SVG (Super Vectory Goodness Scalable Vector Graphics) basically allows for infinite scalability of illustrations–meaning the same illustration file will look nice, crisp and sexy on retina and non-retina devices alike. (There are many other advantages to SVG for the developer that I won’t go into here.) The caveat of SVG files is that they require absolute precision and care in crafting the illustrations. Otherwise the file can become way too large, complex and unwieldy for the browser, especially on mobile devices. Optimization is key. Because of this drawback SVGs have traditionally been relegated to simple icons, shapes, and flat colors. Andy wanted to break this mold and I was excited to work with him on it. Could we craft an illustration that reaped the benefits of SVG while maintaining the soul and energy of the illustration? My style has become very fluid with a hand-drawn flair, so I was curious to see how this style could translate to a format that required precision. Every vector path in the illustration needed a reason for being. Texture (I love texture!) had to either go away or simply be hinted at. This project was a large exercise in restraint.

The illustration is based on the famous PG Chimps ad campaigns of the early 1970s. You can read more about the subject matter on Andy’s blog here.

Other fine people who helped in the creation of the banners: Steven GrantJoe Spurling, and Sara Soueidan.

PG Chimps Stuff and Nonsense 1
If you look closely you’ll notice a slight color-casting on the illustrations. That’s all applied dynamically in the browser. Another advantage of SVG!
PG Chimps Stuff and Nonsense 3
I really enjoyed illustrating the lady chimp. Unfortunately she wasn’t right for the composition and had to go. Luckily you can still spot her in a picture frame sitting on the right table.

PG Chimps Stuff and Nonsense 2

Early composition rough sketch
Early composition rough sketch

Share

Like this post?

Subscribe to get updates delivered directly to your inbox!