Full trends 2017 cover 2

24 November 2016

10 Hottest Web Design Trends for 2017

Thumb andrew terehin
Andrew Terehin
Managing Director / Partner
10 Hottest Web Design Trends for 2017

Share

372

This year is almost over, so it’s the perfect time to summarize results and try to define next year's web design trends.

There are many things that influence the latest web design trends, starting from new design instruments and software launched every day, and ending up with new design approaches, new types of devices and versions of OS alternated year after year.

Some of the trends stay with us for several years and others stay for a short period and are superficial. I just collected the most interesting and strong ones in one article.

1. Microinteractions and Animation

Every day we launch tons of microinteractions in our favorite mobile apps or web sites, pressing like buttons or sending e-mails, switching off  alarms in the morning and setting up daily tasks in your calendar or task manager applications. Almost all applications around us are filled in with microinteractions or microanimations.  

Microinteraction is a simple, small animation that helps us get the feedback from the system or UI after our interaction with it. It can be combined with the sound or it can go without it.

Credit Naseer Ahmed

 

Microinteractions are a strong instrument that helps to form a user’s habits or habit loops. Firstly, the user acts and gets the reply from the system with microinteraction, so the other time microinteraction will remind him to complete the action or make it one more time, thus forming a habit.

On the one hand, if a microinteraction is well-designed and well-thought out. It helps to interact with a  website or an app in an intuitive way, but on the other hand, if it is badly structured and logically unreasoned, then users might get confused.

How to make the best one?

To build a good microinteraction, you have to pay attention to all four parts:

hot to create microinteraction

A Trigger initiates a microinteraction. The Rules determine what happens, while Feedback lets people know what’s happening. Loops and Modes determine the meta-rules of the microinteraction.

So, microinteractions are still in UX trends of 2017, and we can use it for a more engaging experience or just to add some unique and fun animated touches to static web pages.

2. Cards and more Cards

Using cards in design is the long-term industry trend. It has been trendy for several years already, and it will be trendy in 2017. Cards are a unique form, and all webpages are built mostly from rectangular shapes, as such shapes are easy to adapt to several screen resolutions and mobile layouts.

Paper promo cards and business cards are with us for many decades already. A card design became so popular in web design because of the popularity of Pinterest, Tumblr, Twitter and other services with card layouts.

Are the cards good for everything?

The card layout is good when you need to show the most important and relevant information for many items. It works vice for e-commerce product listing pages, visual or video galleries and other types of listings.

card design sample

3. Breaking the Grid and asymmetry

The grid is the king of the UI design. It is the lowest level of all projects layouts, and it is like the skeleton that keeps human body upright: the grid keeps a page’s rhythm and structure.

But, yes! Let’s break the rhythm and the grid.  

For some types of projects to make the layout more flexible and attractive so a user will be able to pick out needed UI elements or sections, it is good to break the grid, making it trendier. Usually, it works well with promo sites, portfolios, and art projects with experimental layouts.

broken grid design

But remember, before you break the rules (grid), study them. Do not break it only because it’s trendy: try to use the golden design rule — get the maximum expression with minimum visual resources. Use it only when it’s necessary, when you need to get some accents or uniqueness, or when it will be supported by interactive animations and effects.

4. Vivid Colors  

This trend is also a long-term one. The popular vivid colors are changing year after year. The popularity of Google Design Language “Material Design” and its concepts and color schemes spread from Android mobile apps to web interfaces and web design. The loud launch of Bloomberg’s new design with vivid colors and broken grids in 2015 was revolutionary for such types of websites.

bloomberg vivid colors redesign

And this revolution still continues in 2016 and will continue in 2017.

You can use bright colors for UI elements and bold text accents or even for huge backgrounds or background parts, combine two bright colors near each other or use their gradients. However, do not forget about the limits: the brightness of colors should not confuse the user or stop them from getting to needed content.

5. The Data and analytics-driven design.  

