20 Rising Web Design Trends To Watch In 2017

Another year has upheld and designers are looking brazen towards a future. Many promising pattern trends are firm to explode in 2017. Last year we lonesome the tip 2016 pattern trends and we’ve seen a lot of changes given then.

So, for this post I’ve picked a top 20 trends that I’ve beheld gaining traction in 2017. These pattern trends can request to any website, so keep your eyes out for these techniques as we pierce by 2017 and beyond.

20 Hottest Trends That Will Shape Web Design Come 2016

20 Hottest Trends That Will Shape Web Design Come 2016

As time inches brazen with any flitting year, many new pattern trends dawn on a horizon. The field…Read more

1. “Featured in” badges

Startups, blogs, SaaS projects and even tiny businesses are now regulating a “as featured in” badges on their websites. These badges mostly link to articles on mainstream blogs such as HuffPo, Forbes, CNN, Fox, and other news outlets.

herepup badgesherepup badges

The thought is to validate a website and build trust with new visitors. It’s easier for someone to trust a website when they can see that it’s been mentioned in lawful publications.

In fact many tip blogs appreciate a exposure, so it unequivocally helps everybody involved. These vast sites mostly release their logos online though we can also find pure PNGs or SVGs usually by googling around.

accompany websiteaccompany website

Also it’s endorsed that we link behind to a strange article mentioning your site. This proves that you were unequivocally mentioned on a site, and you’re not usually creation adult claims.

2. Bold all-caps nav links

I’ve seen dozens of neat navigation menus all relying on this same design. These nav links vary in arise and size though they customarily have identical features, such as:

  • All caps
  • Bolded
  • Evenly spaced
  • Aligned to a right corner

The homepage of Zazzle is a good example. But we can find this on many startup websites given it’s a clean approach to share links that are easy to examination and easy to browse.

zazzle navzazzle nav

I mostly associate this trend with businesses and tech startups though it can be prevalent on blogs too.

Make note of a subsequent time we see this trend given it’s everywhere. And we pattern it to keep flourishing good into 2017.

3. Magazine-style blogs

Blogging was such a niche judgment behind in a early 2000s. If we ran a blog in 2003 it was deliberate a lovable tiny hobby. In usually over a decade that trend has radically changed. Now blogs can provide a full-time income, and they’re starting to look a lot some-more like digital magazines.

Look behind during a original design of TechCrunch when it initial launched in 2006. Looks like a general WordPress blog right?

techcrunch circa 2006techcrunch circa 2006

Now demeanour during a stream homepage of Techcrunch in 2017:

techcrunch 2017 homepagetechcrunch 2017 homepage

It not usually looks like a magazine, it also functions like one. TechCrunch publishes dozens (if not hundreds) of new posts any singular day. They’re a #1 go-to source for startup news.

The magazine-style pattern trends make a vast difference. The homepage uses a big featured story section, any post has a possess thumbnail, and a essay pages center around a headline.

When we cruise about it, TechCrunch hasn’t altered much. It’s still “just a blog”. But it’s designed and managed like a magazine, and this creates all a difference.

4. Video backgrounds

Autoplaying sound is maybe a many irritating trend on a web. But surprisingly, autoplaying video (without sound) is a quick flourishing trend. You can mark this on dozens of business sites where a video credentials takes over a whole screen.

invision homepageinvision homepage

I unequivocally like this technique when it’s practical properly. As prolonged as a video relates to a site and doesn’t hinder content, we cruise it’s a cold outcome to use in your header.

5. Ghost buttons

As minimalism feeds further into web design, many new trends are emerging. One such trend is a rise of ghost buttons that don’t have an middle fill though do have an outdoor border.

instamojo homepageinstamojo homepage

Most of a time these buttons contrast with others to pull attention. You can see this on a homepage of Instantmojo with a immature signup symbol located right beside a spook symbol joining to a live demo.

Other sites have adopted a purely-ghost pattern style to their buttons sitewide. A good instance here is a new Bootstrap layout.

I cruise spook buttons work on sites that lean towards minimalism. They competence not be a good fit for any website, though we do see their use augmenting with any flitting year.

6. Modal window opt-ins

Modal windows are super annoying, and we can’t suppose any user would like them. However they are proven to boost signups, and marketers can't omit techniques that work.

This is given we cruise modal opt-in windows will continue to climb in 2017.

They’re not my favorite thing, and we never supplement them to my websites. But if a thought is to boost signups afterwards modal windows are a surefire approach to get things rolling.

tnw modal windowtnw modal window

New plugins can even target exit intent that triggers a modal whenever a user attempts to leave a site. Other modals seem after x seconds or are set to open when a user scrolls down distant enough.

