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.

Video: Our design team on working with Wacom Intuos Pro

Video: Our design team on working with Wacom Intuos Pro

Ask any designer nowadays and they’ll tell you their Wacom is indispensable to their work. Ask our design team, and they’ll tell you why they’d like to snog theirs. Find out how they’re using Wacom Intuos Pro in design work as diverse as print, web, illustration and animation in this video… 

interested_orange_button

Want to know more about the Wacom Intuos Pro range? Give us a call on 03332 409 306 or email wacom@Jigsaw24.com. For all the latest news and reviews, follow @WeAreJigsaw24 on Twitter or ‘Like’ us on Facebook

Weekly design inspiration: CSS interaction, a trip to Mars and Geocities

Weekly design inspiration: CSS interaction, a trip to Mars and Geocities

Our design inspiration theme this week is the web. We’ve been looking at our favourite examples of web design, creativity and history– we’ve even tried to be a bit topical, with the Solar Eclipse having just taken place and slip some space themed content in their too. Our web inspiration features some darn cute transitioning animals, a trip to Mars and a website that tells you how many times you flush the toilet at work (we’re not here to judge)…

In pieces

We start off with this lovely CSS-based interactive exhibition celebrating evolutionary distinction. There are 30 animals (all endangered) to work your way through – the Pygmy three-toed sloth looks very jovial, look at him waving away! This is a really great concept and website, the only slightly disturbing element is when you click “what’s the threat’ and the animal appears to explode – poor three-toed sloth. We’d recommend a read of the ‘How it’s made’ section, to see how the animals are being manipulated through a set of co-ordinates with CSS transitions to link up the movements.

CSS-based web design

CSS-based web design

CSS-based web design

In pieces by species-in-pieces.com

How far is it to Mars?

This morning we all stood outside with our mugs of coffee and waited patiently for the moon to get a jog on and cover the sun. When you think about it, space is pretty inspirational, so we were loving this neat little website that put into perspective how far away Mars is, by using an Earth 100 pixels wide. In case you were wondering, if the Earth was only 100 pixels wide, Mars would be 428,000 pixels away, and the Moon 3000 pixels away. We particularly like that during your trip to Mars you’re entertained with a selection of fun space trivia.

Web inspiration, distance to Mars

How far is it to Mars? By distancetomars.com

Sid Lee Dashboard

Who said black and white was boring? There’s certainly plenty to look at and keep you occupied for a good 15 minutes on creative agency Sid Lee’s website. Broken down into a grid, the website features the activity in the office, including the temperature, number of coffees poured and even how many goals are scored on the table-football. At first we were adamant that this wasn’t genuine, but after watching the company’s accompanying video – we are genuinely baffled! Do they seriously record how many times the toilet gets flushed in a day and put it on their website? You can click on each of the elements to open up a graph of when the activities were carried out – apparently at 4am this morning the water fountain was proving popular.

Wed design, Sid Lee creative agency

Web design, Sid Lee creative agency

Dashboard.sidlee.com

6 totally wrong early predictions about the internet

In 1969 a series of predictions were made about the future of the internet, and while we may laugh at them now, at the time, these seem perfectly legitimate things to claim. The list includes ‘people will never just sit and stare at a screen all day’, ‘no one would ever buy a damn thing over the computer’, and our favourite ‘the Internet will end…in 1996’. There’s also a video to go alongside these statements – take a listen, we guarantee you will be slightly amused!

6 totally wrong early predictions about the Internet via smosh.com

Long live Geocities

Our final piece of inspiration for this week is a good one; we’ve definitely saved the best till last. The One Terabyte of Kilobyte Age is attempting to capture and archive the few remaining Geocities out there, and their Tumblr includes screenshots of home-coded masterpieces that have, sadly, fallen in the maw of Yahoo Small Business. For those of you not aware of the wonder of Geocities, you need to take a look at how we were making websites in the 90s (apparently you can still make Geocities in Japan). Here’s a selection of our favourite…

Web design, Geocities

Web design, Geocities

Wed design, Geocities

Geocities via Tublr

Drop back in next Friday to see more inspiration from our design team. Found something you think should have made it into the list? Pop it in the comments box below. In the meantime, check out our new and improved Design and Publishing homepage and our dedicated Adobe Creative Cloud hub. For all the latest news and tips, follow @WeAreJigsaw24 on Twitter or ‘Like’ us on Facebook.

 

