How To Design A Brand Logo (With Ease)

Great logo design can do incredible things for the company behind it. Set the tone for the brand. Improve memorability. Help users emotionally connect to the brand. Create consistency between all marketing channels. Set it apart from the competition. But as a web designer, do you know how to tackle the lofty request of logo design when a client brings it to you?


As a web designer, you may find yourself in a position where a client wants you to design their brand logo. If you’re feeling up to the task, there are some things you need to know first.
For instance:

• How do you translate the value of a brand into a logo?
• Where can you go for logo design inspiration?
• Which tools should you use to create a logo (like Wix Logo Maker)?
• How do you piece together a logo from a bunch of ideas?

Make no mistake: designing a logo is just as complex a task as building a website. Not only do you need to understand what goes into making a great logo, but you need the right tools to create it.
If you’re thinking about doing this, the following guide will answer the four above questions for you.

Tips For Defining Your Brand With Great Logo Design

Let’s say I invited you over to my apartment and you got a gander at my workspace.

Even if you’re not an Apple user, you’d instantly know that I was working from one of their laptops. While Apple’s distinctive product design might be the clue you pick up on first, the apple icon would certainly seal the deal.
The Apple logo design is memorable and leaves a lasting impression — even without having to spell out the company name.
This is what you want to accomplish when designing a brand logo for your client. And here is how you should go about piecing it together:

Make no mistake: designing a logo is just as complex a task as building a website.

“

Tip #1: Ask The Right Questions

Your client might come to you with logo designs that they like the look of and tell you to run with it. Or they might simply suggest you take the company name and make it look “cool”.
But that’s not how great logos are built.
Just as you dive deep into a client’s business, its mission, and what kind of value they bring to their target user before building a website, you’ll have to do similar research for a logo.

Which Questions Do You Need To Ask?

What’s nice about logo design and web design is there’s a lot of overlap in what you need to ask clients to get started. So, consider building a questionnaire that tackles both pieces if you’re building both the branding and site for your clients.
For now, let’s look at the logo questions:

Why did you start your company?	If you can get to the heart of why they went into business, you’ll be able to create a logo that feels more genuine to that original mission.
What does your company do?	Identifying this is important as you don’t want to design something that looks great, but is all wrong for the market they’re working in.
Who do you serve?	While the client’s opinion of the logo matters, you need to focus on building something that looks good from the eyes of their audience.
Why do customers choose your company over others?	Their unique selling proposition will help you differentiate their logo from the competitors’ designs.
Who are your top 3 competitors? How do you feel about their logos?	This is a great question to ask if you want to get a raw, emotional response as opposed to the more buttoned-up responses the other questions may elicit.
What are your company’s values?	A good way to identify a unique edge for a brand is by looking at what they prioritize. Integrity? Customer commitment? Green initiatives?
How would you describe the company’s personality in 3 words?	You’ll be able to get a sense for the company’s “voice” when you talk to the business owner. But it’s always good to see how they describe it, too.
Do you have a slogan?	You won’t necessarily build the words into the logo (especially since there’s no room for it on mobile). But a slogan can help inform the design.
Where do you see your company in 5 years?	Rather than design something that looks good for the company on Day 1, you should create a logo that captures who they plan to be in the near future.
Who are your heroes and why?	Take a gander at the companies they look up to. Even if they don’t have a clear vision for their company yet, who their heroes are will give you a clue as to where they’re heading.

One last thing to ask is whether or not they’ve selected brand colors or fonts yet. The likelihood of this is slim if they’re asking you to design a logo, but it’s better to ask now than to find out later and have to rework it.

How Do You Get The Answers You Seek?

There are a couple of ways to do this. You could always schedule a call with your client and run through the questions with them. The only problem with that is it could either end up feeling like storytime or like pulling teeth.
In my opinion, the better option is to automate this with an online questionnaire. (This also allows you to scale your logo design efforts). Google Forms is always a great option as it’s easy to use and it’s free.

But if you’re already using something like Content Snare to collect files and information from web design clients, you might as well use it for this as well.

Tip #2: Get Inspired By Other Logos

Once you have a clear idea of who your client is and the message they want to convey, it’s time to start designing. But it won’t be as easy as writing out the name of the company and then adding graphical elements to it.
Take some time to do research on the competitive landscape and to gather outside inspiration for your client’s logo.
For the purposes of this post, let’s pretend that your new logo client is opening a dog grooming business in New York City.

Note the following:

• Seal-shaped logo would work well across all channels (especially social).
• Simple and clear graphics can easily be repurposed for favicon or standalone pictorial mark.
• Additional info and strong design choices lend credibility to the brand.

Note the following:

• Cute design uniquely plays on the NYC skyline.
• Color palette is striking enough where it’ll stand out no matter how big or small it appears (like in the favicon).
• The geometric design and strong sans serif font suggest stability within the brand.

Iffy color choice aside, note the following:

• The negative space design is unique and works well with the designer’s use of the recognizable Scottish Terrier dog breed.
• The star is a good choice as it can be used on any channel and would be instantly recognizable.
• The star symbol is a nice way to give this salon an air of luxury (like a VIP club).

Based on the information provided by your client, it might also be beneficial to look outside their industry for inspiration — especially if they’re looking up to titans of other industries. By starting with the competition though, you’ll get a good idea of what the logos and brands all have in common (if anything).
For example, in this particular space, we see a lot of pictorial logos with animal-related images. But in terms of colors, fonts and even shapes, the personality of the business and the unique selling proposition have led to wildly different designs.
As you survey existing logo designs, consider how closely you want your logo design to align with or how far it should deviate from them. At this point, you know your client fairly well, so when you see something that’s more in the vein of what you’re trying to do (or not do), you’ll immediately know it.

Tip #3: Find The Right Tool To Create Your Logo

When it comes to designing a logo for your client, you should be using a tool that makes your job easier. But that “job” really depends on what your client is paying and what their expectations are.

For Pre-made Logo Design