The days of beautiful visuals on websites are passing away. If a website fulfills a certain business function, like selling the products, or providing information, and if it’s not just another beautiful concept for some online Awards competition, it should be designed based on real data and audience research. The UX design became much more important than its visual representation.

data driven design

So the data is the new oil. Collect your users' data, analyze it, build smart design and concepts based on it, it will help to treat your clients better.

6. The Unique approach for everything

It’s strange to find out that being unique is trendy. Sure, if you need to stand out from the range of template-based and stock photography-filled projects, you need to use unique elements. And yes, it’s trendy.

Using of custom illustrations

Illustrations are a very flexible tool. Sometimes they can be more beneficial than the photography. They add a handcrafted feeling to your project, so you can get more control over the themes of your visuals, because you are limited only by your imagination and illustration skills. If needed, you can connect your illustration with your brand identity elements in web design concept or add some microanimations or interactions.

Icons are the younger brothers of big illustrations 

There are a lot of stocks for iconography on the web. If you are using custom illustration and you want to be consistent, have the unique icons designed for your project. They are like the final detail that helps your project stand out and immediately grab a user’s attention.

7. Extended Typography     

I like fonts: I like their simple beauty of forms and shapes and combinations of elements. A font and a beautiful typography composition can add a visual value to any project.  

extended fonts in web design

With the rise of web fonts (Google Fonts, etc) and retina displays, the web typography became an important trend and a part of modern web design. It was quite important before, but right now you can use it for huge taglines and statements with a combination of different fonts and typefaces because you are free from using only system fonts like before, and it's still the text and SEO friendly element.

8. Long read layouts and storytelling       

Yes, this trend is still with us. One-page websites with long-read layouts usually are good for products or services presentation, for anything that needs a storytelling approach.

You can play with any kind of navigation variants: it can be a long-read animated page with a parallax effect and anchored top or side menu with CTA buttons like in the following examples:

long ready layout example

long scrolling

It can also be a one-page website with the fullscreen vertical slider, where you can jump quickly on the needed slide from a sticky menu or a slider navigation control.

However, do not forget that behind the good UX and perfect visually appealing one-page sites, there is an SEO question: “How do you build a website so it doesn't reflect badly on Google Search Engine indexing”? There are a lot of tricks and workarounds that can help make your one-page website SEO friendly.

9. Animation of UI elements     

As for me, I hate overanimated websites, like when every button, icon, and photo appears with super-duper modern, stylish animation effects. All these popular website designs with this animated horror confuses me as a user, and each time  I want to leave the page immediately.

But if we are talking about website design trends, the smart UI animation is still quite trendy. Under the word “smart” I mean an animation that helps important UI elements to stand out , enriching user engagement and improving user experience. Animation should be used only where it is needed and in well-weighted doses, then  it will help to tell the story of product or service. Usually, it works well for promo websites, one-page websites and some sites with a long horizontal or vertical scrolling and parallax animation.

Here are some good examples:

UI animation

UI animation

10. Mobile apps approach in web design     

Current web design trends described in this article are formed under the influence of Mobile Apps approaches, like microinteractions, cards design, hamburger menus, left-side iPad style navigation, UI animation, and many more.

Left-side menu

I think the borders between web and mobile become blurrier every year. Trends move from mobile to the web and vice versa. Responsive layouts have universal approaches for navigation, and so UI elements look almost the same on the web and mobile. This UI unification trend will be continued in 2017 as well.   

And what you think?     

There are a lot of things that seem to be trendy for the next year, but I tried to focus on the most outstanding 10 trends based on my experience related to the visual aspects of web-design. And what do you think?

Many such trends are used in AGENTE’s projects every day, but we do not try to blindly follow the trends and to be trendy just for the sake of trendiness. Our main goal is to find out and form the modern web design trends that never existed before. It’s a much cooler and more unpredictable way of researching, and you can try it!

Let's talk

Share

372

To the top

Let's talk

  • Budget
Attach a file

File size should not exceed 10mb