This year, the web will take on a life of its own.
With the huge shift in focus from disseminating information and shoehorning product advertisements to the ultimate user experience, we are looking at a year full of some truly marvelous creations on the web.
This year, there is a noticeable change in designers’ stance, and the trends speak of the same. It’s no longer about parallax or auto-forwarding, or which way to position the headers and the sidebars. This year is all about trends that make designs not just spectacular, but empathetic.
Take a look:
1- Immersive Experiences
Creating entire worlds on the Web with code…is one trend that is, quite frankly, catching fire.
We have already seen the plethora of one-time wonders of promotional content for Hollywood Blockbusters like the Hunger Games Trilogy (The Capitol, Panem Fashions, District 13, et al), X-Men (The Bent Bullet, amongst others), a movie which got DiCaprio his first ever Oscar and soothed all our souls, The Revenant (200 Miles)
Almost as insane as the movie
Then there’s Collapse (The Division Game): A flawlessly put-together and realistic “end-time” experience created with HTML5 and JavaScript API for interactive 2D and 3D graphics rendering.
And who doesn’t know of the Pottermore? A legendary fantasy world brought to life on web by J.K Rowling’s team of developers, makes great use of Flat 2.0 and parallax, has fantastic typography and icons, and larger than life images to make the experience surreal.
The phenomenon is not limited to entertainment industry either. We have conglomerates like Coca Cola doing a bizarre turn with weirdly wonderful AHHH campaign. Then there are enterprises and agencies going the immersive route: Emirates’ View From Above, Airbnb’s A World of Belonging, SFCD (a Design Agency), and others.
In fact, here’s Gisele Bündchen kicking ass in Under Armour Women’s Will Beats Noise ….
Background video with comments and tweets in real time only prove the point
2- Iconography
Some favor simplicity over surrealism…
Thanks to Flat and Flat 2.0, icons have become big and will continue to be so in the coming year and onwards. Icons, however, have broken free from their use as miniature markers and become synonymous to ‘clip arts’ in their own right.
Designers and developers will continue to make strides in the more creative uses of SVG format icons, coupled with brilliant hover-effects and animations. We will see more ‘custom’ icons and their integration in overall site design.
Blue Stag is brilliant with icons, it turned its own logo into one.
Cartoon style icons and animations designed to add ‘fun’ to Orangina’s interface.
3- Illustrations
Another big nod to storytelling and fantastical elements we’re all craving today.
Use of hand-drawn ‘artwork’ (instead of ‘graphics’) is gaining traction in web design. I would attribute this to the sense of whimsy we are always looking for. Check out this amazing work in How I Fight (A Cancer-support website)
Illustrations depict thousands of cancer patients’ stories on how they fight the disease.
Businesses are keeping up fairly close. See: Russian upholstery company DeNastiya…
Also employs: Highly textured design with brilliant colors to tell a scroll-based story
Also, FleaHex, which earns bonus-points for adding ‘hand-drawn’ icons into the mix:
Subtly animated drawings make even the pesticide feel non-threatening (to buyers)
4- Splash of Color
Nothing adds the element of Drama in a lifeless interface quite like bold colors.
Light pastels and monotone with ghost buttons have had their field day. This year, bright splashes of color won’t be limited to CTA buttons: they’ll take over the interfaces to hit the eyes and draw attention everywhere.
Codeology, for instance, visualizes Github projects as unique 3D ASCII ‘creatures’ based on their structure and programming languages (See what I meant about web coming alive):
Does a better job of visualizing code than any movie Hollywood has ever made
Stupid Studios (design agency) goes grey with brightly colored overlays
The combined effect draws the eye wherever the cursor lands.
In 2016, we’ll see interfaces stretching their palettes to include more vibrant colors. The challenge, especially for novice designers, will be to draw a line between stunningly shocking and outright tacky.
5- Scroll-Savvy Storytelling
Because we’re all sick of pagination…
We have had smooth, kinetic scrolling in our palms for a while now and designers won’t be leaving this stone unturned when it comes to making experiences this year.
Despite debate on its usability issues, horizontal scrolling is making a name for itself in portfolios and graphical stories. This interactive web comic on Walking Dead demonstrates the perfect use of horizontal scroll:
Spoiler Alert: It IS as haunting as the freaking’ show
Businesses and agencies are not far behind, but most have chosen to stick with ‘safe’ and work with vertical scroll in their stories instead. French design agency Panache wins all rounds with its masterful use of colors and geometry. Le Mugs adds a few zigs and zags in the scroll direction to make things even more interesting.
You have to see it to believe it…
And this landing page for Beagle cannot fail to convert:
Full marks just for the content and images
Be prepared to see more of the scroll-savvy designs across the web this year.
Endnote:
Despite that one glaring oversight (I am still vehemently anti-Hamburger), the overall shift to creativity and more importantly – diversification is like a fresh breeze.
I, for one, am ready for some brilliant innovations and magic that can be created with JavaScript. Even WordPress is tagging along on empowering JS-driven interfaces, which is great news for WordPress front-end developers who have itching to have a go with more creative JavaScript coding.
The web is evolving. Are you?