BlogmyQuery – BMQ

As Web designers and developers, each project we work with has a unique set of goals and requirements. But one goal we have for all of our projects is that we want them to make an impression on people — we want the websites that we create to be memorable.

A fun experience is often an enjoyable one and an enjoyable experience is usually a memorable one. Therefore, it stands to reason that one of the ways to create a memorable experience is to make it a fun experience. In this article, we’ll take a look at how adding a bit of “fun” into the mix can help us produce more engaging, and hopefully more successful, websites.

The Fun Theory

Some time ago, I was sent a link to a Volkswagen sponsored project called The Fun Theory. This website featured a contest where users could redesign or rethink something they encounter in everyday life — adding some “fun’” into it. The purpose was to see if they could get more people to use it simply because it was enjoyable to do so.

While there are a number of great videos on the site, the one that I love the most is called Piano Staircase. In this video, an experiment takes place with a flight of stairs in a subway station. Beside the stairs is an escalator. As I am sure you can guess, far more people would use the escalator, rather than the stairs, during their daily commute.

Volkswagen’s “The Fun Theory” website challenges people to redesign something they encounter in everyday life by adding “fun” into it, and to see if more people will then use it.

One evening, while the station was closed, the steps were turned into giant piano keys that would make a sound when they were stepped on. As commuters exited the station the next day, they were greeted with this giant piano staircase and many of them opted to try it instead of using the escalator. In fact, 66% more people than normal used the stairs while the installation was in place — an amazing increase by anyone’s standards.

Adding Fun To Our Websites

When I saw this video, the first thing I thought about was how applicable the lesson of adding fun is to the work we do as Web professionals.

By using fun to create an enjoyable user experience, we can offer people a delightful experience that they will not only remember, but one that they may tell others about as well.

Let’s Define “Fun”

Perhaps I should back up a bit and explain what I mean by fun. I am not suggesting you turn your client’s website into a circus production (unless, of course, your client is a circus). I am simply suggesting that changes and additions that add a bit of fun into the interactions or elements of a design can go a long way in helping the websites you develop become more enjoyable to use, and more memorable overall.

“Fun” is not the same as “silly”. You can add a layer of delight and enjoyment to the user experience without making your client seem childish or unprofessional. The trick is knowing how much fun to add, where best to add it, and when to recognize that you’ve gone too far.

Let’s look at some examples of websites that do a great job of using fun to create both enjoyable and memorable experiences for their users.

Improving On The Ordinary

There are many pages common to almost all websites. By taking a typical website page or experience (such as the “about us” page, or contact form), and making it fun and memorable, you can set that website apart by improving on the ordinary.

Take that aforementioned “about us” page, a fixture on pretty much any website. Mutant Labs, a UK based design and development firm, do a great job of adding a sense of fun and personality to what too often becomes nothing more than a boring company bio page.

Mutant Labs adds a fun sense of personality to the typical “about us” page. Scroll over the team members to see even more fun!

The website for Get Satisfaction does a wonderful job of turning the typical “case studies” page into an interactive experience with their “Wheel of Satisfaction.”

The “Wheel of Satisfaction” is a fun twist on the typical case studies page.

How about the “contact us’” page? When was the last time you built a site that didn’t have one of those? English Workshop, “an organisation which provides English language learning opportunities”, styles their simple contact form to look like a machine’s control panel, tying it in nicely to the website’s “workshop” theme.

English Workshop’s “contact us” form works great alongside the rest of the design elements from the website’s workshop theme.

Smashing Magazine’s own contact page is also an example of a fun approach. The page is fun from top to bottom, with a lighthearted, informal tone for the page’s greeting (“Hello. Let’s talk.”) as well as questions, and cartoon representations of Smashing’s management team.

By taking the common pages of a website, and finding ways to add fun to what would otherwise be a typical experience, you can instead create a unique and memorable impression upon your sites’ visitors.

Frustration = Fun?

Another page typical to most websites is the “404 error” page. By adding something new to this page and showing some personality, you can help diffuse an otherwise frustrating situation. You can see some great examples of humorous and effective 404 error pages in a previous Smashing Magazine article.

In addition to a humorous, frustration-diffusing message, a good 404 error page can also include links to key pages of the website that users are most likely looking for. Done correctly, you can make your user smile, and help them find their way back to the content they will find valuable.

Practicing what I preach with a fun 404 error page on my personal website.

Searching For Fun

While Google may be best known for their search results, the fun that they often have in delivering those results is an important part of the Google experience.

First, you have the whimsical Google “doodles” that appear in place of the company logo on specific days. These doodles range from simple graphics to fully interactive experiences, such as a playable Pac Man game, or the tribute to guitar legend Les Paul. There are also a host of hidden gems that can be found on Google by searching for specific phrases or terms. Search for the word “askew” in a browser that supports the feature (Chrome, Safari, Firefox) and the screen will literally skew itself for you. Using Google Maps, you can search for walking directions from “The Shire” to “Mordor” to get a funny little warning that “one simply does not walk into Mordor.” There are dozens of hidden gems like this baked right into Google.

The reason Google is so effective in the fun they add is because they make that fun unobtrusive to the rest of the experience. Google puts the fun out there for you if you want it, but access to the service itself is never compromised. This is a critical key to successfully adding fun to a project — make sure it does not interfere with the normal features or purpose of the site itself.

An Over-The-Top Approach To Using Fun

One of the challenges with adding fun to websites is knowing when to stop. The right amount of fun can create a memorable experience, but too much can have the opposite effect, driving users away due to an over-the-top approach. Still, there are times when “too much” is the right amount, and when an over-the-top approach really works for both the brand and the website.

CaptainDash.com uses fun illustrations and interactions throughout their website, including a comic book-like layout for their “What We Solve” section. The experience is enjoyable and unique, and the website screams personality. But even after exploring their website for a few minutes, I found it hard to explain exactly what the company does with any kind of certainty. This is one of the potential pitfalls of going all out with a fun experience — your website still needs to quickly answer the fundamental user question of “what does this company do?”.

“Captain Dash” features a fun experience, but the purpose of the company is tough to uncover with all that personality.

Meomi.com is another site that goes all out in adding fun to their website experience. The website’s entire design is filled with fun characters that move and respond as you scroll over them. The overall experience is one filled with discovery and delight as you explore. I am especially fond of the website’s footer and what lurks behind those trees (go and see for yourself). I also love the fact that as busy as the site is, I quickly knew what it was about due to the tagline placed towards the top of the page — “A little design studio dedicated to play, delight, and goodliness.” Mission accomplished!

The experience on Meomi.com is filled with delightful surprises for you to uncover as you explore the interface.

Another great example of a website that is from top-to-bottom fun (while still making it easy to discover what the website is all about) is Two Giraffes. On the website’s home page, a sign hangs upon a wall that reads: “We design fresh interfaces backed by serious code”, clearly stating the company’s offerings while staying true to the fun environment they have created for the entire website.