Adobe tools for the computing curriculum

Adobe tools for the computing curriculum
Michael Gove may be gone, but the 2014 computing curriculum lives on, replacing traditional ICT lessons with a more practical (and, let’s face it, more useful) focus on problem solving, computational thinking, and coding.

We’re big fans of this development, but a lot of the schools we deal with have mixed feelings. Staff like the computing curriculum in theory, but don’t think they have the skills or equipment to teach it effectively, especially when it comes to integrating coding into the rest of the curriculum.

Luckily, there’s no need for you to start crowbarring turtle graphics into GCSE art lessons. There are tools out there that can help you give your students a more technical understanding of creative technology, without taking the focus entirely from art, design or whatever else you’re trying to teach – and if you’re using Adobe software, you may well have most of them already.

Dreamweaver, Fireworks, Edge and Muse
Of Adobe’s current crop, the programs you want to focus on for teaching creative coding are: Dreamweaver, which allows students to design and publish web pages; Fireworks, for prototyping and optimising web and app designs for different devices; Edge Animate, a tool for animating Photoshop and Illustrator-created graphics using HTML5; and Muse, a simple, mostly drag and drop interface for creating simple websites.

All of these programs are intended to help non-technical designers, which actually comes in really handy when you move them to the classroom. The focus of the lesson stays on your subject, rather than it becoming a fully-fledged IT lesson, students who are less technically able can use the shortcuts in the software to ensure they can still participate fully, while those who are more confident can use CSS3, HTML5, JavaScript and PHP to push their designs further, or use this as an opportunity to focus on user experience design and usability and how this should inform their IT work. Here are a few of the goals we reckon Adobe can help you hit…

Working with a range of applications and devices
The holy trinity of InDesign, Fireworks and Dreamweaver all contain tools that’ll let you remodel work for different screens, browsers, tablets and phones. This is a great starting point for conversations about responsive design and the changing IT landscape – how are people accessing content? What new things do students need to consider, as developers, as a result of that? How do they make sure they have a design that is simple enough to translate, but still engaging and interesting? Do they know how to build swipe functionality into mobile versions of their content?

It also means that when you send them out into the working world, they’ll be used to taking these (very important) factors into consideration, and have experience with a wealth of devices to draw on – both great pluses for any job-seeking student!

Creating, re-using, revising and repurposing digital artefacts
The interoperability of all your Adobe software makes this one a breeze. Images you’ve created in Photoshop, Illustrator or InDesign can all be added to web pages using Dreamweaver or Fireworks, and you can encourage students to repurpose their content for different devices. For example, they can create a web page for desktops, a mobile version that anyone on a smartphone can see, and an app version (complete with touch controls) for anyone who’s looking at the content on a tablet.  You can make this even easier by using Edge Animate to create a series of templates that students can work with or modify, or encourage them to create and share their own.

Self-expression and developing ideas through ICT
“Design and build a web site” pretty much hits this on the head, and that’s what Dreamweaver, Fireworks and Muse allow students to do. They can combine creative work they put together in Photoshop, InDesign, Flash or Edge Animate with functionality they’ve developed using CSS3, HTML5 and jQuery tags in Fireworks and Dreamweaver to create a fully featured, multi-platform project with as much functionality as they can pack in, with tools like W3C validation on hand to make sure they stay focused on creating user-friendly, accessible pages that meet professional standards.

Practically applying IT skills to a range of creative projects and media
CSS3, HTML5, JavaScript/jQuery and PHP are all used throughout Adobe Dreamweaver, Edge and Fireworks, so students can practise working with a range of languages and optimising that content for different devices, browsers and screen sizes. Adobe’s preference for very visual interfaces that offer a code-free way to edit page elements means that students who are less technical can get a clearer idea of which parameters affect which page elements, then tackle the code itself once they’re more confident.

So how so you plan these lessons?
One of the best things about Adobe’s education offering is that it includes access to the Adobe Education Exchange. This is an online portal packed with training programs, curriculum advice and lesson plans to help you get the most out of your Adobe software.

Both Adobe experts and other teachers can contribute, so it’s a good way of gauging how other schools are embedding technical and creative skills across the curriculum, and the resources are guaranteed teacher-friendly. You can even download sample files showing how to complete different types of project, such as creating your own textbooks or building multi-page apps.

