Web Design Trends 2016

What we should STOP/START doing

Nothing is more satisfying then starting a fresh new year. It presents us with the opportunity to break old habits, start new ones and hopefully do better next time around. Lets look ahead and see what we can learn from the past to help improve how we design our future.

What should we STOP doing, what should we do MORE and what’s coming our way in 2016?


The convergence of web design is emerging through UI libraries and standardized design patterns. Some call it the “standardization of web design” or “design becoming irrelevant”. Even though I don’t agree with the latter, I do see the implications this maturing of the industry has. While the wide adoption of standardized design patterns makes things predictable for users, it also causes the need for brands to find new ways to differentiate themselves. To stand out. So let’s take a look how they might want to do this the coming year.

Images come to life

You’ve probably noticed animated GIFs made a major comeback in 2014–2015. Just look at sites like giphy.com. Now it’s time for it’s spin-off: Cinemagraphs! Cinemagraphs are photographs with an element of movement, which give the refined impression that the image ‘comes to life’.

Cinemagraph by: Jamie Beck & Kevin Burg

Even though they have been around for a couple of years, with dedicated tools like Flixel.com it’s become much easier for people to create their own. Traditionally they came in the form of animated GIFs, but with HTML5 Canvas being usable more broadly, effects can be loaded much better. Expect to see an increase of photos using movement while continuing to offer the benefits of a static image. Want to see more stunning examples?

Video

High speed internet is widely available which enables video to replace images more and more. We will see animated GIFs all over and short videos to increase engagement. So think visual story telling! Video will also be used to subtly tickle the user on a emotional level in a desire for brands to be memorable and to stand out. AirBnB is a good example of how to amplify the emotional context of the experience.

Hamburgers are bad for you

Photo credit: Luke Wroblewski, lukew.com

Goodbye hamburger menu. Facebook, Google, Apple, Youtube and Microsoft have already ditched it and others will swiftly follow. As awareness grows for the disadvantages of the hamburger menu on a user level, more designers will abandon this solution. Especially the negative impact on user engagement compared to other types of navigation patterns are quite remarkable. Instead you’ll see designers using patterns where the most common actions are in plain sight, such as using tabs. On mobile this shift towards tabs has been apparent and we’ll see this continue to spread this coming year. For the sake of keeping this article to the point and compact, check out Luke Wroblewski’s post on this topic, he’s put together some nice examples (before and afters).

Typography

Typography will get bolder and bigger (think: Italic, all caps, oversized fonts, and handwritten fonts). Thanks to Google Fonts we will continue to see typography support branding efforts. Use of large typography in combination with a crisp, minimalistic approach will be used to convey a clear brand message.

Ginlane.com

See how Ginlane applied this minimalistic look with the use of a large font, which brings us to the next section.

Minimalism

Minimalism is going to be an ongoing trend the coming year. We will see this being adopted by more and more eCommerce sites, product and even publication sites. Large background images, ghost buttons and flat design are all inspired by minimalism. At the core is the aim to simplify user tasks and clear away any unnecessary distractions. I want to point out here I mean more than just a purely visual design strategy. Minimalism impacts content strategy, the focus on primary user tasks and is more complex than it may seem. In order to do it well you must have a deep understanding of what is important to the user at any given moment. So know your user!

Canopy.co

Content will be stripped away and focus will be on the product. Look at sites such as Canopy or European fashion brand Zara to see examples of what this could look like.

Colors

Coolers.co

Using a neutral palette in combination with bright pastels and bold accent colors will be popular this coming year. Stay away from washed-out colors. We’ll also see monochromatic schemes in combination with color-overlay of images, where you see an image through a colored lense like the image below.

Floatpasadena.com

Also using a monochrome (black and white) theme, backed up by crisp photography, in combination with a pop of color to accentuate elements (such as primary buttons) will be popular.

Photo credit: Alexey Yurkov

Flat Design 2.0

Flat design has been hugely popular the last 2 years and has a companion in the form of Google’s material design. While popularity will remain to grow in 2016, Flat Design 2.0 has emerged from the two, presenting you with the best of both worlds. It’s a more refined version of flat design, adding more depth and contrast by making use of long shadows and occasional highlighting. Spot the differences below!

