WEB DESIGN TRENDS 2017

The Big List

I remember how websites were in the old days. Things were simple; more attention to text, quite dull pages. Things have come a long way since then. With the increasing importance of web technology for businesses and individuals alike, and with the introduction of new uses such as mobile, designers needed to come up with new design concepts. We’ve been through material designs, hamburger menus, animated backgrounds, and in general simple typography and designs to cater for the increasingly speedy nature of modern life.

We have put together here a list of trends in website design that we believe will be under attention in 2017. It cannot be considered a complete list by any means, but we have tried our best to put as many trends as we possibly could. We would like to thank all of the resources that were the basis of this list (all mentioned towards the end of the article).

Menus and navigation

1. Hamburger menus

With increasing popularity of mobile-first approach and smaller screens, hamburger menus are expected to rise to even more popularity. A hamburger menu rids the need of taking too much room on a website, and make a site appear free of navigation clutter like drop-downs, social icons, search bars and utility links. Since most people are familiar with the usage of a hamburger menu, web designers would like to place navigation under it in 2017.

Image source: techcrunch.com

2. Vertical user flows

Since mobiles have become a commonplace for users to surf the internet (Google confirmed last year that it witnessed more searches via smartphones than desktops), web designers would feel enticed to give their websites the feel of vertical patterns and scrolling. So, it’s important that your website allows users to scroll more on smaller screens. In short, vertical user interfaces will become the thing of present in 2017 to lure prospective customers into visiting your sites, and thereby increasing conversion rates.

3. Card design

Cards are intuitive and easy to understand, they kind of came about with Pinterest and other gallery website pages. They are great for organizing a large amount of content into easily digestible and viewable pieces it’s perfect for responsive design. Card layouts easily reorganize themselves at different breakpoints as your browser window resizes itself.

Source: Behance

4. Fewer menu options

2016 saw many websites redesigned with reduced primary navigation options. This will likely become a big trend in 2017. Header menus that previously presented 5-7 options may reduce this to 3-4.

5. New navigation patterns

With wider aspect ratios on screens and hidden navigation becoming standard on mobile devices, the pattern has started to shift to side and hidden styles for desktop websites as well. Hidden navigation that pops into a full-screen menu is the style that’s most likely to rule. The user pattern is already understood and accepted because of widespread use on mobile devices.

Themes and colors

6. More precision in color selection

Pantone has recently unveiled their 2017 color of the year – greenery. The color means to imply new beginnings, something that is fresh and new. But not every website has to be green. You can even try the colors and color combinations over at Google Material Design that is very likely to trend upwards in 2017. You can use sites like MaterialUI and Material Design Palette to help you pick a Material Design color scheme.

7. Bold colors

Web designers will increasingly make use of vibrant colors and bold tone combinations to add a unique eye appeal to their websites. Unlike 2015 when more monotone big colors designs were used, larger and brighter color palettes will be used in 2017.

8. Modern retro

Whether it is pixel art, vintage typography or 80s and 90s inspired imagery; retro with a modern twist is in right now. It has been having a greater influence on web design over the last few years, with many sites making use of this style.

9. Illegibility

Trends are not always good, and this is a design trend that’s kind of tough. A lot of designers and brands have been started to reduce the contrast in their text so they’re becoming more and more illegible. So, using contrast makes things harder to read and whether we like it or not, we have an aging population and our devices are getting smaller and smaller from desktops to laptops to mobile devices. Therefore, having things be legible and having a decent amount of contrast is really important.

Source: Rogge & Pott

10. Dark aesthetics

While 2015 and 2016 saw a lot of minimal website designs with white or light backgrounds, dark backgrounds are returning to fashion.

11. Bright gradients

Kaleidoscopic gradients are coming back in a big way. Zurich-based agency Y7K illustrates a perfect example of how to make this two-tone effect look fresh and modern, with their full-screen, gradient-washed homepage.

12. Duotone

These parred-down, two-tone color schemes look cool and contemporary, like this example from Australian Design Radio.

13. Monochromatic colors (with contrasting CTA)

CTA (call-to-action) should always stand out, and a bright pop of color on an otherwise neutral or contrasting color palette can really do the trick.

Fonts

14. Bold typography

More and more companies are turning to big, bold typography to anchor their homepages. This style works best when the rest of the page is kept minimal and clean, like this example from French agency Big Youth.

15. More serif typefaces

San serif typefaces have long been thought to be more readable on screens. Serifs and thin alternating strokes can disintegrate at certain sizes or screen resolutions. But more people have high definition screens on all their devices, leading to enhanced readability.

16. Mixing horizontal and vertical text

Freeing text from its usual horizontal alignment and placing it vertically on a page adds some refreshing dimension. Take this example from director Matt Porterfield, which mixes horizontal and vertical text alignments on an otherwise very simple page.

17. Dynamic typography

The advent of Google Fonts and Adobe Typekit has made using new and different fonts and scaling them to large sizes much easier than it ever used to be. So, it benefits designers in being able to be simple and dramatic, it can also benefit high-resolution display and can be used predominant retina design. In a nutshell, it gives you the opportunity to display your brand identity in a unique and differentiated way.

