Enlighten was acquired by Perficient Digital in December 2015
Bob was having a difficult time explaining his designs
“Would that slide underneath, or would it fade?”
“It would slide, but kind of a graceful slide like it’s being whooshed off the page.”
“Whooshed?”
“Like, you know, ‘whoooosh’”
“What happens after that? Would the sausages fade out, or stay on the page?”
“The sausages would kind of shake/react to the logo after you click on it.”
“But I thought the logo faded out before the whoosh-ing”
“Yes. And no. Well, sort of. After the giraffe part.”
Composition Creation
When designing a website concept, there are two critical points:
- The client signing off on the exact design that is being proposed.
- Conveying properly to a developer the exact design that is being proposed.
The above process traditionally involves designers creating visual designs in Photoshop, Illustrator, Fireworks, or other various programs, and then vocally walking the client or developer through what isn’t visible explicitly by just looking at the designs.
Websites aren’t static though. They’re clickable, interactive, dynamic, and variable. They have video, buttons, sounds, and much more. So a .jpg is only going to get Bob so far in explaining how the sausages will fade into giraffes elegantly.
With an amazing in house engineering department that we have here at Enlighten (now Perficient Digital), I can simply walk down the hall and have him/her tweak movement and details immediately. But honestly, after awhile my super prescriptive, pixel precise demands will cause the engineer to consider if the jail time for murder is worth it.
This prompts a few questions:
- Is a static .jpg enough to convey a website concept?
- What’s the best process to display motion and interactions on a website during the conceptual phase?
My stance:
Designs that are meant to be animated, should be animated. Before being conveyed to a client, before handing off to development, and regardless of the method or workflow.
The usual reasons for not animating compositions:
-
Time & Budget. Animating things takes longer. Things taking longer racks up hours.
So much of the web is moving towards movement, gestures, advanced hover states, expanding and collapsing sandwich menus, responsive websites, parallax transitions, and much more. Because of that, static compositions actually aren’t conveying concepts properly.
Therefore, not looking into the motion of a webpage is short term thinking and can affect budget later. By only using a static composition and beginning development, there are too many variables left open to interpretation:- “How will that lightbox come into the page? Will it fade or slide, or something else?”
- “The page needs to load, do we have a solution for how that will look?”
- “The user needs to click here and see something happen. What will that look like?”
How something is said is just as important as what is said. How elements move and transition on a website are just as critical as what is on the website. If this isn’t considered from the beginning, the final developed site could end up far step away from what was sold to the client.
-
No animation experience. Animation is a skill, it requires learning and training.
The industry has moved well past requiring solely an education in graphic design – it’s time we all took maybe 2 weekends this summer and spent some time with general animating for the web.
There are lots of online outlets now for learning simple animations in either timeline based programs or hand coded CSS/Javascript interactions; it is very much worth every designer’s time to learn a method of simple animation and (more importantly) determine the best way to integrate it into their workflow. Some great starting places for tutorials:- Lynda Loads of motion graphic and web tutorials, $25/month
- Tuts+ Tutorial community with endless motion graphic tutorials, as well as loads of other web and digital lessons.
- Skillshare Thorough online classes taught from the best creators in the industry.
- YouTube Yep, good old YouTube. Searching, “web motion graphics tutorial” will produce mountains of tutorials.
Some Real World Examples
One can peruse Dribbble and find countless animated designs from amazing agencies – lots even with codepen.io or jsfiddle coded interactions and animations included.
‘Product page interaction for GSM Nation’ by Julien Renvoye on dribbble.com
In the compositon above by Julien Renvoye, there are parallax effects, animation easing, and page transitions. None of those would come through on a static composition, and the details are easily lost in solely conveying by words.
Parallax Theater concept for a recent client
In the composition above, we wanted to add a touch more life to a homepage. If we had showed them static compositions and said the words, “parallax” or “animated,” it could have easily been interpreted as overkill. Instead, we were able to show the subtlety of our intentions and exactly how we intended the content to move.
Keyframe Easing by Fraser Davidson
In the same vein as pixel precision, adding in proper easing allows for even more detail control. For designers, it allows much more of their conceptual thoughts to make the jump from the Photoshop canvas to the HTML <canvas>.
When, Where, and How Much?
Animating EVERY single detail on a page would be overkill, so there are definitely battles to pick. Our goal is for the the designer, the client, and the developer to understand the concept in the exact manner it will appear upon launch; once we’ve reached that point, we need not design or animate any further.
Personally, at Enlighten, I’ve found us relying primarily on a few situations:
- Showing small sections of parallax and scroll events. As seen in the Parallax Theater concept earlier we often dumb down sections of the page that aren’t important, but highlight how pieces will move upon users interacting with them in the browser.
- Showing live video content. A simple example: We can say, “There will be a large video background”:
or we can see the content in motion and avoid any mental disconnect:
If we can take the bit of extra time to get the concept that much closer to what will actually be developed, it paints a much clearer picture visual demonstration of what the final product will be.
- Advanced hover states. In the same way that we’ve created visual style guides for various projects, meant to keep typefaces, colors, and form fields in sync, we’ve begun creating motion style guides as well. “For that button we’ll use this arrow – on hover it should animate as such, on touch it should slide as such, etc.”
“Regardless of workflow” – Our Current Process
Personally, I move from finalized compositions created in Adobe Photoshop directly into Adobe After Effects. Designers are able to create precise designs down to pixel level detail, and then we can directly import the Photoshop document into After Effects.
The primary gain of utilizing Photoshop and After Effects for animated compositions is the ability to have a sloppy workflow.
I’m not worrying about any coding, I’m not worrying about creating finalized assets, I’m not worried about having the proper Javascript libraries in place, etc. I can rapidly have the best animation tools at my disposal and not worry about development needing the files named according to how the CMS needs them. Upon rendering out the animated compositions, I can get a confident nod from the client and the developer acknowledging that we’re on exactly the same page – because they’ve seen the exact concept, not just a portion.
Designing in the Browser
Why am I not pushing for designing in the browser, animating in browser, and having a useful, coded animation ready for our engineering department?
Part ignorance and stubbornness? Yes. But, I’m a firm believer in ‘Sandbox Mode’: “What if the site could have a huge graphic here, or an interactive dinosaur if your hovered over here? Wait, let’s put laser beams up here!” Photoshop and After Effects allows for that.
You’d be shooting yourself in the foot asking too early, “Oh no, HOW is this going to be made?” It cripples design if you’re thinking about float:left and margin-top:25% too early in the creative process.
So for now, I believe Photoshop+Illustrator -> After Effects allows for the largest serving of Sandbox Mode. We’ve internally been exploring Tumult Hype, Adobe Reflow, Edge Animate, HTML5 from Flash, Google Web Designer, and other hand coded options. We’ll keep exploring those, but at my elderly age of 25, I’m already becoming stubborn to ‘what the kids are doing these days.’
Your Workflow?
Tweet at us and tell us how you’ve integrated motion into your web design workflow.
