Just because we live in a digital age, it doesn’t mean that design has to follow the same visual language. In fact, on the contrary. We may be surrounded by microchips, robots and other electronic components (who even knows which ones?), but we’d rather not see too much of what goes on behind the screen. If all websites were filled with very technical imagery, we probably wouldn’t be that keen on using them. That’s why these days, almost every tech brand incorporates illustration and animation in their assets. This adds a personal touch and reminds us that a human hand created it. But it’s not only major businesses that can benefit from the incorporation of mesmerizing visuals and animations. Illustrator Ariel Wollek and motion designer Gur Margalit share their experiences and insights into this wonderful world. Read on for a drop of inspiration, design trends and a roundup of how and why you should be using illustration and animation in your web and mobile design.
Illustration inspiration in tech brands
Whether you’re just starting out in the field of digital illustration or are already a pro, a bit of inspiration is always a good thing. From Facebook’s mainly flat illustrations depicting people in familiar everyday situations, to Shopify’s new look that uses just four colors, illustration is popping up pretty much everywhere. Brands are constantly renewing and adapting their illustration style, indicating just how popular and dynamic this field is. Google even combines different illustration languages on various products at the same time, giving each one a distinct look and feel. Google Home has a flat and simple geometric appearance, whereas the Google Calendar backgrounds are more naive and textured. With such strong branding, the range of styles connect together magically, creating a united vibe that is fun, fresh and unique.
Some brands are also collaborating with top illustrators – a phenomenon that further highlights the importance and relevance of illustration today. InVision have done just that, working with British illustrator Jack Daly on some of their recent projects. Using monochromatic color palettes and dramatic lighting, Jack’s works really draw you in, connecting you to the content and telling you a story. They present people in various scenes and situations, such as evening walks on the moon and urban views.
Another brand that is always working on updating their visual language and identity is Dropbox. Their relationship with illustration goes way back to their early days. Their new concept is to represent a space in which creative work-in-progress happens, inspired by the immediacy and intuitiveness of sketching fresh ideas. The illustrations manage to capture the brand’s philosophy and convey a sense of surprise, delight and possibility. By incorporating hand-drawn details and a starting with a ‘base layer’ of collage, the imagery conveys the hand and mind of its maker.
Why you should use illustrations on your online assets
Other than the fact that they can be beautiful and are great for catching site visitors’ attention, here’s why incorporating illustrations in your branding isn’t a bad idea at all: – Simplifying complex ideas: Illustration gives clarity to complex ideas and delivers messages instantly, saving the user valuable time as a result. – Brand strength: Illustration captures the values and traits of a brand in a single voice, shifting the tone depending on the situation. – Strong visual identity: Adding illustrations to a brand provides a powerful tool to enrich the brand’s visual identity, both conceptually and technically, providing another visual layer for the design.
Illustration trends in brands’ websites and apps
With the growing presence of illustration in brands’ websites and apps, there are a few trends that we’ve detected: – Botanical motifs: The use of plant imagery in digital illustration is most certainly blooming like cherry trees in the spring. It adds an organic, flowing feel to any scene, which adds a nice touch to the often technical subjects and geometrical shapes. It’s also part of a bigger trend – floral, tropical & botanical design, which is a whole subject in itself. – Textures: In many cases, we see the use of Photoshop brushes in the illustrations, giving a textured look and feel, similar to the use of grain in motion graphic trends. This contrasts with the technical content and devices on which they are viewed. It also gives the illustrator the opportunity to show originality and versatility in a world of mostly flat illustrations. – Realistic content: Web illustrations are now focused on people going about their everyday lives – talking on the phone, cycling, working and more. This helps the users connect to these characters, the situations they’re in and eventually to the products they represent. – UI elements: Another trend we can see is scenes showing human characters interacting with UI elements (such as buttons and wireframes), as if they were real tangible objects. These scenes serve to emphasize the accessibility of the product and the interactive side of it. – Combining illustration with animation: This enables a whole new world of possibilities, adding life and movement to any website. Illustrators and animators often work together (like us, for example!), so that the illustrator can know how to adapt their work to suit movement.
From talking ducks to animations with a purpose
We all know and love the classic cartoons such as Disney’s early projects and the first commercial films that made animated stories using personified animals as the main characters. All of us have a little soft spot for those furry loveable creatures and the sticky situations they often seem to get into. Disney’s creators had an outstanding ability to express feelings and evoke emotions and empathy with a range of animation principles that were cutting-edge at the time (ease, bounce, stretch and squash, speed, anticipation, etc.). Although motion graphics in advertising, television and the field of broadcasting have come a long way since the early days of animation, their roots can be found in those basic principles and foundations that we believe Disney are responsible for. Nowadays, motion design involves abstract graphics and typography to deliver more informative messaging and is very prominent in the world of web. Let’s take a look at what motion design for web, micro interaction and interface animation really involves and why it matters.
Why you should incorporate animation in web design
At the end of the day, motion is all about telling stories. Everything in a website or an app is a sequence, and motion acts as a guide, subtly pointing users in the right direction or indicating what their next step should be on your website. For every screen transition and button clicked, there is a sequence of events, or a story, that follows.
The days of animation being used simply as decoration on a website are long gone. Animation is one of the most important tools for improving a website’s user experience and is used to create successful interactions. That’s why it has a place of honor in UI and UX design. With the rapid growth of the mobile market and performance improvements, animation has become even more popular and diverse. It’s a powerful way to make a product’s interface clear and simple. That’s why it’s no wonder that animation is everywhere. Tech companies of all shapes and sizes are putting big efforts into improving user experience through motion and animated interfaces; Google Material has created a motion guide, Microsoft’s products are highly animative, IBM has developed a fascinating approach to animation and Facebook and Instagram also have a huge micro interaction system.
The main functions of animation in web design
To better understand the different uses of animation in web design, we usually divide motion into three main categories: 1. Micro interaction: This is probably the most useful type of motion design in terms of user interfaces. It’s a great way to make interaction quick and clear for the user. Microinteractions are implemented on a variety of elements that the user interacts with, such as buttons (hover, active, error etc.), loaders of all kinds (like the loader featured below that we created for the Wix Logo Maker), switches, knobs, menus, calendars and much more. Today we can even see them being used in physical products like the interfaces of fancy cars. 2. Transitions and page behaviors: This is about the choreography of bigger parts of the interface, like navigating from one point to another and switching between different screens. This can be a matter of positioning elements on stage, morphing between graphic shapes or just good old cutting between the different states. 3. Delighters and decoratives: Everyone likes being pampered and feeling like someone’s gone that extra step for you, especially when that extra step involves the winning combination of animation with illustration. These little touches are often used to create original, creative and catchy visuals for better user engagement throughout the interface. Designers use characters and real-life imagery to add a sense of life to the interface, help create the right tone for specific actions and grab the users’ attention.
Convinced? Start adding illustration and animation to your website right away!
