Whiteboard-Style Animation, Done Properly

Whiteboard-style animation is the look of a hand, or an invisible pen, drawing black line art onto a white surface while a narrator explains an idea. Each line appears over time as if someone were sketching it live, and the finished drawings build up into a sequence of boards that carry the viewer through a process, an argument or a set of instructions. It is one of the most familiar formats in explainer video, internal training and e-learning, and for good reason: it is relatively cheap to produce, it is easy to follow, and it keeps attention on one idea at a time.

It is also one of the easiest formats to get wrong. Because so many stock templates use the same hand, the same marker font and the same clip-art icons, a careless whiteboard video now reads as generic, and sometimes as dated. The difference between a whiteboard piece that feels considered and one that feels like a default setting is almost never budget. It is a sequence of small decisions: whether the style suits the message at all, whether the script was written before anyone drew, whether the drawing speed follows the voice, whether the line work is consistent, and whether the boards are allowed to breathe.

This article follows one project from brief to delivery to show those decisions in order. The project is an illustrative example, not a real client engagement: a composite built from the kind of work studios do regularly, with realistic numbers chosen to show how the arithmetic works. It is written for marketers and in-house teams deciding whether whiteboard animation fits a job, and for practitioners who want to see the reasoning behind each step, from the first word count to the final export.

The Illustrative Brief: A Returns Process Nobody Understood

The client in this example is a mid-sized software company that sells a warehouse management platform. It had recently launched a returns module, and its support team was fielding the same questions over and over from warehouse supervisors: what happens when a customer starts a return, where the item gets inspected, how the refund is triggered and what the supervisor actually has to click. The product team had written a twelve-page help article. Almost nobody read it.

The request that arrived was short. The client wanted "a whiteboard video, about two minutes, explaining how returns work," to be embedded at the top of the help article, shown during onboarding calls and dropped into the platform's in-app help panel. They had seen whiteboard explainers from other software companies and liked that they looked approachable rather than slick. They also had a firm internal deadline: the video needed to be live before a customer conference five weeks out.

Three facts in that brief shaped everything that followed. First, the audience was operational, not promotional: warehouse supervisors who needed to do something correctly, not prospects who needed to be persuaded. Second, the content was a process with a clear sequence of steps, which is exactly the kind of material whiteboard handles well. Third, the video would live in three places with different viewing conditions, including a small in-app panel where fine detail would be lost. Those three facts turned out to matter more than the words "whiteboard" and "two minutes."

What the kickoff call needed to establish

Before any creative work, the studio used a forty-five-minute kickoff call to pin down the things that would otherwise surface as expensive changes in week four. The questions were plain ones: who approves the script, who approves the visuals, and whether those are the same person; which terms the product uses in its interface, so the narration matches the buttons on screen; whether the brand has an illustration style or only a logo and a color palette; which languages the video would eventually need; and whether any legal or compliance reviewer had to see the script. In this case the answers were a product manager for the script, a brand lead for the visuals, a short list of interface terms, a brand palette with no illustration guidelines, English first with Spanish likely later, and no compliance review.

The note about Spanish was small but important. It meant the studio would keep all on-screen text separate from the drawings, so a translated version would not require redrawing boards. That single decision, made on day one, saved a meaningful amount of work later.

Deciding Whether Whiteboard-Style Animation Fits the Job

One of the most common mistakes in this format is choosing it without a reason. Whiteboard is chosen because a competitor used it, because a template exists, or because someone assumes it is the cheapest animation option. Sometimes those assumptions are right; often the style ends up fighting the message. So the first real piece of work on this project was a short style rationale, a single page answering why whiteboard, and what the alternatives would offer.

The case for whiteboard was strong here. The subject was a sequential process with cause and effect, and a drawing that builds up on screen mirrors the way a trainer would explain a process at an actual whiteboard: one box, then an arrow, then the next box. The audience was practical and would likely watch with intent, so the slower, more deliberate pace of drawing reveals was an advantage rather than a drag. The style also encourages simplification. When every object has to be drawn as clean line art, there is pressure to reduce each idea to its essentials, which is exactly what a confusing returns flow needed.

The case against was also real. The client's brand was modern and fairly minimal, and the classic whiteboard look, with a photographed marker hand and a slightly scruffy sketch style, risked looking like a stock template. The in-app panel was small, so thin lines and handwritten labels could become illegible. And the product interface itself, with its specific buttons and status labels, needed to appear clearly at a few key moments, which pure line drawings do poorly.

The alternatives on the table

