Curious about the most influential web design trends 2017? Will this year bring life-changing innovations? Or will just allow some of the existing styles and features to come into the maturity age? There are various tendencies interfusing each other so we check them all in order to pick up the ones with best chance to gain the most popularity this year.

 

Material design

Launched by Google in 2014 and primarily used for Google mobile apps, the material design language evolves into inter-channel, inter-service style hogging more and more virtual spaces.

Google made a whole material design guidelines including examples of proper use of the components and made it as clear and simple as possible for the developers and that is one on the success factors for the project.

 

md principles

Source: www.material.io

 

Although brought and used in many services by Google, the web browser is still one foot in previous layout, letting the material design blocks in for only some of SERP contents. I will be seriously surprised if Google won’t let the blocks in all SERP by the end of 2017.

 

rockon google 25.01

Source: Google.com

 

In the meantime, there will be more and more applications in Google Play using material design and they will be doing it properly. What do I mean? Lots of applications suffer from confusing material design for flat design and mixing it with old icons. This disorientation will perish sooner than later.

An example of proper use:

robin hood application

Robin Hood application

 

You can also find a lot of fan-made material design tutorials and templates across the web.  

   

material design sketch template

Source: https://dribbble.com/shots/1686164-Material-Design-Free-Sketch-Template-Icons

 

Conversational design

There was a magical moment when I watched House of Cards for the first time. All of a sudden Frank Underwood started talking to me. He told me about his plans and even told me some dirty little jokes. It was the first time I had seen anything like it. A little awkward at first but for me, it soon became one of the show’s most iconic elements. I felt as if I was part of the plot. What happens when we apply the same idea to conversational interfaces?

Adrian Zumbrunnen, https://azumbrunnen.me/

Another trend applied to websites, social services, and mobile applications is concentrating on verbal interaction with the user. Chatbots (or just bots) got so popular you can even create a simple one on a free website. All you need to do is to fill possible questions and your answers.

But bot-masters don’t just stop with FAQ replication. Adrian Zumbrunnen who made the chat form on top of his site says in spite of his predictions, the most time-consuming part of the project was not programming but the writing – projecting possible questions and answers. Now the chatbot on his site mostly allows users only to choose between proposed sentences but… has nice slight elements like re-welcome expression when you switch to another site and come back.

 

Adrian Zumbrunnen UX UI WEB DESIGN

Source: azumbrunnen.me

 

Creating a really useful chat with more sophisticated options isn’t easy nor cheap. The most complex and – consequently – useful ones are now developed by Google, Apple and Amazon. Their applications: Google Home, Siri and Alexa can even talk to each other: https://goo.gl/uHXh9n

Don’t be afraid of AI – Amazon Alexa just entered Starbucks and allows customers to order&pay by voice for their items before arriving at the store.

 

Apple Siri

Apple Siri

 

Google Allo

Google Allo

 

Emotionally intelligent design

We know what makes most people click, but we don’t know as much about how they feel.

Pamela Pavliscak, Founder @changesciences

OK, after talking to AI, let’s play a shrink now.

How does this site make you feel? Or the hints in Google Allo during a conversation with your friend? Since the emotions every website/application puts us in can be the decisive factor to converse/buy/return to the page it is important to know and create the ephemeral feelings in users by designing a website.

 

eid

 

There is no strict guideline on how to create a website that will make people have the certain feeling. The surveys, however, show that if you want to make users happy your site needs at least:

  • easiness to use,
  • convenience,
  • beauty and colors,
  • simplicity and cleanliness.

The happiness is a guarantee the users will return to your page.

 

eid happiness

Source: http://www.slideshare.net/PamelaPavliscak/the-science-of-happy-design-sxsw-2015/31-Source_Change_SciencesNot_toobusyBeautiful_and

 

Image instead of words 

