This is, in my opinion, the most useful kind of animation that we have available to us.
I don’t know whether this is the most common type of animation, though, at a guess, it probably is. Let’s start by looking at the different types of animation typically used on the web: Interface element animation If your animations are so resource-heavy that they weigh down your users’ mobile devices, or worse, their desktops, you’ll have a problem. So too must the actual details of the implementation be considered. For us, it’s becoming the basis of effective interaction design. In film, it became the basis for a whole new kind of storytelling. Now we’re trying to increase usability, inform and educate users, and to make it easier for them to figure out what they’re doing.Īnimation is no longer a novelty for web designers. Now we’re looking for ways to do more than add style to websites. In 2009, the first public draft of the CSS animation spec was released.Īnd now? Now we’re finding ways to force hardware rendering, combine CSS animations with SVG files, JavaScript libraries to extend the basic animation functionality, and more.
Others only used JavaScript because that’s how FrontPage and DreamWeaver swapped button images, but slow progress is still progress.īy the middle of the last decade, however, the W3C was already working on including animation in the CSS specification. It was more SEO-friendly, after all, if you did it right. Even now, I find those things very addictive.Īs time went on, many designers moved over to JavaScript-based animation for the smaller things, like dropdown menus and other navigational elements. It expanded creative horizons, created jobs for people in a brand-new industry, gave us “web cartoons,” and the greatest thing to ever happen in the 90s (besides Nirvana): Flash games. No matter how badly it was abused later on, it must be acknowledged that Flash allowed us to do things with the Internet that we had not known before.
Let’s not forget though that Flash was pretty amazing for its day. It was Flash which allowed us to learn that lesson the hard way. How awesome would it be if people opened up your web page, and your favorite song was playing? And, like, the actual song… none of that MIDI crap, right? gif files were exhausted, people wanted new and better ways to add animation to their sites. There’s never been a better time to to focus on animation in relation to web-based interfaces and apps. It was all about bringing a little style, and a little bit of life, to the otherwise static realm of the web page. Mind you, most had probably not yet considered the ways that animation could enhance usability. Still, if the popularity of gifs showed us anything, it was that people wanted to bring animation to their web pages. Thus began the era of dancing babies and other horrors best forgotten. They were introduced in 1987, just in time for the early days of the Internet as we know it (more or less). gif files are, it turns out, older than I am by about two years. We might not be using far too many leather textures anymore, but we’re still trying to imitate the real world.īefore we get onto more practical things, let’s take a look at how animation on the Internet came to its present (and very cool) state. When used right, animation is designed to mimic real-world interactions. This triggers the same feelings (or at least very similar feelings) in them as the ones they experience when they interact with physical objects. They have successfully interacted with the interface, and have caused something to change. That illusion of motion, when applied correctly, is what tells the users that they have actually done something. This would be why people are always saying things like “animation makes our websites (or presentations, or whatever) come alive.” It might be overused, but it’s a phrase that elegantly captures the purpose of animation in web design. It’s the closest we get to capturing life in our art. Animation is no longer a novelty for web designers…it’s becoming the basis of effective interaction design.Īnimation is change, and motion.
0 kommentar(er)