Regardless of how modals are triggered, how they’re designed, or how we feel about them, we cruise they’ll be around for a prolonged haul.

7. Illustration matrix art

With new matrix pattern programs such as Sketch and Affinity Designer, there’s a new call of illustrators violation onto a web. Graphic pattern and interface pattern are constantly merging with some-more multidisciplinary designers now than ever before.

This means we’ll be saying a lot some-more tradition icons and full-page illustrations in a nearby future.

iterable illustrationsiterable illustrations

Many illustrators are used artists so we cruise we’ll see more full page backgrounds done with digital portrayal software, rendered in fact like judgment art.

8. Fixed scrolling sidebars

The initial call of bound pattern focused on navigation bars. These are all too common generally in manageable designs where a bound navbar replicates a feeling of a local mobile application.

But in 2017, we pattern to see one some-more gummy element—the gummy sidebar.

hollywood contributor sidebarhollywood contributor sidebar

Almost any vital blog uses this kind of gummy sidebar. It keeps calm in view during all times and increases a odds that users will interact with sidebar content.

Plus with dozens of free jQuery plugins that can replicate a gummy sidebar effect. It’s easier than ever to set this adult on any website.

9. In-page list of contents

A new box investigate found that longform content outperforms shortform in both rankings and peculiarity of user retention. Granted this isn’t always loyal given some queries can be answered quickly.

But with distant some-more longform calm on a web, it’s healthy to see more tables of essence combined into articles. You’ll see this on extensive examination sites or in articles that mangle down into listed items.

sweethome list of contentssweethome list of contents

Adding a list of essence can improve a user experience and assistance to break adult a reading into smaller chunks. Table of essence can also help your site arrange better! If Google finds your page profitable we competence get jump links in a hunt results.

It competence be loyal that ToCs are sincerely wanting right now. But we pattern this trend to blow adult over 2017 and many years after.

10. Bright colorful designs

I’m not certain if this trend emerged out of minimalism or as a greeting to Google’s material design. But I’ve stumbled onto dozens of websites that use bright pastel colors churned with other colourful hues to emanate a unequivocally illusory appearance.

rentberry homepagerentberry homepage

The Rentberry homepage is a good instance that also uses tons of gradients. And it even has a aforementioned “Featured in” badges located underneath! Two trends on one site.

You’ll notice that a colors don’t interfuse a whole page, and they are pale with other shades of white gray.

stripe colorful pagestripe colorful page

I’ve seen adequate of these vibrant tone schemes to trust they’re on a rise.

11. Scroll animations

Web designers know about scroll-jacking and how terrible it is. However that’s not what we meant with a pretension “scroll animations”. I’ve seen many sites that now animate calm into view when we corkscrew past a certain territory of a page.

gotcha appgotcha app

This trend is mostly confined to startup homepages SaaS companies that wish some pizzazz in their design.

I can’t contend if it’s a quite useful trend. It positively does squeeze a eye though we don’t cruise it offers many over aesthetics. Still, it’s a trend that seems to be swelling fast, and when used sparingly it can be unequivocally neat.

12. Single-page apps (SPAs)

Single-page applications are websites built quite with Ajax calls. JavaScript pulls calm from a server and loads it dynamically, so a page never refreshes.

Common examples are sites like Gmail and Facebook. But with more JS technology, I’m seeing some-more some-more SPAs grown all a time. Heck, even CodePen could be deliberate an SPA.

With absolute frontend libraries such as React Aurelia, it’s gonna be even easier to emanate an SPA from blemish in 2017.

13. Toggleable hunt bars

It used to be that hunt fields were always in view somewhere on a webpage, possibly in a sidebar or a navigation. But newly I’ve beheld a lot some-more hunt fields that get hidden by default, and contingency be toggled into view.

japantimes searchjapantimes search

Certainly a accessible trend to save space on a page while still keeping a hunt underline accessible. If you’re uncertain of where to place a hunt form in a new pattern we competence cruise regulating a toggle margin related to a magnifying potion idol in a navigation.

14. Adblock messages

There’s no denying a fact that ad restraint is on a rise. The usually doubt is how publishers will hoop this trend. Some sites kindly add messages into a ad spaces like Time.com. On Hongkiat, you’ll notice internal ads to fill a void that couple serve into a site.

vulture magvulture mag

One critical trend that we see augmenting is adblock calm blocks. This is a technique to “block a ad blockers”. This underline is already in place on many vast sites such as Business Insider and Forbes. Unfortunately, this hurts both a user and a publisher, and it all stems from poor-quality promotion techniques.