“Two Giraffes” does a great job of clearly stating what the company does while staying true to the fun environment that spans the entire website.

Using an over-the-top approach on a website can have it’s risks, but if done correctly, it can also have its rewards — creating an experience that is enjoyable and memorable from start to finish.

Making Your Message Memorable

The design of a great website will support that website’s overall message or purpose. Therefore, we can strive to use a fun approach to create not only a memorable experience, but a memorable message.

The website for the Converge conference boasts that it will “peel back the layers and examine the intersection between design, development and marketing.” The website’s design is immediately striking with its use of a cyborg Tyrannosaurus Rex, but the fun really begins when you scroll down the page; the dinosaur remains, but building on the website’s “peel back” theme, you begin to get to the meat of the content — literally!

Scroll down the page for the Converge conference’s website to get to the meat of the content — literally!

Seamco’s website states that they build “efficient bottling and packaging lines for liquid products.” The website reinforces this message by integrating a wonderful animation of bottling line efficiency. From the top of the website’s design (where the bottling begins) all the way to the bottom (where a delivery truck makes frequent trips to deliver cases of the product being added to it), the entire website is both fun and memorable in service of the website’s main message.

Seamco’s website reinforces their main message through a fun animation that spans the entire design.

Storytelling And Fun

Another way to get a website’s message across is through storytelling — and a fun approach can help ensure that the story you tell is a memorable one.

The website for the Combine conference uses the location of “America’s heartland” in Indiana to tell a fun story that transpires as you start to scroll from the top of the website… a farm machine works in a field as a giant ear of corn is being pumped full of radioactivity, into the middle of the page — where the radioactive corn begins a rampage of destruction, to the… well, I don’t want to ruin the fun. Visit the website and see the story for yourself!

The website for the Combine conference uses storytelling to tell the tale of a rampaging, radioactive ear of corn.

Another great website that uses storytelling is one that details the Bright Future of Car Sharing. Presented with vertical navigation, you can use your keyboards’ arrow keys to “drive” through the website’s scenery and learn more about car sharing. Along the way, there are dozens of elements that you can scroll over or click on to learn more about, accessing extra content, while the website’s message is told in an engaging and interactive way.

“The Bright Future of Car Sharing” as told through a fun, interactive website experience.

Some Websites Cannot Be Fun… Or Can They?

When I talk to fellow Web designers about the benefits of adding fun to the websites they are creating, the argument I most often get against this practice is that the projects they are working on have no place for fun.

Yes, it’s true that there are projects where adding “fun” is a tough sell, but sometimes even websites that don’t instantly lend themselves to a fun approach can be made more effective by using the same principals covered in this articles’ previous examples.

SlaveryFootprint.org is a website that “allows consumers to visualize how their consumption habits are linked to modern day slavery”. It definitely doesn’t sound like a place where “fun” would work, but if you visit the website and select the red “what?” arrow, the experience begins. Scroll down the page and illustrations of colorful, cartoonish hands add pieces of content to the page one block at a time as the website’s message is told. That message ends with a prompt to “take the survey”, and the same methods used for that initial message — cartoonish illustrations, a sense of anticipation, and fun interactivity — turn what would’ve been a simple Web form into a memorable and powerful experience.

“Slavery Footprint” uses illustrations and fun interactions to make a point about a very serious topic.

Another good example of a serious topic presented online is the Dangers of Fracking. It uses many of these same techniques and principals, including the “storytelling” approach, that was previously highlighted. The website uses illustrations and storytelling to detail the process and effect of hydraulic fracturing — essentially creating an interactive infographic in the process. The result is an experience that delivers this message in a much more effective way than any simple paragraphs or static graphics could ever do.

By creating an interactive infographic, the “Dangers of Fracking” uses illustration and storytelling to get their message out in a memorable way.

There are certainly websites whose sensitive subject matter will make it difficult to add fun into the mix. But as these next two examples show, you can use many of the same solutions that other “fun” websites use to create a memorable experience without jeopardizing the seriousness or importance of your message.

Designing For Emotion

In his excellent book Designing for Emotion, Aarron Walter illustrates the benefits (and potential pitfalls) of emotional design. The book covers designing for a range of emotions; including trust, hope, surprise, delight — even love. And many of the examples offered use a bit of fun to elicit these emotions.

Many of the examples in Aarron Walter’s “Designing for Emotion” use a bit of fun to elicit the appropriate emotional response.

A selection from early on in the book provides an excellent call to action for using emotional design in the Web experiences we create:

“We’ve been designing usable interfaces, which is like a chef cooking edible food. Certainly we all want to eat edible foods with nutritional value, but we also crave flavor. Why do we settle for usable when we can make interfaces both usable and pleasurable?”

Designing The Memorable

A Web experience that is simply “usable” is no more memorable than a meal that is merely edible. Just like a master chef strives to create a menu that is truly exceptional, so should we, as Web professionals — endeavor to design and develop experiences and interfaces that are unforgettable. Hopefully this article has shown that one of the ways this can be achieved is by adding a bit of fun to the projects we are designing.

Whether you are firing up Photoshop to work on that new design, or building website templates with HTML and CSS, I encourage you to consider the examples and lessons shown in this article. You want to create amazing and memorable experiences? Try following a simple piece of advice:

Have some fun.

(jvb)

© Jeremy Girard for Smashing Magazine, 2012.

Hick’s Law has always been a popular reference point for designers. You’ll find it cited in the endless lists of basic laws and principles that all designers should be familiar with. Given our assumed comfort level with this design cornerstone, I am surprised to see so many people getting it wrong.

What we think we understand about Hick’s Law as it pertains to Web design is oversimplified and incomplete. We need to more deeply investigate what Hick’s Law can do for Web design. In the end, we will see why this design principle is undervalued, and we will see how we have been designing incorrectly for the user’s decision-making process. In order to get there, we need to look at our current approach to Hick’s Law and why it’s wrong.

A mess of different size labels for clothing hooks. (Image: außerirdische sind gesund)

An Incomplete Definition

As it stands today, most discussions of Hick’s Law focus on a narrow portion of Web design. Traditionally, the law is used to encourage designers to limit options in navigation, lists and interactive options. Whether it’s used against drop-down and fly-out menus with too many options or pages with too many links, Hick’s Law has primarily been a counterweight to sprawl.

Don’t do this.

While the idea does have merit (massive menus really are a bad idea), it is incomplete. Why do we restrict Hick’s Law to navigation? Hyperlinks are the driving force of the Internet; they take us from one page to another and drive the action on the page. So, applying Hick’s Law should begin there. Limiting the number of links and buttons in front of users should simplify their decision-making process, enabling them to move about the Web with minimal stress and delay. But is this the end all and be all of Hick’s Law?

A Better Perspective

If we stopped here in our study of Hick’s Law, we would miss out on a lot of value. Why do we focus so much on links and clicks? While these factors do drive the user experience, they aren’t the only factors that users take into account when navigating a design. We have to remember that Hick’s Law did not come about with the invention of the Internet. Hick’s research simply shed light on how a website’s options affect the speed and ease of the user’s decision making. This makes for a pretty broad scope, because we aren’t measuring physical responses or the role that technology plays, but rather the mental processes that lead to making a decision.

So, let’s step back and consider the thought process that users go through and how many levels of decision-making a Web design can consist of. For example, instead of just regarding each link in a navigation menu, sign-up form or toolbar as its own option, we should consider the process of interacting with the navigation a decision of its own. For that matter, any given design contains a whole array of top-level “options� that demand decisions of the user.

In choosing whether to read an article, navigate to a new page, fill out a log-in form or perform a search, the user has to mentally process several options before making even a single click. Are they interested in the content on this page? They might decide to skim the headlines to see what stands out to them. Perhaps they are shopping for something. Before even hitting the “Add to cart� button, they have to choose between making the purchase, looking at product details and reviews, and shopping around for something else.

When browsing fonts on Typekit, the user has many more decisions to make than simply picking a font.

With all of these options available, it would seem that crunching the numbers and determining how many choices are possible would paralyze any user into indecision and make any website unusable. Clearly, this isn’t the case. So, what is it about a good design that enables users to decide and act, without being overwhelmed by too many choices? Better yet, can we measure and reproduce these factors in our design work every day?

Reapplying Hick’s Law

In order to properly apply Hick’s Law to Web design, we must approach a design the way our users do: in phases.

The first phase occurs before the website even launches. While we would never want to design based on an assumption of what our user base is looking for, visitor will rarely happen upon your website without some sort of preconception of what they are going to see. Barring the occasional hijack, most first-time visitors enter a website by clicking a link that includes a description, title or search result that hints at the content they will see. Returning visitors probably have an even better idea of what they will be running into. It is rare that a user enters a website with no clue of what it is about.

This preconception among users about content and experience is a great reason to follow a content-first design approach. Of course, this approach also happens to be entirely justified. In an age of search-engine placement and social advertising, many users are landing on content-heavy pages, not just home pages driven by calls to action. So, the first decision point is about content consumption. The human mind has trouble choosing between several options unless one clearly stands out as the best. When you water down a design with widgets and secondary content, you reduce the value of the primary content and force a harder decision on the user. The process of eliminating distracting options has to start here and should be carried on throughout the design process. The more choices we eliminate, the more enjoyable the experience will be.

Looking past the primary content, what happens when content comes in large data sets, such as a list of recent posts, product suggestions or thumbnails? It’s here that the designer can really prove their worth. We have all seen designs that lack structure, spacing and consistency. The content gets lost, or the user gives up entirely when they aren’t given the tools with which to make confident decisions. Building a great experience has a lot to do with how we empower the user’s decision-making process through these practices. When we apply our skill sets to drive users to a particular action on a page, we are counteracting the lag or complete mental shutdown that is caused by a complicated decision-making process.

Is minimalism your thing? Then a splash of color or carefully arranged negative space goes a long way to breaking down the top-level decisions that users have to make. If you find yourself painting or spacing out elements haphazardly on the page, then it’s time to reconsider the number of options on the page and choose the ones that are most important.

The less color we use, the more powerful it becomes.

When dealing with rich designs and content-heavy websites, patterns are your best friend. When users are in scanning mode, their eyes will key in on consistency, so your designs should be visually consistent in the right way. Are your headings different enough from your titles to be instantly recognizable as secondary or tertiary content? Always fall back on the principles of art and look at how the design uses line, shape, color and spacing. Variations in these things draw the user’s attention, while consistency breeds familiarity and easier decision-making. Pushing Hick’s Law to the core of this thought process forces us to think twice about our reasons for visually emphasizing certain elements.

When we design in patterns, we instill assumptions and behavioral patterns in our users as well. The Web has some global design patterns that help users make decisions. When text is blue and underlined, users understand they can click on it and get sent to a related resource. Similar patterns can exist within the confines of a single design. If we place a texture behind a headline, the user will associate the two things; the next time the user sees the texture, they will expect to see an element in front of it that carries the same weight or meaning as the headline they first saw. Distributing these patterns throughout a design helps users make choices based on previous experience.

What We Do With Words

Perhaps you haven’t heard the news: people don’t really read websites. Users don’t read content until they are motivated and enabled to do so. So, we need to take titles seriously and use imagery in the right way. Graphics and images are a huge draw, especially on pages loaded with text. When used correctly, they can make an otherwise heavy page easier to decipher, thus connecting users to the content they care about more quickly.

Thanks to design patterns and support of image thumbnails, Pinterest can load a lot of content.

Take away the images, and the design suddenly becomes unusable. This highlights the importance of using images properly.

Designing With Hick’s

The only way to get any real value out of Hick’s Law is to marry it with the design principles that we know and love. I challenge you to incorporate Hick’s Law into the highest levels of your design process. When you set up wireframes, look past the trees of “Link 1, Link 2, Link 3…� and see the forest of decisions that you are putting in front of users. (Cutting this forest down is totally fine.)

Prototyping stuff out? Don’t just worry about how many times to use a call-to-action style. When you group elements or space them out or change the background color or apply a texture, you are setting off a section of the design and potentially laying another choice on users. This is why design is not just about decorating the page or making a button stand out. We must respect the power of design to draw attention and, thus, strictly limit the number of decisions that we burden users with.

The Web is a wonderful place to specialize, and a lot of websites out there do a fine job of delivering a very limited scope of options to users in fine style. This level of focus is made possible by zeroing in on a core set of behaviors that are easily targeted by a consistent set of design patterns. This often has the desirable side effect of being great for mobile-first responsive design.

Quipol focuses on doing one thing really well, which limits decision overload for users.

Where’s My Magic Number?

So, how many choices can we expect users to be able to manage before slowing down? The answer will always be relatively few. Some of the best designed and most popular websites limit options to just a few. On Google, we can log in, search or try our luck. On the Quipol page above, we can vote, log in or sign up, learn about this new service, or see more polls. The options on Twitter’s home page have lowered over time, being whittled down to simple sign-up and log-in forms.

Not long ago, Twitter presented a lot of choices on the home page.

The new design sharply reduces these decision points and exhibits greater focus.

This is a huge design challenge that demands a lot of thought, testing and revision. The process of minimizing options for users without impairing functionality is not an exact science and no easy task. It requires studying our users’ behavior patterns and making tough decisions about what to do about such things as advertising, business-derived feature creep and actions such as logging in and signing up (which empower users but distract from the content). As we can see with Twitter, this is an evolving art form. As Twitter continues to grow in popularity, more and more users are landing on its home page already knowing what goes on there. This empowers Twitter’s design team to lower the noise that results from having to educate new users on the service.

The “Explore� feature on Foursquare packs limitless possibility into a simple set of options.

Foursquare has also done a great job of providing a powerful tool without overwhelming users with choice. In less capable hands, Foursquare’s “Explore� feature could easily host dozens of filters, restrictions and settings to tinker with. Instead, the visitor is encouraged to use the service simply by typing what they want in the input field and hitting the only button on the screen. This simplicity is made possible by a few things. First and foremost, the core premise of the service is all about the here and now. Foursquare knows its users are interested in what’s right around them, because the service has always been about sharing and exploring your immediate surroundings; so, defaulting the search area to the user’s current location is a safe bet. Secondly, over a billion data points yield a lot of power. With such a large a set of information, Foursquare can do a lot behind the scenes to make educated guesses about what its users are really interested in.

Making Sense Of It All

So, how does rethinking Hick’s Law outside of its traditional design context make us better designers? It’s all about the process. It irks me when a client asks me to make something pretty or to put a “magic touch� on some content. Design has always been about so much more than that, and a huge part of it is making the experience effortless for users.

As we’ve seen in the examples of well-executed design above, websites take different routes and devise different solutions, but the goals are the same. When we apply principles such as Hick’s Law beyond the narrow scope of navigation sets, we start to see the power of eliminating distractions for users. Slimming websites down to one or two clear options makes for a beautiful experience and sets a lofty goal for the designer.

We can’t always eliminate all confusion for our busy, distracted users, but we can ease their pain by limiting the options that they have to mentally process. When we view chunks of content as decision-making points, it becomes clear just how much we ask of visitors. Each option is an opportunity to evaluate its importance in the design. Designers who force users to decide between only meaningful and clear options are the ones who deliver an effortless user experience. And when the experience is effortless, everyone wins.

Related Resources

• “Thinking of Interfaces as Sets of Jobs,â€� Ryan Singer
• “The Obvious, the Easy, and the Possible,â€� Jason Fried
• “Decision Architecture: Designing for Decision-Making,â€� Colleen Roller

(al)

© Jason Gross for Smashing Magazine, 2012.

Before drawing anything in a browser, ask yourself three questions:

1. Do you need to support older browsers?If the answer is yes, then your only choice is Raphaël. It handles browsers all the way back to IE 7 and Firefox 3. Raphaël even has some support for IE 6, although some of its underlying technology cannot be implemented there.
2. Do you need to support Android?Android doesn’t support SVG, so you’ll have to use Paper.js or Processing.js. Some rumors say that Android 4 will handle SVG, but the majority of Android devices won’t support it for years.
3. Is your drawing interactive?Raphaël and Paper.js focus on interaction with drawn elements through clicking, dragging and touch. Processing.js doesn’t support any object-level events, so responding to user gestures is very difficult. Processing.js can draw a cool animation on your home page, but the other tools are better for interactive applications.

Paper.js, Processing.js and Raphaël are the leading libraries for drawing on the Web right now. A couple of others are up and coming, and you can always use Flash, but these three work well with HTML5 and have the widest support among browser vendors.

Choosing the right framework will determine the success of your project. This article covers the advantages and disadvantages of each, and the information you need to make the best choice.

All of the code in this article is open source and can be run on the demo page that accompanies this article.

Overview

It’s all JavaScript once the page runs, but the frameworks take different paths to get there. Raphaël is written directly in JavaScript, but Paper.js uses PaperScript, and Processing.js uses its own script. They all support Firefox, Chrome and Safari, but Internet Explorer is an issue — Paper.js and Processing.js use the canvas tag and thus require IE 9.

PaperScript is a JavaScript extension that makes it possible to write scripts that don’t pollute the global namespace. This cuts down on JavaScript conflicts. PaperScript also supports direct math on objects such as Point and Size: you can add two points together as if they were numbers.

Processing.js is based on a framework named Processing, which runs in the Java Virtual Machine. You define int and float instead of var, and you can use classes with Java-style inheritance. While the Processing.js script looks a little like Java, it’s more like JavaScript and doesn’t require many of the more complex features of Java.

Using all three libraries is easy if you have some familiarity with JavaScript.

Getting Started

Start by importing each library. The process for setting each up is a little different.

Setting Up Paper.js

<head>
<script src="paper.js" type="text/javascript" charset="utf-8"></script>
<script type="text/paperscript" canvas="paperCircle" src="paper_circle.pjs" id="script"></script>
</head>
<body>
<canvas id="paperCircle" class="canvas" width="200" height="200" style="background-color: white;"></canvas>

Paper.js specifies a script type of text/paperscript and the ID of the canvas tag that you’ll draw on. It uses that ID to know where to draw.

Setting Up Processing.js

<head>
<script src="processing.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<canvas width="200" height="200" class="canvas" data-processing-sources="processing_circle.java"></canvas>

Processing.js uses the data-processing-sources attribute of the canvas tag to import your drawing. I use a .java extension for Processing’s source file so that my editor color-codes it properly. Some authors use a .pde or .pjs extension. It’s up to you.

Setting Up Raphaël

<head>
<script src="raphael-min.js" type="text/javascript" charset="utf-8"></script>
<script src="raphael_circle.js" type="text/javascript" charset="utf-8"></script>
</head>

Raphaël is imported like any other JavaScript file. It works well with jQuery’s ready function or any other JavaScript framework.

Now we can start drawing.

Object-Oriented Drawing

Both Paper.js and Raphaël use object-oriented drawing: you draw a circle and get back a circle object. Processing.js draws the circle and doesn’t give you anything back. The following simple example makes it clear. Let’s start with a circle in the middle of the screen at point 100,100.

Paper.js:

var circle = new Path.Circle(new Point(100, 100), 10);
circle.fillColor = '#ee2a33';

Raphaël:

var paper = Raphael('raphaelCircle', 200, 200);
var c = paper.ellipse(100, 100, 10, 10);
c.attr({'fill': '#00aeef', 'stroke': '#00aeef'});

Processing.js:

void setup() {
   size(200, 200);
}

void draw() {
   background(#ffffff);
   translate(100, 100);
   fill(#52b755);
   noStroke();
   ellipse(0, 0, 20, 20);
}

Each code snippet draws the same circle. The difference is in what you can do with it.

Paper.js creates the circle as a path object. We can hold onto the object and change it later. In Paper.js, circle.fillColor = 'red'; fills our circle with red, and circle.scale(2) makes it twice as big.

Raphaël follows Paper.js’ object-oriented model. In Raphaël, we can change the color of our circle with circle.attr('fill', 'red');, and scale it up with circle.scale(2, 2);. The point is that the circle is an object that we can work with later.

Processing.js doesn’t use objects; the ellipse function doesn’t return anything. Once we’ve drawn our circle in Processing.js, it’s part of the rendered image, like ink on a page; it’s not a separate object that can be changed by modifying a property. To change the color, we have to draw a new circle directly on top of the old one.

When we call fill, it changes the fill color for every object we draw thereafter. After we call translate and fill, every shape will be filled with green.

Because functions change everything, we can easily end up with unwanted side effects. Call a harmless function, and suddenly everything is green! Processing.js provides the pushMatrix and popMatrix functions to isolate changes, but you have to remember to call them.

Processing.js’ no-objects philosophy means that complex drawings run faster. Paper.js and Raphaël contain references to everything you draw, and so the memory overhead created by complex animations will slow down your application. Processing.js contains no references to drawn elements, so each shape takes up a tiny amount of memory. Memory overhead pays off if you need to access an object later, but it’s overkill if you don’t. Paper.js gives you a way out of this with the Symbol object and by rasterizing objects, but you have to plan ahead to keep the app running fast.

The object-oriented versus no-objects philosophy has implications for everything you do with these libraries. It shapes the way each library handles animations.

Let’s Make It Move

Rotating circles aren’t very interesting, so we’ll make a square rotate around a circle.

Animation in Processing.js

Processing.js supports animation with the predefined setup and draw functions, like this:

float angle = 0.0;
void setup() {
   size(200, 200);
   frameRate(30);
}

void draw() {
   background(#ffffff);
   translate(100, 100);
   fill(#52b755);
   noStroke();
   ellipse(0, 0, 20, 20);

   rotate(angle);
   angle += 0.1;
   noFill();
   stroke(#52b755);
   strokeWeight(2);
   rect(-40, -40, 80, 80);
}

The setup function is called once when the application starts. We tell Processing.js to animate with a frame rate of 30 frames per second, so our draw function will be called 30 times every second. That rate might sound high, but it’s normal for making an animation look smooth.

The draw function starts by filling in the background of the canvas; it paints over anything left over from previous invocations of the draw function. This is a major difference with Processing.js: we are not manipulating objects, so we always have to clean up previously drawn shapes.

Next, we translate the coordinate system to the 100,100 point. This positions the drawing at 100 pixels from the left and 100 pixels from the top of the canvas for every drawing until we reset the coordinates. Then, we rotate by the specified angle. The angle increases with every draw, which makes the square spin around. The last step is to draw a square using the fill and rect functions.

The rotate function in Processing.js normally takes radians instead of degrees. That’s why we increase the angle of each frame by 0.2, rather than a higher number such as 3. This is one of many times when trigonometry shows up in this method of drawing.

Animation in Paper.js

Paper.js makes this simple animation easier than in Processing.js, with a persistent rectangle object:

var r;

function init() {
   var c = new Path.Circle(new Point(100, 100), 10);
   c.fillColor = '#ee2a33';

   var point = new Point(60, 60);
   var size = new Size(80, 80);
   var rectangle = new Rectangle(point, size);
   r = new Path.Rectangle(rectangle);
   r.strokeColor = '#ee2a33';
   r.strokeWidth = 2;
}

function onFrame(event) {
   r.rotate(3);
}

init();

We maintain the state of our square as an object, and Paper.js handles drawing it on the screen. We rotate it a little for each frame. Paper.js manages the path, so we don’t have to redraw everything for each frame or keep track of the angle of rotation or worry about affecting other objects.

Animation in Raphaël

Animations in Raphaël are written in standard JavaScript, so Raphaël doesn’t have specific functions for handling animation frames. Instead, we rely on JavaScript’s setInterval function.

var paper = Raphael('raphaelAnimation', 200, 200);
var c = paper.ellipse(100, 100, 10, 10);
c.attr({
   'fill': '#00aeef',
   'stroke': '#00aeef'
});

var r = paper.rect(60, 60, 80, 80);
r.attr({
   'stroke-width': 2,
   'stroke': '#00aeef'
});

setInterval(function() {
   r.rotate(6);
}, 33);

Raphaël is similar to Paper.js in its object-oriented approach. We have a square, and we call a rotate function on it. Thus, we can easily spin the square with a small amount of code.

Interaction

Raphaël shines when you need to enable interactivity in a drawing. It provides an event model similar to JavaScript’s, making it easy to detect clicks, drags and touches. Let’s make our square clickable.

Interactions With Raphaël

var paper = Raphael('raphaelInteraction', 200, 200);
var r = paper.rect(60, 60, 80, 80);
r.attr({'fill': '#00aeef', 'stroke': '#00aeef'});

var clicked = false;

r.click(function() {
   if (clicked) {
      r.attr({'fill': '#00aeef', 'stroke': '#00aeef'});
   } else {
      r.attr({'fill': '#f00ff0', 'stroke': '#f00ff0'});
   }
   clicked = !clicked;
});

The click function in Raphaël works like jQuery, and you can add it to any object. Once we get the click event, changing the color of the square is easy. Raphaël has more functions to support dragging, hovering and all of the other user interactions you expect from JavaScript.

Interactions With Paper.js

Paper.js has a different way of managing interactions, but it’s still pretty easy:

var hitOptions = {
   fill: true,
   tolerance: 5
};

function init() {
   var point = new Point(60, 60);
   var size = new Size(80, 80);
   var rectangle = new Rectangle(point, size);
   r = new Path.Rectangle(rectangle);
   r.fillColor = '#ee2a33';
}

function onMouseUp(event) {
   var hitResult = project.hitTest(event.point, hitOptions);

   if (hitResult && hitResult.item) {
      if (hitResult.item.clicked) {
         hitResult.item.fillColor = '#ee2a33';
      } else {
         hitResult.item.fillColor = '#f00ff0';
      }

      hitResult.item.clicked = !hitResult.item.clicked;
   }
}

init();

Paper.js deals with mouse gestures through a concept called “hit testing.� A hit finds the point under the mouse cursor and figures out which object it lies above. Hit options enable you to define how the hit works: you can set options for such things as how close the mouse has to be, and whether the middle of the object counts or only the edge. We can extend this hit test to any object or group of objects in Paper.js.

The Paper.js team added object-level events similar to Raphaël’s a few weeks ago. The events should show up in the next release.

Interactions With Processing.js

Processing.js makes detecting mouse clicks tricky. It doesn’t support object-level events or hit testing, so we’re pretty much on our own.

float bx;
float by;
int bs = 20;
boolean bover = false;
boolean clicked = false;

void setup() {
   size(200, 200);
   bx = width/2.0;
   by = height/2.0;
   noStroke();
   fill(#52b755);
   frameRate(10);
}

void draw() {
   background(#ffffff);

   // Test if the cursor is over the box
   if (mouseX > bx-bs && mouseX < bx+bs &&        mouseY > by-bs && mouseY < by+bs) {
      bover = true;
   } else {
      bover = false;
   }

   translate(100, 100);
   rect(-40, -40, 80, 80);
}

void mousePressed() {
   if (bover) {
      if (clicked) {
         fill(#52b755);
      } else {
         fill(#f00ff0);
      }
      clicked = !clicked;
   }
}

Once Processing.js draws the square, it forgets about it. We want the color of the square to change when we click on it, but the script doesn’t know that, so we have to do all of the calculations ourselves. The draw function detects the mouse cursor’s position and does the math to determine whether it lies within the square.

The code is not too bad for the square, but our circle would need Ï€r2. And more complex shapes such as ovals, curves and compound shapes would require even more math.

No Clear Winner

Each framework has its advantages. Between them, the features make for cool demos and even cooler applications.

Showing Off Paper.js

Paper.js excels at manipulating complex shapes. It can turn, twist and transform any object in hundreds of ways. These transforms make it easy to convert objects based on interactive gestures. The new Google Music Tour, which makes colored lines beat in time to music, shows how one can make complex changes on simple shapes.

The other wow factor in Paper.js is its support of raster graphics. Paper.js can completely change the way images are drawn — including by turning them into spirals and Q*bert boards.

Showing Off Processing.js

Processing.js’ biggest feature is speed, making it possible to draw complex animations on slower machines. Many examples are out there, but the fluidity of Processing.js animations shows up best in Ricardo Sánchez’s koi pond.

The swishing of the tails and waving of the bodies make the koi look very natural. Processing.js makes this easy, with support for curves and customized animations.

Processing.js also supports complex drawing elements such as shading, lighting and 3-D transforms. If you want to create complex animations in canvas very quickly, then Processing.js is the clear winner.

Showing Off Raphaël

The best feature of Raphaël is its support for Internet Explorer 7 and 8. If your application has to run on older browsers, then Raphaël is the only option.

The other big feature of Raphaël is its community. Raphaël is older than Paper.js and Processing.js and thus has had more time to build examples, tutorials and user support. It has built-in support for easing, animation transforms and the event handlers that we saw in the interaction example; it also has a comprehensive charting library.

Raphaël also has the best tooling support.

The Tools

If you’ve worked with Flash, the lack of tools for these frameworks will disappoint you. Many of the frameworks will edit SVG images, but none of them offer a drag-and-drop method for creating applications.

A few simple tools are out there, but they are more like proofs of concept than actual products. Adobe is working on a tool named Edge, but it has a long way to go.

If you want to drag and drop, then Web animations aren’t for you yet. Right now, this method of drawing is more like video-game programming. Writing code to draw a circle is tougher than clicking and dragging, but it scales to more complex applications and some fun stuff.

Let’s Build Something Real

So far, we’ve looked at some simple examples, seen the best features of each platform and looked at how to choose the right one. Each framework has pluses and minuses, but judging them is difficult until you create an actual application.

To compare each framework, I’ve drawn some gears. Each gear is made up of two circles, with a set of teeth around the outer circle.

When the shapes are all given the same color, they look just like a gear.

Every gear will rotate a little with each frame of the animation. The first gear will be given a speed, and the rest will move relative to it. The gears will arrange, mesh and rotate together with a crazy amount of trigonometry. Put them together and you’ve got a complex gear system.

Paper.js:

Processing.js:

Raphaël:

Well, that wasn’t quite Raphaël. The rotate function work different in Raphaël than it does in Paper.js and Processing.js. Raphaël doesn’t support rotation around a fixed point. Instead, the teeth of the gears are drawn and redrawn independently, and they fly through the air instead of rotating around the center. The only way to really turn the gear would be to draw the entire gear as a single path, and that takes more math than I’m willing to write. If anyone wants to give it a try, everything is open source.

The Future Of Web Drawing

We gamble on every new technology that we learn: we hope that it catches on and that our investment pays off. Technologies rise and fall on their respective merits, but other factors comes into play, such as vendor support and business uses. The future of our industry is almost a guessing game.

Right now, Flash looks like a bad investment. Flash has great tools, years of development and a large community, but even Adobe is moving away from it.

SVG is in a similar situation. Browsers support it now, but it isn’t getting a lot of attention.

Every browser vendor is working hard to render canvas faster, to use hardware acceleration and to better support libraries such as Paper.js and Processing.js. All mobile devices support canvas, and their developers are working to improve it.

(al)

© Zack Grossbart for Smashing Magazine, 2012.

In darts, hitting the bulls-eye is harder to do than hitting any other part of the dartboard. This is because the bullseye is the smallest target. This same principle can also apply to touch targets on mobile devices.

Smaller touch targets are harder for users to hit than larger ones. When you’re designing mobile interfaces, it’s best to make your targets big so that they’re easy for users to tap. But exactly how big should you make them to give the best ease of use to the majority of your users? Many mobile developers have wondered this, and most have turned to the user interface guidelines provided by the platform developer for the answer.

(Image credit: ogimogi)

What the Mobile Platform Guidelines Say

Apple’s iPhone Human Interface Guidelines recommends a minimum target size of 44 pixels wide 44 pixels tall. Microsoft’s Windows Phone UI Design and Interaction Guide suggests a touch target size of 34px with a minimum touch target size of 26px. Nokia’s developer guidelines suggest that the target size should be no smaller than 1cm x 1cm square or 28 x 28 pixels.

While these guidelines give a general measurement for touch targets, they’re not consistent with each other, nor are they consistent with the actual size of the human finger. In fact, their suggested sizes are much smaller than the average finger, which can lead to touch target problems for users on mobile devices.

Small Touch Targets Lead to Big Problems

Small touch targets make users work harder because they require more accuracy to hit. Users need to reorient their finger, from finger pad to fingertip, to hit the target with clear visual feedback. Using the finger pad would cover the entire target, making it impossible for users to see the target they’re trying to hit. Users use the fingertip to hit small touch targets because it gives them the visual feedback they need to know that they’re hitting their target accurately. But when users have to reorient their finger, it slows their movement down, and forces them to work harder to hit their target.

Not just that, but small touch targets can lead to touch errors. When small touch targets are grouped near each other, users can accidentally hit neighboring targets and initiate unintended actions. This is because the user’s finger overlaps on to the neighboring buttons. And if pressure is not carefully applied in the right spot, it’ll trigger the wrong action. It’s easy for users to make these errors with their index finger. But it’s even easier for them to make these errors if they use their thumb, because their thumb is much larger than the target. Sometimes users will tilt their thumb sideways and use the thin side to hit a small touch target. But this is a lot of unnecessary work.

Thumb use among mobile users is popular. Some users won’t always have two hands free when they’re on their mobile device. Many prefer the convenience of using only one hand and their thumb. Users shouldn’t have to switch from using one hand to two hands, or from their thumb to their index finger to hit a target accurately. And more importantly, the size of a target shouldn’t cause them to make touch errors. Small touch targets make things harder for users, where a finger-friendly target does not.

Pixel Width of the Average Index Finger

An MIT Touch Lab study of Human Fingertips to investigate the Mechanics of Tactile Sense found that the average width of the index finger is 1.6 to 2 cm (16 – 20 mm) for most adults. This converts to 45 – 57 pixels, which is wider than what most mobile guidelines suggest.

A touch target that’s 45 – 57 pixels wide allows the user’s finger to fit snugly inside the target. The edges of the target are visible when the user taps it. This provides them with clear visual feedback that they’re hitting the target accurately. They’re also able to hit and move to their targets faster due to its larger size. This is consistent with Fitt’s Law, which says that the time to reach a target is longer if the target is smaller. A small target slows users down because they have to pay extra attention to hit the target accurately. A finger-sized target gives users enough room to hit it without having to worry about accuracy.

Pixel Width of the Average Thumb

There are many users who use their index finger to tap mobile targets. But there are just as many users who use their thumb as well. The big difference with the thumb is that it’s wider than the index finger. The average width of an adult thumb is 1 inch (2.5 cm), which converts to 72 pixels.

For users who use their thumbs, 72 pixels does wonders. They’re easier and faster to hit because they allow the user’s thumb to fit comfortably inside the target. This makes the edges visible and easy to see from all angles. This means that users don’t have to reorient their thumb to the very tip to see it hit the target. Nor do they have to tilt their thumb to the side to hit it. One tap with their thumb pad is enough to do the trick.

A Target Size Study for One-Handed Thumb Use on Small Touchscreen Devices found that user errors declined as the target size increased. Users were able to tap the target faster without having to make intentional physical accommodations to increase accuracy such as reorienting the thumb, which would have slowed performance.

Another study on Touch Key Design for Target Selection on a Mobile Phone also found that the number of errors decreased as the touch key size increased. In addition, it was provided that the larger the touch key size, the higher the success rate and pressing convenience.

Finger-Sized is Ideal, But Not Always Practical

As many benefits there are to using finger-sized targets, they’re not always practical in every situation. On a mobile device, you’re working in a limited space. This means when you have many finger-sized targets together, they can take up more space than your screen can afford. However, when you have a few finger-sized targets together, that’s when you can fit them all on your screen without trouble. You will need to measure the size of your screen and touch targets to know exactly how big of a touch target you can afford. If you can’t afford finger-sized touch targets on your interface, use the guidelines the mobile platform gives you instead.

Finger-sized targets are much easier to apply on a tablet than a mobile device because there is more screen space available. You can use them liberally without the fear of taking up too much space and improve tablet usability instantly. However, mobile devices are where users have the most trouble hitting touch targets. And that’s where finger-sized targets are needed the most. The challenge for designers is to figure out how to make the most of finger-sized targets on the mobile screen. This might require using less touch targets than you normally would. But this is a plus because it forces designers to keep their navigation simple and minimal.

Thumb-Sized Targets for Gaming Applications

Another thing to think about is when to use a thumb-sized target over an index finger-sized one. It’s difficult to know whether most of your users will use their thumbs or index fingers on your application. However, if your application is a game, it’s likely most users will use their thumbs to play instead of their index fingers. This is why thumb-sized targets are particularly useful for gaming applications. By making your game control targets thumb-sized, users can play the game with better handling and control. They’re able to see the game control targets as they move their thumbs, and the game will feel more adaptive to them.

It is without a doubt that matching your touch target sizes to the average finger size improves mobile usability for many. Whether your application is a game or any other, touch targets are designed for users to tap. If the user has to take their attention away from using your application to the way they move, orient or arc their finger to tap a target, it degrades their experience of your application. With this new-found insight, you can create applications that are truly finger-friendly. Finger-friendly design isn’t reserved for the few. It’s a new design standard for mobile applications to follow everywhere.

(al)(fi)

© Anthony T for Smashing Magazine, 2012.

The work of Chip Kidd spans design, writing and, most recently, rock ’n’ roll. He definitely has the charisma to get ahead in that third field. He is best known for his unconventional book jackets, but he has published two novels of his own: The Learners and The Cheese Monkeys. Uninterested in design trends and fashions, he often draws inspiration from collectibles and memorabilia.

Kidd is now busy creating his masterpiece, a graphic novel born from his lifelong fascination with Batman (he regards himself as Batman’s number-one fan). He has teamed up with comic-book artist Dave Taylor to illustrate the story in an astonishing way, conjuring a Fritz Lang aesthetic with a healthy dose of Kidd’s own sensibility. Batman: Death By Design is set to be released in spring 2012 through DC Comics.

Chip Kidd at the Typo London 2011 conference. (Image: Gerhard Kassner)

Until then, here’s an interview with Chip Kidd, previously unpublished in English, that will get you into the mind of one of design’s most original and charismatic practitioners.

Q: How did you get into the business of jacket design?

Chip Kidd: It happened to be the first job that I was offered. I studied graphic design in Pennsylvania, where I grew up, but I knew that when I graduated I would go to New York. So, I did. I just went to every graphic design place that would see me, but eventually ended up at Random House. And it was an entry-level job, as assistant to the art director. Well, it wasn’t really what I had in mind, but I tried it for a while. It gave me a start, and it’s 24 years in October.

One of Kidd’s most recognizable covers. His artwork was adapted for a $1.9 billion movie series that you might have seen.

Q: How did your persona in the design world emerge?

Kidd: The thing about book covers, I think probably in most parts of the world, is that the designer gets credit on the jacket for what they’ve done. For most graphic designers, that’s not the case, in terms of how it works in print or TV commercials; you don’t see who made something on the piece itself. But in graphic design, you do. What was getting out there was the work itself. Over time that built up, to the point where people started to recognize my name.

Q: Did it take you a long time?

Kidd: It seemed long at the time, but it probably took two or three years, which in retrospect isn’t that long at all.

Q: Was that in the beginning of your career?

Kidd: Well, I started in 1986. I started working right away. I wasn’t doing a lot of designing at first — it was more doing the assistant stuff. But I started actually designing after six months or something like that. It seemed, in retrospect, to happen quickly or right away.

For David Sedaris’ Naked, Kidd designed a wraparound featuring boxer shorts that, when removed, reveals an X-ray of a pelvis.

Q: What about the chain of command? In your talk at Typo Berlin 2009, you joked about issues with editors, editors in chief, authors, marketing people. Do you find that challenging or frustrating? Or do you expect people to just listen to you?

Kidd: I think it’s good that I am being constantly challenged. I think that’s important for doing good work. If people liked everything I did just because I did it, as opposed to whether it was actually good or not, that would be a problem — both for me and for them. What I don’t like, and I don’t know any designer who does, is when you feel that you’ve done the right work and then it gets rejected, for whatever reason. And then you have to go back and redo it, and you think you’ve done it well, and that gets rejected, too.

So that, I think, is a kind of challenge I don’t like, frankly because it doesn’t always seem to be about whether it’s the right design or not — it’s about some sort of political situation within the job; for example, everybody likes it, but the author doesn’t.

Q: So, marketing people and clients often make your life hard. Does it get better as you go on?

Kidd: It doesn’t seem to. [Laughs] On the one hand, yes, it gets better because I’ve gotten a reputation as someone who knows what they’re doing, and so a lot of authors will go along with that. Then you build up trust with an author if you’ve worked on their books for a long time. That part of it is fine. But then there’s this other area where things get rejected by publishers for various reasons that I either understand or don’t. Or I deal with people rejecting me directly, which is very frustrating. That part, for me, hasn’t gotten easier.

Books are very… Each book is in its own way unique. It has its own set of problems, own set of circumstances, and that doesn’t seem to change. So, there will always be an idiosyncratic nature to the work.

Kidd’s own literary debut was a novel set in a design department at a university in the 1950s. He saw the cover as an opportunity to use graphic devices that he wasn’t able to get away with when working on other people’s books.

Q: Speaking of marketing, people will often want books to be, say, red in order to sell more. Browsing your website, I realize you don’t seem to believe the cover sells the book. Do you see the cover as part of the book?

Kidd: It is a part of the book. It’s literally your first impression — it’s the book’s face. Regardless of what kind of book it is, this is the way you’re going to visually preserve it first before you open it. But this doesn’t have much to do with someone buying it. People tell me they buy books for their covers. But it’s not a sales tool in the sense of you’re going to buy it because you like that cover. Really, what the cover should do is get you to open the book and start to read it and investigate it. And at that point, the book is going to sell itself to you, or not.

I very much try to downplay the jacket as a sales tool, because I think that publishers invest too much intellectually in this concept, and they can actually make my work much, much harder than it needs to be. And certainly with the advent of buying books on the Web, you’re not going to buy a book from Amazon because of the way it looks. It’s just not the nature of how that works. The problem arises when you get a bunch of people in a room looking at a jacket and determining the fate of the design based on preconceptions of how the book will sell, about how this design will help the book to sell.

Q: Does this lead to a battle with marketing, whose job it is to sell books?

Kidd: Yes, it can — and I think often needlessly so. You know the idea: men will buy a book with a woman on it.

For his first monograph of book cover designs, Kidd did the unexpected and featured an open book on the cover.

Q: Do you try to solve such problems diplomatically?

Kidd: Diplomacy is always the best way to go, in almost any situation in life I think. But usually, I am working through an art director, who is dealing with the marketing people directly. And then the marketing people will talk to our editor in chief, who will then talk to us. It’s rare that I deal with them directly.

Q: What about typography? What’s your view on modernist book jackets (the kind you see from Switzerland) and typographically rich covers.

Kidd: It’s hard to talk about these things in general. Personally, in terms of my typography, I think it’s pretty conservative and not very adventurous, because I worry about something looking trendy. Most of the books I do are hardcover books that are meant to be kept for a long time. I’m always thinking, what will this look like in a year? What will it look like in five to ten years? And of course, it’s impossible to know, but you have to try and envision that.

Which is not to say everything should be boring and predictable — there are ways to be creative with it. Personally, I’m much more inventive with the imagery than with the typography. An image will be more powerful than the words or the title. Or if you play around, you can create a tension, an interesting puzzle for the reader to solve. And that’s much more about the imagery than the type.

Kidd got a chance to indulge his obsession with Batman, working here with photographer Geoff Spear to showcase a wide range of collectibles celebrating the Caped Crusader.

Q: Do you try to avoid fashions?

Kidd: In a way, yes. Personally, I feel I never know what’s fashionable anyway. I see what people are doing, and sometimes I see typography that I think is really interesting, and I think I wouldn’t be able to do that even if I wanted to. Which isn’t a criticism, just an observation. My skills with type are extremely limited. In terms of fashion, I don’t know what it means from one minute to the next.

Q: How do you manage living in a big city and resisting the fashionable influences around you?

Kidd: I don’t take myself out of it. I just observe what people are doing, and I do something else. I go against it. This is one of the things one of my teachers at school told me: find out what everyone in the class is doing, and then do something completely different. And that has always made perfect sense to me.

Kidd is a master of letting photography do the heavy lifting. While working on a book with Geoff Spear, he discovered an image of a scuffed bird shot with a macro lens. It came in handy when Kidd later designed Haruki Murakami’s novel, The Wind-Up Bird Chronicles.

Q: What’s your favorite form of expression (not necessarily design-related)?

Kidd: I’ve written two novels. Those to me are much more personal than me doing a book cover for somebody else. I don’t see somebody else’s book cover as a very personal form of expression. If it was, I would be taking advantage of the writer, I think unfairly. And it is perceived that way — “Oh, this is your art!â€� — like somebody else’s book cover is my art. Which technically may be true, but it shouldn’t come out that way. It should come out as me trying to serve their art, as opposed to me trying to serve myself.

Q: Sounds similar to the differences between the artist and the designer.

Kidd: I’ve always seen a strict division between the two. Somebody will ask me what I do, and then say, “Oh, you’re an artist.� And I say, “No, I’m a designer.�

For a novel about parents breeding children in order to maintain a carnival sideshow, Kidd used striking typography with a vibrant orange.

Q: What’s your view on ugliness?

Kidd: The same as my views on beauty. They’re extremely subjective. It’s very hard to say. Something that I find very ugly others find very beautiful, and the opposite. It’s very hard to articulate that.

Q: What’s so fascinating to you about memorabilia, comics and other collectibles?

Kidd: I appreciate them as aesthetic objects. But there’s also a nostalgic value to them — certain things I had as a child that I really enjoyed that I lost or broke. Then you become an adult and try to reclaim that. Now eBay makes that more accessible than ever. But I genuinely do get an aesthetic pleasure out of these objects, which is [expressed through] the Batman collected book that I put together, which has Batman toys from 40 years ago.

Q: So, you’re a collector?

Kidd: Oh, yes.

One of Kidd’s most striking covers, designed for the fourth installment of Osamu Tezuka’s award-winning Buddha series.

Q: What other forms of art you enjoy? I’ve spotted elements of popular art in your work. Do you identify with what was going on in New York City in the ’50s and ’60s?

Kidd: I’m definitely affected by it. But I have very strong opinions about it, in that I think somebody like Roy Liechtenstein basically is a fraud who got everybody to buy into what he was doing. And paintings about comics became far more important to critics than the comics themselves. I’m much more interested in the comics themselves. I couldn’t give a shit about a decontextualized panel that was stylized by this person. But everybody bought into it, amazingly.

Similarly, do I think Warhol was a great artist? Yes. But should he have given half the money to the guy who actually designed the canvases or the Brillo box or any of that other stuff that he totally appropriated? It’s based on something that somebody else made — that person should get credit, too. And they didn’t. I’m very much against that. It’s an abuse of the original designer.

Q: What would you do if the book format dies?

Kidd: I know, that’s an increasingly vital question. I can’t really say. I don’t know. If that’s eventually what happens, I’ll figure it out once I get there. I don’t believe that people want to read books on the screen. I think some people are… I just don’t think it’s going to go the way the music LP and CD went. It doesn’t have that function in the culture. But even eBooks — they have some kind of visual thing for their cover, so who knows? Maybe that’s what I’ll be doing. If I haven’t killed myself by then.

(From Typo Berlin 2009)

A special Thank You to our Typography editor, Alexander Charchar, for making this interview possible.

Proofreaders: (al) (il)

© Spyros Zevelakis for Smashing Magazine, 2012.