It’s the kickoff meeting. You are the lead designer on the project, and this is the first meeting with everyone in the room. Your client is reciting her wish list, and you’re taking diligent notes—probably with cute, relatable doodles.
An hour passes, and you’ve barely said a sentence. You’re nodding your head, scarcely making eye contact. You have some thoughts, but you aren’t speaking up. Why aren’t you speaking up?
You’ve likely been burned in the past. Perhaps you’ve shared some ideas and they were turned down. You have felt embarrassed in meetings. Projects that you put your heart and soul into were changed at the last minute without your consultation or discarded, apparently without a second thought.
Now, while it’s admirable to be an agreeable, easy-to-work-with colleague, being quiet and keeping your head down isn’t the answer because this is not a production line. You are a designer, and part of your job is contributing to the conversation.It’s a designer’s job to ask good questions
You want to do your best work and meet your client’s needs, so playing an active role in the conversation is vital. To extract the most information you can from your client, you must ask questions. Lots of questions. Think of it like playing detective, gathering clues and working to understand the players in the game.
Laura Kalbag writes, “As designers, we can’t expect other people to know the right language to describe exactly why they think something doesn’t work. We need to know the right questions that prompt a client to give constructive criticism and valuable feedback.”
They are looking to you as the professional to not only listen to their needs, but to also be able to identify and understand their unexpressed needs.
It is not the client’s job to know exactly what their logo should be or how their website should function. That’s your job. They are coming to you to share ideas, to express concerns, likes, and dislikes. They are looking to you to help guide them to a solution.Clients will always ask you to make their logo bigger, prescribe solutions, and ask you to do things that will make you smack your forehead. You can roll your eyes at how much they don’t understand about design or you can roll up your sleeves and begin practicing your craft by helping them clarify what they need. Mike Monteiro from his brilliant and on point book Design is a Job First, understand the end users’ needs
It’s pretty likely that your client isn’t the main user of the website or product you are designing. Even if they are amazing at articulating exactly their tastes and preferences, it’s beside the point because they are not the target audience.
If you are fortunate enough to be on a project that dedicates resources to user research, familiarize yourself with its findings. If you do not have access to this information, ask a few questions about who the end user is and what their needs are to better understand the target audience you are actually designing for:
- Who exactly do you anticipate will be using this website?
- What problem is this website solving for them? Or
- What will they accomplish by using this website?
- What are their pain points?
Once you establish who the end user is, try to phrase your upcoming questions in a way that encourages the client to see through the eyes of the end user, not their own. User experience consultant and writer Paul Boag simplifies this on 24ways.org: “A client’s natural inclination will be to give you his personal opinion on the design. This is reinforced because you ask them what they think of the design. Instead ask them what their users will think of the design.”
It is also possible that the client thinks they understand what the end user needs, but they are only working from assumptions. This is apparent when sweeping generalizations and blanket statements are made. As Laura Kalbag says, “Throughout the design process, we need to check our hidden assumptions about our users. We should also ensure any feedback we get isn’t based upon an unfounded assumption. If the client says the users won’t like it, ask why. Uncover the assumption—maybe it’s worth testing with real users?”Establish attainable business goals
This is a conversation that I still struggle with. A lot of companies are good at coming up with lofty business goals that can be interpreted into almost anything, and are usually difficult to measure.
The conversation may start out up in the clouds, but by talking about business goals you are helping to break down assumptions, learn about your client’s current expectations, and set their expectations going forward.
For example, if the assumption is that by redesigning their website they will generate more leads, you need to establish clear language around what that means and what success looks like to them.
Daniel Ritzenthaler suggests “Taking the Guesswork Out of Design” by using “a modified acceptance criteria exercise [to set] clear and powerful goals.”">
Ritzenthaler says, “Acceptance criteria for design is a great way to [flesh] out deeper, possibly unknown, intentions that will help the designer and project owner make better decisions and dodge surprises later in the process.”Make sure you are asking the right people
The kickoff meeting is a great place to ask questions because, more than likely, the right people will be in the room.
If you have any control over who is required to attend, make sure the meeting includes everyone who has decision-making power, is assumed to have power, or is an opinion leader inside the organization.
I find that a lot gets lost in translation when a question filters up three levels of management and then trickles back down to you. When you hear information from the source, you get the original version and you also have the chance to ask for more clarity.
If you are not sure who the key players are, here are a few preparatory questions you can ask to get that information:
- Who initiated this project?
- Who will have the final decision with this project?
- Who has the ability to cancel or postpone this project?
Once you understand who you are designing for, what the major goals are, and who the key players are, you will be ready to start discussing the details of the actual project.
Avoid simple yes or no questions—stick with something open-ended so you will get more information. Ask any question that comes to mind that will help you better understand the issue at hand.
Ask follow-up questions if there is something that still isn’t clear to you. You may have to ask the same question a few different ways before getting a response that gives you the information you’re looking for.Read between the lines
In one person’s mind, “add more pictures” could mean a photo gallery of thumbnails at the bottom on the page. Another person might imagine this as the giant background image that they saw on someone else’s site and they want exactly what that person has. And yet a third person is picturing replacing most of the text on the page with infographics.
Here’s an example: you are working on a web design and the client doesn’t think there are enough images on the mockup you provided. Ask:
- What value will adding more images provide? For whom?
- Are images available?
- Does a photographer need to be hired?
If you find out their solution was to purchase stock photography, dig a little deeper.
- Is stock photography genuine enough for their audience?
- Will it convey the value they were hoping for?
- If a visitor to the website found out it was stock photography, would that affect their perception of the company?
These are likely questions they have not yet thought through. By asking these questions, you are helping the client see the bigger picture and preserve the value of the brand or message.Try generic questions
If you’re not sure what the right question is, you can keep it really simple by using one of the following go-to phrases:
- Could you elaborate?
- Would you describe that for me?
- What does that look like to you?
Make sure you are clear and concise. Do not muddy up your question with “ummm,” “er,” “like,” “whatever,” or “you know.” A clear question has a better chance of getting a clear answer.You’re going to annoy someone
Truth is, it is possible that some people may get annoyed with the questions. Don’t let this deter you. It isn’t personal. You have a job to do and clues you need to gather. Explain why it is necessary that you truly understand the problem you are all here to solve together, and explain that in the long run it will likely save a lot of time. Thank them for their understanding and cooperation (even if they are being quite the opposite of cooperative).
If a client appears frustrated or annoyed that you are asking so many questions, it may be because they thought they had it all figured out. You just made them realize that they haven’t even begun to figure it out.
What was supposed to be a “quick” web design has become a bigger project, one that requires real thought and effort. They may feel frustrated that it won’t be the quick fix they initially expected. That’s not your fault! You’re doing the client a favor in the long run by ensuring that all parties are on the same page and making the best decisions together.Read the room
If your client comes across as agitated by speaking more loudly, constantly interrupting, or suddenly becoming very short with responses, try to assess how you are coming off in this meeting. Are you talking more loudly or interrupting? Do you think he feels like his answers are being heard?
In that scenario, taking a more laid-back approach by leaning back in your chair a little, speaking somewhat more slowly and softly, and relaxing your face may help the meeting move in a more productive direction.Test engagement
You need your clients to be engaged to get the most information. If they are not making eye contact, not participating in the conversation, or are busy on their phones, they may not be engaged.
By simply pausing and allowing silence, you may be able reengage the client. Or test their engagement by asking a couple of questions:
- Are we discussing what you had hoped we would?
- Is there anything we haven’t covered that you hoped we would?
Stepping away for a few minutes can clear the mind and calm the nerves.
A five-minute break will keep your client engaged by allowing them to check their emails, text, and get a few seconds of relief from their FOMO. Use this time to assess the situation and formulate your next questions.Play nice
Don’t give the impression that you are trying to prove them wrong; this isn’t a pissing contest. Approach the conversation with genuine curiosity and a lot of empathy. You are both working toward the same goals here.
- When you ask a question, really take time to listen to the response.
- Do not interrupt.
- Be supportive as they give their answers and thank them for giving you the additional information.
- Don’t be afraid to use an awkward silence to your benefit. Chances are the client feels awkward, too, and will start talking, giving you even more information.
Asking great questions takes practice. Lifehack has some tips worth reading on how to be amazingly good at asking questions.Your work reflects your level of understanding
Until we have the ability to project images with our minds (why don’t we have this yet?), or unless your client is an amazing sketch artist, asking questions and piecing the clues together is our most effective tool to understand their expectations, and help them see the bigger picture along the way.
If you leave the room without asking any questions, there is no way you can really understand what is being asked of you. You might annoy someone along the way, but your work will have so much more meaning and, in the end, your clients and their end users will see the added value in your work.
CONTENTFUL, an API-first, developer-friendly CMS. Build custom content-rich front-end with the tools of your choice.
Consistent animation is crucial to both branding and UX. Interfaces obey laws of “design physics”; keeping animation consistent throughout an experience envelops users in an illusion of life, of reality. Animations that step out of line disrupt that flow and feel sloppy or jarring. But because animation sits squarely at the intersection of design, development, and UX, achieving consistency presents unique challenges:
- Communication issues make it hard for siloed teams to understand and tackle animations together.
- Inadequate deliverables prevent developers from moving forward quickly.
- Lack of respect for and deference to fellow team members leads to lopsided implementations that privilege some voices at the expense of others. When it comes to animation, it’s important for everyone to be heard.
Including animations in our style guides and design systems is a great place to start. However, this is relatively new territory, and most animation documentation initiatives seem to be driven by either development or design. In an ideal world, developers and designers would live in harmony and collaboration, but all too often the two houses exist in isolation from each other.
Most examples of animation in documentation reflect this rift by falling into one of two categories: thematic and educational, as seen in Google’s Material Design guidelines; or granular and explicit, as displayed in Salesforce’s Lightning Design System. Designers want to provide guidance and overarching themes, as well as educational materials, in an effort to raise the profile of animation both within a company and within the larger web design and development communities. Meanwhile, developers aspire to define and dictate animation for maintainability and consistency.
This contrast reflects the needs of each group. Designers want to know the underlying principles of motion design driving their application; developers want to know how to build that design to spec. These interests are not at odds with each other—rather, they form incomplete halves of a greater whole:
- Documentation details what’s there and why.
- Defaults offer building blocks and rules for spinning up new projects.
- Unity provides a common language and choreography.
- Guidance empowers future designers to make smart decisions.
As of this writing, there is no Ultimate Animation Style Guide/Pattern/Tile/Whatever example that combines all of these elements perfectly. There may never be an animation-style-guide pattern that satisfies everyone. Some organizations may need more of some of the above components than others, depending on the project and the animation or development literacy of the team. But all approaches share features that we can combine to create the Ultimate Animation Documentation for our own teams. Let’s have a look.Deliverables
Deliverables are supposed to round off the design process, but I often find it helpful to start with what developers want and need. Some companies have designers who build prototypes in code. Developers then find it easy to go into the code and grab the variables needed to reproduce the UI animations. But not all workflows look like this, and many motion designers will rightly argue that the very act of animating code-first limits the ideation process.
That’s why, at many companies, designers create animations in After Effects or Photoshop and then hand them off to developers. The developers must then pick apart these videos and gifs to determine what is changing at what rate. This makes the burden of implementation especially heavy for the developer, giving animation a reputation for “taking too long to prioritize.”
I myself once had to spend six hours converting an animated GIF to SVG by eyeballing it. If the designer had provided me with the necessary values, I could have recreated the animation perfectly in thirty minutes, tops. We’ll look at these values—easing, timing, and properties—next. For the sake of simplicity and consistency, we should include them in our documentation and reuse them as much as possible across our systems.Easing
Easing describes the rate at which something changes over a period of time. It has its roots in traditional studio animation, where it was called “cushioning” or “slowing.” Easings are shorthand for rates of acceleration, deceleration, and bounces. We can invoke generic easings with CSS via keywords like “ease-in” and “ease-out,” but when everyone uses the same defaults, everyone’s designs start to look and feel the same.
It’s tempting to make one cubic-bezier curve to rule them all, but what we really want is an array of several curves for different purposes:
- Human-initiated interactions feel faster and more natural if they respond immediately. A deceleration (moving from fast to slow), or ease-out, provides immediate feedback that tapers off.
- System reactions are less alarming if their curve is accelerated, moving from slow to fast, or what we call ease-in.
- Fades and color changes often look best with a more constant curve, but you could purposely buck that to express your aesthetic values.
Most design systems benefit by specifying at least an ease-out, an ease-in, and a fade curve.Timing
Easings are a high-visibility return on investment. But animation can’t happen without a duration. On the Lightning Design System, I worked with Amy Lee, who also happens to be a musician. In a brilliant example of genius occurring in the overlap of disparate fields, she came up with the concept of timing scales: a set of time values that align at various combinations.
The concept is similar to modular scales in typography: all values are related, and if you combine them with a vertical rhythm, a piece exhibits overall harmony. You can generate a timing scale the same way you generate a typographic scale.
There are upper and lower limits. While the human eye can perceive images in as little as 13 milliseconds, it takes us between 70 and 700 milliseconds to move our eyes according to the Human Processor Model. 200–300 millisecond values typically become the workhorses of a timing scale, from button depresses to secondary animations. (The persistence of this time range across game and web development is especially interesting in light of recent research suggesting we experience the world in 400 millisecond “chunks.”) Shorter durations work better for color changes and fades, which the human eye picks up readily. Longer durations are better for larger fields of change, like page transitions, or motions that occur over longer distances, like a drag-and-drop interaction or menu slide-out over a large screen.
Properties describe what is being animated. Currently in web animation, the most performant things to animate are opacity and transforms (scale, distance, rotation). But there will be times when we want to animate less performant things like color or—heaven forfend!—height. Browsers are working hard to improve their animation performance, so while it’s great to try to stick to transform and opacity, don’t be afraid to push technology with art where you can get away with it.
Knowing the properties we want to animate comes in handy when communicating animations with storyboards and specs and when we’re creating our project’s very own animation vocabulary.Creating an Animation Language
We combine these three components—easing, timing, and properties—to create vocabularies of words like “pop,” “fade,” and “slide.” Many of these expressions start as friendly onomatopoeias: swoosh, zoom, plonk, boom. And sometimes colleagues will, say, hold a sound longer to indicate extended duration: “Can you make it more like voooooosh and less like voosh?” It makes sense to “pave the cowpaths” and adopt words like these when constructing our own animation vocabularies.
Vocabularies are granular. You can layer these microanimations to create macroanimations—for instance, a modal that fades onto the screen then pops to grab user attention.
These words might seem arbitrary at first, but they yield huge benefits when it comes time to document our visual deliverables with text.Communicating Visually
There are three ways to communicate animation: storyboards, animatics, and prototypes. All of them contain a visual component, but only storyboards include words. Words are one of the lowest common denominators of digital human information exchange—capable of being read out loud, indexed by search engines, translated by machines. In many cases these words are the key to conveying animation deliverables, so it makes sense to start with storyboards.Storyboards
Disney Studios invented storyboards for working on feature-length animation films, and it wasn’t long before Hollywood started using them, too. Storyboards let disparate teams get an overview of a linear narrative. They reduce time spent on dead-end shots and help directors and writers visualize the final story, and edit it on the fly. These days, storyboards are used not only in cinema but also in game design and interaction development.
These storyboards can range from very informal (on a small-team interaction-design project where everyone follows each stage of development closely) to very detailed and particular (for specifications and audits). One problem I have as a consultant is that I find it difficult to embed videos or GIFs in PDFs to hand to managers as a way of explaining where animation problems occur. So for long-term storage, I include a storyboard.
This storyboard was part of a motion-design audit for a large project where I needed to leave the client with actionables to include in their next sprint.
Storyboards use words and illustrations to represent interactions and animations. Every animated interaction can be divided into a “before” shot and an “after” shot; it’s up to us to illustrate the in-between shot to demonstrate how we get from one to the other. Language helps us clarify why these changes are happening. Using words like this is a powerful thinking tool. Justifying animations verbally helps us sort necessary animations we can defend from ones that are perhaps less mission-critical.
Storyboarding software, most of which is geared toward cinema, is simultaneously insufficient and overkill for web development collaboration. Teams often have more fun and collaborate better with good old index cards and Post-its. I’ve written about a more formal approach to my storyboarding techniques, and you can download my storyboarding template to get started.Animatics
If a picture is worth a thousand words, an animation is worth ten thousand meetings. Storyboards, sadly, can’t show us how something “feels” on the screen or under the thumb. Once again, studio animation provides a solution in the form of animatics, videos of the storyboard set to an audio track that can be screen-tested with an audience or presented to investors as proof of progress. We can also make small videos or GIFs with our wireframes and storyboards that demonstrate how they work.
Do not throw these mini videos over the fence to developers. Finalize animatics by combining them with the deliverables developers crave: easing, duration, and properties. At most, an animatic is a measuring stick against which we compare the final, implemented animation. And the two will only match 100 percent if we provide our developers with the inputs necessary to duplicate the original.
For creating animatics, AfterEffects is the software of choice in the motion design industry. Web designers may be more accustomed to creating animatic-like demos in Keynote to be clicked through in meetings. These can be recorded with screencasting software like Quicktime or Camtasia. And some visual prototyping tools like Principle export to video, achieving two things at once.Prototypes
Animatics can be screen-tested on an audience, but screen-testing works best for passive media. The web is interactive: people interact with designs, which in turn react to them. There’s no way to test these reactions with storyboards or videos. When we want to be sure of how people will respond to a design, we want prototypes.
There are two approaches to prototypes: coded prototypes and prototyping software. Developers tend to prefer the former, often leaning on frameworks like framer.js and Zurb’s Foundation; designers prefer the latter, in the form of software like Invision App and UX Pin. Both approaches require team members to invest time in learning a new system, thus increasing the commitment factor.
Most prototyping software with animation features, like Pixate and Principle, is app-oriented. But the web is catching up with products like UXPin, and web and native prototyping powerhouse Invision has demonstrated its commitment to improving animation tooling with its purchase of Easee.
Coded prototypes, unlike storyboards, are terrible for documentation: only code-savvy team members can read them, and the files must be organized and sometimes compiled or served before inspection. An external agency would struggle to deliver a fully branded experience riffing off a pile of non-production code.Pick two
If we rely on storyboards, animatics, or prototypes alone, we can’t hope to communicate animation clearly, effectively, or sustainably. But if we combine them, they work great: a demo next to a set of deliverables; a storyboard with a video. Such combinations work well for documentation and also sometimes for offering animation boilerplates.Animation as a team sport
Many animation documents are created in the hopes that “if you write it, they will follow.” We hope our coworkers will read our sage advice and start preaching the animation gospel; we hope they’ll copy our animation deliverables perfectly for every button, gesture, and loading spinner.
In practice, though, it’s extremely rare for even half of a team to care as passionately about animation as the person writing the docs. While education and guidelines are fantastic in principle, they are a wasted effort if no one cares. Here are some quick ways to get our teammates on board:
- Group documentation. Having a documentation format that everyone can contribute to—and then having people contribute even just a few words—helps them feel like this is their baby, too.
- Team tweening exercises. I use these exercises in training to help get siloed teams collaborating. Take “before” and “after” wireframes, and give everyone index cards to brainstorm all the possible animations they could use in between those states to get from point A to point B.
- Cultivate and champion. Teams without motion and animation champions can’t sustain their animations over the long run. Someone has to grow the love for animation and make it second nature to think about it, same way we think about color or fonts. Otherwise, animation risks being sidelined the way accessibility and user testing often are. Many organizations assume an initial effort is sufficient to address what should become an integral part of their design process.
- Have a coconspirator or two. We should always be on the lookout for coconspirators. One champion isn’t enough. Eventually we all move on to other projects, and a healthy system is one that can function when one of its pieces goes missing.
- Do it anyway. Sometimes people just have to see the difference animation makes to believe it. You can ask for forgiveness later.
A template library will need different documentation than, say, an interactive story app. What matters is clearly recording and communicating those deliverables and cultivating a concern for animation among our peers. People fear what they don’t understand, and they fear change. Education, communication, and collaboration turn that fear into enthusiasm and goodwill.
There is no one right way to document animation. But when we collaborate with our teams, together we will find the right way forward. Don’t be the lone animation wolf; find or found an animation pack. Recruit other animation wonks from different areas like UX, front-end development, data visualization, design, and marketing. Diverse views will strengthen how we approach animation and help rally more support from other corners. Together, we can all find our own “way of animation” that works best for us.
It gives us great pleasure to announce the 2016 10k Apart competition. Create a fully functioning website in 10 KB or less! Amaze your friends! Astound the world! Compete for fabulous prizes!
Why 10k? Why now? It’s simple, really. In the 16 years since we told you about the first contest to create a functioning website in 5 KB or less, countless aspects of web design and development have changed. And, year after year, A List Apart has marked those changes, even instigating more than a few of them ourselves. But in all those years, one thing has remained constant: the need to keep our websites lean. Indeed, in the age of mobile slash responsive slash multidevice design, keeping sites lean and mean is more important than ever.
In 2000, Stewart Butterfield launched the original 5k competition to celebrate the skill, ingenuity, and innovation of designers and developers who wring every byte of performance out of the websites and applications they fashion. Ten years later, Microsoft and An Event Apart launched the first 10k Apart—adding progressive enhancement, accessibility, and responsive web design to the competition’s requirements.
And now, An Event Apart and Microsoft Edge have teamed up once more to entice you, the makers of websites, to improve your performance game yet again by competing in a new 10k Apart that’s even tougher than the last one. Golly!
Ah, but there’s gain for your pain. Besides fame and glory, you could win $10,000 in cash, tickets to An Event Apart, the complete A Book Apart series, and a copy of Aaron Gustafson’s Adaptive Web Design, 2nd Edition, which I consider the unofficial successor to Designing With Web Standards. So what are you waiting for? Hop on over to the 10k Apart website for complete rules and details.