The studio compared five options against the brief, including the classic template look the client had in mind. A flat 2D motion graphics piece would be cleaner and more on-brand but lose the step-by-step, drawn-in-front-of-you quality that made the process easy to follow. A screen-recording walkthrough would show the real interface but would bury the underlying logic of the returns flow under clicks. A fully illustrated character piece would add warmth but cost more and pull attention toward the characters. And a whiteboard piece could be adapted: keep the drawing reveals and the build-up, but draw in the brand's own line style, use the brand's accent color for emphasis and cut in simplified interface panels at the moments supervisors needed to act.

The recommendation was the second row: a custom whiteboard piece. The studio presented it as a whiteboard video "drawn in your hand, not someone else's," and the client agreed. If the content had been emotional storytelling, a brand launch or something that needed to feel premium, the recommendation would likely have moved toward custom 2D animated video instead. Whiteboard is a good tool for explanation; it is rarely the right tool for making a brand feel expensive.

Timeline From Brief to Delivery

With the style settled, the studio built a five-week schedule backward from the conference date. The biggest structural decision was the order of work: script first, then narration, then boards, then animation. Many whiteboard projects run drawing and scripting in parallel to save time, and then spend that time and more re-timing drawings to a script that changed underneath them.

The two days of buffer were not a luxury. Review rounds almost always slip when an approver is traveling or a product detail changes, and a whiteboard piece that is timed tightly to narration cannot absorb late changes as easily as a looser motion graphics edit. A clear review structure helped too; the studio's approach to reviewing animation with clients sets out who comments at which stage and what kind of feedback is useful at each point.

Writing and Timing the Script Before Anyone Draws

Narration drives the pacing of whiteboard animation. Every drawing appears in response to something the narrator says, so the words determine how many boards there are, how long each one stays on screen and how fast each line has to be drawn. That is why the script comes first. Drawing before the script is locked is the single most reliable way to waste money on this format.

Working out the word budget

The client asked for about two minutes. Conversational explainer narration usually runs somewhere around 140 to 160 words per minute; slower for technical instructions, faster for promotional pieces. For a supervisor audience learning a procedure, the studio planned on the slower end, about 140 words per minute, and then reserved time for pauses where a board would finish drawing or an interface panel needed to be read. That produced a simple budget:

• Target runtime: 120 seconds.
• Reserved for title, logo and end card: about 8 seconds.
• Reserved for deliberate pauses and holds on completed boards: about 15 seconds.
• Remaining narration time: about 97 seconds, or roughly 225 words at 140 words per minute.

The first draft from the product manager was 410 words. That is typical: subject experts know everything that matters and want all of it in. Reading 410 words in two minutes would require a pace of over 200 words per minute, which is fast even for a promotional voiceover and far too fast for someone learning a workflow. The choices were to cut the script by nearly half or to let the video run closer to three and a half minutes.

Cutting without losing the process

The studio did not simply trim sentences. It rebuilt the script around the six moments where a supervisor had to understand something or do something: a customer starts a return; the return is approved or flagged; the item arrives and is scanned; inspection decides whether it is restocked, refurbished or written off; the refund is triggered; and the supervisor reviews exceptions. Anything that did not serve one of those six moments moved to the help article, which would sit directly below the video anyway.

Each sentence was also rewritten to be drawable. "The system leverages configurable rules to determine eligibility" cannot be drawn in any meaningful way. "Your return rules check three things: how long since the order, what condition the item is in, and whether it is on the no-returns list" can be drawn as a checklist with three icons. The test for every line was whether an illustrator could sketch it in a few seconds without a caption doing all the work.

The locked script came in at 232 words. Read aloud at a natural training pace with the planned pauses, it timed at 1 minute 58 seconds. The studio recorded a scratch read on a laptop microphone that same day, because a script only proves its length when someone says it out loud.

The project in numbers

By the end of week two, most of the numbers that governed the project were fixed. Laying them out made the scope easy to discuss with the client and gave the animator a clear frame to work inside. All figures below belong to this illustrative project; they are there to show how the parts relate, not to set a benchmark.

Eleven boards across roughly 110 seconds of content works out to an average of about ten seconds per board. That average hides a useful spread: the opening board, which sets up the problem, ran about fourteen seconds, while two quick transitional boards ran about six. A rough rule the studio used was that a board should not hold fewer than five seconds unless it is purely transitional, because the viewer needs time to register a finished drawing, and should rarely go beyond fifteen, because a static board with nothing new appearing starts to feel stalled.

Building a Consistent Illustration Style: Line Weight, Hand and Accent Color

A consistent illustration style is what holds whiteboard animation together. In a medium where almost everything is line art, the lines themselves are the style. When some objects are drawn with a thin, sketchy pen and others with a heavy, clean stroke, the video looks assembled from spare parts, which is exactly the impression most stock-template whiteboard videos give.

Line weight and stroke rules

The studio set stroke rules before drawing any board, and wrote them into a one-page style sheet. All primary outlines used a single stroke weight, scaled for a 1920 by 1080 canvas so it stayed legible when the video was shrunk into the in-app help panel. Secondary detail, such as interior lines on a box or the grain on a pallet, used a lighter weight at roughly half the primary. Line ends and corners were rounded, which reads as a marker rather than a technical pen. Every object was drawn at a consistent level of detail: a package was a box with a tape line and a label, not a photoreal carton in one scene and a square in the next.

The illustrator worked in Illustrator, where stroke weight, cap and corner styles and variable width profiles can be set once and reused across every drawing. Adobe's Illustrator User Guide documents how those stroke settings and width profiles work, and saving them as graphic styles meant a new drawing started with the right line rather than relying on the illustrator's memory. For whiteboard work specifically, the stroke direction matters too: the animator reveals lines along their path, so a line drawn in Illustrator from right to left will animate from right to left unless it is reversed.

To show a hand or not

The classic whiteboard look shows a drawing hand holding a marker. It helps the viewer know where to look, and it adds a human quality. It also takes up a large part of the frame, covers the drawing while it is being made and is the single most recognizable element of stock templates. For this project the studio tested both approaches on the style frames. The client's brand lead preferred the version without a hand: lines drawing themselves, with a small pen-tip cursor at the leading edge of each stroke to give the eye a point to follow. That kept the build-up quality without the template association.

Color accents for emphasis

Pure black on white is legible but flat, and it gives the viewer no signal about what matters most on a busy board. The style sheet allowed exactly one accent color, taken from the brand palette, and restricted its use to three jobs: highlighting the element the narrator is talking about right now, marking the supervisor's own actions so they stood out from what the system did automatically, and drawing the arrows that showed the direction of the returns flow. A second, neutral gray was allowed for backgrounds and de-emphasized elements. That was the whole palette.

Restricting color this way sounds austere, but it made the video easier to follow. By the third board, viewers could tell at a glance that anything in the accent color was either what was being discussed or something they would have to do. Color became information rather than decoration.

Storyboarding Boards That Stay Uncluttered

With the script and style locked, the studio moved to the storyboard: each of the eleven boards drawn as a static finished frame, with notes showing the order in which elements would appear and which words would trigger each one. This is where whiteboard projects most often go wrong on composition. The temptation is to fit an entire process onto one board so the camera can pull back at the end and show everything. The result is usually a crowded board where the viewer cannot tell where to look.

Rules for composition

The studio used three composition rules on this project. First, one idea per board: if the narration moved to a new step, the drawing moved to a new board, even when the steps were closely linked. Second, a maximum of roughly five to seven distinct elements per board, counting each icon, label or arrow group as one element. Third, a clear reading path: elements were laid out left to right or top to bottom in the order the narrator mentioned them, so the eye never had to jump backward.

The one place where the team deliberately broke the one-idea rule was the recap. The final content board showed the full returns flow at small scale, built from simplified versions of the earlier drawings, so supervisors could see the whole process at once after they had learned each part. Because each icon was already familiar, the board read clearly despite containing more than the usual number of elements.

Handling interface moments

Three points in the script required supervisors to take specific actions in the software: approving a flagged return, choosing an inspection outcome and reviewing the exceptions queue. For these, the storyboard called for a simplified interface panel drawn in the same line style, with only the relevant button and label shown, and the button filled in the accent color. The studio avoided pasting real screenshots into the whiteboard frame; screenshots break the illustration style and go out of date as soon as the product team changes the interface. Drawn panels age more slowly because they show the idea of the control rather than every pixel of it.

Timing the storyboard as an animatic

The static boards were then cut together against the scratch narration into a simple animatic, with each board appearing complete at the moment its narration began. It looked crude, but it answered three questions before any animation time was spent: whether each board held long enough, whether any board was carrying too much, and whether the order of ideas made sense when heard rather than read. Two boards were split into four during this pass because the narration covered too much while a single static image sat on screen.

Recording Narration and Locking the Audio

Because narration drives the pacing, the final voice recording is the spine of the animation. Everything after it is timed to specific syllables, so it needs to be finished and approved before the animator starts revealing lines. Swapping in a new read after animation has started means re-timing every reveal, and it is one of the most common causes of budget overruns in this format.

Choosing the voice

The studio auditioned three voices against a short passage from the locked script, choosing a passage that included an interface term and a list of three items, because those are the moments where delivery most affects comprehension. The client chose a calm, mid-paced voice that sounded like a knowledgeable colleague rather than an announcer. For training content, a voice that sounds like it is selling tends to make viewers skeptical of the instructions.