Are you going to compile a batch of premade logos — personalized with their info, of course — and let them choose the one they like best?
In that case, a free logo maker tool would work fine. So long as there’s a variety of logo styles to choose from in your client’s niche, you should be able to find plenty of designs to share with them.
Best for:

• Very small budgets;
• Really short timelines (i.e. a day or two);
• Temporary logos.

For Custom Logo Design

Are you planning to create 10 custom logos and run through series after series of “Which do you like?” questions until you whittle it down to one winning design?
In that case, you’ll want to design it with your Adobe Illustrator or Sketch software. The process will take a while, but if your client has the money to spend and wants something truly unique, this is the best way to do it.
Best for:

• Price is no object,
• Client envisions something very specific,
• Enterprise clients in very high-profile positions who can’t afford to have their logo look like anyone else’s.

The Best Of Both Worlds (Custom Design Without The Hassle)

Would you prefer something between the two options above, where you could wield your creative influence to create something custom without all of the hassle?
In that case, the Logo Maker that Wix offers is your best bet. You can use this tool for a wide range of clients — those that want something done quickly and cheaply all the way up to clients who want a personalized logo.
Best for:

• Any budget;
• Any timeline;
• Logos you don’t want to spend too much time designing graphics for, but still want to be able to customize the key elements (like colors and layout).

Why Is the Wix Logo Maker The Right Tool For You?

Similar to the Wix site builder platform, Wix Logo Maker aims to make light work of what would otherwise be time-consuming and tedious work.
It’s an easy, intuitive way to design the perfect logo for your client and spares you the trouble of having to start from scratch while still creating something custom (if that’s what you need).
Let’s take a closer look.

The Logo Questionnaire

Similar to the client questionnaire I recommended you create above, Wix takes you through a series of questions as well.


Here are some things to think about as you work on your logo:

Colors

There’s more to color selection than how good it looks. Color comes with a lot of meaning and it can have an effect on customers’ emotional responses as well. It also can impact the readability and accessibility of your site. So, before you jump to using any particular set of colors, brush up on color theory and make sure you have the right ones picked out.
Although this is something you’re probably thinking about from the beginning, it might be a good idea to save it to the end after you’ve dealt with the structure of the logo.

Typography

If the company name and/or slogan is to appear in the logo, typography is something you’ll need to spend a lot of time considering. Again, this isn’t just an aesthetic choice. It can have a serious impact on memorability, emotionality, and accessibility.

Iconography

Icons can do a lot of good for logos. They can add balance. They can provide insight into what the business is about if the name is obscure. They can bring more personality to the design. They can also serve as a stand-in in smaller spots, like the browser favicon or as a social media profile image.
What’s nice about this Logo Maker is that you don’t just get to personalize the icon, but also the shapes within or behind the logo. So, you can play with depth, geometry and layout when designing your logo as well.

You have two options:

• Download (or print) all logo PNG files, resizable SVGs, and 40+ social media logos.
• Get the standard logo PNG files in a range of colors.

As you can see, everything’s been thought of. So, it’s less time you have to worry about exporting your logos in the right file formats, sizes, and colors. You just need to focus on creating something your client will love.

The Value Of A Well-Designed Logo

A lot of a brand’s success hinges on how great their logo design is. So, of course, you want to design a professional and modern logo that will serve your clients well. By taking the time to learn about your client’s business, creating a design around their vision, and then using the right tool to bring it all together, you’ll be able to do just that.

A User In Total Control Is A Designer’s Nightmare

How do you balance the creative control you give to the users, the usability of the product they make with your tool and the flexibility of that tool?
We designers have always had a problem of handing over creative control to the general population — the basic users. There are two reasons for this. The first is obvious: We are the ones who are supposed to know the principles of design and usability. Some of us were born with this feeling of what feels and looks right, while other designers have learned it — at least good designers eventually have.
The second reason is that, unlike users, we see the world in another way. We see what can be done to improve the things we use every day. For example, we might remember a restaurant not by its name or location, but by its poorly chosen typeface for the logo, as Tobias Frere-Jones recalls in the movie Helvetica.
In simple words, designers should be the ones who know what’s right and should know how to fix it when it’s not.
But other people also have a gift of aesthetic feeling, a gift to recognize beauty. It turns out that we’ve had it for a long time, and we need it in our daily lives. We believe that products that look good also work better, taste better and are more trustworthy. Zoltán Gócza has gathered quite a few points to demonstrate that aesthetics are important to people.
Ordinary users, then, just like designers, recognize beauty and know what’s right and not right. This is not where the problem of handing over creative control arises. The problem is that they don’t know the principles that designers do. There’s nothing to guide them to create something both functional and beautiful. Most of the time, they just put together a bunch of stuff that they think looks cool and end up with something.
This is an extreme example, but you get the point. I wonder how many poorly designed PowerPoint presentations you have seen during your college years (if you studied at a non-design college). I know I’ve seen way too many poorly chosen typefaces and colors combined with unsuitable backgrounds and animations.
Unlike designers, ordinary users know what’s right but don’t know how to fix what’s not right or how to create something that looks and works right from scratch.

It’s The Designer’s Fault

In his famous article “Simplicity Is Highly Overrated,” Don Norman states that users want many features, not simplicity. Other designers disagree.
The truth lies somewhere in between. Users want a lot of features, even though they won’t use most of them. Adding features makes a product more complex, which can lead to misuse and frustration.
We keep adding features until our products and tools become very complex. We do it to build flexible tools, because that’s what users want, right? But we forget in the process that users don’t know the basic principles of design that would guide them to create a usable, good-looking product. They also don’t have the time or simply don’t want to read our instructions on how to use the tool. This means that they’re using our flexible and complex tool to create a product that is neither usable nor good looking.
But there is a way. We can guide users simply by limiting their creative control, which also makes for a simpler tool.

User’s Creative Control In Digital Publishing

At Wondermags, we have been thinking for a long time of how much creative control to give to our users. Wondermags will be a digital publishing platform that empowers even basic users to create beautiful magazines with little effort. We want our magazines not only to look nice, but to be readable and enable an enjoyable experience throughout the process — from creation to consumption. That’s why we thought that guiding the user — by limiting their creative control — would be a good way to achieve this. Other tools simply offer too much control to basic users, who don’t know what to do with it.

The Basic User

But who is this basic user that I keep mentioning? At Wondermags, we see them as young to middle aged, with basic to average computer skills and average or even above average creativity. They made one of those bad PowerPoint presentations you saw but were very happy with it. They probably saw some very nice presentations at one time and really liked them; but when they had to create one by themselves, they had no principles to guide them.
PowerPoint provides a lot of options and is very flexible; a lot of magical stuff can be done with it. But the furthest that our basic user would go to create a better presentation is to find a template online, modify it a little and then add their content. And PowerPoint’s flexibility makes a slideshow quite easy to mess up — even from a good-looking template.
In his book Simple and Usable: Web, Mobile and Interaction Design, Giles Colborne calls basic users “mainstreamers.” He says they use technology not for its own sake, but to get the job done. They learn only a few key features and just want to feel in control.

The User’s Control

For a long time, creative control was completely in the hands of the designer. Graphic designers were the ones who designed books and magazines. But since the rise of personal computers and the Internet, more and more people have gained the ability to create, write and publish.
The majority of computer software is complex and flexible. Even the applications in Microsoft Office, which the general population uses every day, are very complex. They are professional applications and offer practically unlimited control, and a user needs some knowledge and has to follow some principles in order to create a usable product with them. Let’s look at a chart.

Linear relationship between the tool’s flexibility and the user’s control. (View large version)

The relationship between the tool’s flexibility and the user’s control is linear. The more flexible the tool, the more control the user has.

1. Low flexibility
   In this case, the tool is specialized for one task, and the user is very limited by it. So, low flexibility means low control for the user. The tool would be great for the general population — basic users — but it could also feel too limited.
2. Medium flexibility
   This would be either an intermediate tool meant for one task or a basic tool meant for numerous tasks. A medium level of flexibility also means a medium level of control. The tool would be intended for intermediate users.
3. High flexibility
   This tool would be very advanced, with a high level of flexibility and control. It would be specialized for one or more tasks and would be made for professionals.

However, for a tool to be more flexible, it also has to be more complex.

The more flexible tool, the more complex it is. (View large version)

And the more complex the tool, the more knowledge a person requires to properly use it. That knowledge, along with the principles, is what will guide them to creating a usable product.
The sweet spot between a tool’s flexibility and complexity and control for basics users lies somewhere between points 1 and 2. Let’s look at an example.

Tool Usability: Instagram and Photoshop

Everyone loves beautiful photos. And for a long time, the only way to get beautiful, professional photos was to hire a professional photographer. Photographers are advanced users. They take photos and edit them in various advanced applications — usually Photoshop, which is highly flexible and complex and offers a high level of control.
Instagram, on the other hand, is a simple and basic applications. It enables users to take photos and add photo effects to them. The result is a nice-looking photo. Instagram is very low on flexibility and offers little control to the user. But from the user’s point of view, the result is of high (or higher) quality and is achieved with little effort.
Users don’t know what they want. They don’t really want numerous features. Instead, they want quality. They want simple products that are easy to use and that don’t make them feel stupid.
Let’s put Instagram and Photoshop on our chart.

Instagram and Photoshop comparison (View large version)

As we’ve seen, Instagram, with its limited control, enables the user to create a product that is perceived to be of higher quality. Even though the tool is basic, it delivers an enjoyable experience. It offers just enough control for the user to feel in control.
Photoshop is meant for professionals and advanced users. It is highly complex and sophisticated and offers almost unlimited control to the user. But the user needs to know how to properly use it be familiar with principles of photo editing. The result depends heavily on it. A tool this complex offers a low level of usability to basic users.
Users want to feel in control and be guided at the same time. When someone is forced to use a tool (for whatever reason) but doesn’t really know where to start, they’ll get frustrated. We’ve all been there, but designers will take the time to learn how to use it. We make money by using these tools. Others don’t really have the time or interest to learn it. And if they do take the time, they will often feel like it’s wasted, as John Maeda explains on his blog The Laws of Simplicity.
Having said that the sweet spot for basic users lies between points 1 and 2, let’s see what this looks like on a graph:

Basic users want simple tools to get things done quickly. (View large version)

In this case, the tool would be focused solely on basic users.

1. Simple and inflexible
   The tool affords limited usability to the user.
2. Moderately complex but more flexible
   Usability at this point starts to fall. The tool is more appropriate to intermediate users.
3. Highly complex and flexible
   The tool is so complex that a basic user wouldn’t even know where to start, affording them little or almost no usability.

The problem is that finding that sweet spot, where the person is able to use the tool and feel in control, is very hard. Let’s see what designers can do about it. We can guide the users in two ways.

Guiding The User

As Giles Colborne puts it in this book Simple and Usable: Web, Mobile, and Interaction Design, “Mainstreamers don’t want to build it from scratch.” That’s why a complex tool wouldn’t suit basic (or “mainstream”) users. They wouldn’t even know where to start. It’s up to us, designers, to somehow guide them.

Teaching the User

Good design is as little design as possible — this is one of the 10 principles of good design laid down by Dieter Rams. The product you’re designing should be as simple as possible and not be burdened by non-essentials. The best product is one that doesn’t need a manual of instructions. The likelihood that a user would read a manual is low for one of two reasons:

• either the product is common and the user has already operated something similar (say, a washing machine);
• or the product is complex and unusual and the user doesn’t have the interest or time to learn it (say, Photoshop).

Limiting User’s Control