If you want to make the users happy why not show your hotel or the charming mountain nearby instead of writing how great it looks? All-screen picture or video as background (with minimum use of text on the landing page) is not a new thing but still on the rise. With a wise choice of fonts can beautifully emphasize the character of the site. In this concept, the website communicates with users not with words, but image and motion. The popularity of this style seems to contradict the motto Content is king. But this doesn’t have to be true, you can apply this only on top of on the landing page and pack as much text content as you like inside the website.

The concept makes the site clean and aesthetic. It often goes with one visible call to action like See our projects. Thanks to this combination users don’t get lost on the site and therefore there’s a quite good chance they will converse as we like.

There are various ways to make the short text shine on a picture background. The most obvious are contrast (bright pic, dark letters or inversely) or making letters part of the picture (e.g. as if they are written on a building in the picture).

Let’s look at this:

 

 

Kinda gives you a concept what this site is about, right?

Now look at the whole page:

 

animation as background

Industry work explanation

Source: http://www.industrypdx.com/

 

Did you guess? That’s exactly what the big pictures/animations are usually about.

The great example of background taking over the sense of a website is the use of 360° panoramic view of a landscape or a company. Just picture this beauty on the background of your site… Relaxing, isn’t it?

 

panoramic view

Source: http://www.airpano.ru/files/Bromo-Volcano-Indonesia/2-2

 

Looks awesome but remember that this wonderful volcano – just like any other high resolution 360° view – will load longer than just text.

 

Sensible use of fonts

On such a precisely chosen background you can’t forget about the right selection of font(s). Well, you can NEVER forget about the font. Choosing the right one is (at least) as important as picking the colors and images.

With rising number of (often free) beautiful fonts using just Arial or Times New Roman, well spread since the ’90s today is like a dinosaur in front of Burj Khalifa.

It’s not only a set of letters. Some fonts are made to simplify adding elementary symbols on websites without scaling images – like font Awesome which now contains 675 icons. You can add it to any ‘letter-focused’ font on your site.

 

 

font awesome

Some of the icons in Font Awesome.

 

Microinteractions

The details are not details. They make the product.

Charles Eames, American architect and designer

Can’t imagine material design applications or chatbots without tiny intuitively running elements? Neither can we in Rockon. Microinteractions play important role in many mobile applications like e.g.: swipe down to refresh, swipe left to delete, click the hamburger to unfold menu and so on. They are designed to be as habitual and useful as possible so the user won’t get confused in the app.

 

microinter pink

Every microinteraction is made of four parts:

  1. A trigger that initiates it.
  2. Rules that determine how it functions.
  3. Feedback that the rules generate.
  4. Loops and Modes that make up its meta rules.

An important aspect (more than usually) is avoiding errors or – when they appear – quickly fixing them. The user needs to be sure that certain action will cause the desired outcome.

 

Gmail1 micrinteraction arrow

Gmail2 micrinteraction arrow

Source: Gmail.com

 

On recently renewed Gmail.com on the bottom right corner on every screen you can see a changing clickable arrow, pointing at the direction you can move to – up or down.

The microinteractions are not yet so widespread on websites. In Rockon’s opinion, that’s going to change and microinteractions will become one of the major web design trends 2017.

 

How to apply web design trends 2017 and not get lost?

The above-mentioned are obviously not all of the web design trends 2017. If you want your website to keep up the pace you need to follow at least some design magazines, websites, and blogs. Or the contrary – you can leave it to professionals like our Tech Agency. In Rockon, we feed and live on web design news every day so we can deliver our Clients the best rockin’ websites in the world!

When working with Clients on Product and Service conceptualization, we carry in mind all the possible design trends and tools and take them into consideration. We will be doing the same with web design trends 2017.

With gathering requirements from Customers, we already start to realize the personality the website should represent. It allows us to pick certain possible trending options and exclude some contradictory ones. When making Customer research & analysis we try to translate the products and services into a visual and utility concept of the website/application/solutions using peaking trends and capabilities. During workshops with Clients, we discuss all the propositions and create the line they want to follow.

 

Thank you Marcin and Karol for your contribution 🙂