It’s quickly becoming apparent through its increasing popularity in mobile and web UI that designing transitions as well as crafting movement and animating elements are crucial to enriching the experience of an app or site.

Motion has every bit of influence on a user’s cognition, as does a palette of color or the setting of type. The timing of transitions has the ability to convey the emotions of your brand in addition to compelling users to stay engaged in your storyline. After all, for decades film directors have mastered the special ability of framing human emotion through the speed, type and style of camera motion.

By understanding the power of motion and movement, designers can utilize these tools to keep users on the edge of their seat – eagerly awaiting what sort of experiences an app or site has to offer. Check out the examples for remarkable websites with mood evoking animation.




http://createdm.com/
In their homepage slider, CreateDM injects spirit into elements with animations that mimic real life movement and behaviors. The pumping hearts, the light switching on, and the compass tipping over provide comfort and delight to users through the familiarity of their own environment and life experiences.




http://squareup.com/
Square’s homepage slider features subtle movements between blurry background environments and a focused user interface. These serene movements serve as a visual connection tying together the realistic interactions and the simple experience of using the app. Square’s ability to utilize motion creates a genuine ambience that drives credibility and delivers insight to the benefits users can expect to receive from their product.




http://space.angrybirds.com/launch/
AngryBirds Space leads users through content on a low-gravity journey across an intergalactic realm. Rovio, the creators behind the AngryBirds app, utilize this design to reinforce brand consistency with content transitions and character movement that reflect the physics seen in the actual mobile game. The various parallax sections within the vast space environment allude the multiple stages and extraordinary adventures a gamer will experience when playing the game.




http://get.wunderkit.com/
WunderKinder introduces the features of their app through an amazing sequence of steps. Each step is timed perfectly to allow the viewers to take a moment and learn about the many uses of Wunderkit. The crafted transition of elements perform well in attracting attention and guiding users through the benefits of the app. Also as a special bonus, the graphics in their individual steps contain app-like animations that deliver a level of tangibility to the experience.




http://slaveryfootprint.org/
The beginning of SlaveryFootPrint.org prompts users with a single question. Selecting the answer to the question initiates an introductory animation and inserts a pause that prepares users in anticipation. As a user scrolls down, sections of content slowly fade from the sides of the screen to simulate a live dialogue in an empathetic tone. Slavery Footprint also incorporates subtle transitions of breaking chains and moving hands which reinforce compassion to their users.




http://jamesanderson613.com/
In just the first few seconds, JamesAnderson613.com creates an energetic environment with slow-fading introductory sentences and quick moving information points. As a user scrolls down, their attention is drawn to the content which fades into the bottom of the screen.




http://www.nike.com/jumpman23/aj2012/
The Fly Around campaign by Nike introduces users to an intense, fast-paced experience with swift section transitions followed by a slower ease-out of content. The high-speed journey matches well with the product identity solidifying a lasting impression to web visitors.




http://assets.wwf.org.uk/custom/foodstory/
Food Story from the World Wildlife Fund engages users with interactive elements by presenting slight bounces when a mouse hovers over them. The slow transition of content from the right side of the screen prepares users to begin reading the facts at the top of the screen. Slider controls within each section will bounce objects in to view which keeps users engaged and curious to learn more about the subject.




http://www.shoutdigital.com/
Shout highlights their personality through the playful animations of illustrated characters. Each character exudes their own signature movement which brings light to Shout’s creative imagination.




http://www.soleilnoir.net/believein/#/start
SoleilNoir offers an intriguing experience beginning with a sequence of text leading to a pulsing Scroll arrow. Moving downward through the site takes users into a colorful adventure, featuring objects replicating real life movement such as a moving bike and even an eaten cheeseburger. By creating familiar motion in their design, SoleilNoir is able to induce feelings of comfort which help to strengthen readability for their users.




http://www.nintendo.com.au/gamesites/mariokartwii/#home/
Nintendo’s parallax raceway invites users into a high-speed environment filled with action. Billowing smoke, flying turtle shells and multiple crashes give users a sneak peek into the invigorating fun they’ll receive when playing any of the games from the Mario Kart series.




http://www.bagigia.com/
Bagigia begins with a blinking mouse button inviting users to scroll down where they introduce their product through a series of fading sentences. In order to aim complete focus to their product, the top navigation bar is kept hidden, and it only bounces in on hover.




http://www.dangersoffracking.com/
Scrolling down on Dangers of Fracking enables content to slowly fade in, educating users about the awareness of hydraulic fracturing. Since this is an informative and serious subject, the slower transition of content gets the message across in a clear and simple manner.




hhttp://www.ghosthorses.co.uk/
Ghosthorses features interactive elements to entice users every step of the way throughout their website. From the buttons to the images, their use of animation complements with their confidence and expert attitude.

“People have always been pushing what we can do with our technologies. The best results have always been defined by the limitations of what’s possible.”

-Andy Clarke

The appropriate level of animation enhances the user experience, invites the interaction of your viewers and makes your brand, website or application remarkable. As browser capabilities continue to support new advancements in web technology, the boundaries preventing rich user experiences begin to fade away. As for us designers and developers, staying close to the edge of limitations allows us to be among the first to enjoy utilizing powerful and amazing techniques to better the experience of our users.

Comments