Instead of making the tool flexible and complex, requiring pages of instructions, the designer could simply limit the user’s control. How much to limit the user will depend on the target audience. If the product is meant for basic users, then users should be somewhat limited. They won’t need a professional tool, but rather a simple tool that feels natural to use without (or with few) instructions.
Limiting control entails cutting features. But you don’t have to leave out all of your best ideas. If a feature would make the product more useful without complicating it, then keep it. You could follow Giles Colborne’s strategies for simple and usable design by removing, re-organizing, hiding or displacing features.
In seeking the balance between simplicity and complexity, John Maeda came up with 10 laws of his own. The simplest way to achieve simplicity, he says, is through thoughtful reduction. He breaks this principle down into three methods: shrink, hide and embody. Advanced users are more likely to seek out hidden features, so the product could still be interesting even to them.

A Combination of Both?

Both of these approaches are quite radical. Stripping a product down to its core, without any instructions, might prove confusing. The user might launch the application and have no idea of what is possible. Short instructions that guide the user are quite common in smartphone applications.

These simple apps include instructions for first-time users. Keep the instructions as simple and short as possible. (View large version)

Google follows a good method with its products. It lists new features in a pop-up dialogue, which usually is unobtrusive. The user will usually have the option to open a tour that presents more details about the new features.

Google’s pop-up presents new features and allows the user to take a tour. This is a good approach to teaching users. (Image: The Programming Historian) (View large version)

Guiding By Limiting Control

So, if you don’t want your users to create something that resembles an old MySpace page or a painful PowerPoint presentation, then consider limiting their control and guiding them with short instructions.
Finding that sweet spot between control and usability is difficult. Start with something simple and upgrade it later, rather than start with something complex and remove features that fail. Also, a simple tool is much easier to modify than a complex one.

Ways of Limiting Control

There are many ways to limit the user’s control. One is to simply remove features that aren’t necessary or give too much control. For example, justifying the alignment of text in any Web-based tool is a bad idea. It just doesn’t work on the Web, so why add it to your tool?

Medium’s text editor is limited, but the experience it delivers is enjoyable.

Medium’s editor is simple and limited but enjoyable to use. It has no text-alignment settings or typeface options, and it has only two levels of headings. This way, authors on Medium can be sure that their articles will look amazing.
Another faux pas is aligning paragraphs to the right, which goes against readability rules (except in languages that are meant to be read that way). So, in a Web-based text editor, we could prevent the user from setting this for paragraphs, keeping it for headings, quotations and the like.
Tumblr removes features, too. Aligning text in its editor is impossible because alignment is dictated entirely by the styles.

Tumblr doesn’t allow text alignment at all.

Another way to limit control is by hiding or displacing features. As we’ve learned, intermediate and expert users are likely to explore features. They will scour all of the menus and options to see what’s available, finding all of the hidden gems. The Tumblr example above demonstrates this for an advanced feature: editing the HTML. WordPress goes even further and hides a dozen features behind a submenu that has to be activated by clicking an icon.

Hidden features in WordPress’ editor

A popular way to limit users is by predefining themes and plugins. A basic user doesn’t want to start from scratch, so guiding them with predefined themes is a good approach. We see this on all major publishing platforms.
The idea is that the designer is the one who creates the theme (or at least sets the typography and general styles). The user simply has to add their content, thus increasing usability.

Selecting a theme in Apple’s iBooks Author (View large version)

Another method is place different limits on different users. Basic users could have access to a free version that has basic features. It would feel natural and easy to use. The user would be limited in what they can create — for example, selecting from predefined themes or color palettes or making minor changes. But the tool would satisfy their needs.
Users who aren’t happy with those limits could upgrade to a version that is more flexible and complex. That tool would have advanced settings that make it more useful for intermediate and experts users — for example, creating a custom theme or choosing any colors.

Give expert users more features and, usually, a price tag. (View large version)

How Do Others Do It?

Let’s compare some of the tools we’ve mentioned.

Publishing Platforms

Twitter affords minimal control. In its case, all users embraced the limit, which has made Twitter what it is today: a simple and quick way to share of short messages and ideas. In the beginning, users could merely publish messages with a maximum length of 140 characters. Later, hash tags, replies, and image and video attachments were added. Twitter has been redesigned recently to look more like Facebook and Google+. Nevertheless, Twitter’s core remains simple and limited, which is why users love it.

Medium is a publishing platform that focuses on high-quality content. The platform itself is limited. But authors achieve what they want within these limits. Medium’s developers want people to write high-quality content in a beautiful, non-distracting environment. Once again, users embraced the limits, and their articles look amazing and are easy to read. It’s a win–win for both sides.

I’ve always thought of Tumblr as a much simpler version of WordPress. For that reason, I’ve never really used it. Tumblr comes with predefined themes and plugins. It’s a very good platform for basic and intermediate bloggers. And authors can create custom themes, so it’s also suitable for advanced users.
WordPress also started simply but quickly grew into a powerful blogging platform. It’s now available in two versions for different target groups: WordPress.com for basic users, and self-hosted WordPress for advanced users. We’ll take a closer look at WordPress later.

Text Editor

(Image: Wikipedia) (View large version)

Notepad or TextEdit (depending on your operating system) are probably the simplest text-editing tools. They’re very basic but can be used to do a lot. They can be used to create a document for any language of code — I started coding websites with them. But they’re too basic to really be used for serious coding.

(View large version)

Google Docs is my preferred tool for creating and editing documents because of its balance of features and simplicity. Its features are very similar to those of Microsoft Word and Apple’s Pages, but its interface is much cleaner, so it’s simpler to use. Compare Google Docs to Microsoft Word:

(Image: PCWorld) (View large version)

Microsoft Office is, in my opinion, one of the most misused tools. And that misuse leads to frustration. I’ve seen many users who don’t know how to do basic things in Word — such as create a table of contents or set heading levels. Many people still do these things manually.

Presentation Applications

Slid.es is a Web-based tool for creating presentations. The interface is much simpler and cleaner than Microsoft PowerPoint’s. But it’s not as simple as it looks at first sight. Many advanced features are hidden or displaced. The tool is flexible, but its developers have managed to keep the interface simple. For example, a user could end up creating something like this:

(View large version)

It’s readable and the background photo is nice, but the slide is awful. You don’t want users coming up with that.
PowerPoint is another tool in Microsoft Office that I find too complicated and misused. It’s even more flexible than Slid.es and gives the user almost total control. That’s why so many bad PowerPoint presentations are out there. It’s meant for professionals, but (like Word) is mostly used by people who don’t know how to use it properly. Most users don’t know the principles by which they can create effective presentations.

(Image: Ars Technica) (View large version)

Limit By How Much?

The question that remains unanswered is how much to limit the user. There’s no right answer. The only way to answer it is to find that sweet spot for yourself. But here are some ways to go about that.

Research and Start Simply

Before doing anything else, research thoroughly. Find out what competing tools are already out there. What do people use them for mostly? What problems do they have with them? Find out by researching the support forums for the products.
Also, define your target users. While designing for intermediate and expert users is easier, most users are at a basic level.
Start with a simple idea and create a prototype. In doing so, cut features that aren’t necessary, especially ones that complicate your product without adding much value.

Test With Target Users

The next step is to test with basic users. Test early and test often to see whether you’re missing your goals. A/B testing is perfect for this. Send a simple version of your product to one group of users and another more flexible version to another group. The feedback you get will be priceless. You might find that the product should fall somewhere between the two versions.

Remove What’s Unnecessary, Add What’s Needed

If you find that some features distract users or are not deemed useful, remove them. If most users want a particular feature, consider adding it. But remember that users don’t always know what they want. Also, add features that you think users would find useful or that would solve a problem for them (if prototype testing has proved it).

Allow Intermediate and Advanced Users to Customize

Once basic users are happy, consider adapting the tool into a professional version. This is a cool way to get advanced users on board.

What About Advanced Users?

“Experts are rarely insulted by something that is clear enough for beginners. Everybody appreciates clarity.”
– Steve Krug

We mentioned that advanced users are more likely to seek out features. Steve Krug believes that advanced users appreciate simple products, too. If you include advanced features in the pro version of your product, or as a customization, you could convince advanced users to try it out.

Allow Customization

Advanced users could grow frustrated with your limits. To satisfy their needs, consider allowing for customization.
I consider myself an advanced user, and I found WordPress.com too limiting. So, I went for the ultimate in customization by downloading the WordPress software and setting up a self-hosted website.
That’s what advanced users like. They will take the time to explore features, customizing an application to its core. They want to be able to change it. The basic version of the product simply won’t do it for them. Allow them to break the limits set for basic users.
Ideally, we would offer three levels of customization. WordPress is a good example again:

1. Select color palette, make minor theme customizations
   Users on WordPress.com may select a color palette for their website and change the image for their header section, logo, etc.
2. Select themes and plugins
   On WordPress.com and self-hosted WordPress websites, users may install themes that completely change the look of their website. They may also install plugins that add features to the website.
3. Create themes, customize core features, add features
   The most advanced users get the highest level of customization. They may download WordPress, manually install it on their own server and customize it however they want. They may also create their own themes, develop their own plugins and even change WordPress’ core files.

WordPress shows that satisfying the needs of all three types of users is possible. It started as a simple publishing platform but has evolved into much more. Its high level of customization make it very suitable as a content management system, but only for advanced users. The version served to different user groups can and should vary.

But My Client Wants Features!

Every designer has been there: working on a project for an enthusiastic client who has a lot of crazy ideas for features. It’s a tough position to be in. Perhaps this client will take your career to a new level. If so, do you have to do whatever they say? How do you convince them that starting simply is best, that fewer choices is better than many?

• Cultivate a relationship based on respect and your authority as the designer.
  They are paying you for your knowledge and experience, so let yourself be heard. The designer’s job is not to say yes to every crazy idea. If you’re not afraid to say no, then they won’t see you as their puppet. Tell them that you’re a designer, not a pixel pusher. Believe me, it works.
• Back up your arguments and advice with examples.
  Show them examples of simple products that people love. Explain to them why they work and why people love them so much. The products don’t have to be related to theirs — you just have to prove your point.
• Remind them that simpler is less expensive.
  Explain to them that starting with a simple product means lower costs and a more flexible foundation on which to build. If they realize later that they’ve completely failed to define their product, then restarting will be easier — and more cost-efficient, too.

Our Limits

“Enabling everyone to automatically earn money with their knowledge,
 skills and stories.”
Wondermags’ vision statement

Wondermags decided to start with a simple and limited product. We’ll eventually have testing sessions and a closed beta version. The goal is to see whether our tool is simple enough for basic users and to see what kinds of products those users come up with. Based on the results, we’ll make adjustments.
Once we decide who our basic users are, we’ll guide them with instructions (as few as possible) and by limiting their control. Here are a few ways we plan to provide an enjoyable experience.

Removing Features

We decided to allow users to choose a color palette for the background, text and text background, rather than pick any color. The idea is to prevent them from coming up with something like we saw in the Slid.es example above. The colors, borders, buttons and so on will be completely predefined by styles.

Selecting a background color from a predefined palette (View large version)

Predefined Styles

The other limitation is popular with digital publishing platforms. The user selects from a range of predefined styles, which then apply a color palette, typefaces, margins and borders to the content.

Selecting a cover from a range of predefined styles.

Predefined Plugins

The magazines on our platform will be put together with blocks of predefined plugins. The user will put their magazine together piece by piece, filling in the content very simply.

Multi-columned blocks

Different Limits for Different Users

Features will be added in future releases, and the platform will be available in basic and pro versions. The pro version will provide more control for advanced users.

Customization

Finally, we allow advanced users to create their own styles, similar to WordPress, Tumblr and other publishing platforms.

Simple Tools As Extensions Of Ourselves

In this article, we’ve covered the following:

• Users want to create beautiful and useful products but usually don’t know how.
• The designer’s job is to find the balance between providing flexibility, usability and guidance to the user.
• Providing instructions and limiting control are two ways to guide the user.

In the end, it all depends on what you’re building and for whom. The general population finds simple tools more useful and easier to use. Overloading a complex product with instructions that people won’t have time to go through is a very bad idea. People are being forced to use software at work that frustrates them, but they try to cope. Do we really want our users to cope with the tools we design for them?

“The more complexity there is in the market, the more that something simpler stands out. And because technology will only continue to grow in complexity, there is a clear economic benefit to adopting a strategy of simplicity that will help set your product apart.”
– John Maeda

Designers have to find that sweet spot between flexibility and control. Users should get an enjoyable experience and be able to create a useful product with the tool. Our tools should be an extension of people’s lives, not the other way around.

A New Mobile UX Design Material

Here are the 12 basic principles of animation:

1. Squash and stretch
2. Anticipation
3. Staging
4. Straight ahead and pose-to-pose
5. Follow through and overlapping action
6. Slow in and out
7. Arcs
8. Secondary action
9. Timing
10. Exaggeration
11. Solid Drawing
12. Appeal

The 12 Principles Of Animation

Principle 1: Squash and Stretch

People and objects have an inherent mass. When an object moves, the quality of the movement often indicates the rigidity of the object. Manmade real-world objects, such as a bookshelf or wooden chair, are rigid and have little flexibility. Soft surfaces, such as clothing, organic objects and plant leaves, have less rigidity and higher flexibility. Squash and stretch is the animation principle used to accurately express the rigidity of an object.

Organic and soft-surface objects, such as a balloon full of water, have some level of flexibility in their shape. Squash and stretch is the animation principle that helps depict this quality in animation.
Consider using this principle when you decide what feeling you want your mobile experience to evoke as users engage with it. Is your mobile experience a world of solid planes, rigid surfaces and sharp, exact movements? Or is it a world that’s more organic, with softer, pliable surfaces and easy, graceful movements? Squash and stretch can help you express those movements.


Screen transitions on Flipboard exhibit the principle of squash and stretch to express that the surfaces inside the world of the application are rigid and board-like. By contrast, the screen transitions in Apple’s iBook use the principle of squash and stretch to echo the flexible and organic movement of turning the pages of a real paper book.

Principle 2: Anticipation

When an illustrator depicts a moving object or character, three distinct phases should be considered to make the object’s movement realistic:

• The preparation for the action,
• The action itself,
• The results of the movement.

Whether it’s a baseball batter winding up before a swing or the recoil of a spring before it’s sprung, anticipation is the animation principle used to prepare an object for movement. Anticipation is about orchestrating the components of a scene — lighting, composition or even the form of an object or character — in order to give the viewer a clue of what is about to happen.

The crouch of a bowler, winding up before swinging a bowling ball, is an example of a pose and motion that the principle of anticipation captures.
Similar to its application in animated film and cartoons, when applied to the realm of mobile UX, anticipation is all about giving the user insight into what is about to happen next. For example, the principle could be applied to the visual treatment of the interface as the user opens an application. It could also be applied to the transitions between experiences. Because gesture languages are relatively new to users, the principle of anticipation could also be used to provide affordance for gestural UIs. Anticipation gives clues about the speed and direction that objects in a UI can move and the gestural possibilities of those objects.

The aperture animation found in the camera application of many smartphones prepares the user for the action of taking a photograph.

The way the cards in the Palm Pre’s UI move is an affordance for users, giving them insight into the gestural language of the UI.

The window shade animation on the home screen of the Windows Phone 7 employs the principle of anticipation by giving users a peek into the phone’s dynamic tiled UI.

Principle 3: Staging

People keen on selling property often “stage” a home, meaning they arrange each room in such a way that its purpose is completely clear. The principle of staging in animation is similar, because good staging makes the central idea of an animation completely clear to the viewer. In the world of mobile user experience, the principle of staging is most relevant when considering the transitions between screens and interactions. An interaction that is well staged combines light, color, composition and motion to direct the user’s eye to exactly where it needs to be as they interact with the experience. Well-staged mobile experiences have a sense of flow and ease, whereas poorly staged ones feel disjointed.

The well-staged illustration on the right makes the central idea — of two characters engaged in conversation — completely clear. The poorly staged illustration on the left leaves the dynamic between the two characters open to interpretation, making the central idea unclear.
Staging is a subtle yet important consideration when applying animation and motion to a mobile experience. A key challenge in creating natural user interfaces is that they lack a strong conceptual anchor. As a result, users who are new to natural UIs often feel anchorless as they navigate touchscreen experiences. If you apply good, strong staging to the animation and transitions of your mobile experience, then users will likely feel more grounded when they interact with it.

Good staging used in the iPad version of Keynote enables users to see exactly where the file they are currently working on lives in the application’s file structure. This subtle use of staging makes the user feel grounded in the experience.

Principle 4: Straight-Ahead and Pose-to-Pose

Straight ahead and pose to pose are techniques related to the animation drawing process. In order to capture fast dynamic action with unusual movement, animators will use the straight-ahead technique and draw every single frame of an animation. The pose-to-pose drawing technique employs the use of keyframes (i.e. the important frames of a sequence) and in-betweens (i.e. the intermediate frames that express movement between the keyframes).

The illustration on top depicts the straight-ahead technique in which every single frame of an animation is rendered. The illustration on the bottom represents the keyframes that will be used in a pose-to-pose animation.
The vast majority of animations and transitions used in mobile experiences employ the pose-to-pose animation technique. Pose-to-pose usually suffices for transitions that are not overly complex and that can be described easily. If you’d like to incorporate unusual or dynamic movement in your experience that can’t be achieved using pose-to-pose, then you’ll likely need to incorporate the straight-ahead technique.

Popular games such as Plants vs. Zombies for the iPad employ pose-to-pose animation techniques.

Games with more complex movement, as in the iPad game Fruit Ninja, use straight-ahead animation techniques to capture dynamic motion.

Principle 5: Follow-Through and Overlapping Action