Source: Grange Web Design

18. Oversized type

In-your-face lettering is going to continue to get bigger and bolder. From single word homepages that ask users to move through the design on a whim, to words in interesting typefaces or with splashes of color, text is more important than ever.

Photo credit – nurturedigital.com

19. Animated typography

Exciting is how typography interacts with images, icons, and animations. Rules are there to get broken, fonts are animated or get boldly integrated into backgrounds and images. The line between “text sections” and “image sections” has been erased long time ago.

Photo credit – startuplab.no

Graphical elements

20. More Authentic Imagery

With the flourishing popularity of Instagram and other visually driven platforms, there has been a significant increase in companies and websites opting for authentic photos rather than generic stock images. Brands realized the importance of showing real people and company processes, to establish a stronger connection with their clients and “put a face” to the brand. Photographs, custom illustrations, as well as cartoon type of videos are a powerful tool for attracting new clients, easily explaining a new concept and building up strong brand recognition.

21. More SVGs

Scalable vector graphics (SVGs) present plenty of advantages over traditional formats such as PNG, JPG, and GIF. Instead of being pixel or raster-based, SVGs are resolution-independent, so they will appear stunning on any device or screen for that matter.

22. Stylish loading bars

We all know that users quickly disappear from sites that take more than four to six seconds to load. The remedy to the poorly designed loading page is a loading page itself, but it must keep users interested and doesn’t let them drive away from your site. The loading page can tell users the story of what you do. For example, a car-selling site could have a loading bar that looks like a car running towards the finishing line.

Image source: www.pinterest.com

23. Hybrid material design

There was a trended design going very flat, we even see it on Microsoft operating system, they got rid of shadows, textures and everything got super flat. That was predominantly style for a while and now we’re starting to move away from that. Google has developed something called material design which is essentially a hybrid between flat and a little bit of more volumetric shape built into it, so it’s easier to navigate and move around while protecting the modern visual aesthetic. Also, Material design is better for mobile in terms of understanding how to navigate and what you actually need to do on the website or app.

Source: Google Now

24. Full-width images

Full width image/video sliders are very trending these days. Studies have shown that large images make people stop and take notice. It’s exactly that kind of “interruption” that contributes to higher levels of conversion.

25. Illustration

More companies are turning to illustrators and graphic artists to create bespoke illustrations for their websites. After years of flat design and minimalism, adding illustrated touches to your site is a great way to inject a little personality, as seen in this charming example from NewActon.

26. Geometric shapes and patterns

Whimsical patterns and shapes are popping up more frequently on websites, adding some flair in a landscape otherwise ruled by flat and material design. Canadian design studio MSDS uses daring, patterned letters on their homepage.

Video, animation and sound

27. Rich animations

Where ever possible try to add animations such as GIFs and hovers. It benefits your website, makes it more attractive and gives a more engaging experience rather than just static images. Also, creates a level of visual feedback what you’re doing and how interacting with the audience. So, it makes learning more intuitive and more fun.

Source: GreenLabs

28. Cinemagraphs

Cinemagraphs (high-quality videos or GIFs that run on a smooth, continuous loop) have become a popular way to add movement and visual interest to otherwise static pages. Full-screen loops, like this stunning example from Danish agency CP+B Copenhagen, are sure to hold visitors’ attention for longer than a quick glance.

29. Videos with sound

Let’s face facts; people are more receptive to videos than images. Videos serve as a great way to introduce your company, products, and services on the fly. Having these videos available on your homepage will generate tremendous interest. You must ensure that the videos come with complete sound support. You can even include an option to toggle the sound on or off as not every visitor will appreciate it. If visitors want to listen to the sounds of the video, then the content should be enticing.

30. Motion animations

Anything that involves movement catches a human eye. Motion animations rose in popularity in 2015 and the path is set for them to surge even higher in 2017. We can expect their sizes to decrease, but they are a great medium to keep users engaged while they wait for content to load. Web designers first need to identify the purpose tiny animations must serve so that they can create the desired effect on users.

Image source: 1stwebdesigner.com

Interactivity

31. More micro-interactions

Micro-interactions are going to be used a lot more on mobile apps and be more device-specific. The mobile-first design has been focused on layout. Touch and gesture-related JavaScript libraries allow you to create subtle animations (such as the tweet refresh interaction on the Twitter app). These subtle animations can be used to direct attention to interactive elements–bringing a mobile-like experience to the use of hover effects on desktop screens.

New technologies

32. Machine learning

A few well-known apps have been showing us the potential of machine learning, one including Spotify with its Discover Weekly feature. Thanks to that, Spotify has proven how machine learning can improve the traction of your product. There is also the thought of machine learning driving a dynamic real-time web.

33. Virtual reality & 360 videos

Virtual reality has never had such a bigger year than that of 2016 and now it can be experienced on browsers as well. It has been gaining momentum very quickly and has been seen in Samsung commercials as well. VR is on the same path as that of conversational interfaces. However, the user interface challenges with VR are far more robust and easier to understand than conversational interfaces. We’re expecting to see a lot more VR/AR that is going to be featured on the back of the HoloLens launch. Also, designers are going to think of interesting ways to incorporate 360 video into websites in 2017.