Directing for animation

The recording session was directed with the animatic playing, so the voice artist could see where boards changed. Two direction notes mattered most. The first was to leave a short, natural breath between list items, which gave the animator a gap to finish each icon before the next word arrived. The second was to slow down slightly on interface terms such as "Approve Exception" so they matched the label that would be drawn on screen. The session produced a main read and a pickup pass for two lines where the product manager wanted a word changed. The edited narration track, with room tone and consistent levels, was approved by the client before animation began.

The team also set aside a music bed at this stage: a light, unobtrusive track mixed well below the voice. In whiteboard work, the music should never compete with the narration; its job is to fill the pauses so a completed board does not sit in silence.

Animating the Drawing Reveals to the Voice

Drawing reveals are the defining technique of whiteboard-style animation: stroke animation reveals each line over time, as if a pen were drawing it. Technically this is straightforward. In After Effects, vector artwork imported as shape layers can be revealed along its path with Trim Paths, or line art can be revealed with animated stroke masks. Dedicated whiteboard tools do something similar automatically. The craft is not in making lines appear; it is in deciding when and how fast each one appears relative to the voice.

The rule of drawing slightly ahead

The studio used a simple working rule: a drawing should begin a fraction of a second before the narrator says the word it illustrates and should be recognizable by the time the word is spoken. If the narrator says "the item is scanned" and the scanner only starts appearing afterward, the viewer feels the picture lagging. If the scanner is fully drawn two seconds before the word, the viewer has already moved on and the narration feels redundant. In practice this meant starting most reveals roughly a third to half a second ahead of the keyword and keeping individual object reveals to around one to two seconds.

Matching drawing speed to narration

Matching drawing speed to narration is the other half of the job. Complex drawings cannot be revealed stroke by stroke in the time a sentence allows, so the animator used three techniques. Primary outlines were drawn on with visible stroke motion, because that is where the viewer's eye goes. Secondary interior detail was revealed faster or faded in beneath the outline. Labels and on-screen text were typed on or faded in rather than drawn letter by letter, which also kept them separate for the later Spanish version. The combination gave the impression that everything was being drawn, while the timing stayed locked to the words.

For frame rate, the project was built and delivered at 30 frames per second, which suited the client's web and in-app platforms. The reveals were animated on every frame for smooth lines, while the small pen-tip cursor was allowed a little hand-drawn wobble. The trade-offs between frame rates and stepped versus smooth motion are covered in more depth in the guide to frame rate and timing for animation.

Camera moves and transitions between boards

Transitions between boards followed the logic of a real whiteboard. When the process moved forward, the camera slid right to a clean area of the board, so the viewer felt the sequence progressing. When the narration zoomed into a detail, such as a single inspection outcome, the camera pushed in. The team avoided the classic template move of an eraser wiping the whole board clean between every scene, which quickly becomes repetitive, and used it only once, when the video moved from the customer's side of the process to the warehouse side.

Camera moves were kept gentle and eased at both ends. Fast pans across white space can produce visible strobing on some screens, and a tiny amount of motion blur on the move helped. The studio kept that blur subtle; the decisions involved are explained in the article on motion blur in animation.

Review Rounds: What Changed and Why

The first full cut went to the client midway through week four. The studio sent it with a short cover note asking reviewers to watch once without pausing, then a second time with notes, and to separate comments into three kinds: factual errors about the product, clarity problems where they did not understand something, and preferences. That structure mattered, because the three kinds of comment have very different costs. A factual error must be fixed. A clarity problem usually should be. A preference can be weighed against its effect on the schedule.

Round one

The first round produced eleven comments. Two were factual: an inspection outcome had been renamed in the most recent product release, and the refund did not in fact trigger automatically for one payment type. The rename needed only a label change, because the text was on separate layers. The refund detail required one new line of narration, recorded as a pickup with the same voice artist, and a small addition to board 9. Four comments were about clarity, mostly asking for longer holds on the interface panels, which the animator gave by extending pauses in the music rather than slowing the voice. The remaining five were preferences, of which the studio accepted three that were quick and explained the cost of the other two.

Round two

The second round was short: a request to make the accent color slightly darker for contrast on the in-app panel and one timing adjustment on the recap board. The darker accent was checked on an actual in-app panel at its real size, rather than only on a desktop monitor, before the change was approved. That check caught a second problem: the lighter secondary line weight became nearly invisible at the small size. The studio thickened secondary lines slightly across all boards, a change that took a few hours because every line used the same saved stroke styles.

Delivery: Exports, Captions and Source Files

The video had three homes, and each got its own deliverable. The help article received a 1920 by 1080 H.264 MP4 with a closed caption file. The onboarding team received the same master plus a version with a two-second hold at the start, because presenters often start playback before switching screens. The in-app panel received a smaller file with slightly larger on-screen labels, made possible because the text lived on its own layers.

Captions were written from the final script rather than generated automatically, since automatic captioning tends to mangle product terms. The caption timing followed the narration, not the drawings, and caption lines were kept short enough that they did not cover the lower part of each board where labels often sat. For audiences who watch training with the sound off, captions are what keep a narration-driven format usable.

Finally, the studio handed over organized source files: the Illustrator artwork with its graphic styles, the After Effects project with its fonts listed, the separated narration, music and caption files, and the style sheet. A client who later wants to update a label, build the Spanish version or make a short cut-down should not have to start again. The checklist the studio follows for that handover is set out in the guide to delivering animation source files.

Where the Effort Went, and What It Says About Budgets

Looking back at the project, the time did not go where most people expect. The animation itself, the part that looks like the work, took about a week. The script, style and storyboard decisions before it took about two weeks. That ratio is typical of whiteboard-style animation done properly: the format is cheap to animate precisely because most of the thinking happens before animation starts, and when that thinking is skipped, the animation phase balloons with rework.

A worked breakdown of effort

For planning purposes, the studio tracked effort in working days across the roles involved. In this illustrative example, script development and client review took about three days of writer time. Style frames and the style sheet took about two days of illustrator time. Drawing all eleven boards and roughly forty assets took about five days. Voice casting, recording direction and audio editing took about two days combined. Animation, camera and interface cut-ins took about five days. Review revisions, captions, exports and source packaging took about three days. That is roughly twenty working days across the team for a two-minute custom whiteboard piece.

A template-based whiteboard video of the same length can be assembled far faster, because the style, hand, transitions and asset library are already built. The trade-off is that the result looks like every other video built from the same template. What drives the cost of a custom piece up or down is mostly predictable: script length and the number of boards; how many custom assets have to be drawn versus reused; the number of interface or product moments that need accurate representation; the number of review rounds and approvers; the number of language versions; and whether narration is recorded professionally. Speaking in ranges rather than fixed prices is the honest approach, because two videos of the same runtime can differ several-fold in effort depending on those factors.

The bottom line: Whiteboard-style animation works best when the content is a sequence to be understood, the script is locked and timed before drawing starts, and the line work is owned rather than borrowed from a template. Used that way, it remains one of the clearest and most economical explainer formats. Chosen by default, it looks like everyone else.

When the Style Feels Generic, and When to Bring In Help

Not every project should end up as whiteboard. If a style review shows that the audience has seen dozens of near-identical explainers, if the brand needs to feel premium or distinctive, or if the subject is emotional rather than procedural, it is worth considering alternatives before committing. Hand-drawn character work, flat 2D motion graphics, frame-by-frame animation for a more crafted look, or a hybrid that uses drawn line reveals inside a broader motion system can all keep the clarity of whiteboard without its template associations.

Whiteboard also has natural neighbors. Training and compliance teams often use it within wider programs, and the considerations for animation for e-learning, such as module length, accessibility and learning management system constraints, apply directly. Teams explaining how new staff should work through a process will find overlapping advice in the guide to employee onboarding animation.

In-house teams can produce competent whiteboard videos, especially with a good template and a disciplined script. The point at which outside help earns its cost is when the explainer style itself should differentiate the brand: when the video will be public-facing, will sit alongside competitors' explainers and needs to look like it could only have come from you. That calls for a defined illustration style, custom assets and animation timed by someone who does it daily. If you are weighing studios for that kind of work, the article on choosing an animation studio covers what to ask for in a portfolio and a proposal, and the studio's own animation and motion graphics services show the range of approaches beyond the whiteboard look.

The lesson of this project is that the format is not the problem. Whiteboard animation feels dated when it is chosen without reason, filled with mixed stock assets, crowded onto cluttered boards and drawn faster than anyone can listen. Remove those four habits, start from the script and hold the line work to one standard, and the same format that looks generic in template form becomes a clear, owned piece of communication.

Where this comes from

• Adobe Help Center — After Effects User Guide
• Adobe Help Center — Illustrator User Guide

The figures and practices above come from the sources listed.

Working on something like this?

We take on Motion Graphics & Animation work for teams who want it done once, properly. Tell us what you are building and we will tell you honestly whether we are the right studio for it. Start a project.

Where to go next

• Adobe Character Animator: The Decisions That Matter
• A Practical Guide to Loading Animations