Imagine a big dog with giant jowls shaking his head side to side. The dynamic movement of the flabby skin on his face as he shakes his head to and fro is an example of the fifth animation principle: follow-through and overlapping action. While anticipation has to do with the preparation of an action, follow-through involves the end of an action. Actions rarely come to a sudden and complete stop, but rather come to a gradual end. Follow-through captures how parts of an object (like the dog’s jowls) continue to move even after other parts of the object (like the dog’s head) have stopped moving.

Follow-through captures how different parts of an object move at different rates (such as a dog’s head moving at a different rate than its ears or jowls).
Now imagine that dog walking down a sidewalk with his owner. His entire body is moving, but the timing of his legs is different than the timing of his tail or head. Overlapping action is the animation principle that captures how parts of an object — such as the dog’s head, tail and legs — move at different rates. Capturing the movement, as well as the slight variations in timing and speed of these parts, makes the objects seem more natural. An action should never be brought to a complete stop before another action has begun. Overlap maintains a flow between self-contained phrases of action.
While UI elements of a mobile experience should work together to form a whole, follow-through and overlapping action can help you define and communicate the relationship between UI elements. Transitions and animations are a great way to express how elements of a UI interrelate.

The transitions to and from the dynamic tiles on a Windows phone employ the principle of overlapping action. The tiles do not travel as one unit, but rather each tile moves at a different rate.

Principle 6: Slow In and Out

Whether it’s a car peeling out from a dead stop or a sprinter bursting out of the blocks and making tracks in a race, objects need time to accelerate and slow down. The sixth animation principle, slow in and out, deals with the spacing required to accurately depict the inherent law of inertia that governs all objects and people.
Objects in the world need time to accelerate and slow down. A strategy to accurately depict this type of motion is to add more frames of the object near the beginning and end of the movement and fewer in the middle.

Adding more frames of the object near the beginning and end of a movement and fewer frames in the middle creates the illusion of the effect of inertia.
This principle works for characters moving between two poses, such as sitting down and standing up, and for inanimate moving objects, such as a bouncing ball. While the experiences we create for mobile UX often live in another world — the world behind the glass of the mobile device — allowing some of the laws of physics to exist in that world will make those experiences more relatable to users. Whether it’s a subtle difference in timing in how a list of data scrolls or the animated transition that appears as an application opens, slow in and out will make the motion phrases of your experience flow in a way that feels natural to the user.


The principle of slow in and out is applied to the scroll of lists in many mobile UIs. More frames are at the beginning and end of the movement. This effect makes the UI appear as if it is governed by the laws of inertia.


More frames are at the beginning and end of the scrolling transition of the home screen on the iPhone, making the application icons feel as though they adhere to the laws of inertia.

Principle 7: Arcs

Objects don’t move through space randomly. Instead, they move along relatively predictable paths that are influenced by forces such as thrust, wind resistance and gravity. The outline of a sparkler on the Fourth of July or skid marks on the pavement from a braking car are rare physical traces of these paths; usually, an object’s trajectory is invisible.

An object’s trajectory is largely invisible, except on rare occasions, such as a lit sparkler whose glowing sparks trace its path.
While these paths are largely unseen by the human eye, patterns exist for trajectories based on whether the object is organic or mechanical. Objects that are mechanical, such as cars, bicycles and trains, tend to move along straight trajectories, whereas organic objects, such as plants, people and animals, tend to move along arched trajectories. The object you want to animate should reflect these characteristics for greater realism.
When integrating motion into a mobile experience, consider whether the object being animated should reflect organic or mechanical qualities. If the former, then the arc animation principle suggests that the object should move along an arched trajectory. If the latter, then the object would move along a straight path.

Natural elements such as the fish and water in this iPhone application move along arched trajectories.

Interface elements in the Android mobile platform tend to move along straight lines, giving the UI a mechanical feeling.

Principle 8: Secondary Action

Imagine a squirrel running across your lawn and then leaping into a tree. The movement of the squirrel’s legs (considered the primary action) would be animated to emphasize the animal’s light, nimble, spry gait. The agile, undulating movement of the squirrel’s tail (the secondary action) would be a separate and slightly different type of movement that supports the primary action.

The primary action of this animation is the movement of the squirrel’s body and legs. The shape and character of the squirrel’s tail as it moves is the secondary action. Together, they make the animation feel more realistic.
The squirrel’s tail is an example of secondary action, which supports the primary action of an animation sequence without distracting from it. Secondary action is applied to reinforce the mood or enrich the main action of an animated scene. The key to secondary action is that it should emphasize, rather than draw attention from, the main action.
The transition that occurs when a user clicks on a URL in an email, activating the browser on an iPhone, is an example of secondary action. The primary action is the browser window swinging forward into view. The secondary action is the email application receding into the background. Both actions occur simultaneously, but the secondary action of the email application supports the primary action of the browser window.

An example of secondary action applied to an animated transition between application windows.

Principle 9: Timing

In animation, as in life, timing is everything. The frustration and awkwardness we feel when objects, characters or life itself move too slow or too fast is a testament to the innate importance of timing. In the world of animation, timing refers to the number of drawings or frames of a given action, which translates to the speed of the action on film. Timing is an important technique to master because it helps define the physical characteristics of an object, such as weight, size and scale. It can also make objects appear to abide by the laws of physics — as seen, say, in the speed of an object when pushed.
In addition to expressing physical characteristics, timing helps communicate the emotional state, mood and personality of an object or character. For example, subtle adjustments in timing can communicate the physicality and mood of the focused and deliberate Wile E. Coyote as he feverishly chases the quick, good-natured Road Runner, who by contrast moves with ease.

Timing — the mere speed at which the Road Runner moves — expresses both the physicality of the character (weight, height and scale) and the mood of the chase between the Road Runner and Wile E. Coyote.
Whether it’s the speed at which a list scrolls or the pacing of a transition between screens in a mobile application, timing is subtle yet important to master. Timing, as it applies to the mobile UX, is an art that requires finesse and practice. Take the time to understand what is being communicated through the movement and speed of the interface elements in your design. Also, take time for experimentation and trial and error as you begin to work with animation.