It also includes resources for the 10 week Adobe Train the Trainer course, a series of self-paced lessons that act as continuing professional development for Adobe users.

 

Just want to code? Here are some of our top apps to try…
Cargo-Bot (Two Lives Left, free) – This former Jigsaw24 App of the Week teaches programming by asking students to create simple routines to activate a robotarm. Great for gauging pupils’ coding skills when they enter KS3!

 
Codea  (Two Lives Left, £6.99) – The programming app used to make Cargo-Bot, Codea allows you to create apps, games and simulations directly on to your iPad. It includes visual editors as well, so is perfect for beginners who want to grasp the basic concepts before moving on to more complex coding.
 

Scratch 2 Games (David Phillips, 69p) – If you’re using the web version of Scratch to teach students coding, these video tutorials on game creation are a must for teachers and students. 
 

Codeacademy’s Hour of Code (Codeacademy, free) – This app encourages pupils to work through the vocabulary and grammar of coding as if they’re learning a language. They take on one small step at a time, building on previous knowledge, and are introduced to the concepts and terminology behind their favourite apps and websites.
 

Want to know more about your Adobe options? Get in touch us on 03332 409 333 or email adobe@Jigsaw24.com. For all the latest education info, follow @Jigsaw24Edu on Twitter or ‘Like’ us on Facebook.  

By

What’s new in QuarkXPress 10?

What’s new in QuarkXPress 10?

Quark have just shipped the latest version of their flagship design package, QuarkXPress 10. According to Quark, it’s been “redesigned from the inside out”, giving you access to a new Xenon graphics engine, HiDPI support and a far slicker workflow. Here’s what you need to know about the key features (and the new upgrade plan).

QuarkXPress 10

QuarkXPress 10

The new features

Xenon graphics engine – The new Xenon graphics engine is intended to let you make the most of your computer’s processing power to give seamless graphics performance – think of it as their version of Adobe’s Mercury engine. The improvements you should notice include faster rendering of rich PDFs, Photoshop files and TIFF images, even if they’re not at their lowest resolution, so you can work far faster.

HiDPI and Retina display support – With Apple rolling out Retina displays left, right and centre and ultra-hi-res images becoming common across the creative industries, Quark have done us all a favour and added support for these super-smooth images in QuarkXPress 10, whether you’re working on those screens or just creating work for them.

A brand new GUI – Cleaner, clearer and with a full screen view that lets you hide even dockable palettes, QuarkXPress 10 has been designed to ensure nothing gets between you and your image.

PDF pass-through transparency – This update is designed to help you create flatter, more device-independent PDFs, so work can be shared, edited and approved by colleagues and clients on the go. Any QuarkXPress objects you add can now interact with placed PDFs, which Quark hope will help you maintain a more transparent workflow.

QR code creator – If you need to get people from a print element of your campaign to the web quickly, this is for you. QuarkXPress 10’s QR code creator lets you generate vector QR codes directly in the program, then style and colour them however you want. vCards, URLs and SMS are all supported.

Layer Enhancements – As layers are now supported in master pages, it’s far easier to make them an integral part of your design. Paste in QuarkXPress 10 also has the ability to remember layers, and automatically create new layers in your target layers if what’s there doesn’t match its memory.

Highlight missing fonts – Worried some of your text uses a missing font? QuarkXPress 10 will helpfully highlight any text that’s lost its font for you – you can even choose your own highlighting colour. Lovely.

Improved support for Japanese, Chinese, Simplified Chinese and Korean typography, including IMEs – Unlikely to be relevant to anyone reading this blog, but we approve of the effort. Our Thai typography could still use some work, though…

A warning to QuarkXPress 8 users: you only have until December 31st to upgrade!

After this release, Quark are amending their upgrade policy so that you can only get discounted upgrades from one version back. Anyone using QuarkXPress 8 can upgrade to 10 at the lower price until December 31st 2013, but after that you’ll have to fork out for a new full licence. This also means that you’ll only be able to upgrade to the inevitable v11 from v10, v12 from v11 and so on, so in the long term you’ll save more if you get (and stay) up to date.

QuarkXPress 10 on Jigsaw24

Want to know more about QuarkXPress 10? Get in touch on 03332 409 306 or at sales@Jigsaw24.com. For all the latest news and tips, follow @WeAreJigsaw24 on Twitter or ‘Like’ us on Facebook