Creative trend: The rise of interactivity and animation

Creative trend: The rise of interactivity and animation

The days of static web pages, emails and designs are behind us, and with interactivity and animation rapidly gaining momentum over the past few years, it’s safe to say immersive content is here to stay. Offering up richer experiences for customers and users, interactive designs are proving much more effective and engaging, and creative businesses have been quick to adopt the trend and make it their own. So what kind of interactive, animated content have they been creating and how could it affect business and generate better marketing results?

Due to the fundamentals of human psychology and visual perception, ensuring the effectiveness of your visual communications is key – that’s why usability and accessibility are so important to any digital or online experience. Linear, easy to use interfaces, intelligent personalisation and specialisation should be your top priorities when it comes to UX (user experience), and in 2018, interactivity and animation have an essential role in all of that.

As a form of interactive storytelling, these mediums have proved successful with customers and are now an integral part of marketing engagement. Reportedly, 88% of online customers are less likely to revisit a website if they’ve had a bad experience, while 75% of judgments about website credibility centre on a site’s aesthetics. To top that off, a massive 94% of first impressions are based on design, showing just how important it is to create engaging content that offers something unique and different, with interactivity being the key hook to keeping customers engaged with whatever your company is offering.

Interactive creativity

We can’t have a conversation about the rise of interactivity and animation without discussing the actual content that’s being created. While some websites opt to have video backgrounds, this can lead to noticeable performance issues. To overcome this problem, web designers have begun employing background animations – known as ‘particle backgrounds’ – instead of video. Created from lightweight javascript, particle backgrounds let animation form a part of a website’s natural background, reducing load times while still engaging customers in a unique, thought-provoking way. Taking this one step further, so-called integrated animations are another way that designers have taken advantage of browser technology improvements, and are particularly useful for keeping a user engaged throughout the duration of their visit to a website. They can be used to liven up a typically dull loading screen, display something fun and attention-grabbing while hovering over a link or image, or react according to a user’s scrolling and navigation patterns.

Mobile-optimised websites are another facet of interactivity that’s taken hold in recent years. In 2016, smartphones and tablets overtook desktop to become the population’s browsing device of choice. Desktop’s portion of browsing traffic dwindled to 48.7%, while mobile web browsing’s share of the action had risen consistently since 2009. That meant that developers, marketers and eCommerce giants had to respond accordingly – they started to create sites that were just as easy to navigate on mobile as they were on desktop, if not easier. Featuring stripped back, minimalist designs, mobile-friendly sites are seen as nigh-on essential these days, making it even easier for customers to interact with their favourite brands online while engaging with products and content. Likewise, responsive design has even helped revolutionise desktop browsing. These days, websites typically respond to the size of the window they’re being viewed in, and react and resize depending on how the user manipulates them. In the coming years, designers will have to accommodate newer mediums such as AR (augmented reality) and VR (virtual reality), which demand deeper interactivity for users.

But what do actual creatives think to these new interactivity standards and the inclusion of animation in design? We asked our resident Web Designer, Jamie, for his thoughts – “With mobile phones and tablets becoming today’s primary devices for browsing, I think responsiveness is key to giving equal experience to a user, regardless of screen size. And if you want to capture a user’s attention, animation and interactivity are great tools that draw on the curiosity and playfulness of a person’s mind.” Our Graphic Designer, Videographer and Animator, Simon, added “The presence of motion graphics on a web page or email immediately draws a user’s attention and provides an extra level of engagement. Animated GIFs or longer animated videos embedded in the page can also help get an idea across more clearly than a still illustration or icon in some situations.”

How can interactive designs and animation benefit business?

A number of industry marketing studies suggest that brands which utilise animation and interactivity (and have paid particular attention to UX design in general) will see the results. According to one study, one in three people will abandon a purchase if they can’t find the correct information, suggesting an interactive site that responds to a user’s needs and displays information more clearly would retain their custom. Similarly, visit-to-lead conversions have shown to be as much as 400% higher on websites with a better UX design, while a more user-friendly UI (user interface) has raised conversion rates by 200% in some cases. It’s also worth noting that 97% of business customers consider usability to be the most essential component of mobile apps, something that interactivity and strategically placed animation could help companies take advantage of.

If you’re more concerned with email design, polls have routinely ranked interactive emails as the number one email marketing trend. Interactive emails can consist of a news story feed, polls, navigation bars and tabs, feedback functionality and more. In 2015, Ticketmaster trialled an interactive email containing a poll. It let recipients vote for the best music video of the year, best female video, best male video and best rock video, all without clicking away from the email – and it paid off! On top of better than average click-through and engagement rates, the email received 182% more opens than standard email communications. Some companies have even gone so far as to include the ability to place orders within an email, and while few have perfected it, it’s led to an uptick in sales within these communications.

Want to get started?

Thankfully, there are plenty of tools out there to help you bring animation and interactive design in-house. A designer’s first port of call should always be Mac, which is ideal for any creative looking to immerse themselves in animation. Built with enough processing and graphical power to handle intensive animation generation, Apple hardware is perfectly suited to the requirements of modern creative workflows. If you want the best of the best, the brand new iMac Pro is fully equipped to take on 3D animation, which’ll really put you ahead of the competition!

Adobe Creative Cloud, which includes everything you could need to get started (as well as tutorials to lend a hand along the way), is essential if you want to achieve the industry-standard and remain competitive. Popular Adobe apps for animation include After Effects, Animate, Illustrator, Photoshop and new Character Animator. Simon thinks highly of Creative Cloud’s powerful tools, too – “Motion graphics are increasingly simple to produce within Adobe Creative Cloud. The timeline window in Photoshop is great for compiling short sequences, while After Effects has every tool you could ever need to produce longer, more complex animations.” You can find out more about Creative Cloud here, including features, applications, benefits for your studio, and price plans.

If you want to know more, give us a call on 03332 400 888 or email sales@Jigsaw24.com. For all the latest news, follow @WeAreJigsaw24 on Twitter, or ‘Like’ us on Facebook.

Our first look at Adobe Character Animator CC

Our first look at Adobe Character Animator CC

Last month, we took a look at the latest Adobe Photoshop CC features following MAX 2017. This time round, we’re delving into Adobe Character Animator – Adobe’s new live motion capture and multi-track recording app for controlling layered 2D puppets drawn in Photoshop or Illustrator. 

Character Animator allows users to create 2D animations and bring them to life with incredible accuracy. The app actually copies your facial movements, so characters act and react realistically in real time. Once again, I caught up with Xenia – our Senior Designer – to find out all about her first thoughts on Character Animator, what she managed to create while experimenting, and how she’s planning on using the software going forward.

What were your first impressions of Adobe Character Animator?

“The first thing I realised was just how easy it was to go from not knowing anything about animation to suddenly being able to animate easily in a few simple steps – and it looks good! When you first start with Character Animator, there are pre-built options that take you through basic face animation so you can get to grips with it. There are preset characters too, so you don’t have to create your own from scratch in Photoshop or Illustrator first – you can just get started right away. When you click on a preset, it opens up in Photoshop as well as in Character Animator so you can customise it and replace elements.

animator_1

I think it would take a long time to create a character that’s really beautiful in Photoshop, as they’re built in individual layers. As far as I can tell, that’s how Character Animator knows how to target different body parts for animation, whether it’s eyebrows, eyes, nose, arms or whichever. And if I edit a preset animation in Photoshop, it’ll automatically update in Character Animator.

Character Animator screenshot 1

The app uses the webcam footage and audio from your computer to animate various points on your face. First, I had to set a rest pose by looking at the monitor with a neutral face, which helps the animation respond better to any facial expressions.”

What did you create during your first try of the app?

“Well, when you open an initial template, one of them is a blank face. When it loaded up in Photoshop, I experimented with customising the background and eyebrows. I left the mouth and eyes as they were – they require a bit more work and I’d need to capture lots of different facial expressions for Open, Close, Left, Right and more, and as it was my first time, I didn’t want to get too much into them just yet. Once I’d saved my creation in Photoshop, it loaded up in Character Animator and I started animating it with my own facial movements and voice.

animator_2

I noticed that it isn’t quite as intuitive or responsive as I expected it to be – there appears to be a slight delay and the character missed my mouth when it opened a couple of times. However, having looked a bit more into settings and options, it appears that you can tinker with things to make animations much more responsive and accurate. To be honest, I was genuinely surprised by how quickly I picked it up. All I did was watch a few official Adobe tutorials online and follow the instructions in the app. The best thing is that Character Animator does exactly what it says on the tin, and works exactly how Adobe say it will – I’m very impressed overall. It means that people who aren’t very experienced with animation and apps like After Effects can achieve a good standard with minimal skill, knowledge and time.”

Character Animator screenshot 2

What are you excited to do with Character Animator in the future?

“Personally, I’m looking forward to making my own story and animating it! Thinking about future work though, I think it will be fun to bring a dull project to life with animation without adding too much to my workload. I noticed that Adobe have additional preset characters available for download, so I’ll definitely be experimenting with those when I can. And the app lets you add animated characters into live streams that respond to your facial movements in real time. That could be great for a future social media live stream or something like that.”

If you’d like to find out more about the latest Adobe Creative Cloud updates, give us a call on 03332 409 306 or email adobe@Jigsaw24.com. For all the latest news, follow @WeAreJigsaw24 on Twitter, or ‘Like’ us on Facebook.