{"id":24006,"date":"2016-07-13T15:23:21","date_gmt":"2016-07-13T19:23:21","guid":{"rendered":"http:\/\/www.andysowards.com\/blog\/?p=24006"},"modified":"2016-11-22T17:45:31","modified_gmt":"2016-11-22T21:45:31","slug":"blog-ui-designs","status":"publish","type":"post","link":"https:\/\/www.andysowards.com\/blog\/2016\/blog-ui-designs\/","title":{"rendered":"Make Your Next Blog Pop with These Three UI Designs"},"content":{"rendered":"<p>Conventional wisdom tells us that \u201ccontent is king\u201d when it comes to blogging. While compelling content is absolutely necessary to driving traffic to your site, consider what happens once users land on the page. Do they stick around? Do they bounce? Do they actually <em>click <\/em>on anything?<\/p>\n<p>Design represents the sleeping giant of just about <em>any <\/em>blog. Unfortunately, design is often neglected or ignored by many bloggers who see it as a second-rate aspect of their site. From keeping visitors on the page to standing out versus competitors, the importance of design simply can\u2019t be ignored. Consider, for starters&#8230;<\/p>\n<p>Your blog\u2019s design ultimately represents your users\u2019 first impression of your business <em>and brand<\/em><br \/>\nDesign ultimately sets your brand apart from your competitors: something as small as a logo can have a <em>big <\/em>impact on whether or not visitors perceive you as professional<br \/>\nThe design of your blog can have a <em>huge <\/em>implications on your SEO efforts, especially if your layout isn\u2019t optimized for mobile search<\/p>\n<p>With fierce competition in the blogosphere, standing out is critical for bloggers looking to grab the attention of new visitors. Likewise, the elements of design continue to evolve as bloggers push the envelope <em>and <\/em>work to give users what they want visually. <\/p>\n<p>Whether you\u2019re looking to <a href=\"http:\/\/neilpatel.com\/the-step-by-step-guide-to-creating-a-money-making-blog-in-1-hour\/\" target=\"_blank\">start your own blog<\/a> or intend to revamp your current design, keep the following three trends in mind to ensure that your site is both visually compelling <em>and <\/em>user friendly.<\/p>\n<h2>The Benefits of UI Patterns<\/h2>\n<p><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/use-right-ui-design-patterns\/\" target=\"_blank\"><img decoding=\"async\" data-src=\"https:\/\/www.andysowards.com\/blog\/assets\/How-to-Use-the-Best-UI-Design-Patterns.png\" alt=\"How to Use the Best UI Design Patterns\" width=\"626\" height=\"366\" class=\"alignnone size-full wp-image-24011 lazyload\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 626px; --smush-placeholder-aspect-ratio: 626\/366;\" \/><\/a><br \/>\n<em>How to Use the Best UI Design Patterns<\/em><\/p>\n<p>Bloggers today understand the expectation to meet their users\u2019 needs in terms of content; likewise, modern blogs require a user interface which is free of clutter, allows for easy social sharing and readability.<\/p>\n<p>A number of UI pattern layouts exist for platforms such as WordPress, offering blog designs which are both easy to navigate and pleasing to the eye. For example, consider the three following <a href=\"http:\/\/www.awwwards.com\/mastering-ui-patterns-for-smarter-design.html\" target=\"_blank\">UI patterns<\/a> which are wildly popular with today\u2019s users:<\/p>\n<h2><a href=\"http:\/\/designmodo.com\/scrolling-web-design\/\" target=\"_blank\">Long Scroll<\/a><\/h2>\n<p><a href=\"http:\/\/designmodo.com\/scrolling-web-design\/\" target=\"_blank\"><img decoding=\"async\" data-src=\"https:\/\/www.andysowards.com\/blog\/assets\/blog-scrolling-web-design-ideas.jpg\" alt=\"blog-scrolling-web-design-ideas\" width=\"600\" height=\"283\" class=\"alignnone size-full wp-image-24008 lazyload\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 600px; --smush-placeholder-aspect-ratio: 600\/283;\" \/><\/a><br \/>\n<em>The New Rules for Scrolling in Web Design<\/em><\/p>\n<p>Scrolling is all the rage thanks to mobile devices; thankfully, web designers have taken notice for the blogosphere. Long scroll designs are ideal for blogs looking to reach readers on the go, allowing them to simply flow through their sites instead of worrying about link placement and what\u2019s above the fold.<\/p>\n<h2><a href=\"https:\/\/econsultancy.com\/blog\/64646-15-delicious-examples-of-card-based-web-design\/\" target=\"_blank\">Card Design<\/a><\/h2>\n<p><a href=\"https:\/\/econsultancy.com\/blog\/64646-15-delicious-examples-of-card-based-web-design\/\" target=\"_blank\"><img decoding=\"async\" data-src=\"https:\/\/www.andysowards.com\/blog\/assets\/15-delicious-examples-of-card-based-web-design.png\" alt=\"15 delicious examples of card-based web design\" width=\"612\" height=\"1031\" class=\"alignnone size-full wp-image-24009 lazyload\" data-srcset=\"https:\/\/www.andysowards.com\/blog\/assets\/15-delicious-examples-of-card-based-web-design.png 612w, https:\/\/www.andysowards.com\/blog\/assets\/15-delicious-examples-of-card-based-web-design-608x1024.png 608w\" data-sizes=\"(max-width: 612px) 100vw, 612px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 612px; --smush-placeholder-aspect-ratio: 612\/1031;\" \/><\/a><br \/>\n<em>15 delicious examples of card-based web design<\/em><\/p>\n<p>Card designs, which segment blog posts into separate \u201ccards\u201d (essentially images and headlines), are ideal for catching the eyes of readers and organizing your site. Such a design is also preferable for users on touch-screen devices who can quickly find relevant articles want and tap accordingly.<\/p>\n<h2><a href=\"http:\/\/marketblog.envato.com\/web-design\/exploring-hero-image-trend-web-design\/\" target=\"_blank\">Hero Images<\/a><\/h2>\n<p><a href=\"http:\/\/marketblog.envato.com\/web-design\/exploring-hero-image-trend-web-design\/\" target=\"_blank\"><img decoding=\"async\" data-src=\"https:\/\/www.andysowards.com\/blog\/assets\/exploring-hero-image-trend-web-design.jpg\" alt=\"exploring-hero-image-trend-web-design\" width=\"660\" height=\"400\" class=\"alignnone size-full wp-image-24010 lazyload\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 660px; --smush-placeholder-aspect-ratio: 660\/400;\" \/><\/a><br \/>\n<em>Exploring the Hero Image Trend in Web Design<\/em><\/p>\n<p>Imagery is incredibly important to today\u2019s users, which is exactly why hero images have become so popular. A far cry from the tacky headers of the past, hero images should pop (think: breathtaking and high-definition) and ultimately serve as a billboard for your blog\u2019s content. Go out of your way to find a truly compelling hero image from a quality site like <a href=\"https:\/\/www.dreamstime.com\/\" target=\"_blank\">Dreamstime<\/a> where you can find free photos as well as for-pay options. Add some killer copy to go along with it and you have a winning combination.<\/p>\n<p>Regardless of which design you choose, remember the two golden rules of modern web design: every post needs and images and <a href=\"http:\/\/weblogs.about.com\/od\/blogdesign\/tp\/Top5BlogDesignMistakes.htm\" target=\"_blank\">clutter will <em>kill <\/em>your blog<\/a>. <\/p>\n<p>While there are a number of UI patterns out there, the aforementioned three follow the current best practices of design <em>and <\/em>look fantastic on mobile devices. Don\u2019t let your site sleep on design: instead, stand out from the pack with a blog that drives traffic and looks good doing it. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Conventional wisdom tells us that \u201ccontent is king\u201d when it comes to blogging. While compelling content is absolutely necessary to driving traffic to your site, consider what happens once users<\/p>\n","protected":false},"author":1,"featured_media":24009,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"footnotes":""},"categories":[12,109,24,5695,225,35,111,615,5633,107,6],"tags":[102,1348,5451,439,5882,3938,5885,4311,686,5452,5887,5892,5453,1205,354,98,5880,3867,3936,549],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v23.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Make Your Next Blog Pop with These Three UI Designs<\/title>\n<meta name=\"description\" content=\"Conventional wisdom tells us that \u201ccontent is king\u201d when it comes to blogging. While compelling content is absolutely necessary to driving traffic to your\" \/>\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.andysowards.com\/blog\/2016\/blog-ui-designs\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Make Your Next Blog Pop with These Three UI Designs\" \/>\n<meta property=\"og:description\" content=\"Conventional wisdom tells us that \u201ccontent is king\u201d when it comes to blogging. While compelling content is absolutely necessary to driving traffic to your\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.andysowards.com\/blog\/2016\/blog-ui-designs\/\" \/>\n<meta property=\"og:site_name\" content=\"Daily Business Resources for Entrepreneurs, Web Designers, &amp; Creatives by Andy Sowards\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/facebook.com\/andysowardsfan\" \/>\n<meta property=\"article:published_time\" content=\"2016-07-13T19:23:21+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2016-11-22T21:45:31+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.andysowards.com\/blog\/assets\/15-delicious-examples-of-card-based-web-design.png\" \/>\n\t<meta property=\"og:image:width\" content=\"612\" \/>\n\t<meta property=\"og:image:height\" content=\"1031\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Andy Sowards\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@andysowards\" \/>\n<meta name=\"twitter:site\" content=\"@andysowards\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Andy Sowards\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.andysowards.com\/blog\/2016\/blog-ui-designs\/\",\"url\":\"https:\/\/www.andysowards.com\/blog\/2016\/blog-ui-designs\/\",\"name\":\"Make Your Next Blog Pop with These Three UI Designs\",\"isPartOf\":{\"@id\":\"https:\/\/www.andysowards.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.andysowards.com\/blog\/2016\/blog-ui-designs\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.andysowards.com\/blog\/2016\/blog-ui-designs\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.andysowards.com\/blog\/assets\/15-delicious-examples-of-card-based-web-design.png\",\"datePublished\":\"2016-07-13T19:23:21+00:00\",\"dateModified\":\"2016-11-22T21:45:31+00:00\",\"author\":{\"@id\":\"https:\/\/www.andysowards.com\/blog\/#\/schema\/person\/2e0f72bd7f6497fd883e2bd67d9f3415\"},\"description\":\"Conventional wisdom tells us that \u201ccontent is king\u201d when it comes to blogging. While compelling content is absolutely necessary to driving traffic to your\",\"breadcrumb\":{\"@id\":\"https:\/\/www.andysowards.com\/blog\/2016\/blog-ui-designs\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.andysowards.com\/blog\/2016\/blog-ui-designs\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.andysowards.com\/blog\/2016\/blog-ui-designs\/#primaryimage\",\"url\":\"https:\/\/www.andysowards.com\/blog\/assets\/15-delicious-examples-of-card-based-web-design.png\",\"contentUrl\":\"https:\/\/www.andysowards.com\/blog\/assets\/15-delicious-examples-of-card-based-web-design.png\",\"width\":612,\"height\":1031},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.andysowards.com\/blog\/2016\/blog-ui-designs\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.andysowards.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Make Your Next Blog Pop with These Three UI Designs\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.andysowards.com\/blog\/#website\",\"url\":\"https:\/\/www.andysowards.com\/blog\/\",\"name\":\"Daily Business Resources for Entrepreneurs, Web Designers, &amp; Creatives by Andy Sowards\",\"description\":\"Design Inspiration &amp; Business Resources for Creatives\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.andysowards.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.andysowards.com\/blog\/#\/schema\/person\/2e0f72bd7f6497fd883e2bd67d9f3415\",\"name\":\"Andy Sowards\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.andysowards.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/15f95b011563b5894883b22bd4b32d59?s=96&r=pg\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/15f95b011563b5894883b22bd4b32d59?s=96&r=pg\",\"caption\":\"Andy Sowards\"},\"description\":\"Im a professional Freelancer specializing in Web Developer, Design, Programming web applications. Im an Avid member of the Design\/Development community and a Serial Blogger. follow me on Twitter @AndySowards\",\"sameAs\":[\"https:\/\/www.andysowards.com\"],\"url\":\"https:\/\/www.andysowards.com\/blog\/author\/admin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Make Your Next Blog Pop with These Three UI Designs","description":"Conventional wisdom tells us that \u201ccontent is king\u201d when it comes to blogging. While compelling content is absolutely necessary to driving traffic to your","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.andysowards.com\/blog\/2016\/blog-ui-designs\/","og_locale":"en_US","og_type":"article","og_title":"Make Your Next Blog Pop with These Three UI Designs","og_description":"Conventional wisdom tells us that \u201ccontent is king\u201d when it comes to blogging. While compelling content is absolutely necessary to driving traffic to your","og_url":"https:\/\/www.andysowards.com\/blog\/2016\/blog-ui-designs\/","og_site_name":"Daily Business Resources for Entrepreneurs, Web Designers, &amp; Creatives by Andy Sowards","article_publisher":"http:\/\/facebook.com\/andysowardsfan","article_published_time":"2016-07-13T19:23:21+00:00","article_modified_time":"2016-11-22T21:45:31+00:00","og_image":[{"width":612,"height":1031,"url":"https:\/\/www.andysowards.com\/blog\/assets\/15-delicious-examples-of-card-based-web-design.png","type":"image\/png"}],"author":"Andy Sowards","twitter_card":"summary_large_image","twitter_creator":"@andysowards","twitter_site":"@andysowards","twitter_misc":{"Written by":"Andy Sowards","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.andysowards.com\/blog\/2016\/blog-ui-designs\/","url":"https:\/\/www.andysowards.com\/blog\/2016\/blog-ui-designs\/","name":"Make Your Next Blog Pop with These Three UI Designs","isPartOf":{"@id":"https:\/\/www.andysowards.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.andysowards.com\/blog\/2016\/blog-ui-designs\/#primaryimage"},"image":{"@id":"https:\/\/www.andysowards.com\/blog\/2016\/blog-ui-designs\/#primaryimage"},"thumbnailUrl":"https:\/\/www.andysowards.com\/blog\/assets\/15-delicious-examples-of-card-based-web-design.png","datePublished":"2016-07-13T19:23:21+00:00","dateModified":"2016-11-22T21:45:31+00:00","author":{"@id":"https:\/\/www.andysowards.com\/blog\/#\/schema\/person\/2e0f72bd7f6497fd883e2bd67d9f3415"},"description":"Conventional wisdom tells us that \u201ccontent is king\u201d when it comes to blogging. While compelling content is absolutely necessary to driving traffic to your","breadcrumb":{"@id":"https:\/\/www.andysowards.com\/blog\/2016\/blog-ui-designs\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.andysowards.com\/blog\/2016\/blog-ui-designs\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.andysowards.com\/blog\/2016\/blog-ui-designs\/#primaryimage","url":"https:\/\/www.andysowards.com\/blog\/assets\/15-delicious-examples-of-card-based-web-design.png","contentUrl":"https:\/\/www.andysowards.com\/blog\/assets\/15-delicious-examples-of-card-based-web-design.png","width":612,"height":1031},{"@type":"BreadcrumbList","@id":"https:\/\/www.andysowards.com\/blog\/2016\/blog-ui-designs\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.andysowards.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Make Your Next Blog Pop with These Three UI Designs"}]},{"@type":"WebSite","@id":"https:\/\/www.andysowards.com\/blog\/#website","url":"https:\/\/www.andysowards.com\/blog\/","name":"Daily Business Resources for Entrepreneurs, Web Designers, &amp; Creatives by Andy Sowards","description":"Design Inspiration &amp; Business Resources for Creatives","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.andysowards.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.andysowards.com\/blog\/#\/schema\/person\/2e0f72bd7f6497fd883e2bd67d9f3415","name":"Andy Sowards","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.andysowards.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/15f95b011563b5894883b22bd4b32d59?s=96&r=pg","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/15f95b011563b5894883b22bd4b32d59?s=96&r=pg","caption":"Andy Sowards"},"description":"Im a professional Freelancer specializing in Web Developer, Design, Programming web applications. Im an Avid member of the Design\/Development community and a Serial Blogger. follow me on Twitter @AndySowards","sameAs":["https:\/\/www.andysowards.com"],"url":"https:\/\/www.andysowards.com\/blog\/author\/admin\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.andysowards.com\/blog\/wp-json\/wp\/v2\/posts\/24006"}],"collection":[{"href":"https:\/\/www.andysowards.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.andysowards.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.andysowards.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.andysowards.com\/blog\/wp-json\/wp\/v2\/comments?post=24006"}],"version-history":[{"count":2,"href":"https:\/\/www.andysowards.com\/blog\/wp-json\/wp\/v2\/posts\/24006\/revisions"}],"predecessor-version":[{"id":25023,"href":"https:\/\/www.andysowards.com\/blog\/wp-json\/wp\/v2\/posts\/24006\/revisions\/25023"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.andysowards.com\/blog\/wp-json\/wp\/v2\/media\/24009"}],"wp:attachment":[{"href":"https:\/\/www.andysowards.com\/blog\/wp-json\/wp\/v2\/media?parent=24006"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.andysowards.com\/blog\/wp-json\/wp\/v2\/categories?post=24006"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.andysowards.com\/blog\/wp-json\/wp\/v2\/tags?post=24006"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}