With January nearly at its end, 2016 is now well and truly in full swing. Even the most sluggish of us have woken up from our holiday-induced food comas, and unless we're currently battling unbelievable amounts of snow, we've returned to business as usual. And to ride on the wave of optimism still present at the start of a new year, now's the perfect time to look into what the rest of 2016 might have in store for us.
Web design is one of the fastest moving niches in the design world because its trends and conventions are so heavily influenced by technological requirements and opportunities. With increasingly sophisticated processes becoming available, creativity never quite comes to a stop in digital design, so keeping abreast of latest trends is a must if you hope to stay ahead of the pack.
With so much movement, it's important to remember to pick only those elements which serve your design objective, rather than jumping on every passing bandwagon, lest you'll end up with inconsistent, messy designs.
If you could use some guidance, you've come to the right place. Take a look at our predictions and decide which trend you're most likely to get on board with!
CSS3
What is it?
- The latest standards for CSS will allow greater versatility and creativity in web design.
- Not all of CSS3 is applicable and supported by all browsers just yet, but layout modules like CSS3 Flexbox, which is an easier solution to a layout paradigm, can be handled.
Why is it a trend?
CSS3 layout modules can now safely be used in popular browsers, which will make the life of many web designers a whole lot simpler.
Layouts will not look the same anymore, but any potential problems arising from this will be more than made up for with more responsive, convenient and reliable technology.
Some of the updated CSS3 modules include backgrounds and borders, text effects, animations, layouts, and user interfaces.
Examples of the CSS3 web trend
CSS3 Cat Animation
Use of CSS3 makes this site more interactive
Hamburger Navigation Bars
What is it?
- Nowadays the majority of online traffic comes via mobile devices, so many designers have started creating 'hamburger' navigation menus that are easily accessible on smaller screens.
- Navigation is hidden from view until expanded.
Why is it a trend?
This minimalist user interface option creates a much cleaner landing page, which is aesthetically more appealing and allows other elements of the site to be in the spotlight. Right now however, we're still figuring out how to balance UX and UI – while it looks much better, there's a chance some users may not discover the menu, or be confused by new navigation pathways.
2016 will likely be about figuring out how to incorporate strategies to solve this problem. Using subtle animations or taking our cues from mobile apps that are already familiar with this type of menu bar might be a good starting point.
Examples of Hamburger Navigation Bars
Hamburger Navigation is placed on top
Hamburger Navigation is placed top left
Material Design
Material Design focuses on depth, so make sure the shadows are correctly placed
What is it?.
- Google's material design is the basis for UI presentation and development.
- It is a richer alternative to flat design.
- Using shadow effects gives the illusion of movement and depth, creating designs that appear more realistic to the user.
- It retains flat design's minimalist look.
Why is it a trend?
Well we all knew this day had to come eventually. Flat design has been the golden goose of design for years now, but eventually things always move on. We're not saying flat design is dead and buried, but this subtle change material design is bringing about may well be the beginning of the end of an era.
The lovely thing about material design is it recreates a sense of movement that flat design lacked, but without sacrificing clarity or functionality on mobile device screens.
Examples of the Material Design web trend
Angular's website uses Material Design creating a sense of depth
Material Design can be used even without vector illustrations
Cinemagraphs
Example of a Cinemagraph
What is it?
- Cinemagraphs are static images with a small amount of movement.
- The combination of both high resolution images and film creates high impact landing pages and beautiful backgrounds, making for unique and memorable branding
Why is it a trend?
This genius new trend is an evolution of last year's trend of using huge, big-impact images on website's landing pages to create an instantly engaging user experience.
Cinemagraphs are essentially the next step on from this, made possible by vastly improved technology that makes the creation of these photo/video hybrids easy for anyone.
Examples of Cinemagraphs on websites
Cinemagraph: Movement on the Eifel Tower
Cinemagraph: A static arm combined with a moving background gives the viewer the illusion of sitting on a bike
Continuing Trends from 2015
Long Scroll (PORSCHEvolution), Grid Layout (HMT), Animation (Deux Huit Huit), Typography (Maaemo)
What is it?
- Long Scroll – Placing less content above the fold
- Grid Layout – Card layouts have evolved from grid layouts. Using card-style interfaces allows for a more user friendly container. Plus they work better across devices, because cards can be responsive
- Animation – Smaller doses are the way to go, don't overdo it: remember, less is more.
- Typography – Bigger, bolder and less generic sans serif typefaces
Why is it a trend?
Not all things come to an end, and many trends evolve slowly and over time. Why fix something that ain't broke? 2015 saw a whole lot of ingenious ways to create UX/UI friendly web designs, and many of those approaches are still valid today. So instead of going only with the brand new, why not fall back on tried and tested concepts? Who knows, your fresh take on these may even evolve into a trend come 2017!
Want More?
To truly understand the trends of the future, familiarize yourself with the trends of the past:
5 Key Web Design Trends in 2015
20 Cutting Edge Website Designs and Trends
50 Web Design Trends of 2010
Written by Divya Abe on Thursday, January 28, 2016
Divya Abe is an expert graphic designer ready to share her knowledge with the crowd. Besides spending quality time on the internet she enjoys anything to do with cats. Get in touch via Google+.