Ultimately, it doesn’t matter who we censure or where we mount in a ad restraint debate. More people are installing adblock plugins, and I’m awaiting more publishers to pull back.

15. Pure SVG icons

SVG graphics have already seeped into a web though they’re flourishing incomparable by a day. And we have a feeling that 2017 will be a outrageous year for SVGs on a web.

You can find thousands of free SVG idol sets on sites like Flaticon if we know how to search. But we can also code SVGs into HTML, for instance by creation use of this example on CodePen.

codepen svg charcterised iconcodepen svg charcterised icon

So, designers have a approach to use SVGs, and developers have a approach to use SVGs as well. Modern browser support looks good opposite a board, so there no problem with compatibility. All that’s indispensable is adequate designers to recognize a energy of SVGs and start regulating them!

16. Adobe XD

Adobe put out a full beta of Adobe XD in 2016, and it has given grown rapidly. It now supports both Mac Windows, and it’s in a contrast phase before being entirely rolled out.

You competence sneer during a thought of any module overtaking Sketch though Adobe is a categorical module association of artistic work for a reason. Plus Sketch is still Mac-only while Adobe is looking to support everyone.

I resolutely trust we’ll be reading a lot some-more about Adobe XD in a entrance year. It competence turn a go-to module for designing UI mockups—so we can finally use Photoshop as a print strategy apparatus (as intended).

With a arise of new software, comes dozens of tutorials and freebie GUI kits as well. You can find lots of Adobe XD freebies in Dribbble along with two new XD-focused freebie sites Designmine and XD Guru.

17. More hamburger menus

Love it or hatred it, a hamburger is here to stay. There are copiousness of usability studies that argue opposite menus hidden from view. But with a tiny shade and usually so many alternatives, there isn’t any improved choice for now.

Hamburger icons are solemnly becoming tangible symbols for nav menus. Just like a magnifying potion idol implies “search”, a three-bar hamburger idol will shortly be synonymous with “menu”.

This is already loyal for many tech-savvy individuals. But with any flitting year, some-more people get smartphones and start browsing a mobile web. And they’re training to associate that hamburger with a nav menu with no finish in sight.

18. Product underline icons

I wrote about this trend on Treehouse though haven’t mentioned it recently. And going into 2017 this trend is gonna be huge. It’s substantially a many common approach to share product facilities on a homepage.

featured icons pressablefeatured icons pressable

You start by making a list of features for your product. The product can be anything from a SaaS module to a WordPress thesis or even a earthy item.

Then we can possibly design tradition icons or find an idol set to paint these features. It’s best to avoid general features such as “reliable” or “fast” given many people pattern this stuff.

Instead, list facilities that indeed matter. If it’s a reward WP thesis maybe list that it’s responsive, how many widgets it comes with, or how a menu works.

inferno.js homepageinferno.js homepage

These underline icons work like visuals to assistance sell any feature. Text alone is difficult to consume though visuals are many easier to understand during a glance.

19. Above-the-fold CTAs

Call-to-actions have traditionally been placed all over a website. But with visitors spending reduction time on websites, it’s essential to have a clever CTA right above a fold.

These call-to-actions competence be buttons, opt-in forms, or other inputs to drive people to take some action such as signing adult or reading a blog post.

gary vaynerchuk homepagegary vaynerchuk homepage

I can’t tell we how to pattern a CTA or how to optimize it for conversions. But we can contend a trend seems to be fixation these CTAs above a overlay and in transparent view for all visitors to see.

20. Smaller calm areas

Monitors have grown so vast that many websites have to set a max width. It’s many harder to examination sentences when they’re 2000px far-reaching compared to usually 700px wide.

Smaller calm is easier to consume, and eventually creates a better knowledge on content-heavy websites.

I cruise some-more designers are realizing this, and will solemnly reduce a distance of their calm areas. we cite a limit breadth of 750px though we could go as tiny as 600px or less.

wpbeginner blogwpbeginner blog

Shorter paragraphs with fewer sentences and smaller calm areas will always increase readability. Major publications such as a NY Times competence deviating with their possess constructional guidelines. But for a elementary blog or business site, a trend is relocating towards lengthier calm with smaller paragraphs calm areas.

Wrapping up

There are many other trends we wasn’t means to cover in this post, though we cruise these 20 are a many interesting. As we pierce brazen into 2017, it should be apparent that trends are bursting and that ones aren’t.

And if we have other ideas or suggestions for arriving pattern trends feel giveaway to dump a criticism below.

Design Trends: Do We Follow Them Without Realizing It?

Design Trends: Do We Follow Them Without Realizing It?

Quick – what’s a hottest pattern trend right now? Whether we answered ‘flat design’ or something similar, it…Read more

Add Comment