34. AI-powered bots and conversational interfaces

In terms of visuals, bots are unlikely to have a big impact on web design, but they will significantly influence how designers think about creating websites. AI-powered bots are going to get even more realistic and complex this year, empowering businesses to automate communication and sales. Using tools like Letsclap, online businesses will be able to connect with their customers via messaging apps like WhatsApp, Facebook Messenger or WeChat, providing customized customer support and commerce. Conversational interfaces will be a huge shift, helping big brands express different sides of their personality and making them more human and approachable.

More than 900 million people around the world use Facebook Messenger every month, so the introduction of Bots for Messenger last year was a welcome addition to the toolkit of communication channels for businesses of all sizes. Any brand can build a Facebook bot now without any coding knowledge. Integrations with tools like Botsify or Chatfuel make the setup process so simple that it’s becoming unusual not to use a customized bot. This year, we’ll see the conversational interfaces reach a higher level of personalization and inventiveness.

By integrating with Chatfuel, brands can build a Facebook bot in less than 10 minutes. Image credit: Chatfuel.

General

35. Responsive First Approach to Design

Responsive design is not something that is new to web design and we expect it will play a larger role in 2017 than it has in previous years. Responsive design is the approach to design that uses CSS media queries and flexible layouts. The ‘responsive first’ approach simply means designing for the smallest screen first and then working up from there. Website owners will have one website that delivers content based on the device that is being used. This approach really is an evolution of the ‘mobile first’ concept and truly focuses on user experience. Gone are the days of one set of pages for desktop and another for mobile.

36. Customization of Google Maps

The trend of adding Google Maps for your location is old but it needs to be more attractive, cool and fascinating now. There is a time to customize the old maps to the new ones. The user may be get bored from same Google Maps so the new web designing trend is to focus on their personalization and customization based on your own style.

37. Emphasis on the content

We’ve spent years adding things to our websites such as sidebars, headers, banner ads, sidebar ads, popups, social media buttons, etc. All of these elements have ended up cluttering our websites and taking up more and more real estate, taking the attention away from the entire point of a web page: the content. In 2017, websites are likely to start moving back to basics and placing more emphasis on content.

38. Ultra-minimalism

Taking classic minimalism to the extreme, some designers are defying conventions of what a website needs to look like, displaying just the absolute bare necessities. The site from designer Mathieu Boulet is centered around a few choice links to his social profiles and information.

39. Structured chaos & asymmetrical compositions

Leading designers from all around the world have been moving away from perfectly balanced (on the left and right) layouts, opting for more dynamic, sometimes chaotic compositions. But don’t be misled by the word “chaos”, as harmony and visual satisfaction are reached using lines, geometric shapes and patterns, a contrast of forms, colors and sizes. You’ve seen that a lot already in 2016 with images integrated into circles, hexagons or other geometric shapes. This trend has also embedded quite well in the photography and home decor industries. (Example – helloheco.com, sequence.co.uk)

Photo credit – corentinfardeau.fr

40. Modular design

Modular design is certainly sticking around in 2017. It’s a foolproof way to create a clean, accessible website that keeps visitors interested. This example from design studio Waaark offers a twist on modular design: When you hover over the dividing edges between modules with your cursor, you produce an unexpected ripple effect.

41. Overlapping text and images

Text that slightly overlaps accompanying images has become a popular effect for blogs and portfolios. Freelance art director and front-end developer Thibault Pailloux makes his overlapping text stand out with a colorful underline beneath each title.

42. Split-screen layouts

By using a split screen, you quickly allow your audience to “choose their own adventure” and head to where they will more likely convert.

43. Websites with full-screen slides

We have already seen websites with sliders where images move within a frame to display content. These slides then transformed into full-screen slides. These full-screen slides bring new content after being refreshed with a click, scroll or timed effect. The advantage of these full-screen slides is that they give users a physical experience as they navigate forward and backward. In 2017, we can expect an abundance of sites trying to utilize this concept.

Things we will not see

44. No more traditional web design

Companies are beginning to wane on using traditional web design concepts. In the old ways, the role of the design was to make the tech look good to the audience. With the emergence of experience design, the focus and reach of web design have shifted. By using human-centered concepts, it has frantically changed the way we view web designs. User experience has become the basis for web design now.

45. The start of the end of flat design

The fire and urge that once existed in flat web design have just about run its full course. Web designers have just about burned out from applying the same basics over and over again. Because this technique is being used by virtually everyone, websites often look the same overall.

We may be looking at a future where flat web design may become obsolete. In their place, more imaginative and unique layouts and designs will take over.

Conclusion

Do you agree with the trends you have seen in this article? Have you seen some unexpected trends or changes from previous years? Do you think some mentioned trends are unlikely?

Feel free to contact us with any ideas or suggestions, at: aureusmedia@gmail.com or call us at: (406) 356-6276.

Thank you!

AUREUS MEDIA | Design & Development

Wednesday, March 15, 2017

Table of contents: