Website animations are much more than pretty moving graphics. They help tell a story in one of the most engaging ways online today. Web animations range from simple two second looping graphics to full length explainer videos. Animations can be a great way to simplify complicated information into digestible engaging content. So what makes an animation successful? There are a few key elements to consider but communication and the end goal is at the top of that list. After that a solid process should ensure everyone is giving feedback at optimal times to push the project forward towards the goal. Like most projects the first step is to set user and stakeholder goals and share them with everyone involved in the project before you start. This will be the foundation and the reason most decisions are based on. You have to have commitment on what’s important beforehand if you want to get the client high-five when the project is done. Next, share your process and let the team know when their specific input will be needed by assigning milestones in your process where people will have opportunities to give feedback. If you’re able to communicate your progress well, implement the team’s feedback and reiterate the goals along the way you’ll be sure to end up with a project that just might exceed everyone’s expectations leaving everyone happy with the end result that is sure to communicate the best story possible to the end user. Let’s look at this Digital Delivery animation to show you the process of how it was created as an example.
The Process
Define Your Goals
15-20 second 2D animation articulating the designer to client product handoff. Animation needs to be on brand and depict a smooth designer to client handoff. It needs to show the emotions of a successful design and business win-win finish.
Build Your team
Art Direction: Armando Soria
Animator: Edmundo Landaverde
Set Key Milestones
Phase 1: Concept & Storyboarding
Brainstorm and sketch ideas to articulate the story.
Phase 2: Animatic
Adapt the storyboard to a basic animation and fit the timing of the final animation based on it.
Phase 3: Graphics elements
Create and (or) adapt the graphic elements.
Phase 4: Character Rig
Create the hands and set them for the animation.
Phase 5: Animation and motion graphics
Create the animation for the hands and the rest of the graphic elements.
Phase 6: Final Changes and Completion.
Deliver the animation and see if there’s any minimal changes to be made.
Set a Timeline Estimation
Concept & Storyboarding 1 day
Animatic 1 day
Graphic elements 1 day
Character rig 1 day
Animation, motion graphics and compositing 3 days
Estimated Total Time: 1 week
Concept & Storyboarding
The initial research and brainstorming step is definitely my favorite part of the process. It’s the time where discovery and loose ideas build off one another and the only time creative ideas are not tied to time, budget, stakeholders, well no yet anyways. It’s where the kid inside of you gets to color outside the boxes and where no idea is a bad idea, just a bunch of ideas that start with “It would be super cool if …”. I generally like to start with a rough script, sketches and start compiling mood boards to start piecing together a fun idea to get the story across and how the story can communicate on brand. It’s really the step of why I fell in love with the design process so long ago. Once I’ve gathered enough inspiration and I’ve spent a good amount of time researching the client’s brand and message I start storyboarding ideas to present to the client. I make sure to keep the sketches extra loose at this point to make sure the focus of our conversation is more about the story and it’s goals than the design details even if I might have a style in mind already. Getting buy-in on a concept before you get hung up on the details is a great way to ensure the end result is a success.
Animatic
Once the concept storyboard is ironed out, meaning all the stakeholders have agreed on a concept & goal and time, budget and a realistic end product have been accounted for it’s always a great practice to adapt the storyboard to a basic animation to fit the timing of the final animation. In this step you’ll take those rough sketches and place them on a video timeline and maybe add just a tad more detail to show everyone what the animation will look like within the time frame. It’s important to remember that not everyone can visualize concepts before seeing them and it allows everyone to give feedback on how the story should be broken up. It’s an opportunity to make sure the important parts of the story are getting the time needed to get the message across or to reach a goal.
Stylize Graphics
Once the animatic is approved we get to break out that box of crayons again and have some creative fun coming up with a design style for the animation that’s on brand. You’ll take brand styles, colors, voice, typography or brand feng shui as I like to call it and come up with a style that fits the animation that won’t break the budget of course. I like to take the climax or important part of the story to use as a still frame to come up with a design style that will carry over to the rest of the animation. Try to use an important part of the story to get style buy in as it will probably be something most people will have feedback on. If you can nail the most important sequence style then the rest of the animation design elements should come easy.
Motion Rigging
Although this step can seem more technical and out of sight out of mind I think it’s important because it sets the pace for the animation’s motion itself. Rigging the design elements is like giving your characters a skeleton, defining where things will move, twist, push and pull. If your brand has a certain way it moves like whimsical VS ridged or fast VS slow this is a chance to start thinking about your brands motion style and can be communicated to the animator at this step.
Sign, Seal & Deliver!
Deliver the animation and see if there’s any minimal changes to be made. The final step should have minimal surprises and should be well received because you’ve taken the time to make sure the project goals were met beforehand. This should be the most favorable part of the process leaving everyone involved with a sense of ownership. I personally like to have a retrospective meeting after to talk about what went well with the project and maybe what didn’t go well that can maybe be improved.