Photo credit: Ryan Allen

Mobile first, second and third

I’m convinced the reason that minimalistic design has grown enormously in popularity is due to mobile dominant design. We now have the majority of traffic coming from mobile devices, which means we can no longer brush this off. We see a focus on centered layouts, scrolling versus clicking, card layouts, sticky navigation, transitions and animations. Taps or clicks won’t result in a new page being loaded anymore — causing an abrupt change — but will lead to smooth transitions, where users make a side-step, briefly tapping into content and easily return to where they were.

Card design

Designers will move more towards modular cards inspired by print design. It makes for an interesting page which is fun to read, jumping from one element to the next while presenting information in bite-size chunks. Pinterest being the most well known driver, we have also seen other big players adopt this such as Instagram and Facebook. Cards are also great to use on mobile devices since it has a modular layout. Design and content can be a challenge since the content needs to fit a designated space and be distinct in order to not bore the user with yet another square content box. They are also the UI foundation of wearables. Making the entire card clickable makes for a more forgiving user interaction, which is ideal.

Reserved.com

What fold?!

The concept of ‘above the fold’ is dead and stays dead. We know by now that most attention is spent ‘below the fold’ and that the wide variety of screen sizes has helped to put an end to this concept. More importantly you will see the implementation of scrolling based interaction over click-based interaction. Scrolling is easier and faster, therefor more content will be presented on one page. This doesn’t mean everything should be below the fold and the only thing you see at first glance is a giant image with some big text and an arrow pointing downward (sound familiar?). This is the other extreme and just as bad. Tell your users something useful, so that they know what your site is about and what they can do there.

Next stage of infinite scrolling

Infinite scroll was awesome! Now in 2016 we take it to the next level where we see more sites implementing modular scrolling, where you can scroll sections independantly. Mostly this means the screen is split in two, where one half can scroll independently from the other with vertical page orientation. This sounds more complicated than it is, so here’s an example below.

Loading… please wait

Subtle loading states — also supported by animations — to bridge the gap between ‘something’ and ‘nothing’, as a counterweight for loaders and spinners. Particularly for users this is much more useful because it presents the user of what to expect before it’s even there. This makes for a pleasant and smooth transition between what is there and what will be.

Carrousels

Bye bye overbearing hero carrousels. What point is it to give users a way of navigating something where they have no idea or way of telling whether this will present them with something interesting to them? Seriously, just stop it. If you present users with a carrousel, at least give them a notion of what to expect (e.g. naming the buttons).

Add value to win their hearts

Users will be in the lead more and more, where usability tromphs coolness-factor. It’s all about engaging the user and adding value to their life on a level they care about, which brings me to the next topic.

Micro-interactions combined with animation

We will have many more micro-interactions which will function as a dialogue with our users. The system will guide the user instead of lead the user and because of the added transparency, she will feel more in charge. These micro-interactions will be wrapped in carefully crafted transitions and animations, making for a more sophisticated and smooth experience. This is also where the minimalistic trend I mentioned earlier sets the tone, making efficient use of space, presenting information only when relevant, as you see in the example below.

Photo credit: Colin Garvin

Ahhhh push it!

Push notifications are in its infancy right now. Think about how many apps on your phone have not yet truly embraced what push can do for them. So therefore we’ll see more and more apps move towards actually helping the user, being useful and adding value in smart new ways.


Other things worth mentioning

  • As Retina and other high definition displays become more widely adopted, the move ‘en masse’ to SVG and HD images is a fact.
  • More and more thought and attention will be put into onboarding and empty states. These will be filled in a way so that it encourages the user to take action and get started. Use everyday language here to humanize your brand.
  • Last but not least, I want to mention my personal favorite because this really sparks my imagination. It’s more an evolution than a trend. We will see more thoughtful suggestions and personalized notifications. Through machine-learning we will be better able to redesign content to fit the individual. We will study individual’s patterns and because of it will be better able to predict someone’s needs and anticipate (future) actions. We can already measure a person’s emotional state based on their mouse movement, so just imagine where this will take us.

What do you think 2016 has in store for us?


Read this far? You might also like some of my other articles: