The first animated movie created in 1906 was a revolutionary step forward in storytelling. Every year, the technology behind motion in storytelling grows more impressive, and the same will remain true in 2018. Web designers are leaving older technologies behind, opting instead for more advanced 2D and 3D motion graphics.
Animation for 2018
Business owners and web developers have begun abandoning Flash for HTML, CSS and JS to create their websites. Installing Flash on sites has been phased out for technological reasons. First, Flash is not supported by iPhone, iPad, or iPod Touch and does not load well on any mobile device. This transition alone can severely cut down on traffic to a website. The second important reason that Flash has been phased out is that Google’s indexing system had omitted it. Search results featuring Flash are negatively affected. The last reason is economics; Flash is proprietary software and designers must pay for updates.
The combination of 2D and 3D motion graphics has also become popular in the last few years of technological advancement. Theses graphic types have been found to be more engaging for users’ short attention spans, but also add visual interest to an otherwise flat screen.
Ease of Access
Animation has become more straightforward for web designers to implement. From simple gifs to longer videos, there is an abundance of innovative open-source software to use in creating animations. Many business owners are capable of producing these designs without the help of a professional. Animations are trendy, engaging, and modern. To remain competitive in a market, websites are well served to include animations, however small, on their sites.
For the new year, there are five innovative and immersive ways to include animation that will drive traffic to a website, all requiring the use of HMTL and CSS.
#1 Logo Manipulation
A simple way to add animation to a site is with logo manipulation. Think about Google and its near-daily change of logo creations. The movement and differing logos draw user attention where it would otherwise not be. The moving logo has become the newest design trend, and it is not a good idea to be left behind. Lottie is a great app designed by Airbnb that can move or alter images already on a screen. Rotating, transforming, expanding, and reappearing logos are simple to create and will make a world of difference on a website.
#2 Kinetic Typography
Kinetic typography is defined as “moving text.” The design and movement of the text are created to invoke certain feelings or attitudes. This common animation is encountered daily on commercials, digital billboards, or website landing pages. The trick with this type of animation is finding a way to integrate it into an overall design effectively. Font, size, movement, and colour are all aspects to take into consideration. For example, a beach resort’s web design could include movement in arcs or waves, to invoke emotions associated with the ocean. A small amount of creativity can be extremely useful in the design process.
#3 Hover Effects
Another simple way to add motion to your web design is to add the hover effect. Hover animation occurs when the pointer of a mouse transforms something on the page. Online stores showcase this technology often; scrolling over an item for sale will reveal the price, without the need to click a link. It is also possible to use the hover effect to change graphics into something else. If a bird is perched on a page, a seamless scroll could send him flying away. Simple ideas can sometimes be the most personable and charming to your internet traffic audience.
#4 Animated Map Marker
Most companies feature a map link to their business on their website. Dropping a marker on the map is another effective way to liven a page. Map markers can be created using Google maps and simple JavaScript. If a designer is looking for something more elaborate, there are tutorials online to code CSS map markers. Designers who are familiar with the program can then manipulate the marker by having it swoop, creating hover animation, or changing its colour.
#5 Animated Documentaries
Although more time-consuming and challenging to create, animated documentaries are an engaging and creative way to bring life to web design. This format can be created to bring social and political issues to life. In late 2017, an animated documentary was released to high acclaim. Tower tells the story of the country’s first mass school shooting in 1966 Austin, Texas. The appeals of this format include the draw of creative crowds and the ability to relay issues effectively.
Creating Motion Is a Necessity
The importance of integrating motion into web design cannot be overstated. Billions of websites exist in today’s modern world, with a large number of them already using motion to their advantage. Outdated sites without motion or using Flash fall by the wayside and do not receive traffic as they should be. When users come across motionless, lifeless websites, chances that they will not stay long on the site.
Today’s consumers, and millennials, in particular, have dwindling attention spans, especially as technology creates more avenues for stimulation and personalisation. Users are constantly bombarded with information, and stagnant screens fail to help them become engaged; movement on the screens is key to keeping their attention. Hiring a web designer is an option if a business or website owner is not technologically savvy enough to create motion on their site. An investment in this area can do wonders for your UX and enhance your digital brand.
Want to learn more?
Are you interested in the intersection between UX and UI Design? The online courses on UI Design Patterns for Successful Software and Design Thinking: The Beginner’s Guide can teach you skills you need. If you take a course, you will earn an industry-recognized course certificate to advance your career. On the other hand, if you want to brush up on the basics of UX and Usability, try the online course on User Experience (or another design topic). Good luck on your learning journey!
(Lead image: Depositphotos – affiliate link)
