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:

High-Definition Visuals

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.

hero-fay
hero-claraluna
hero-alisharaf
hero-monochrome

The full screen hero image or header trend has been made more interesting through the use of cinemagraphs, subtle animations and background video…

hero-oasen
hero-toyfight

Interactive Navigation

The move towards more minimal user interfaces became hugely popular in 2016 thanks to an overall shift to mobile-first design. The hamburger menu became a staple, and while some UX designers hate it and thought for sure it would be gone by now, it is sure to stick around. However, this year we saw more and more sites offering other answers to minimal navigation, using vertical text in the site borders, moving sticky menus to the bottom, or driving navigation interactively rather than through classic menus.

menu-soundofchange
menu-humbolt
menu-phive
menu-studiomarani
menu-quart
menu-panache

Split Screen Layout

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.

splitscreen-peugeot

splitscreen-studiometa
ss-dropbox
ss-herobanking
ss-hannahpurmort
ss-annamorosini
ss-renate

You can create something like this easily in WordPress using Themify Split.

split-themify

Retro

In past years we had a flair for the vintage and rustic but have moved on to favor the flash and sparkle of the 70s and 80s. Duo-tones, geometric shapes and bright colors combine with careful font selection to pull off these looks convincingly.

retro-teletype
retro-method
retro-vinylcuts
retro-projections
retro-mediaelection
retro-ricardozanutta
retro-culturepl

Abstraction

CSS grid promises to give us a powerful new tool for creating page structures, but if you think it means design will go back to boxy, think again! Web design is more flexible now than ever before, and designers this year took a cue from print design to experiment with boundaries. This produced artful and interesting layouts and typographic effects where alignment and borders are becoming less important than presentation and parallax.

abs-dada
abs-maeva
abs-beoplay
abs-fcinq
abs-melville
abs-startuplab

Animation & Microinteractions

While much of the most stunning web designs in 2016 combined more than one of these trends, all of them incorporate a measure of animation or interaction. This attention to detail is as subtle as a graceful hover effect, or as central as drag-and-pull navigation, but each enhances the user experience and appeals to our curiosity. Animation is nothing new in itself, but designers are learning to implement it in more meaningful and purposeful ways, allowing for better performance and less distraction from the content.

mi-coolclub
mi-vanguard
mi-grosse
mi-adam
mi-sunlounger
mi-graytales

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.

9 Comments

  1. Joy Peter
    Dec 29, 2016 @ 8:02 am

    These design trends are superb which web designers can use in 2017. My cousin is a web designer at Client Hub as she designs fabulous sites for real estate business. I will share it with her. She will happy to know about these trends.

    Reply

  2. Peesen
    Jan 3, 2017 @ 2:21 pm

    Greate Collection. Thanks

    Reply

  3. Wayne Wilson
    Jan 3, 2017 @ 3:30 pm

    Nice job guides I love a lot these designs and I wish all best for you guys in this new year !

    Reply

  4. ecommerceimagesolution
    Jan 10, 2017 @ 10:43 pm

    I think design trends can be an arcane thing. In 2017, color, fonts, design, branding, and photography convey visual design trends. Thank your for this upcoming designing ideas.

    Reply

  5. Danny S.
    Jan 11, 2017 @ 8:34 am

    Thanks for sharing these trends with us. Please keep up the good work!

    Reply

  6. Roy Glas
    Jan 15, 2017 @ 3:11 am

    Great info, thanks :)

    Reply

  7. Salvatore
    Jan 16, 2017 @ 11:32 pm

    Great post! Im already familiar with a few of these blogs but looking forward to discover the rest.

    Reply

  8. Antek
    Jan 26, 2017 @ 4:12 am

    Very informative article. I’m especially looking forward to the split screen layout! I also think that Flexbox, PWAs, and custom typography might make some waves in 2017.

    Reply

  9. Anonymous
    Feb 5, 2017 @ 3:12 pm

    Excellent post! very useful for new projects!

    Reply

Leave a Reply

7th Anniversary: 50% off all WordPress themes and plugins at Themify.