The year ahead should be a really exciting one for design, with the introduction of wider support for SVG and a host of new things we can do with CSS as CSS4 gains broader acceptance. In taking a look back at what made a big splash this year, I hope you will be inspired to kick off 2017 with some fresh ideas and new inspiration as we look at design trends in 2016 and what to expect in 2017.
In 2016, we saw the continued use of common UI Patterns, which offer familiar layouts and interactions. This is especially prevalent in the theme market thanks to frameworks such as Bootstrap and Material Design Lite but isn’t necessarily a bad thing. After all, these patterns are proven and well known. This year designers looked for ways to improve upon these patterns and make them a little more interesting, leading to a year of design marked by visual impact and micro-interactions. Here are a few of the biggest statements made by top brands and designers this year:
The hero image and full-screen intro trend is likely to last a long time as it accommodates everything about where design is headed – visual statement, full motion, high resolution and photographic. Using bold imagery is not just for portfolios – it was used on a variety of websites ranging from eCommerce to travel. Full-screen intros offer an instant burst of brand recognition and mood to set off an interactive experience, portfolio or long-scrolling page. This year saw a de-cluttering of the UI in these cases – some websites offering no navigation elements or call to action at all, letting the imagery speak for itself.
The full screen hero image or header trend has been made more interesting through the use of cinemagraphs, subtle animations and background video…
In the last few years, cards have become more and more popular, with masonry portfolios and blog layouts becoming a familiar pattern. This year we saw a new twist on the full screen landing page interface with the typical giant visual and call to action – the duo layout. These split layouts offer the visitor a choice and provide an interesting twist to the jumbo slider or hero header.
Split-screen components work best in minimalist web designs where negative space is combined with bold color or typography.
What We Can Expect?
To sum things up, web design isn’t focusing so much on detailed content and information delivery as much as it is focusing on delivering efficient visual cues and stories. The long scroll is here to stay for awhile, as it compliments mobile browsing and compositions using high impact typography, negative space and bright color.
Gifs, cinemagraphs and video provide added flair and communication value, where SVG will take off to reshape the web in more widespread ways. Gradients and large type are back, and we can expect more duotones and candid photography to provide the foundations of next year’s visual style. Don’t be surprised if grunge starts to make a comeback with a twist, but don’t miss the Brutalism trend, hopefully disappearing quietly back into the obscurity from which it came.
In the front-end development world, 2017 will see an increase in novel AI-powered website builders, a leap to CSS variables and hopefully a push for better webp support to get even more speed.
If all of this seems a bit over your head or outside of your skillset, see how you can create beautiful websites with modern micro-interactions, parallax, abstract layouts using Themify Float for WordPress to get a jump start on your next visual storytelling project.