{"id":25337,"date":"2017-12-11T00:55:34","date_gmt":"2017-12-11T06:55:34","guid":{"rendered":"https:\/\/www.crowdspring.com\/blog\/?p=25337"},"modified":"2023-06-15T18:18:42","modified_gmt":"2023-06-15T23:18:42","slug":"2018-web-design-trends","status":"publish","type":"post","link":"https:\/\/www.crowdspring.com\/blog\/2018-web-design-trends\/","title":{"rendered":"2018 Web Design Trends: Your Guide To Navigating 9 Hot Trends"},"content":{"rendered":"<div id=\"attachment_25431\" style=\"width: 710px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/www.crowdspring.com\/blog\/2018-web-design-trends\/william-iven-19843\/\" rel=\"attachment wp-att-25431\"><img decoding=\"async\" aria-describedby=\"caption-attachment-25431\" class=\"wp-image-25431 size-full\" src=\"https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131445\/william-iven-19843.jpg\" alt=\"\" width=\"700\" height=\"465\" srcset=\"https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131445\/william-iven-19843.jpg 700w, https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131445\/william-iven-19843-300x199.jpg 300w, https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131445\/william-iven-19843-400x266.jpg 400w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><\/a><p id=\"caption-attachment-25431\" class=\"wp-caption-text\">Photo by\u00a0<a target=\"_blank\" rel=\"noopener noreferrer\">William Iven<\/a>\u00a0on\u00a0Unsplash.<\/p><\/div>\n<p>&nbsp;<\/p>\n<p>People are increasingly shopping online.\u00a0In fact, last year\u00a0<a href=\"http:\/\/fortune.com\/2016\/06\/08\/online-shopping-increases\/\">more than half<\/a> of all purchases were made online.<\/p>\n<p>This trend shows no signs of slowing, so if you don\u2019t have a business\u00a0<a href=\"https:\/\/www.crowdspring.com\/blog\/small-business-online-presence-getting-started-website\/\">website<\/a>\u00a0&#8211; or if your existing website looks dated &#8211; it\u2019s time to invest in a design or a redesign.<\/p>\n<p>As we wrote in <a href=\"https:\/\/www.crowdspring.com\/blog\/website-design-best-practices-business\/\">Grow Your Small Business With These 7 Website Design Best Practices<\/a>,<\/p>\n<blockquote><p>Today, it\u2019s impossible to reach most customers without a website. This is especially true for new small businesses and startups trying to compete in an increasingly noisy world. but it\u2019s also true for even established companies.<\/p>\n<p>Don\u2019t believe me?\u00a0A\u00a0<a href=\"http:\/\/danconia.com\/2010\/03\/study-nearly-100-percent-of-consumers-research-online-before-purchasing-locally\/\">recent study<\/a>\u00a0shows that 97% of consumers research their purchases online before they buy something.<\/p>\n<p>Your website is a crucial component of your marketing and branding strategy. Customers visit your website because they have a particular purpose in mind \u2013 they need something from you \u2013 and your website should help to make them feel comfortable to purchase a product or service from you.<\/p>\n<p>If you have a poorly designed website, the chances are good that you\u2019re losing a chance to turn researchers into loyal customers. Make sure you\u2019re not giving up thousands of dollars in revenue and get your website functioning the way you need it to.<\/p><\/blockquote>\n<p>A dated or poor looking website design can make even the best businesses appear non-professional and unreliable.<\/p>\n<h3><a href=\"https:\/\/www.crowdspring.com\/blog\/web-design-trends-2019\/\" target=\"_blank\" rel=\"noopener noreferrer\">Check out the 2019 web design trends here<\/a>.<\/h3>\n<p>If you want your business to thrive, you have to stand out and one good way to do so is to take advantage of hot website design trends to give your website or <a href=\"https:\/\/www.crowdspring.com\/landing-page-design\/\">landing page<\/a> a sharp, contemporary feel.<\/p>\n<p>We\u2019ve collected nine of the top website design trends you can expect to see in 2018:<\/p>\n<ul>\n<li><a href=\"#80s\">80s influenced design<\/a><\/li>\n<li><a href=\"#clean\">Clean layouts and bold typography<\/a><\/li>\n<li><a href=\"#ucolor\">Unusual color combinations<\/a><\/li>\n<li><a href=\"#mag\">Magazine-style layouts<\/a><\/li>\n<li><a href=\"#brutal\">Brutalism<\/a><\/li>\n<li><a href=\"#ill\">Illustration<\/a><\/li>\n<li><a href=\"#bgs\">Full-screen backgrounds<\/a><\/li>\n<li><a href=\"#cinema\">Cinemagraphs<\/a><\/li>\n<li><a href=\"#depth\">Depth<\/a><\/li>\n<\/ul>\n<p>Let&#8217;s look at each of these trends and assess whether it makes sense for your business.<\/p>\n<h2 id=\"80s\">1. 80s-influenced design<\/h2>\n<p>Annual trends aren\u2019t necessarily new. \u201cWhat goes around, comes around,\u201d as the saying goes.<\/p>\n<p>You don\u2019t have to look further than the resurgence of 80s and 90s fashion for proof.<\/p>\n<p>Brands are taking elements of 80s fashion and design and incorporating them into their websites. This adoption mirrors what\u2019s happening in fashion and other design-related fields throughout the western world; what\u2019s old is new again.<\/p>\n<p>In many cases, this works to the advantage of brands: many elements of the 80s style (and <a href=\"https:\/\/www.thecut.com\/2017\/05\/the-memphis-design-movement-is-having-a-moment.html\">Memphis Design<\/a>) work well in drawing attention:<\/p>\n<ul>\n<li>Patterns and shapes,<\/li>\n<li>Vibrant colors,<\/li>\n<li>Flat, vectorized designs, and<\/li>\n<li>High contrast typography.<\/li>\n<\/ul>\n<p>The risks of co-opting the 80s look for your website is the same risk for using any time-specific look: when the rest of the world tires of 80s design, your site may look dated and out-of-place.<\/p>\n<p>However, if you know your specific audience responds to a good old-fashioned throwback<i>, <\/i>it may be worth investigating.<\/p>\n<div id=\"attachment_25345\" style=\"width: 710px\" class=\"wp-caption alignnone\"><img decoding=\"async\" aria-describedby=\"caption-attachment-25345\" class=\"size-full wp-image-25345\" src=\"https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131504\/cartoon-network-studios.png\" alt=\"\" width=\"700\" height=\"392\" srcset=\"https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131504\/cartoon-network-studios.png 700w, https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131504\/cartoon-network-studios-300x168.png 300w, https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131504\/cartoon-network-studios-400x224.png 400w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><p id=\"caption-attachment-25345\" class=\"wp-caption-text\"><a href=\"http:\/\/www.cartoonnetworkstudios.com\">Cartoon Network Studios<\/a> is a great example of the big and bold Memphis design look.<\/p><\/div>\n<p>&nbsp;<\/p>\n<div id=\"attachment_25346\" style=\"width: 710px\" class=\"wp-caption alignnone\"><img decoding=\"async\" aria-describedby=\"caption-attachment-25346\" class=\"size-full wp-image-25346\" src=\"https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131503\/home-little-flyers-learning-centres.jpg\" alt=\"\" width=\"700\" height=\"392\" srcset=\"https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131503\/home-little-flyers-learning-centres.jpg 700w, https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131503\/home-little-flyers-learning-centres-300x168.jpg 300w, https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131503\/home-little-flyers-learning-centres-400x224.jpg 400w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><p id=\"caption-attachment-25346\" class=\"wp-caption-text\"><a href=\"http:\/\/littleflyers.vic.edu.au\">Little Flyers<\/a> incorporates 80s-style iconography throughout their site.<\/p><\/div>\n<p>&nbsp;<\/p>\n<div id=\"attachment_25347\" style=\"width: 710px\" class=\"wp-caption alignnone\"><img decoding=\"async\" aria-describedby=\"caption-attachment-25347\" class=\"wp-image-25347 size-full\" src=\"https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131503\/coworking-shared-office-in-chicago-nyc-la-austin-san-francisco-and-denver-deskpass.png\" alt=\"\" width=\"700\" height=\"392\" srcset=\"https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131503\/coworking-shared-office-in-chicago-nyc-la-austin-san-francisco-and-denver-deskpass.png 700w, https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131503\/coworking-shared-office-in-chicago-nyc-la-austin-san-francisco-and-denver-deskpass-300x168.png 300w, https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131503\/coworking-shared-office-in-chicago-nyc-la-austin-san-francisco-and-denver-deskpass-400x224.png 400w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><p id=\"caption-attachment-25347\" class=\"wp-caption-text\">Denver&#8217;s <a href=\"https:\/\/www.deskpass.com\">Desk Pass<\/a>&#8216;s color palette has a strong 80s influence.<\/p><\/div>\n<p>&nbsp;<\/p>\n<div id=\"attachment_25389\" style=\"width: 710px\" class=\"wp-caption alignnone\"><img decoding=\"async\" aria-describedby=\"caption-attachment-25389\" class=\"size-full wp-image-25389\" src=\"https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131446\/screenshot-2017-12-8-80s-design-to-again-rock-the-web-design-world-in-2017-inspirationfeed.jpg\" alt=\"\" width=\"700\" height=\"465\" srcset=\"https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131446\/screenshot-2017-12-8-80s-design-to-again-rock-the-web-design-world-in-2017-inspirationfeed.jpg 700w, https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131446\/screenshot-2017-12-8-80s-design-to-again-rock-the-web-design-world-in-2017-inspirationfeed-300x199.jpg 300w, https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131446\/screenshot-2017-12-8-80s-design-to-again-rock-the-web-design-world-in-2017-inspirationfeed-400x266.jpg 400w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><p id=\"caption-attachment-25389\" class=\"wp-caption-text\">Example of 80s-influenced patterns available for purchase from <a href=\"https:\/\/creativemarket.com\/Fay_Francevna\/618282-Geometric-pattern-memphis-style\">Creative Market<\/a>.<\/p><\/div>\n<p><div class=\"subscription-hero-snippet image-on-left\" style=\"background: #161C4A\"><div class=\"title centered\">Want a free brand review?<\/div><div class=\"main-content\"><div class=\"image-wrapper\"><img decoding=\"async\" src=\"https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2022\/07\/09131004\/brand-identity-grader-blog-cta-hero.png\" alt=\"brand identity grader hero\"\/><\/div><div class=\"form-wrapper\"><div class=\"subtitle\">Answer 5 short questions and we will send a custom report with actionable insights and specific actions you can take to build a stronger brand.<\/div><div>\n<script>\nfunction submitForm_drip_form(oFormElement) {\n  var xhr = new XMLHttpRequest();\n  xhr.onload = function() { \n    if (xhr.status == 200 || xhr.status == 202) {\n      var formEl = document.getElementById(\"drip_form\");\n      var doneEl = document.getElementById(\"done_drip_form\");\n      formEl.style = \"display: none\";\n      doneEl.style = \"display: block\";\n    } else {\n      alert(xhr.responseText);\n    }\n  }\n  var formData = new FormData(oFormElement);\n  grecaptcha.execute(\"6LcyQTUpAAAAAC5ZPtCYQzRWKR732_LmqInv9YSK\", { action: \"external_bumblebee_lead\" }).then((token) => {\n    formData.set(\"recaptcha_token\", token);\n    xhr.open(oFormElement.method, oFormElement.action, true);\n    xhr.setRequestHeader(\"x-frontendurl\", window.location.href);\n    xhr.send(formData);\n  });\n\n  return false;\n  }\n<\/script>\n<div id=\"done_drip_form\" class=\"done\">\n      <div class=\"success-title\">\n        <i class=\"fa fa-check-circle\"><\/i><br\/> We just emailed the info to you.\n      <\/div><\/div><form id=\"drip_form\" action=\"https:\/\/www.crowdspring.com\/api\/v1\/bb\/external_leads\/\" method=\"post\" onsubmit=\"return submitForm_drip_form(this);\">\n      <div class=\"form-group\">\n        <input type=\"email\" name=\"email\" class=\"form-control\" id=\"mce-EMAIL\" required=\"true\"\/>\n        <label html_for=\"mce-EMAIL\" class=\"form-label\">Email Address<\/label>\n      <\/div> \n      <div style=\"position: absolute; left: -5000px\" aria-hidden=\"true\">\n\t<input type=\"text\" value=\"brand-identity-grader-landing-page\" tabindex=\"-1\" name=\"tags\" readonly=\"true\"\/>\n        <input type=\"text\" value=\"true\" tabindex=\"-1\" name=\"add_country_tier_suffix\" readonly=\"true\"\/>\n      <\/div><input type=\"submit\" value=\"I want a stronger brand!\" class=\"btn btn-primary\" \/><p class=\"notice\"> <\/form><\/div><\/div><\/div><\/div><\/p>\n<h2 id=\"clean\">2. Clean layouts and bold typography<\/h2>\n<p>Bright colors, wild geometry, and lots of wavy and straight lines everywhere: like it or not, the growth of 80s-influenced design is upon us.<\/p>\n<p>Unlike fashion from the 90s, however, (we\u2019re calling you out, acid wash denim!) clean layouts that use <a href=\"https:\/\/www.crowdspring.com\/blog\/type-font-typography-business-brand-psychology\/\">typography<\/a> in inventive ways can look amazing, and clarity will always be in style.<\/p>\n<p>There are very few instances where choosing a clean, concise design is a wrong decision. Clean design moves site content to the forefront and helps focus your audience\u2019s attention on what your site says. Such layouts help to showcase your <a href=\"https:\/\/www.crowdspring.com\/naming-a-business-or-product\/\">business name<\/a> and <a href=\"https:\/\/www.crowdspring.com\/logo-design\/\">logo<\/a> and focus your customers and prospects on the key message you&#8217;re trying to communicate.<\/p>\n<p>Clean layouts can belie the hard work and planning that goes into making them possible. When playing this card, it\u2019s important to remember the difference between simple and simplistic: simple means easy, straightforward, and uncomplicated, whereas simplistic can mean something is overly simplified, often to the point of being misleading.<\/p>\n<div id=\"attachment_25338\" style=\"width: 710px\" class=\"wp-caption alignnone\"><img decoding=\"async\" aria-describedby=\"caption-attachment-25338\" class=\"size-full wp-image-25338\" src=\"https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131507\/screenshot-2017-12-8-tillamook.png\" alt=\"\" width=\"700\" height=\"392\" srcset=\"https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131507\/screenshot-2017-12-8-tillamook.png 700w, https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131507\/screenshot-2017-12-8-tillamook-300x168.png 300w, https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131507\/screenshot-2017-12-8-tillamook-400x224.png 400w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><p id=\"caption-attachment-25338\" class=\"wp-caption-text\">Big type and cheese: a natural combination (via <a href=\"https:\/\/www.tillamook.com\/shreds\/\">Tilamook<\/a>)<\/p><\/div>\n<p>&nbsp;<\/p>\n<div id=\"attachment_25339\" style=\"width: 710px\" class=\"wp-caption alignnone\"><img decoding=\"async\" aria-describedby=\"caption-attachment-25339\" class=\"size-full wp-image-25339\" src=\"https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131507\/spotify-me.png\" alt=\"\" width=\"700\" height=\"392\" srcset=\"https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131507\/spotify-me.png 700w, https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131507\/spotify-me-300x168.png 300w, https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131507\/spotify-me-400x224.png 400w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><p id=\"caption-attachment-25339\" class=\"wp-caption-text\">Spotify uses large, spaciously laid out type in many of their designs to great effect. (via <a href=\"https:\/\/spotify.me\/\">Spotify.me<\/a>)<\/p><\/div>\n<p>&nbsp;<\/p>\n<div id=\"attachment_25341\" style=\"width: 710px\" class=\"wp-caption alignnone\"><img decoding=\"async\" aria-describedby=\"caption-attachment-25341\" class=\"size-full wp-image-25341\" src=\"https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131506\/smith-llc-.png\" alt=\"\" width=\"700\" height=\"392\" srcset=\"https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131506\/smith-llc-.png 700w, https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131506\/smith-llc--300x168.png 300w, https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131506\/smith-llc--400x224.png 400w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><p id=\"caption-attachment-25341\" class=\"wp-caption-text\">Bold type against a neutral background: an excellent mix. (via <a href=\"http:\/\/www.smithlit.com\">SMITH<\/a>)<\/p><\/div>\n<p>&nbsp;<\/p>\n<div id=\"attachment_25342\" style=\"width: 710px\" class=\"wp-caption alignnone\"><img decoding=\"async\" aria-describedby=\"caption-attachment-25342\" class=\"size-full wp-image-25342\" src=\"https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131505\/stellar-works-asian-sensibility-timeless-craft-.jpg\" alt=\"\" width=\"700\" height=\"392\" srcset=\"https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131505\/stellar-works-asian-sensibility-timeless-craft-.jpg 700w, https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131505\/stellar-works-asian-sensibility-timeless-craft--300x168.jpg 300w, https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131505\/stellar-works-asian-sensibility-timeless-craft--400x224.jpg 400w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><p id=\"caption-attachment-25342\" class=\"wp-caption-text\">The use of full screen backgrounds and carefully positioned type works well on <a href=\"http:\/\/www.stellarworks.com\">Stellar Works<\/a>&#8216;s website.<\/p><\/div>\n<p>&nbsp;<\/p>\n<h2 id=\"ucolor\">3. Unusual color combinations<\/h2>\n<p>Gone are the days when sites relied on subtle and faded color combinations.<\/p>\n<p>Websites that went with bold, unusual <a href=\"https:\/\/www.crowdspring.com\/blog\/how-21-brands-use-colors-to-influence-customers\/\">color choices<\/a> and combinations surged in 2017, and this trend looks to continue in 2018.<\/p>\n<p>The motivations driving these decisions are often pragmatic, and it continues to be difficult for websites to differentiate themselves. Bright color palettes offer brands a way to stand out from their competitors while creating a unique and memorable visual experience.<\/p>\n<p><a href=\"https:\/\/www.crowdspring.com\/blog\/what-is-a-style-guide-and-how-can-you-create-one-for-your-business\/\">Choosing a striking color scheme<\/a> can be challenging. Fortunately, there are a lot of tools available to help designers and business owners generate color ideas quickly and easily. Sites like <a href=\"http:\/\/coolors.co\">Coolors<\/a> and <a href=\"http:\/\/colormind.io\">Colormind<\/a> mix up combinations for you and are useful to see a lot of options quickly.<\/p>\n<p>If you\u2019re going to try some unusual colors, keep in mind that color preferences are highly subjective. One person\u2019s energetic combination can seem garish and overwhelming to someone else.<\/p>\n<p>As always, keep your brand at the forefront of any decisions. <a href=\"https:\/\/www.crowdspring.com\/blog\/color-theory\/\" target=\"_blank\" rel=\"noopener\">Choose colors<\/a> that <a href=\"https:\/\/www.crowdspring.com\/blog\/consistent-branding-marketing-small-business\/\">make sense for your brand<\/a>, and if you\u2019re going to choose something wild and off-brand, do it for a good reason.<\/p>\n<div id=\"attachment_25350\" style=\"width: 710px\" class=\"wp-caption alignnone\"><img decoding=\"async\" aria-describedby=\"caption-attachment-25350\" class=\"size-full wp-image-25350\" src=\"https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131502\/dropbox.png\" alt=\"\" width=\"700\" height=\"392\" srcset=\"https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131502\/dropbox.png 700w, https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131502\/dropbox-300x168.png 300w, https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131502\/dropbox-400x224.png 400w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><p id=\"caption-attachment-25350\" class=\"wp-caption-text\"><a href=\"https:\/\/www.dropbox.com\">Dropbox<\/a>&#8216;s recent rebrand uses bold color combinations to create visual excitement.<\/p><\/div>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<div id=\"attachment_25352\" style=\"width: 710px\" class=\"wp-caption alignnone\"><img decoding=\"async\" aria-describedby=\"caption-attachment-25352\" class=\"size-full wp-image-25352\" src=\"https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131502\/home.png\" alt=\"\" width=\"700\" height=\"392\" srcset=\"https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131502\/home.png 700w, https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131502\/home-300x168.png 300w, https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131502\/home-400x224.png 400w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><p id=\"caption-attachment-25352\" class=\"wp-caption-text\">Via <a href=\"https:\/\/www.truedigital.co.uk\">True Digital<\/a><\/p><\/div>\n<p>&nbsp;<\/p>\n<div id=\"attachment_25353\" style=\"width: 710px\" class=\"wp-caption alignnone\"><img decoding=\"async\" aria-describedby=\"caption-attachment-25353\" class=\"size-full wp-image-25353\" src=\"https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131501\/lush-fresh-handmade-cosmetics.jpg\" alt=\"\" width=\"700\" height=\"392\" srcset=\"https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131501\/lush-fresh-handmade-cosmetics.jpg 700w, https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131501\/lush-fresh-handmade-cosmetics-300x168.jpg 300w, https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131501\/lush-fresh-handmade-cosmetics-400x224.jpg 400w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><p id=\"caption-attachment-25353\" class=\"wp-caption-text\">Cosmetics powerhouse <a href=\"https:\/\/www.lush.com\/\">Lush<\/a> mixes bright, lively colors with striking illustrations on their website.<\/p><\/div>\n<p>&nbsp;<\/p>\n<div id=\"attachment_25354\" style=\"width: 710px\" class=\"wp-caption alignnone\"><img decoding=\"async\" aria-describedby=\"caption-attachment-25354\" class=\"size-full wp-image-25354\" src=\"https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131501\/ubersignlanguage.png\" alt=\"\" width=\"700\" height=\"396\" srcset=\"https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131501\/ubersignlanguage.png 700w, https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131501\/ubersignlanguage-300x170.png 300w, https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131501\/ubersignlanguage-400x226.png 400w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><p id=\"caption-attachment-25354\" class=\"wp-caption-text\">Uber created <a href=\"http:\/\/ubersignlanguage.com\">this colorful website<\/a> that lets people learn basic sign language.<\/p><\/div>\n<p>&nbsp;<\/p>\n<div id=\"attachment_25355\" style=\"width: 710px\" class=\"wp-caption alignnone\"><img decoding=\"async\" aria-describedby=\"caption-attachment-25355\" class=\"size-full wp-image-25355\" src=\"https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131500\/in-job-international-recruitment-company.jpg\" alt=\"\" width=\"700\" height=\"392\" srcset=\"https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131500\/in-job-international-recruitment-company.jpg 700w, https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131500\/in-job-international-recruitment-company-300x168.jpg 300w, https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131500\/in-job-international-recruitment-company-400x224.jpg 400w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><p id=\"caption-attachment-25355\" class=\"wp-caption-text\">Check out this bold mix of purples and greens on this <a href=\"http:\/\/www.injob.com\/\">work-related site<\/a>.<\/p><\/div>\n<p>&nbsp;<\/p>\n<h2 id=\"mag\">4. Open, magazine-like layouts<\/h2>\n<p>The boxy, grid-based designs seen everywhere two to three years ago were popular in part due to the limitations of web development technology.<\/p>\n<p>Many sites also relied on predictable, clearly laid out designs to ensure that they were responsive to unpredictable screen sizes like tablets and mobile phones.<\/p>\n<p>A lot has changed.<\/p>\n<p>More recently, layouts have unmoored themselves from the grid and gone with looser, more magazine-style designs. We\u2019re going to see even more of this in 2018 as brands start to experiment more openly with grid-less designs.<\/p>\n<div id=\"attachment_25357\" style=\"width: 710px\" class=\"wp-caption alignnone\"><img decoding=\"async\" aria-describedby=\"caption-attachment-25357\" class=\"size-full wp-image-25357\" src=\"https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131500\/vp-brands-international.png\" alt=\"\" width=\"700\" height=\"392\" srcset=\"https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131500\/vp-brands-international.png 700w, https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131500\/vp-brands-international-300x168.png 300w, https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131500\/vp-brands-international-400x224.png 400w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><p id=\"caption-attachment-25357\" class=\"wp-caption-text\">This site uses a grid-less layout that evokes David Carson&#8217;s magazine designs from the 90s. (via <a href=\"https:\/\/vp-brands.com\/\">VP Brands<\/a>)<\/p><\/div>\n<p>&nbsp;<\/p>\n<div id=\"attachment_25358\" style=\"width: 710px\" class=\"wp-caption alignnone\"><img decoding=\"async\" aria-describedby=\"caption-attachment-25358\" class=\"size-full wp-image-25358\" src=\"https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131500\/variety500.png\" alt=\"\" width=\"700\" height=\"392\" srcset=\"https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131500\/variety500.png 700w, https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131500\/variety500-300x168.png 300w, https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131500\/variety500-400x224.png 400w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><p id=\"caption-attachment-25358\" class=\"wp-caption-text\">Variety magazine appropriately uses a magazine-like layout for <a href=\"http:\/\/variety.com\/variety-500\/\">this power ranking microsite<\/a>.<\/p><\/div>\n<p>&nbsp;<\/p>\n<div id=\"attachment_25359\" style=\"width: 710px\" class=\"wp-caption alignnone\"><img decoding=\"async\" aria-describedby=\"caption-attachment-25359\" class=\"size-full wp-image-25359\" src=\"https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131459\/fresh-connections-catering-northern-vas-priemere-caterer.jpg\" alt=\"\" width=\"700\" height=\"392\" srcset=\"https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131459\/fresh-connections-catering-northern-vas-priemere-caterer.jpg 700w, https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131459\/fresh-connections-catering-northern-vas-priemere-caterer-300x168.jpg 300w, https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131459\/fresh-connections-catering-northern-vas-priemere-caterer-400x224.jpg 400w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><p id=\"caption-attachment-25359\" class=\"wp-caption-text\">Big photos rule on <a href=\"https:\/\/www.fccatering.com\">Fresh Connections Catering<\/a>s website.<\/p><\/div>\n<p>&nbsp;<\/p>\n<div id=\"attachment_25360\" style=\"width: 710px\" class=\"wp-caption alignnone\"><img decoding=\"async\" aria-describedby=\"caption-attachment-25360\" class=\"size-full wp-image-25360\" src=\"https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131459\/hi-pointe-drive-in-best-burgers-in-st-louis-mo.jpg\" alt=\"\" width=\"700\" height=\"392\" srcset=\"https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131459\/hi-pointe-drive-in-best-burgers-in-st-louis-mo.jpg 700w, https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131459\/hi-pointe-drive-in-best-burgers-in-st-louis-mo-300x168.jpg 300w, https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131459\/hi-pointe-drive-in-best-burgers-in-st-louis-mo-400x224.jpg 400w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><p id=\"caption-attachment-25360\" class=\"wp-caption-text\">This <a href=\"http:\/\/hipointedrivein.com\">drive-in&#8217;s website<\/a> is another example of <a href=\"https:\/\/www.davidcarsonart.com\">David Carson<\/a>&#8216;s influence on page layout.<\/p><\/div>\n<p>&nbsp;<\/p>\n<div id=\"attachment_25361\" style=\"width: 710px\" class=\"wp-caption alignnone\"><img decoding=\"async\" aria-describedby=\"caption-attachment-25361\" class=\"size-full wp-image-25361\" src=\"https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131458\/currency-chicagos-fintech-center-of-excellence.jpg\" alt=\"\" width=\"700\" height=\"392\" srcset=\"https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131458\/currency-chicagos-fintech-center-of-excellence.jpg 700w, https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131458\/currency-chicagos-fintech-center-of-excellence-300x168.jpg 300w, https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131458\/currency-chicagos-fintech-center-of-excellence-400x224.jpg 400w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><p id=\"caption-attachment-25361\" class=\"wp-caption-text\">Big typography combines with a nice color palette in <a href=\"http:\/\/www.currencychicago.org\">this site<\/a> for a Chicago-based financial tech co-working space.<\/p><\/div>\n<p>&nbsp;<\/p>\n<h2 id=\"brutal\">5. Brutalism<\/h2>\n<p>2017 saw the rise of websites that took all of the trends we\u2019ve already mentioned \u2014 clean designs, unusual color combinations, and open layouts \u2014 tossed them together, and added an unexpected spin to create something new.<\/p>\n<p>Designers group these websites into the same category as the <a href=\"https:\/\/en.wikipedia.org\/wiki\/Brutalist_architecture\">Brutalism architecture<\/a> wave of the 1950s-70s, similarly highlighting a raw, intentionally unfinished look.<\/p>\n<p>Websites considered part of the Brutalism style are characterized by:<\/p>\n<ul>\n<li>layouts that overlap in sometimes haphazard ways,<\/li>\n<li>stark color palettes, and<\/li>\n<li>a bold use of typography.<\/li>\n<\/ul>\n<p>Many of these sites cater to younger audiences, and the look might be too edgy for some brands.<\/p>\n<p>That said, many of the elements from cutting edge sites make their way into mainstream businesses, and we expect this to happen more frequently in 2018.<\/p>\n<div id=\"attachment_25363\" style=\"width: 710px\" class=\"wp-caption alignnone\"><img decoding=\"async\" aria-describedby=\"caption-attachment-25363\" class=\"size-full wp-image-25363\" src=\"https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131458\/featured-projects.png\" alt=\"\" width=\"700\" height=\"392\" srcset=\"https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131458\/featured-projects.png 700w, https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131458\/featured-projects-300x168.png 300w, https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131458\/featured-projects-400x224.png 400w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><p id=\"caption-attachment-25363\" class=\"wp-caption-text\">Haphazardly placed images and text clash on <a href=\"https:\/\/www.non-linear.com\">Non-Linear<\/a>&#8216;s website.<\/p><\/div>\n<p>&nbsp;<\/p>\n<div id=\"attachment_25364\" style=\"width: 710px\" class=\"wp-caption alignnone\"><img decoding=\"async\" aria-describedby=\"caption-attachment-25364\" class=\"size-full wp-image-25364\" src=\"https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131457\/lnwy-read-watch-listen.png\" alt=\"\" width=\"700\" height=\"392\" srcset=\"https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131457\/lnwy-read-watch-listen.png 700w, https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131457\/lnwy-read-watch-listen-300x168.png 300w, https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131457\/lnwy-read-watch-listen-400x224.png 400w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><p id=\"caption-attachment-25364\" class=\"wp-caption-text\"><a href=\"https:\/\/lnwy.co\">This magazine site<\/a> is an excellent example of a brutalist-inspired layout. It feels raw and unfinished.<\/p><\/div>\n<p>&nbsp;<\/p>\n<div id=\"attachment_25365\" style=\"width: 710px\" class=\"wp-caption alignnone\"><img decoding=\"async\" aria-describedby=\"caption-attachment-25365\" class=\"size-full wp-image-25365\" src=\"https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131457\/the-outline.jpg\" alt=\"\" width=\"700\" height=\"392\" srcset=\"https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131457\/the-outline.jpg 700w, https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131457\/the-outline-300x168.jpg 300w, https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131457\/the-outline-400x224.jpg 400w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><p id=\"caption-attachment-25365\" class=\"wp-caption-text\">Online publication <a href=\"https:\/\/theoutline.com\">The Outline<\/a> uses an unusual mishmash of 80s design and raw layout to reinforce the idea that it&#8217;s not like any other content site you&#8217;ve seen before.<\/p><\/div>\n<p>&nbsp;<\/p>\n<div id=\"attachment_25366\" style=\"width: 710px\" class=\"wp-caption alignnone\"><img decoding=\"async\" aria-describedby=\"caption-attachment-25366\" class=\"size-full wp-image-25366\" src=\"https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131457\/adult-swim-etcetera.png\" alt=\"\" width=\"700\" height=\"392\" srcset=\"https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131457\/adult-swim-etcetera.png 700w, https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131457\/adult-swim-etcetera-300x168.png 300w, https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131457\/adult-swim-etcetera-400x224.png 400w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><p id=\"caption-attachment-25366\" class=\"wp-caption-text\"><a href=\"http:\/\/www.adultswim.com\/etcetera\/\">Adult Swim<\/a>&#8216;s mess of a design makes sense when you consider their target audience skews younger and seeks out edgier, more unusual content.<\/p><\/div>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<div id=\"attachment_25367\" style=\"width: 710px\" class=\"wp-caption alignnone\"><img decoding=\"async\" aria-describedby=\"caption-attachment-25367\" class=\"size-full wp-image-25367\" src=\"https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131456\/cafe-la-petite-reine.png\" alt=\"\" width=\"700\" height=\"392\" srcset=\"https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131456\/cafe-la-petite-reine.png 700w, https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131456\/cafe-la-petite-reine-300x168.png 300w, https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131456\/cafe-la-petite-reine-400x224.png 400w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><p id=\"caption-attachment-25367\" class=\"wp-caption-text\">Via <a href=\"http:\/\/cafelapetitereine.ch\/\">Cafe La Petite Reine<\/a><\/p><\/div>\n<h2><\/h2>\n<h2 id=\"ill\">6. Illustration<\/h2>\n<div id=\"attachment_25418\" style=\"width: 710px\" class=\"wp-caption alignnone\"><img decoding=\"async\" aria-describedby=\"caption-attachment-25418\" class=\"size-full wp-image-25418\" src=\"https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131445\/webp.net-resizeimage-2.jpg\" alt=\"\" width=\"700\" height=\"700\" srcset=\"https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131445\/webp.net-resizeimage-2.jpg 700w, https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131445\/webp.net-resizeimage-2-150x150.jpg 150w, https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131445\/webp.net-resizeimage-2-300x300.jpg 300w, https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131445\/webp.net-resizeimage-2-400x400.jpg 400w, https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131445\/webp.net-resizeimage-2-177x177.jpg 177w, https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131445\/webp.net-resizeimage-2-380x380.jpg 380w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><p id=\"caption-attachment-25418\" class=\"wp-caption-text\">by jeffquigley<\/p><\/div>\n<p><a href=\"https:\/\/www.crowdspring.com\/blog\/6-companies-using-illustration-to-create-a-more-personal-brand\/\">We\u2019ve previously looked at how brands incorporate illustration<\/a>, and this trend is going to continue for the same reasons we outlined earlier:<\/p>\n<blockquote><p>One of the biggest strengths of using illustration is that <b>it is based on ideas and not reality<\/b>, as photographs tend to be. They can be crafted to communicate exactly what you want to convey and can often make complex ideas easier to understand. It\u2019s also <b>easier to create a very individual style<\/b> and feel using illustration than it is with photography.<\/p><\/blockquote>\n<p>One challenge with incorporating illustration is it can be difficult to find skilled illustrators. Another is the work is often expensive.<\/p>\n<p>Crowdspring can help with both problems.\u00a0We have thousands of creatives who create high-quality illustrations (and other designs) at affordable prices. This allows companies and brands to add <a href=\"https:\/\/www.crowdspring.com\/illustration-and-graphic-design\/\">illustration\u00a0and graphic design<\/a> to their websites and landing pages quickly and easily.<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<div id=\"attachment_25369\" style=\"width: 710px\" class=\"wp-caption alignnone\"><img decoding=\"async\" aria-describedby=\"caption-attachment-25369\" class=\"size-full wp-image-25369\" src=\"https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131456\/bloom-say-hello-to-inclusive-credit.png\" alt=\"\" width=\"700\" height=\"392\" srcset=\"https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131456\/bloom-say-hello-to-inclusive-credit.png 700w, https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131456\/bloom-say-hello-to-inclusive-credit-300x168.png 300w, https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131456\/bloom-say-hello-to-inclusive-credit-400x224.png 400w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><p id=\"caption-attachment-25369\" class=\"wp-caption-text\">Via <a href=\"https:\/\/hellobloom.io\">Bloom<\/a><\/p><\/div>\n<p>&nbsp;<\/p>\n<div id=\"attachment_25370\" style=\"width: 710px\" class=\"wp-caption alignnone\"><img decoding=\"async\" aria-describedby=\"caption-attachment-25370\" class=\"size-full wp-image-25370\" src=\"https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131455\/world-of-wonder-by-author-r-j-palacio-wonder.jpg\" alt=\"\" width=\"700\" height=\"392\" srcset=\"https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131455\/world-of-wonder-by-author-r-j-palacio-wonder.jpg 700w, https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131455\/world-of-wonder-by-author-r-j-palacio-wonder-300x168.jpg 300w, https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131455\/world-of-wonder-by-author-r-j-palacio-wonder-400x224.jpg 400w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><p id=\"caption-attachment-25370\" class=\"wp-caption-text\">This website for the book <a href=\"https:\/\/wonderthebook.com\">World of Wonder<\/a> appropriately uses illustrations from the book throughout.<\/p><\/div>\n<p>&nbsp;<\/p>\n<div id=\"attachment_25371\" style=\"width: 710px\" class=\"wp-caption alignnone\"><img decoding=\"async\" aria-describedby=\"caption-attachment-25371\" class=\"size-full wp-image-25371\" src=\"https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131454\/best-cell-phone-plans-prepaid-phones-us-mobile.png\" alt=\"\" width=\"700\" height=\"392\" srcset=\"https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131454\/best-cell-phone-plans-prepaid-phones-us-mobile.png 700w, https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131454\/best-cell-phone-plans-prepaid-phones-us-mobile-300x168.png 300w, https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131454\/best-cell-phone-plans-prepaid-phones-us-mobile-400x224.png 400w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><p id=\"caption-attachment-25371\" class=\"wp-caption-text\">Cell carrier <a href=\"https:\/\/www.usmobile.com\">US Mobile<\/a> uses illustration to help soften its image and make it seem more approachable than the bigger companies.<\/p><\/div>\n<p>&nbsp;<\/p>\n<div id=\"attachment_25372\" style=\"width: 710px\" class=\"wp-caption alignnone\"><img decoding=\"async\" aria-describedby=\"caption-attachment-25372\" class=\"size-full wp-image-25372\" src=\"https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131454\/family-me.png\" alt=\"\" width=\"700\" height=\"392\" srcset=\"https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131454\/family-me.png 700w, https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131454\/family-me-300x168.png 300w, https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131454\/family-me-400x224.png 400w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><p id=\"caption-attachment-25372\" class=\"wp-caption-text\">This family tree site&#8217;s mascot is a very happy-looking bear. (via <a href=\"https:\/\/www.family.me\">Family.Me<\/a>)<\/p><\/div>\n<p>&nbsp;<\/p>\n<h2 id=\"bgs\">7. Full-screen backgrounds<\/h2>\n<p>As the saying goes, a picture is worth a thousand words, and websites are saying a lot more with less using images and videos as a background element.<\/p>\n<p>Websites have used full-screen backgrounds for a while, but many of these targeted audiences with access to newer technology and faster Internet connections. Now that the speed and responsiveness of mobile networks have caught up to home-based Internet, this design style is on the rise.<\/p>\n<p>The broader availability of high-quality, cheap stock photos and video has also fueled this change. They\u2019re much easier to find, and adding them to a page is straightforward.<\/p>\n<div id=\"attachment_25374\" style=\"width: 710px\" class=\"wp-caption alignnone\"><img decoding=\"async\" aria-describedby=\"caption-attachment-25374\" class=\"size-full wp-image-25374\" src=\"https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131453\/check-out-the-new-track-hymn-by-veilhymn.jpg\" alt=\"\" width=\"700\" height=\"392\" srcset=\"https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131453\/check-out-the-new-track-hymn-by-veilhymn.jpg 700w, https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131453\/check-out-the-new-track-hymn-by-veilhymn-300x168.jpg 300w, https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131453\/check-out-the-new-track-hymn-by-veilhymn-400x224.jpg 400w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><p id=\"caption-attachment-25374\" class=\"wp-caption-text\">Via <a href=\"http:\/\/www.veilhymn.com\">Veil Hymn<\/a><\/p><\/div>\n<p>&nbsp;<\/p>\n<div id=\"attachment_25375\" style=\"width: 710px\" class=\"wp-caption alignnone\"><img decoding=\"async\" aria-describedby=\"caption-attachment-25375\" class=\"size-full wp-image-25375\" src=\"https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131453\/the-day.jpg\" alt=\"\" width=\"700\" height=\"392\" srcset=\"https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131453\/the-day.jpg 700w, https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131453\/the-day-300x168.jpg 300w, https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131453\/the-day-400x224.jpg 400w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><p id=\"caption-attachment-25375\" class=\"wp-caption-text\">Via <a href=\"https:\/\/www.thedaycollective.com\">The Day Collective<\/a><\/p><\/div>\n<p>&nbsp;<\/p>\n<div id=\"attachment_25376\" style=\"width: 710px\" class=\"wp-caption alignnone\"><img decoding=\"async\" aria-describedby=\"caption-attachment-25376\" class=\"size-full wp-image-25376\" src=\"https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131452\/homepage-orison.jpg\" alt=\"\" width=\"700\" height=\"392\" srcset=\"https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131452\/homepage-orison.jpg 700w, https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131452\/homepage-orison-300x168.jpg 300w, https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131452\/homepage-orison-400x224.jpg 400w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><p id=\"caption-attachment-25376\" class=\"wp-caption-text\">This promotional site for a home battery system uses full-screen background images effectively. (via <a href=\"http:\/\/orison.energy\">Orison Energy<\/a>)<\/p><\/div>\n<p>&nbsp;<\/p>\n<div id=\"attachment_25377\" style=\"width: 710px\" class=\"wp-caption alignnone\"><img decoding=\"async\" aria-describedby=\"caption-attachment-25377\" class=\"size-full wp-image-25377\" src=\"https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131452\/stories-for-good.jpg\" alt=\"\" width=\"700\" height=\"392\" srcset=\"https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131452\/stories-for-good.jpg 700w, https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131452\/stories-for-good-300x168.jpg 300w, https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131452\/stories-for-good-400x224.jpg 400w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><p id=\"caption-attachment-25377\" class=\"wp-caption-text\">Big images go along with big stories on this site dedicated to stories &#8220;about important issues around the world.&#8221; (via <a href=\"https:\/\/www.storiesforgood.org\/\">Stories for Good<\/a>)<\/p><\/div>\n<p>&nbsp;<\/p>\n<div id=\"attachment_25378\" style=\"width: 710px\" class=\"wp-caption alignnone\"><img decoding=\"async\" aria-describedby=\"caption-attachment-25378\" class=\"size-full wp-image-25378\" src=\"https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131452\/hexagon-composites.jpg\" alt=\"\" width=\"700\" height=\"392\" srcset=\"https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131452\/hexagon-composites.jpg 700w, https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131452\/hexagon-composites-300x168.jpg 300w, https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131452\/hexagon-composites-400x224.jpg 400w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><p id=\"caption-attachment-25378\" class=\"wp-caption-text\">A rather surprisingly well-designed website for this Russian maker of propane tanks. (via <a href=\"http:\/\/gaz.store\">Gaz<\/a>)<\/p><\/div>\n<p>&nbsp;<\/p>\n<h2 id=\"cinema\">8. Cinemagraphs<\/h2>\n<p>When is a photo not entirely just a photo? Cinemagraphs, or \u201cliving photos,\u201d are still photos that incorporate a tiny bit of motion, and they\u2019re being used in website design more and more.<\/p>\n<p>Created by <a href=\"http:\/\/cinemagraphs.com\">Kevin Burg and Jamie Beck<\/a> in 2011, cinemagraphs are powerful in part because they can surprise and delight the viewer.<\/p>\n<p>What seems like a motionless photo at first can draw a customer\u2019s attention when they notice the movement, and as everyone online knows, attention is the currency of the web.<\/p>\n<p>The explosion of animated GIFs as both an art form and a way of communicating is another critical driver of cinemagraphs in design. This is another trend enabled by faster mobile networks and smartphone use.<\/p>\n<div id=\"attachment_25379\" style=\"width: 1028px\" class=\"wp-caption alignnone\"><img decoding=\"async\" aria-describedby=\"caption-attachment-25379\" class=\"size-full wp-image-25379\" src=\"https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131451\/deepend-cinemagraph.gif\" alt=\"\" width=\"1018\" height=\"594\" \/><p id=\"caption-attachment-25379\" class=\"wp-caption-text\"><a href=\"http:\/\/thedeependdesign.com\/\">Deep End Consulting<\/a> mixes still photography with moving vehicles for a cool-looking effect.<\/p><\/div>\n<p>&nbsp;<\/p>\n<div id=\"attachment_25380\" style=\"width: 1287px\" class=\"wp-caption alignnone\"><img decoding=\"async\" aria-describedby=\"caption-attachment-25380\" class=\"size-full wp-image-25380\" src=\"https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131450\/gm-cinemagraph.gif\" alt=\"\" width=\"1277\" height=\"570\" \/><p id=\"caption-attachment-25380\" class=\"wp-caption-text\">Cinemagraph via <a href=\"https:\/\/www.glendevonmotors.com\">Glendevon Motors<\/a><\/p><\/div>\n<p>&nbsp;<\/p>\n<div id=\"attachment_25381\" style=\"width: 625px\" class=\"wp-caption alignnone\"><img decoding=\"async\" aria-describedby=\"caption-attachment-25381\" class=\"size-full wp-image-25381\" src=\"https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131449\/gilt-cinemagraph.gif\" alt=\"\" width=\"615\" height=\"290\" \/><p id=\"caption-attachment-25381\" class=\"wp-caption-text\">Via Gilt Taste<\/p><\/div>\n<p>&nbsp;<\/p>\n<div id=\"attachment_25382\" style=\"width: 660px\" class=\"wp-caption alignnone\"><img decoding=\"async\" aria-describedby=\"caption-attachment-25382\" class=\"size-full wp-image-25382\" src=\"https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131449\/paper-flying3.gif\" alt=\"\" width=\"650\" height=\"475\" \/><p id=\"caption-attachment-25382\" class=\"wp-caption-text\">Via Jade and Andy<\/p><\/div>\n<p>&nbsp;<\/p>\n<h2 id=\"depth\">9. Depth<\/h2>\n<p>Adding depth to a website design can, quite literally, draw in your audience\u2019s attention. There\u2019s something deeply compelling about sites that try to break free of the web\u2019s usual two-dimensions.<\/p>\n<p>Thanks to, once again, faster devices and networks, pages that utilize isometric design (representing three-dimensional objects using two-dimensions) and <a href=\"https:\/\/en.wikipedia.org\/wiki\/Parallax_scrolling\">parallax scrolling effects<\/a> (where the background of a page scrolls at a slower rate than items \u201ccloser\u201d to the viewer do) are becoming more common. This will continue to be true in 2018.<\/p>\n<p>Audiences respond to the feeling of motion and scope that parallax scrolling and three-dimensional design adds to a website. It can make a straightforward website feel sophisticated and creates a sense of narrative that highlights the site\u2019s product or service.<\/p>\n<div id=\"attachment_25383\" style=\"width: 710px\" class=\"wp-caption alignnone\"><img decoding=\"async\" aria-describedby=\"caption-attachment-25383\" class=\"size-full wp-image-25383\" src=\"https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131449\/teapot-creation-toast-the-3d.png\" alt=\"\" width=\"700\" height=\"392\" srcset=\"https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131449\/teapot-creation-toast-the-3d.png 700w, https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131449\/teapot-creation-toast-the-3d-300x168.png 300w, https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131449\/teapot-creation-toast-the-3d-400x224.png 400w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><p id=\"caption-attachment-25383\" class=\"wp-caption-text\">A beautifully layered site for this French tea company. (via <a href=\"http:\/\/www.teapot-creation.com\/\">Teapot Creation<\/a>)<\/p><\/div>\n<p>&nbsp;<\/p>\n<div id=\"attachment_25384\" style=\"width: 710px\" class=\"wp-caption alignnone\"><img decoding=\"async\" aria-describedby=\"caption-attachment-25384\" class=\"size-full wp-image-25384\" src=\"https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131448\/firewatch-out-now-for-windows-playstation-4-mac-and-linux.png\" alt=\"\" width=\"700\" height=\"392\" srcset=\"https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131448\/firewatch-out-now-for-windows-playstation-4-mac-and-linux.png 700w, https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131448\/firewatch-out-now-for-windows-playstation-4-mac-and-linux-300x168.png 300w, https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131448\/firewatch-out-now-for-windows-playstation-4-mac-and-linux-400x224.png 400w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><p id=\"caption-attachment-25384\" class=\"wp-caption-text\">Well-executed parallax scrolling on the website for the video game <a href=\"http:\/\/www.firewatchgame.com\">Firewatch<\/a>.<\/p><\/div>\n<p>&nbsp;<\/p>\n<div id=\"attachment_25385\" style=\"width: 710px\" class=\"wp-caption alignnone\"><img decoding=\"async\" aria-describedby=\"caption-attachment-25385\" class=\"size-full wp-image-25385\" src=\"https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131448\/home-a-dam-underwear.jpg\" alt=\"\" width=\"700\" height=\"392\" srcset=\"https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131448\/home-a-dam-underwear.jpg 700w, https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131448\/home-a-dam-underwear-300x168.jpg 300w, https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131448\/home-a-dam-underwear-400x224.jpg 400w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><p id=\"caption-attachment-25385\" class=\"wp-caption-text\">Parallax scrolling and some witty site copy and images make this <a href=\"https:\/\/www.adamunderwear.com\">men&#8217;s underwear site<\/a> a lot of fun.<\/p><\/div>\n<p>&nbsp;<\/p>\n<div id=\"attachment_25386\" style=\"width: 710px\" class=\"wp-caption alignnone\"><img decoding=\"async\" aria-describedby=\"caption-attachment-25386\" class=\"size-full wp-image-25386\" src=\"https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131447\/essentially-geared-wine-co-seek-the-everyday-uncommon1.jpg\" alt=\"\" width=\"700\" height=\"392\" srcset=\"https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131447\/essentially-geared-wine-co-seek-the-everyday-uncommon1.jpg 700w, https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131447\/essentially-geared-wine-co-seek-the-everyday-uncommon1-300x168.jpg 300w, https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131447\/essentially-geared-wine-co-seek-the-everyday-uncommon1-400x224.jpg 400w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><p id=\"caption-attachment-25386\" class=\"wp-caption-text\">Via <a href=\"http:\/\/egwineco.com\">Essentially Geared Win Company<\/a><\/p><\/div>\n<p>&nbsp;<\/p>\n<div id=\"attachment_25387\" style=\"width: 710px\" class=\"wp-caption alignnone\"><img decoding=\"async\" aria-describedby=\"caption-attachment-25387\" class=\"size-full wp-image-25387\" src=\"https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131447\/ps-6-opening-the-doors-to-the-future.png\" alt=\"\" width=\"700\" height=\"392\" srcset=\"https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131447\/ps-6-opening-the-doors-to-the-future.png 700w, https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131447\/ps-6-opening-the-doors-to-the-future-300x168.png 300w, https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131447\/ps-6-opening-the-doors-to-the-future-400x224.png 400w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><p id=\"caption-attachment-25387\" class=\"wp-caption-text\">This may possibly be the best placeholder website for a public school ever. (via <a href=\"http:\/\/ps6nyc.com\">PS 6 NYC<\/a>)<\/p><\/div>\n<p>&nbsp;<\/p>\n<div id=\"attachment_25388\" style=\"width: 710px\" class=\"wp-caption alignnone\"><img decoding=\"async\" aria-describedby=\"caption-attachment-25388\" class=\"size-full wp-image-25388\" src=\"https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131447\/trolleys-trolley-manufacturer-custom-built-trolleys.png\" alt=\"\" width=\"700\" height=\"392\" srcset=\"https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131447\/trolleys-trolley-manufacturer-custom-built-trolleys.png 700w, https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131447\/trolleys-trolley-manufacturer-custom-built-trolleys-300x168.png 300w, https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131447\/trolleys-trolley-manufacturer-custom-built-trolleys-400x224.png 400w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><p id=\"caption-attachment-25388\" class=\"wp-caption-text\">This is one great-looking site with lots of parallax scrolling. (via <a href=\"https:\/\/hometowntrolley.com\">Hometown Trolley<\/a>)<\/p><\/div>\n<p>&nbsp;<\/p>\n<h2>2018 Web Design Trends<\/h2>\n<p>The choice to incorporate a trend into your <a href=\"https:\/\/www.crowdspring.com\/website-design\/\">website design<\/a> comes down to this: does it complement or extends your brand?<\/p>\n<p>Specific trends like brutalism or unorthodox color combinations could alienate or put off your audience if misused, or they could be the hook you need.<\/p>\n<p>As with anything, whether or not you should use something can be summarized with those two frustratingly apt words: \u201cit depends.\u201d A skilled web designer can take an objective look at your needs and figure out how to make use of these trends in a way that reinforces your brand&#8217;s identity.<\/p>\n<p>Here at crowdspring, we have <a href=\"https:\/\/www.crowdspring.com\/website-design\/\">thousands of web designers<\/a> who can take a trend and make it something original &#8211; and entirely in keeping with your company\u2019s existing visual identity.<\/p>\n<p><a href=\"https:\/\/www.crowdspring.com\/how-it-works\/?utm_source=csblog&utm_medium=design&utm_campaign=cta\" target=\"_blank\"><img decoding=\"async\" class=\"alignnone size-full wp-image-35262\" src=\"https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2022\/05\/06164945\/small-business-blog-master-cta.png\" alt=\"\" width=\"700\" height=\"466\" \/><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>If you want your business to thrive, you have to stand out among your competition. One good way to stand is to take advantage of hot website design trends to give your website or landing page a sharp, contemporary feel. In this article, we\u2019ve collected nine of the top website design trends you can expect to see in 2018.<\/p>\n","protected":false},"author":25523,"featured_media":25431,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3155],"tags":[2525,786],"class_list":["post-25337","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design","tag-design-trends","tag-web-design"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>2018 Web Design Trends: Your Guide To Navigating 9 Hot Trends - crowdspring Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"2018 Web Design Trends: Your Guide To Navigating 9 Hot Trends - crowdspring Blog\" \/>\n<meta property=\"og:description\" content=\"If you want your business to thrive, you have to stand out among your competition. One good way to stand is to take advantage of hot website design trends to give your website or landing page a sharp, contemporary feel. In this article, we\u2019ve collected nine of the top website design trends you can expect to see in 2018.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.crowdspring.com\/blog\/2018-web-design-trends\/\" \/>\n<meta property=\"og:site_name\" content=\"crowdspring Blog\" \/>\n<meta property=\"article:published_time\" content=\"2017-12-11T06:55:34+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-06-15T23:18:42+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131445\/william-iven-19843.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"700\" \/>\n\t<meta property=\"og:image:height\" content=\"465\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Amanda Bowman\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Amanda Bowman\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"20 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.crowdspring.com\/blog\/2018-web-design-trends\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.crowdspring.com\/blog\/2018-web-design-trends\/\"},\"author\":{\"name\":\"Amanda Bowman\",\"@id\":\"https:\/\/www.crowdspring.com\/blog\/#\/schema\/person\/3780ec20a7fcb68e3a2e8e90b831b3d2\"},\"headline\":\"2018 Web Design Trends: Your Guide To Navigating 9 Hot Trends\",\"datePublished\":\"2017-12-11T06:55:34+00:00\",\"dateModified\":\"2023-06-15T23:18:42+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.crowdspring.com\/blog\/2018-web-design-trends\/\"},\"wordCount\":2604,\"publisher\":{\"@id\":\"https:\/\/www.crowdspring.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.crowdspring.com\/blog\/2018-web-design-trends\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131445\/william-iven-19843.jpg\",\"keywords\":[\"Design Trends\",\"Web Design\"],\"articleSection\":[\"Design\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.crowdspring.com\/blog\/2018-web-design-trends\/\",\"url\":\"https:\/\/www.crowdspring.com\/blog\/2018-web-design-trends\/\",\"name\":\"2018 Web Design Trends: Your Guide To Navigating 9 Hot Trends - crowdspring Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.crowdspring.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.crowdspring.com\/blog\/2018-web-design-trends\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.crowdspring.com\/blog\/2018-web-design-trends\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131445\/william-iven-19843.jpg\",\"datePublished\":\"2017-12-11T06:55:34+00:00\",\"dateModified\":\"2023-06-15T23:18:42+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.crowdspring.com\/blog\/2018-web-design-trends\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.crowdspring.com\/blog\/2018-web-design-trends\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.crowdspring.com\/blog\/2018-web-design-trends\/#primaryimage\",\"url\":\"https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131445\/william-iven-19843.jpg\",\"contentUrl\":\"https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131445\/william-iven-19843.jpg\",\"width\":700,\"height\":465},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.crowdspring.com\/blog\/2018-web-design-trends\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/www.crowdspring.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"2018 Web Design Trends: Your Guide To Navigating 9 Hot Trends\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.crowdspring.com\/blog\/#website\",\"url\":\"https:\/\/www.crowdspring.com\/blog\/\",\"name\":\"crowdspring Blog\",\"description\":\"Actionable insights on small business, marketing, entrepreneurship, design, and more, from crowdspring.\",\"publisher\":{\"@id\":\"https:\/\/www.crowdspring.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.crowdspring.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.crowdspring.com\/blog\/#organization\",\"name\":\"crowdspring\",\"url\":\"https:\/\/www.crowdspring.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.crowdspring.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/08\/27131716\/cs_logo.png\",\"contentUrl\":\"https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/08\/27131716\/cs_logo.png\",\"width\":1404,\"height\":276,\"caption\":\"crowdspring\"},\"image\":{\"@id\":\"https:\/\/www.crowdspring.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.crowdspring.com\/blog\/#\/schema\/person\/3780ec20a7fcb68e3a2e8e90b831b3d2\",\"name\":\"Amanda Bowman\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.crowdspring.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/51a05d708e6464ae26314becc861e89cba6e630fcd89bb1149a9b6e1b9605aef?s=96&d=identicon&r=pg\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/51a05d708e6464ae26314becc861e89cba6e630fcd89bb1149a9b6e1b9605aef?s=96&d=identicon&r=pg\",\"caption\":\"Amanda Bowman\"},\"description\":\"Amanda Bowman is best known for her work in art, design, helping strangers at the grocery store, and her extensive knowledge of X-Files canon. When not chasing down her adorable son from the clutches of Bob the Builder, she can be found writing, reading, designing t-shirts, and perfecting her Tom Jones impression.\",\"sameAs\":[\"https:\/\/www.crowdspring.com\/\"],\"url\":\"https:\/\/www.crowdspring.com\/blog\/author\/amandabowman\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"2018 Web Design Trends: Your Guide To Navigating 9 Hot Trends - crowdspring Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"en_US","og_type":"article","og_title":"2018 Web Design Trends: Your Guide To Navigating 9 Hot Trends - crowdspring Blog","og_description":"If you want your business to thrive, you have to stand out among your competition. One good way to stand is to take advantage of hot website design trends to give your website or landing page a sharp, contemporary feel. In this article, we\u2019ve collected nine of the top website design trends you can expect to see in 2018.","og_url":"https:\/\/www.crowdspring.com\/blog\/2018-web-design-trends\/","og_site_name":"crowdspring Blog","article_published_time":"2017-12-11T06:55:34+00:00","article_modified_time":"2023-06-15T23:18:42+00:00","og_image":[{"width":700,"height":465,"url":"https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131445\/william-iven-19843.jpg","type":"image\/jpeg"}],"author":"Amanda Bowman","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Amanda Bowman","Est. reading time":"20 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.crowdspring.com\/blog\/2018-web-design-trends\/#article","isPartOf":{"@id":"https:\/\/www.crowdspring.com\/blog\/2018-web-design-trends\/"},"author":{"name":"Amanda Bowman","@id":"https:\/\/www.crowdspring.com\/blog\/#\/schema\/person\/3780ec20a7fcb68e3a2e8e90b831b3d2"},"headline":"2018 Web Design Trends: Your Guide To Navigating 9 Hot Trends","datePublished":"2017-12-11T06:55:34+00:00","dateModified":"2023-06-15T23:18:42+00:00","mainEntityOfPage":{"@id":"https:\/\/www.crowdspring.com\/blog\/2018-web-design-trends\/"},"wordCount":2604,"publisher":{"@id":"https:\/\/www.crowdspring.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.crowdspring.com\/blog\/2018-web-design-trends\/#primaryimage"},"thumbnailUrl":"https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131445\/william-iven-19843.jpg","keywords":["Design Trends","Web Design"],"articleSection":["Design"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.crowdspring.com\/blog\/2018-web-design-trends\/","url":"https:\/\/www.crowdspring.com\/blog\/2018-web-design-trends\/","name":"2018 Web Design Trends: Your Guide To Navigating 9 Hot Trends - crowdspring Blog","isPartOf":{"@id":"https:\/\/www.crowdspring.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.crowdspring.com\/blog\/2018-web-design-trends\/#primaryimage"},"image":{"@id":"https:\/\/www.crowdspring.com\/blog\/2018-web-design-trends\/#primaryimage"},"thumbnailUrl":"https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131445\/william-iven-19843.jpg","datePublished":"2017-12-11T06:55:34+00:00","dateModified":"2023-06-15T23:18:42+00:00","breadcrumb":{"@id":"https:\/\/www.crowdspring.com\/blog\/2018-web-design-trends\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.crowdspring.com\/blog\/2018-web-design-trends\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.crowdspring.com\/blog\/2018-web-design-trends\/#primaryimage","url":"https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131445\/william-iven-19843.jpg","contentUrl":"https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/12\/27131445\/william-iven-19843.jpg","width":700,"height":465},{"@type":"BreadcrumbList","@id":"https:\/\/www.crowdspring.com\/blog\/2018-web-design-trends\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/www.crowdspring.com\/blog\/"},{"@type":"ListItem","position":2,"name":"2018 Web Design Trends: Your Guide To Navigating 9 Hot Trends"}]},{"@type":"WebSite","@id":"https:\/\/www.crowdspring.com\/blog\/#website","url":"https:\/\/www.crowdspring.com\/blog\/","name":"crowdspring Blog","description":"Actionable insights on small business, marketing, entrepreneurship, design, and more, from crowdspring.","publisher":{"@id":"https:\/\/www.crowdspring.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.crowdspring.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.crowdspring.com\/blog\/#organization","name":"crowdspring","url":"https:\/\/www.crowdspring.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.crowdspring.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/08\/27131716\/cs_logo.png","contentUrl":"https:\/\/images.crowdspring.com\/blog\/wp-content\/uploads\/2017\/08\/27131716\/cs_logo.png","width":1404,"height":276,"caption":"crowdspring"},"image":{"@id":"https:\/\/www.crowdspring.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.crowdspring.com\/blog\/#\/schema\/person\/3780ec20a7fcb68e3a2e8e90b831b3d2","name":"Amanda Bowman","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.crowdspring.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/51a05d708e6464ae26314becc861e89cba6e630fcd89bb1149a9b6e1b9605aef?s=96&d=identicon&r=pg","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/51a05d708e6464ae26314becc861e89cba6e630fcd89bb1149a9b6e1b9605aef?s=96&d=identicon&r=pg","caption":"Amanda Bowman"},"description":"Amanda Bowman is best known for her work in art, design, helping strangers at the grocery store, and her extensive knowledge of X-Files canon. When not chasing down her adorable son from the clutches of Bob the Builder, she can be found writing, reading, designing t-shirts, and perfecting her Tom Jones impression.","sameAs":["https:\/\/www.crowdspring.com\/"],"url":"https:\/\/www.crowdspring.com\/blog\/author\/amandabowman\/"}]}},"_links":{"self":[{"href":"https:\/\/www.crowdspring.com\/blog\/wp-json\/wp\/v2\/posts\/25337","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.crowdspring.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.crowdspring.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.crowdspring.com\/blog\/wp-json\/wp\/v2\/users\/25523"}],"replies":[{"embeddable":true,"href":"https:\/\/www.crowdspring.com\/blog\/wp-json\/wp\/v2\/comments?post=25337"}],"version-history":[{"count":59,"href":"https:\/\/www.crowdspring.com\/blog\/wp-json\/wp\/v2\/posts\/25337\/revisions"}],"predecessor-version":[{"id":43605,"href":"https:\/\/www.crowdspring.com\/blog\/wp-json\/wp\/v2\/posts\/25337\/revisions\/43605"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.crowdspring.com\/blog\/wp-json\/wp\/v2\/media\/25431"}],"wp:attachment":[{"href":"https:\/\/www.crowdspring.com\/blog\/wp-json\/wp\/v2\/media?parent=25337"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.crowdspring.com\/blog\/wp-json\/wp\/v2\/categories?post=25337"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.crowdspring.com\/blog\/wp-json\/wp\/v2\/tags?post=25337"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}