The web is something that is, and will always be, constantly changing. Along with these changes come advances in interactive content and technology. These developments, in turn, create design trends in the web. One of the most recent (and most talked-about) trends has been responsive design, and the demand for mobile-friendly sites has been high lately. Now, we are at a turning point. Google is requiring you to have a site that mobile users can enjoy or you'll be penalized in their rankings. Thus, responsive design and development is a must. We are now at a point in time when the term responsive is (and should be) folded into the meaning of the term "website."
Since we are now moving out of the responsive push, we designers must ask ourselves, "What's next?" Before we answer that question, though, we must look in our toolbox and decipher what the next trend is and determine the correct way to push it. So, what do we have?
- An ever-growing library of standardized web tools
- Internet infrastructure that’s becoming more sophisticated (Internet speeds)
- Smarter search engines
- Content that’s becoming more interactive
- Analytics that are becoming more precise
This toolbox allows designers to keep up with the times and push ourselves to make bigger and better things. My personal belief is that the web will see a push in animation, interactive content, and user experience (UX). In the past, this was interactive flash sites, but now that those tools are only holding a small niche in the web, what do these things look like?
Here are some ideas to push the trends for the post-responsive age:
Get Rid of the Webpage
Flat design is slowly fading out of the web scene and UX/UI design is fading in. Stop thinking of your website as a flat surface to paint on. Remember that the backend guys have been working tirelessly to make your dreams (within reason) come true. You should also remember that users are going to tap, click, drag, scroll, like, and share on your site. Your site is an avenue for your user to interact with your company or brand. At Papercut, we try to keep coming back to this. Interactive is in our name, after all.
Make Your Content Engaging
Content is always king, but now that clicks are counted like dollars, you should make them worth every penny. Spend a little extra time thinking through how the user will interact with your content. Does a button simply have a hover state and link to the next page, or does it lead to a new section of your site that opens the user's eyes to your service or product? Does an image sit flat on a page or does it open a gallery that shows what the subject is really about? Design with the user in mind. Think about the simplest action and then think about how meaningful that action can really be.
Use Animations as Part of Your Brand
Using an animation that fits within your brand will make your content placement feel deliberate. Heck, even using a lazy-load plugin will help make the content feel more at home on your site. Animated content will draw more attention and create a more meaningful interaction with the user.
Some Examples: Logo Animations
Approaches for logos on the web have already gone responsive, so maybe it’s time to make them more than just a mark on a web page. I usually look at logo animations on videos and commercials. You see this type of thing all the time in commercials and video ads, so why not on the web? As designers, we have the technology and power to make your brand come to life on the web.
Check out these Turner Media brands and see for yourself how animation really makes your brand come to life.
I would also like to add that Google has now added an animation to their logo.
Another Example: Web Transitions
Mountain Dew is always pushing its limits. Note how the animations that pull content into the viewport fit the edgy brand while the content is easy to read.
Format D is a German interactive studio that has a pretty nifty site. Check out the logo as you scroll down the page. Also, the infographic at the bottom of the page shows some nice animations to draw focus.
Make it Better
In closing, take some time to think more about the interactions on the sites you're making. Fit those interactions into your responsive site if you can and start making the biggest and best thing possible. Your site will stay up to date in tech and trends, you’ll delight your users, and you'll help push the bounds of what the web can be.