by Ryan Beckham
The world wide web is one of the most volatile areas in design. As smartphone and tablet usage continues to blow past desktop computer traffic, our expectations on how the web works continue to change rapidly. To make the user experience consistent between handheld devices and large monitors, websites are now designed to change fluidly from screen size to screen size without users ever noticing. Large textures and images are removed so websites remain light enough to load quickly over cellular connections. And content is now simplified so that users can easily find what they are looking for.
For the most part, this simplification has been great for web design. But while we see fewer websites that look like electrifyingtimes.com (thank goodness) have you noticed that 2015 was the year that many new websites started to look strangely similar?
So how can we create a better website? A website unique to the company that owns it. One that engages customers and gets them the information that they need, while being fun and easy to use. The answer? Making the website more interactive through simple animations.
Decades ago, Walt Disney Studios introduced 12 simple animation secrets that were necessary to bring life to inanimate objects. These guidelines helped skyrocket Disney to international fame over the years to follow, and the rest, as you know, is history. Fast forward nearly a century and the tricks Disney brought to life are now helping propel modern web design.
Well-considered motion in interface design gives designers the chance to tell a story through more than just static images. By taking Disney’s lead, we can recreate human motions and emotions for just about any element on a website. These movements help a webpage feel smoother, quicker and more intuitive. Animation also introduces a new dimension to the interface that helps provide context, and in the process makes tasks more enjoyable and engaging. “In a study, participants who visited an interactive antismoking website were more likely than controls to say that smoking was an unattractive behavior, and more likely to agree with the site’s stance against smoking.” (Source)
The most common use of animation is in transitions, but there is room for so much more. Look for ways to incorporate elements that are beyond the obvious. Google has captured this idea perfectly with their rebrand.
Google’s new logo has the ability to transform into four separate dots. Each dot zips around and moves in various ways that express distinctive emotions. The dots can express the idea that it’s listening, speaking, recording sound, replying, confirming, or not comprehending a user’s request. By simply rotating a few dots on a screen, Google’s new logo can be used in a variety of contexts that weren’t possible before. The dots have nothing to do with any of the input a user might try and put it. They simply enforce the impression that Google is processing exactly what you want it to be doing.
Digital tools are quickly evolving and impressive websites will become more prevalent as technology advances. Let Pivot help your website be more of a digital experience than just a website.
Here are a few great websites you can look at to get a better understanding of the next generation of web design: