{"id":29072,"date":"2017-01-31T23:01:54","date_gmt":"2017-01-31T15:01:54","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=29072"},"modified":"2025-04-21T17:59:53","modified_gmt":"2025-04-21T09:59:53","slug":"web-design-trend-2017","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/web-design-trend-2017\/","title":{"rendered":"20 Rising Web Design Trends to Watch In 2017"},"content":{"rendered":"<p>Another year has passed and designers are looking ahead towards the future. Many <strong>promising design trends<\/strong> are bound to erupt in 2017. Last year I covered <a href=\"https:\/\/www.hongkiat.com\/blog\/web-design-trend-2016\/\">the top 2016 design trends<\/a> and we\u2019ve seen <strong>a lot of changes<\/strong> since then.<\/p>\n<p>So, for this post I\u2019ve picked the <strong>top 20 trends<\/strong> that I\u2019ve noticed <strong>gaining traction in 2017<\/strong>. These design trends <strong>can apply to any website<\/strong>, so keep your eyes out for these techniques as we move through 2017 and beyond.<\/p>\n<div class=\"ref-block ref-block--post\" id=\"ref-post-1\">\n\t\t\t\t\t<a href=\"https:\/\/www.hongkiat.com\/blog\/web-design-trend-2016\/\" class=\"ref-block__link\" title=\"Read More: Web Design Trends for 2016\" rel=\"bookmark\"><span class=\"screen-reader-text\">Web Design Trends for 2016<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/web-design-trend-2016.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-25368 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/web-design-trend-2016.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">Web Design Trends for 2016<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tAs time inches forward with each passing year, many new design trends loom on the horizon. The field...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<h2>1. \u201cFeatured in\u201d badges<\/h2>\n<p>Startups, blogs, SaaS projects and even small businesses are now using the <strong>\u201cas featured in\u201d badges<\/strong> on their websites. These badges often <strong>link to articles on mainstream blogs<\/strong> such as HuffPo, Forbes, CNN, Fox, and other news outlets.<\/p>\n<figure><img decoding=\"async\" alt=\"herepup badges\" src=\"https:\/\/assets.hongkiat.com\/uploads\/web-design-trend-2017\/01-herepup-blog-featured-badges.jpg\"><\/figure>\n<p>The goal is to <strong>validate a website<\/strong> and <strong>build trust<\/strong> with new visitors. It\u2019s easier for someone to trust a website when they can see that it\u2019s been <strong>mentioned in authoritative publications<\/strong>.<\/p>\n<p>In fact many top blogs <strong>appreciate the exposure<\/strong>, so it really helps everyone involved. These big sites often <strong>release their logos online<\/strong> but you can also find transparent PNGs or SVGs just by googling around.<\/p>\n<figure><img decoding=\"async\" alt=\"accompany website\" src=\"https:\/\/assets.hongkiat.com\/uploads\/web-design-trend-2017\/02-accompany-beta-badges.jpg\"><\/figure>\n<p>Also it\u2019s recommended that you <strong>link back to the original article<\/strong> mentioning your site. This proves that <strong>you were really mentioned<\/strong> on the site, and you\u2019re not just making up claims.<\/p>\n<h2>2. Bold all-caps nav links<\/h2>\n<p>I\u2019ve seen <strong>dozens of sleek navigation menus<\/strong> all relying on this same design. These nav links <strong>vary in font and size<\/strong> but they usually <strong>have similar features<\/strong>, such as:<\/p>\n<ul>\n<li>All caps<\/li>\n<li>Bolded<\/li>\n<li>Evenly spaced<\/li>\n<li>Aligned to the right corner<\/li>\n<\/ul>\n<p>The homepage of <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.zazzlemedia.co.uk\/\">Zazzle<\/a> is a great example. But you can find this <strong>on many startup websites<\/strong> because it\u2019s a <strong>clean way to share links<\/strong> that are easy to read and easy to browse.<\/p>\n<figure><img decoding=\"async\" alt=\"zazzle nav\" src=\"https:\/\/assets.hongkiat.com\/uploads\/web-design-trend-2017\/03-zazzle-navigation.jpg\"><\/figure>\n<p>I mostly associate this trend <strong>with businesses and tech startups<\/strong> but it can be prevalent on blogs too.<\/p>\n<p>Make note of the next time you see this trend because it\u2019s everywhere. And I expect it to keep growing well into 2017.<\/p>\n<h2>3. Magazine-style blogs<\/h2>\n<p>Blogging was such a niche concept back in the early 2000s. If you ran a blog in 2003 it was considered a cute little hobby. In just over a decade that trend has radically changed. Now blogs can <strong>provide a full-time income<\/strong>, and they\u2019re starting to <strong>look a lot more like digital magazines<\/strong>.<\/p>\n<p>Look back at the <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/web.archive.org\/web\/20061116003000\/https:\/\/techcrunch.com\/\">original design<\/a> of TechCrunch when it first launched in 2006. Looks like a generic WordPress blog right?<\/p>\n<figure><img decoding=\"async\" alt=\"techcrunch circa 2006\" src=\"https:\/\/assets.hongkiat.com\/uploads\/web-design-trend-2017\/04-techcrunch-circa-2006-homepage.jpg\"><\/figure>\n<p>Now look at the current homepage of Techcrunch in 2017:<\/p>\n<figure><img decoding=\"async\" alt=\"techcrunch 2017 homepage\" src=\"https:\/\/assets.hongkiat.com\/uploads\/web-design-trend-2017\/05-techcrunch-homepage.jpg\"><\/figure>\n<p>It not only <strong>looks like a magazine<\/strong>, it also <strong>functions like one<\/strong>. TechCrunch publishes dozens (if not hundreds) of new posts every single day. They\u2019re the #1 go-to source for startup news.<\/p>\n<p>The magazine-style design trends make a big difference. The homepage uses a <strong>big featured story section<\/strong>, each post <strong>has its own thumbnail<\/strong>, and the article pages <strong>center around the headline<\/strong>.<\/p>\n<p>When you think about it, TechCrunch hasn\u2019t changed much. It\u2019s still \u201cjust a blog\u201d. But <strong>it\u2019s designed and managed like a magazine<\/strong>, and this makes all the difference.<\/p>\n<h2>4. Video backgrounds<\/h2>\n<p>Autoplaying sound is perhaps the most annoying trend on the web. But surprisingly, <strong>autoplaying video (without sound)<\/strong> is a rapidly growing trend. You can spot this on dozens of business sites where a video background <strong>takes over the entire screen<\/strong>.<\/p>\n<figure><img decoding=\"async\" alt=\"invision homepage\" src=\"https:\/\/assets.hongkiat.com\/uploads\/web-design-trend-2017\/06-invision-background-video.jpg\"><\/figure>\n<p>I really like this technique when it\u2019s applied properly. As long as the <strong>video relates to the site<\/strong> and <strong>doesn\u2019t obstruct content<\/strong>, I think it\u2019s a cool effect to use in your header.<\/p>\n<h2>5. Ghost buttons<\/h2>\n<p>As <strong>minimalism feeds further<\/strong> into web design, many new trends are emerging. One such trend is the <strong>rise of <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/visualhierarchy.co\/blog\/ghost-buttons-on-websites-the-emerging-trend\/\">ghost buttons<\/a><\/strong> which don\u2019t have an inner fill but do have an outer border.<\/p>\n<figure><img decoding=\"async\" alt=\"instamojo homepage\" src=\"https:\/\/assets.hongkiat.com\/uploads\/web-design-trend-2017\/07-instamojo.jpg\"><\/figure>\n<p>Most of the time these buttons <strong>contrast with others<\/strong> to draw attention. You can see this on the homepage of <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.instamojo.com\/\">Instantmojo<\/a> with the green signup button <strong>located right beside<\/strong> the ghost button linking to a live demo.<\/p>\n<p>Other sites have adopted <strong>a purely-ghost design style<\/strong> to their buttons sitewide. A great example here is the new <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/getbootstrap.com\/\">Bootstrap<\/a> layout.<\/p>\n<p>I think ghost buttons work on sites that <strong>lean towards minimalism<\/strong>. They may not be a great fit for every website, but I do see their use increasing with each passing year.<\/p>\n<h2>6. Modal window opt-ins<\/h2>\n<p>Modal windows are super annoying, and I can\u2019t imagine any user would like them. However <strong><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.bigcommerce.com\/blog\/email-opt-ins\/#tip-2-make-your-presentation-stand-out-from-the-crowd\">they are proven<\/a> to increase signups<\/strong>, and marketers cannot ignore techniques that work.<\/p>\n<p>This is why I think modal opt-in windows will <strong>continue to climb<\/strong> in 2017.<\/p>\n<p>They\u2019re not my favorite thing, and I never add them to my websites. But if the goal is to increase signups then modal windows are a surefire way to get things rolling.<\/p>\n<figure><img decoding=\"async\" alt=\"tnw modal window\" src=\"https:\/\/assets.hongkiat.com\/uploads\/web-design-trend-2017\/08-modal-tnw-conference.jpg\"><\/figure>\n<p>New plugins can even <strong>target <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/gleam.io\/blog\/exit-intent\/\">exit intent<\/a><\/strong> which <strong>triggers a modal<\/strong> whenever the user attempts to leave the site. Other modals appear after x seconds or are set to open when the user scrolls down far enough.<\/p>\n<p>Regardless of how modals are triggered, how they\u2019re designed, or how you feel about them, I think they\u2019ll be around for the long haul.<\/p>\n<h2>7. Illustration & vector art<\/h2>\n<p>With new vector design programs such as Sketch and <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.vandelaydesign.com\/affinity-designer-for-beginners\/\">Affinity Designer<\/a>, there\u2019s a new wave of illustrators breaking onto the web. Graphic design and interface design are constantly merging with more multidisciplinary designers now than ever before.<\/p>\n<p>This means we\u2019ll be seeing <strong>a lot more custom icons<\/strong> and <strong>full-page illustrations<\/strong> in the near future.<\/p>\n<figure><img decoding=\"async\" alt=\"iterable illustrations\" src=\"https:\/\/assets.hongkiat.com\/uploads\/web-design-trend-2017\/09-iterable-illustrations.jpg\"><\/figure>\n<p>Many illustrators are practiced artists so I think we\u2019ll see <strong>more full page backgrounds<\/strong> made with <a href=\"https:\/\/www.hongkiat.com\/blog\/advanced-digital-painting-tutorials\/\">digital painting software<\/a>, rendered in detail like concept art.<\/p>\n<h2>8. Fixed scrolling sidebars<\/h2>\n<p>The first wave of fixed design <strong>focused on <a href=\"https:\/\/www.hongkiat.com\/blog\/smart-header-footers-jquery\/\">navigation bars<\/a><\/strong>. These are all too common especially in responsive designs where the fixed navbar <strong>replicates the feeling of a native mobile application<\/strong>.<\/p>\n<p>But in 2017, I expect to see one more sticky element\u2014<strong>the sticky sidebar<\/strong>.<\/p>\n<figure><img decoding=\"async\" alt=\"hollywood reporter sidebar\" src=\"https:\/\/assets.hongkiat.com\/uploads\/web-design-trend-2017\/10-hollywood-reporter.jpg\"><\/figure>\n<p>Almost every major blog uses this kind of sticky sidebar. It <strong>keeps content in view<\/strong> at all times and increases the likelihood that users will <strong>interact with sidebar content<\/strong>.<\/p>\n<p>Plus with dozens of <a href=\"https:\/\/www.hongkiat.com\/blog\/sticky-elements-jquery-plugins\/\">free jQuery plugins<\/a> that can <strong>replicate the sticky sidebar effect<\/strong>. It\u2019s easier than ever to set this up on any website.<\/p>\n<h2>9. In-page table of contents<\/h2>\n<p>A recent case study found that <strong><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/searchengineland.com\/seo-user-science-behind-long-form-content-230721\">longform content<\/a> outperforms shortform<\/strong> in both rankings and quality of user retention. Granted this isn\u2019t always true because some queries can be answered quickly.<\/p>\n<p>But with far more longform content on the web, it\u2019s natural to see <strong>more tables of contents added into articles<\/strong>. You\u2019ll see this on lengthy review sites or in articles that break down into listed items.<\/p>\n<figure><img decoding=\"async\" alt=\"sweethome table of contents\" src=\"https:\/\/assets.hongkiat.com\/uploads\/web-design-trend-2017\/11-the-sweethome.jpg\"><\/figure>\n<p>Adding a table of contents can <strong>improve the user experience<\/strong> and help to <strong>break up the reading<\/strong> into smaller chunks. Table of contents can also <strong>help your site rank better<\/strong>! If Google finds your page valuable you might <strong>get <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/searchengineland.com\/google-jump-to-links-within-search-snippets-26603\">jump links<\/a><\/strong> in the search results.<\/p>\n<p>It may be true that ToCs are fairly scarce right now. But I expect this trend to blow up over 2017 and many years after.<\/p>\n<h2>10. Bright colorful designs<\/h2>\n<p>I\u2019m not sure if this trend emerged out of minimalism or as a reaction to Google\u2019s <a href=\"https:\/\/www.hongkiat.com\/blog\/material-design-resources\/\">material design<\/a>. But I\u2019ve stumbled onto dozens of websites that use <strong>bright pastel colors mixed with other vibrant hues<\/strong> to create a very fanciful appearance.<\/p>\n<figure><img decoding=\"async\" alt=\"rentberry homepage\" src=\"https:\/\/assets.hongkiat.com\/uploads\/web-design-trend-2017\/12-rentberry.jpg\"><\/figure>\n<p>The <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/rentberry.com\/\">Rentberry<\/a> homepage is a great example which also uses <strong>tons of gradients<\/strong>. And it even has the aforementioned \u201cFeatured in\u201d badges located underneath! Two trends on one site.<\/p>\n<p>You\u2019ll notice that the colors <strong>don\u2019t permeate the entire page<\/strong>, and they are muted with other shades of white & gray.<\/p>\n<figure><img decoding=\"async\" alt=\"stripe colorful page\" src=\"https:\/\/assets.hongkiat.com\/uploads\/web-design-trend-2017\/13-stripe-colorful-layout.jpg\"><\/figure>\n<p>I\u2019ve seen enough of these <strong>vibrant color schemes<\/strong> to believe they\u2019re on the rise.<\/p>\n<div class=\"ref-block ref-block--post\" id=\"ref-post-3\">\n\t\t\t\t\t<a href=\"https:\/\/www.hongkiat.com\/blog\/best-color-tools-for-web-designers\/\" class=\"ref-block__link\" title=\"Read More: Best Color Tools for Web Designers\" rel=\"bookmark\"><span class=\"screen-reader-text\">Best Color Tools for Web Designers<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/best-color-tools-for-web-designers.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-960 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/best-color-tools-for-web-designers.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">Best Color Tools for Web Designers<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tSetting a basic color theme for your web design project might be easy, but deciding the right color...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<h2>11. Scroll animations<\/h2>\n<p>Web designers know about <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.sitepoint.com\/scrolljacking-accessibility\/\">scroll-jacking<\/a> and how terrible it is. However that\u2019s not what I meant with the title \u201cscroll animations\u201d. I\u2019ve seen many sites that now <strong>animate content into view<\/strong> when you scroll past a certain section of the page.<\/p>\n<figure><img decoding=\"async\" alt=\"gotcha app\" src=\"https:\/\/assets.hongkiat.com\/uploads\/web-design-trend-2017\/14-gotcha-app.jpg\"><\/figure>\n<p>This trend is mostly <strong>confined to startup homepages & SaaS companies<\/strong> that want some pizzazz in their design.<\/p>\n<p>I can\u2019t say if it\u2019s a particularly useful trend. It certainly <strong>does grab the eye<\/strong> but I don\u2019t think it offers much beyond aesthetics. Still, it\u2019s a trend that seems to be spreading fast, and when <strong>used sparingly<\/strong> it can be really neat.<\/p>\n<h2>12. Single-page apps (SPAs)<\/h2>\n<p>Single-page applications are websites <strong>built purely with Ajax calls<\/strong>. JavaScript <strong>pulls content from a server<\/strong> and <strong>loads it dynamically<\/strong>, so the page <strong>never refreshes<\/strong>.<\/p>\n<p>Common examples are sites like Gmail and Facebook. But with <strong>more JS technology<\/strong>, I\u2019m noticing more & more SPAs developed all the time. Heck, even <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/\">CodePen<\/a> could be considered an SPA.<\/p>\n<p>With powerful frontend libraries such as React & <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/aurelia.io\/\">Aurelia<\/a>, it\u2019s gonna be even easier to create an SPA from scratch in 2017.<\/p>\n<div class=\"ref-block ref-block--post\" id=\"ref-post-4\">\n\t\t\t\t\t<a href=\"https:\/\/www.hongkiat.com\/blog\/synchronous-asynchronous-javascript\/\" class=\"ref-block__link\" title=\"Read More: Mastering Synchronous & Asynchronous JavaScript \u2013 Part 1\" rel=\"bookmark\"><span class=\"screen-reader-text\">Mastering Synchronous & Asynchronous JavaScript \u2013 Part 1<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/synchronous-asynchronous-javascript.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-28404 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/synchronous-asynchronous-javascript.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">Mastering Synchronous & Asynchronous JavaScript \u2013 Part 1<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tSynchronous and asynchronous are confusing concepts in JavaScript, especially for beginners. Two or more things are synchronous when...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<h2>13. Toggleable search bars<\/h2>\n<p>It used to be that search fields <strong>were always in view<\/strong> somewhere on a webpage, either in the sidebar or the navigation. But lately I\u2019ve noticed a lot more search fields that get <strong>hidden by default<\/strong>, and must be <strong>toggled into view<\/strong>.<\/p>\n<figure><img decoding=\"async\" alt=\"japantimes search\" src=\"https:\/\/assets.hongkiat.com\/uploads\/web-design-trend-2017\/15-japan-times-search.jpg\"><\/figure>\n<p>Certainly a handy trend to <strong>save space on the page<\/strong> while still <strong>keeping the search feature accessible<\/strong>. If you\u2019re unsure of where to place a search form in a new design you might consider using a toggle field linked to a magnifying glass icon in the navigation.<\/p>\n<h2>14. Adblock messages<\/h2>\n<p>There\u2019s no denying the fact that <strong><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.nytimes.com\/2016\/05\/31\/business\/international\/smartphone-ad-blocking-software-mobile.html\">ad blocking is on the rise<\/a><\/strong>. The only question is how publishers will handle this trend. Some sites politely <strong>add messages into the ad spaces<\/strong> like <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/time.com\/\">Time.com<\/a>. On Hongkiat, you\u2019ll notice <strong>internal ads to fill the void<\/strong> that link further into the site.<\/p>\n<figure><img decoding=\"async\" alt=\"vulture mag\" src=\"https:\/\/assets.hongkiat.com\/uploads\/web-design-trend-2017\/16-vulture-adblock-message.jpg\"><\/figure>\n<p>One serious trend that I see increasing is <strong>adblock content blocks<\/strong>. This is a technique to <strong>\u201cblock the ad blockers\u201d<\/strong>. This feature is already in place on many large sites such as <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.businessinsider.com\/how-to-disable-an-ad-blocker-on-business-insider-2016-8\">Business Insider<\/a> and <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.extremetech.com\/internet\/220696-forbes-forces-readers-to-turn-off-ad-blockers-promptly-serves-malware\">Forbes<\/a>. Unfortunately, this hurts both the user and the publisher, and it all stems from poor-quality advertising techniques.<\/p>\n<p>Ultimately, it doesn\u2019t matter who you blame or where you stand in the ad blocking debate. More people are installing adblock plugins, and I\u2019m expecting <strong>more publishers to push back<\/strong>.<\/p>\n<div class=\"ref-block ref-block--post\" id=\"ref-post-5\">\n\t\t\t\t\t<a href=\"https:\/\/www.hongkiat.com\/blog\/jquery-detect-ads-block\/\" class=\"ref-block__link\" title=\"Read More: Detecting Ads Blocker with jQuery\" rel=\"bookmark\"><span class=\"screen-reader-text\">Detecting Ads Blocker with jQuery<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/jquery-detect-ads-block.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-21834 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/jquery-detect-ads-block.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">Detecting Ads Blocker with jQuery<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tFor many websites that publish content for free, advertisements (or ads) are one of their primary sources for...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<h2>15. Pure SVG icons<\/h2>\n<p><strong>SVG graphics<\/strong> have already seeped into the web but they\u2019re growing larger by the day. And I have a feeling that 2017 will be <strong>a huge year for SVGs<\/strong> on the web.<\/p>\n<p>You can find thousands of <strong>free SVG icon sets<\/strong> on sites like <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.flaticon.com\/\">Flaticon<\/a> if you know how to search. But you can also <strong>code SVGs into HTML<\/strong>, for example by making use of <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/Colouryum\/pen\/GnzEx\">this example<\/a> on CodePen.<\/p>\n<figure><img decoding=\"async\" alt=\"codepen svg animated icon\" src=\"https:\/\/assets.hongkiat.com\/uploads\/web-design-trend-2017\/17-svg-animated-example.jpg\"><\/figure>\n<p>So, designers have a way to use SVGs, and developers have a way to use SVGs as well. <strong>Modern browser support <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/caniuse.com\/svg\">looks good<\/a><\/strong> across the board, so there no problem with compatibility. All that\u2019s needed is enough designers to <strong>recognize the power of SVGs<\/strong> and start using them!<\/p>\n<div class=\"ref-block ref-block--post\" id=\"ref-post-6\">\n\t\t\t\t\t<a href=\"https:\/\/www.hongkiat.com\/blog\/scalable-vector-graphic-css-styling\/\" class=\"ref-block__link\" title=\"Read More: How to Style SVG Images with CSS: A Simple Guide\" rel=\"bookmark\"><span class=\"screen-reader-text\">How to Style SVG Images with CSS: A Simple Guide<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/scalable-vector-graphic-css-styling.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-15300 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/scalable-vector-graphic-css-styling.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">How to Style SVG Images with CSS: A Simple Guide<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tToday, we're diving deeper into Scalable Vector Graphics (SVG). As mentioned in our previous post, one of the...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<h2>16. Adobe XD<\/h2>\n<p>Adobe put out <strong><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.adobe.com\/products\/xd.html\">a full beta of Adobe XD<\/a><\/strong> in 2016, and it has since grown rapidly. It currently <strong>supports both Mac & Windows<\/strong>, and it\u2019s <strong>in the testing phase<\/strong> before being fully rolled out.<\/p>\n<p>You may scoff at the idea of any program overtaking <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/sketchapp.com\/\">Sketch<\/a> but Adobe is the main software company of creative work for a reason. Plus Sketch is still Mac-only while Adobe is <strong>looking to support everyone<\/strong>.<\/p>\n<p>I firmly believe we\u2019ll be reading a lot more about Adobe XD in the coming year. It may become the go-to software for <strong>designing UI mockups<\/strong>\u2014so we can finally use Photoshop as a photo manipulation tool (as intended).<\/p>\n<p>With the rise of new software, comes dozens of <strong>tutorials and <a href=\"https:\/\/www.hongkiat.com\/blog\/ios10-gui-kit\/\">freebie GUI kits<\/a><\/strong> as well. You can find lots of Adobe XD freebies <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/dribbble.com\/search\/adobexd\">in Dribbble<\/a> along with <strong>new XD-focused freebie sites<\/strong> and <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.xdguru.com\/\">XD Guru<\/a>.<\/p>\n<h2>17. More hamburger menus<\/h2>\n<p>Love it or hate it, the <strong>hamburger is here to stay<\/strong>. There are plenty of usability studies that <strong>argue against menus <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.nngroup.com\/articles\/hamburger-menus\/\">hidden from view<\/a><\/strong>. But with a small screen and only so many alternatives, there isn\u2019t any better alternative for now.<\/p>\n<p>Hamburger icons are slowly <strong>becoming recognizable symbols<\/strong> for nav menus. Just like a magnifying glass icon implies \u201csearch\u201d, the three-bar hamburger icon will soon be synonymous with \u201cmenu\u201d.<\/p>\n<p>This is already true for most tech-savvy individuals. But with each passing year, more people get smartphones and start browsing the mobile web. And they\u2019re learning to <strong>associate that hamburger with a nav menu<\/strong> with no end in sight.<\/p>\n<div class=\"ref-block ref-block--post\" id=\"ref-post-7\">\n\t\t\t\t\t<a href=\"https:\/\/www.hongkiat.com\/blog\/hamburger-menu-animations\/\" class=\"ref-block__link\" title=\"Read More: 20 Yummy Hamburger Menu Animations\" rel=\"bookmark\"><span class=\"screen-reader-text\">20 Yummy Hamburger Menu Animations<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/hamburger-menu-animations.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-26663 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/hamburger-menu-animations.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">20 Yummy Hamburger Menu Animations<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tA hamburger menu primarily triggers a sliding drawer navigation which contains links to pages all over the website....\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<h2>18. Product feature icons<\/h2>\n<p>I wrote about this trend <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/blog.teamtreehouse.com\/50-homepage-website-layouts-using-featured-details-icon-lists\">on Treehouse<\/a> but haven\u2019t mentioned it recently. And going into 2017 this trend is <strong>gonna be huge<\/strong>. It\u2019s probably the most common way to <strong>share product features on a homepage<\/strong>.<\/p>\n<figure><img decoding=\"async\" alt=\"featured icons pressable\" src=\"https:\/\/assets.hongkiat.com\/uploads\/web-design-trend-2017\/18-featured-icons-listing.jpg\"><\/figure>\n<p>You start by <strong>making a list of features<\/strong> for your product. The product can be anything from a SaaS program to a WordPress theme or even a physical item.<\/p>\n<p>Then you can either <strong>design custom icons<\/strong> or <strong>find an icon set<\/strong> to represent these features. It\u2019s best to <strong>avoid generic features<\/strong> such as \u201creliable\u201d or \u201cfast\u201d because most people expect this stuff.<\/p>\n<p>Instead, list features <strong>that actually matter<\/strong>. If it\u2019s a premium WP theme maybe list that it\u2019s responsive, how many widgets it comes with, or how the menu works.<\/p>\n<figure><img decoding=\"async\" alt=\"inferno.js homepage\" src=\"https:\/\/assets.hongkiat.com\/uploads\/web-design-trend-2017\/19-inferno-featured-icons.jpg\"><\/figure>\n<p>These feature icons <strong>work like visuals<\/strong> to help <strong>sell each feature<\/strong>. Text alone is <strong>difficult to consume<\/strong> but visuals are much easier to <strong>understand at a glance<\/strong>.<\/p>\n<h2>19. Above-the-fold CTAs<\/h2>\n<p><strong><a href=\"https:\/\/www.hongkiat.com\/blog\/call-to-action-button-templates\/\">Call-to-actions<\/a><\/strong> have traditionally been placed <strong>all over a website<\/strong>. But with visitors <strong>spending less time on websites<\/strong>, it\u2019s crucial to have a strong CTA <strong>right above the fold<\/strong>.<\/p>\n<p>These call-to-actions might be buttons, opt-in forms, or other inputs to <strong>drive people to take some action<\/strong> such as signing up or reading a blog post.<\/p>\n<figure><img decoding=\"async\" alt=\"gary vaynerchuk homepage\" src=\"https:\/\/assets.hongkiat.com\/uploads\/web-design-trend-2017\/20-gary-vaynerchuk-homepage.jpg\"><\/figure>\n<p>I can\u2019t tell you how to design a CTA or how to optimize it for conversions. But I can say the trend seems to be placing these CTAs <strong>above the fold and in clear view<\/strong> for all visitors to see.<\/p>\n<h2>20. Smaller content areas<\/h2>\n<p>Monitors have grown so large that most websites have to <strong>set a max width<\/strong>. It\u2019s much harder to read sentences when they\u2019re 2000px wide compared to only 700px wide.<\/p>\n<p>Smaller content is <strong>easier to consume<\/strong>, and ultimately creates a <strong>better experience on content-heavy websites<\/strong>.<\/p>\n<p>I think more designers are realizing this, and will slowly <strong>reduce the size of their content areas<\/strong>. I prefer a maximum width of 750px but you could go as small as 600px or less.<\/p>\n<figure><img decoding=\"async\" alt=\"wpbeginner blog\" src=\"https:\/\/assets.hongkiat.com\/uploads\/web-design-trend-2017\/21-wpbeginner-homepage.jpg\"><\/figure>\n<p><strong>Shorter paragraphs<\/strong> with <strong>fewer sentences<\/strong> and <strong>smaller content areas<\/strong> will always <strong>increase readability<\/strong>. Major publications such as the NY Times may deviate with their own structural guidelines. But for a simple blog or business site, the trend is moving towards <strong>lengthier content with smaller paragraphs & content areas<\/strong>.<\/p>\n<h2>Wrapping up<\/h2>\n<p>There are many other trends I wasn\u2019t able to cover in this post, but I think these 20 are the most interesting. As we move forward into 2017, it should be apparent which trends are exploding and which ones aren\u2019t.<\/p>\n<p>And if you have other ideas or suggestions for upcoming design trends feel free to drop a comment below.<\/p>","protected":false},"excerpt":{"rendered":"<p>Another year has passed and designers are looking ahead towards the future. Many promising design trends are bound to erupt in 2017. Last year I covered the top 2016 design trends and we\u2019ve seen a lot of changes since then. So, for this post I\u2019ve picked the top 20 trends that I\u2019ve noticed gaining traction&hellip;<\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[352],"tags":[4577,510],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>20 Rising Web Design Trends to Watch In 2017 - Hongkiat<\/title>\n<meta name=\"description\" content=\"Another year has passed and designers are looking ahead towards the future. Many promising design trends are bound to erupt in 2017. Last year I covered\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/web-design-trend-2017\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"20 Rising Web Design Trends to Watch In 2017\" \/>\n<meta property=\"og:description\" content=\"Another year has passed and designers are looking ahead towards the future. Many promising design trends are bound to erupt in 2017. Last year I covered\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/web-design-trend-2017\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2017-01-31T15:01:54+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-21T09:59:53+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/web-design-trend-2017\/01-herepup-blog-featured-badges.jpg\" \/>\n<meta name=\"author\" content=\"Jake Rocheleau\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jake Rocheleau\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"13 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-design-trend-2017\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-design-trend-2017\\\/\"},\"author\":{\"name\":\"Jake Rocheleau\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\"},\"headline\":\"20 Rising Web Design Trends to Watch In 2017\",\"datePublished\":\"2017-01-31T15:01:54+00:00\",\"dateModified\":\"2025-04-21T09:59:53+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-design-trend-2017\\\/\"},\"wordCount\":2539,\"commentCount\":9,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-design-trend-2017\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/web-design-trend-2017\\\/01-herepup-blog-featured-badges.jpg\",\"keywords\":[\"Web Design Trends\",\"Web Designers\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-design-trend-2017\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-design-trend-2017\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-design-trend-2017\\\/\",\"name\":\"20 Rising Web Design Trends to Watch In 2017 - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-design-trend-2017\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-design-trend-2017\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/web-design-trend-2017\\\/01-herepup-blog-featured-badges.jpg\",\"datePublished\":\"2017-01-31T15:01:54+00:00\",\"dateModified\":\"2025-04-21T09:59:53+00:00\",\"description\":\"Another year has passed and designers are looking ahead towards the future. Many promising design trends are bound to erupt in 2017. Last year I covered\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-design-trend-2017\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-design-trend-2017\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-design-trend-2017\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/web-design-trend-2017\\\/01-herepup-blog-featured-badges.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/web-design-trend-2017\\\/01-herepup-blog-featured-badges.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-design-trend-2017\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"20 Rising Web Design Trends to Watch In 2017\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\",\"name\":\"Jake Rocheleau\",\"description\":\"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers\",\"sameAs\":[\"https:\\\/\\\/www.hongkiat.com\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/jake\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"20 Rising Web Design Trends to Watch In 2017 - Hongkiat","description":"Another year has passed and designers are looking ahead towards the future. Many promising design trends are bound to erupt in 2017. Last year I covered","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/web-design-trend-2017\/","og_locale":"en_US","og_type":"article","og_title":"20 Rising Web Design Trends to Watch In 2017","og_description":"Another year has passed and designers are looking ahead towards the future. Many promising design trends are bound to erupt in 2017. Last year I covered","og_url":"https:\/\/www.hongkiat.com\/blog\/web-design-trend-2017\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2017-01-31T15:01:54+00:00","article_modified_time":"2025-04-21T09:59:53+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/web-design-trend-2017\/01-herepup-blog-featured-badges.jpg","type":"","width":"","height":""}],"author":"Jake Rocheleau","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Jake Rocheleau","Est. reading time":"13 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/web-design-trend-2017\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/web-design-trend-2017\/"},"author":{"name":"Jake Rocheleau","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a"},"headline":"20 Rising Web Design Trends to Watch In 2017","datePublished":"2017-01-31T15:01:54+00:00","dateModified":"2025-04-21T09:59:53+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/web-design-trend-2017\/"},"wordCount":2539,"commentCount":9,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/web-design-trend-2017\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/web-design-trend-2017\/01-herepup-blog-featured-badges.jpg","keywords":["Web Design Trends","Web Designers"],"articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/web-design-trend-2017\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/web-design-trend-2017\/","url":"https:\/\/www.hongkiat.com\/blog\/web-design-trend-2017\/","name":"20 Rising Web Design Trends to Watch In 2017 - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/web-design-trend-2017\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/web-design-trend-2017\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/web-design-trend-2017\/01-herepup-blog-featured-badges.jpg","datePublished":"2017-01-31T15:01:54+00:00","dateModified":"2025-04-21T09:59:53+00:00","description":"Another year has passed and designers are looking ahead towards the future. Many promising design trends are bound to erupt in 2017. Last year I covered","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/web-design-trend-2017\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/web-design-trend-2017\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/web-design-trend-2017\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/web-design-trend-2017\/01-herepup-blog-featured-badges.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/web-design-trend-2017\/01-herepup-blog-featured-badges.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/web-design-trend-2017\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"20 Rising Web Design Trends to Watch In 2017"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a","name":"Jake Rocheleau","description":"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers","sameAs":["https:\/\/www.hongkiat.com"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/jake\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-7yU","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/29072","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=29072"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/29072\/revisions"}],"predecessor-version":[{"id":73883,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/29072\/revisions\/73883"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=29072"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=29072"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=29072"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=29072"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}