The timing in the iPad’s photo application is akin to the quick shuffling of a deck of cards. It expresses lightness, buoyancy and hyper-realistic speed.

Principle 10: Exaggeration

The principle that I feel brings the most fun to the animation party is exaggeration. It’s the element that makes movement feel dynamic, alive and just plain fun — much like the iconic characters Ren and Stimpy.

Canadian animator John Kricfalusi masterfully used exaggeration in the Ren and Stimpy animated television series.
An animation without some level of exaggeration might look accurate, but will likely feel stiff and mechanical. Mastering this principle involves identifying the relevant design element, figuring out how that element moves, and then tweaking the shape, scale or composition of the element so that it reinforces the movement, while adding a layer of drama. Exaggeration does not necessarily mean extreme distortion.
The classic definition of exaggeration, employed by Disney, is to remain true to reality but to present a wilder form. When applying this principle to movement in a mobile experience, exercise a certain level of restraint. If a scene contains several elements, then the exaggeration of those elements should be balanced relative to each other, to avoid confusing or annoying the viewer.




The transition between the home screen of the iPad and the opening of an application is exaggerated. It makes opening an application feel springy and fun, like bouncing on a trampoline.

Principles 11 and 12: Solid Drawing and Appeal

Of the 12 animation principles outlined by Johnston and Thomas, the last two — solid drawing and appeal — are the most specific to character animation. Thus, they have slightly less relevance to mobile UX. Solid drawing is about honoring the rules of three-dimensional space and giving objects and characters appropriate dimensionality through volume and weight. Solid drawing requires animators to understand the basics of three-dimensional shapes: anatomy, weight, balance, light and shadow.

Solid drawing emphasizes three-dimensional shapes, accurate anatomy and animation that has a sense of weight, balance, light and shadow.
The appeal of an animated character is similar to the charisma of a live actor. A character who is appealing is not necessarily sympathetic — because villains or monsters can also be appealing. The important thing is that the viewer feels the character is real and interesting.

Methods Of Conveying Motion In Your Work

While the 12 principles developed by Johnston and Thomas are helpful for providing a vocabulary for motion and giving a sense of what’s possible, the core question of how to integrate motion into a design remains. The first step is to be aware of motion as a design material. The next step is to begin to integrate motion into the design process. Here are three key places in the design process where you can begin working with the magic of motion:

• sketching,
• wireframing,
• prototyping.

Sketching

The time to start thinking about motion is during the sketching phase of your design process. Similar to how the movement of an animated character expresses its personality, the movement of screens and interface elements are powerful ways to express the personality of the mobile experience you’re creating. Sketching ideas for transitions and movement phrases early on will help you think about the personality that you want your mobile experience to convey and how you can use motion to communicate it.

This motion storyboard sketch for the “opening iTunes details” transition is done with basic sticky notes.

Wireframing

Wireframing is yet another phase in the design process to work out the motion you want to integrate into the mobile experience. Because wireframes often convey the flow of screens, transitions — i.e. the motion between screens — fit naturally into wireframe documents. Using images and illustrations, you can begin to draw out the movements you have in mind. Because wireframes are documents that communicate design ideas to both developers and stakeholders in an organization, simply including motion specifications in the document will make everyone aware of motion and get them talking about it.

This motion specification in a wireframe document relies on images and illustrations.

Prototyping

Sketching and wireframing motion are good first steps, but nothing beats the real thing. Using prototyping tools whose vocabulary includes motion is one of the most powerful ways to foster your own fluency with motion as a design medium. Tools such as presentation software (Keynote, PowerPoint, etc.) include motion in their vocabulary. Instead of sketching motion, create low-fidelity prototypes using this software, which will help you experiment with motion and communicate your animation ideas more accurately to the design team.

Creating prototypes with software such as Keynotopia allows you to animate user interactions and transitions between screens, enabling you to experiment with your motion ideas using the real thing.

Tips For Applying Animation Principles To Your Mobile UX Project

1. Exercise restraint.
   Few things are more annoying than a mobile experience with too much animation pizazz. While animation is fun and exciting, don’t over-apply it, otherwise you might turn a great experience into a train wreck. Instead, rely on subtlety and finesse to convey motion.
2. Complementary principles
   Whether it’s a scene in an animated movie or the transitions between screens in a mobile experience, animation principles rarely exist in isolation. Rather, most effective animations are an orchestration of many principles applied together. As your animation skills grow, you’ll learn how to artfully combine these principles like great recipes.
3. Animation in a supporting role
   In film, animation supports the story. The same is true for mobile UX. Animation should complement the mobile experience, not be the star. Make sure your animation supports the interactions in the experience and doesn’t detract or confuse.

Summary

Once reserved for cartoons and movies, motion is a new and powerful design material in the mobile UX landscape. In addition to bringing focus and clarity, it can add a bit of character and even magic to the experiences you create. While any new design material can be time-consuming to learn, getting up to speed on animation and motion will probably feel intuitive and not feel like a chore, and it will make all those hours of watching Saturday morning cartoons as a child seem like a wise investment.
To sum up:

• Transitions and subtle motion-based animations are emerging as a new and compelling mobile design material that can add efficiency and grace. The addition of movement to a mobile experience can bring clarity, information about context and a dash of joy and fun.
• Although originally developed for animated film and television, the 12 basic principles of animation from the 1981 book The Illusion of Life: Disney Animation apply to screen-based experiences, too. These principles are listed below.
• 1. Squash and stretch
  2. Anticipation
  3. Staging
  4. Straight ahead and pose to pose
  5. Follow-through and overlapping action
  6. Slow in and out
  7. Arcs
  8. Secondary action
  9. Timing
  10. Exaggeration
  11. Solid drawing
  12. Appeal
• Three key point in the design process where you can begin working with the magic of motion are sketching, wireframing and prototyping.