From the outlandish aesthetics of the world of fashion to the sleek minimalism of contemporary architecture, design is a fickle mistress.
Although all facets of the design industry move quickly, few aspects of design move quite as quickly – or date quite as badly – as that of web design.
Whether you’re launching a new blog or thinking about a blog redesign, you want to be sure you’re implementing a design that’s going to look contemporary and function perfectly across devices.
Today, we’ll be taking a look at the prevailing blog design trends we’ve seen across the internet so far this year. We’ll examine what elements have proven popular and those that have fallen out of favor.
First, let’s take a look at the wider trends in digital marketing that are shaping how blog design looks right now.
Blog Design in 2017: A Mobile-First World
Before we examine the specific design trends that are driving the aesthetics of today’s internet, we need to revisit some data that’s a perennial favorite with marketers – mobile adoption and browsing statistics.
More People Are Using Mobile Devices Exclusively to Access the Web
Here at the WordStream blog, we’ve been banging on about growing mobile adoption for years (along with practically every other digital media blog in the world).
Typically reserved for end-of-year prediction lists, mobile adoption statistics are arguably among the most important data points when it comes to design. Why? Because necessity is the mother of invention, and as more and more people turn to mobile devices to access the web, blogs and other sites are adjusting their look to suit changing tastes.
Take a look at the figure below, taken from StatCounter data:
Worldwide internet usage by device
As you can see, between October 2009 and October 2016, the decline in desktop web access correlates almost perfectly with the growth in the use of mobile devices; as increasing numbers of people use mobile devices to access the internet, fewer people rely on desktops.
This trend is also reflected in time spent per device. According to a recent report published by Comscore, the share of time spent using digital devices has increased across every mobile metric – time spent on mobile devices in general, time spent using mobile apps, and time spent using smartphone apps – while the overall share of time spent using desktops decreased considerably.
Share of time spent on digital media by platform
Although marketers have been warning of the fabled “mobile-first” world for years, we only just entered this paradigm toward the end of last year. But what does this mean for blog design?
Balancing the Aesthetic with the Technical
The steady increase in the number of people using mobile devices as their primary means of accessing the web isn’t just interesting from a user experience perspective; it presents unique challenges in balancing aesthetic considerations with the very real limitations of technical specifications.
Blogs Have to Be Technically Lightweight
When we talk about page-load time – a crucial usability metric – it’s typically within the context of conversion rate optimization. The longer your pages take to load, the less likely your visitors are to remain on your site and convert. This has a direct impact on other metrics such as bounce rate and time-on-page.
Conversion rates by load time (via TruConversion)
However, from a user experience perspective, page-load time can have other consequences. For example, did you know that a delay in the load time of a web page can result in an increase in heart rate of 38% – the same increase observed in individuals watching a horror movie? Scary stuff indeed.
Slow mobile load times cause significant cognitive stress (via Ericsson Consumer Lab)
As Steve Jobs famously opined, design isn’t merely how something looks – it’s how something works. Understanding this is crucial to designing aesthetically pleasing and rewarding web experiences.
So, now that we’ve examined some of the wider trends that are shaping modern blog design, let’s take a look at some of the individual stylistic elements that are making waves in web design right now.
Blog Design Trend #1: The Evolution of Mobile Design
Since we’ve spent so much time talking about the importance of mobile access, it seems only fitting that the first design element we’ll be taking a look at is responsive design.
What is Responsive Design?
Responsive web design (RWD) is a term first coined by renowned web developer Ethan Marcotte (who literally wrote the book on responsive web design) that describes an approach to web design and development that centers around making websites accessible and functional across a wide range of devices.
Responsive design exemplified
This is accomplished primarily through the use of media queries, a feature of the Cascading Style Sheets (CSS) 3 language that allows designers to specify that certain CSS elements of a web page be enabled or disabled depending on the resolution or screen size of a user’s device.
Back in 2014 (practically a lifetime ago in web development), responsive design was the tech du jour. Executives with little technical understanding of their own websites asked beleaguered designers to just “make it responsive,” and believed that the cheapest, fastest way to get on the mobile bandwagon was to simply add CSS rules to a static, desktop site.
Is Responsive Design Dead?
Many developers and designers have turned their backs on responsive design. Ethan Marcotte once said that “responsive web design isn’t intended to serve as a replacement for mobile websites,” and this mindset has become increasingly prevalent among the web design community.
Page size by file type and resolution
One of the main reasons that many developers are rejecting responsive web design is inefficiency and bloat. According to research by web security and performance expert Guy Pordjarny, virtually every responsive site Podjarny studied delivered the full payload of an entire desktop site, regardless of how much data was actually requested by the user. This meant hundreds of additional, unnecessary kilobytes of data were being downloaded, even for minimal server requests. This resulted in terrible performance, user interface problems, and other issues.
Of course, responsive web design isn’t solely responsible for these results – bad websites are bad no matter what device they’re viewed on, plain and simple. This research does, however, highlight how poorly implemented design choices can have a disastrous impact on your site.
Something else to consider is the fact that sites designed and built using RWD will always be slower than native applications. Today, many blogs and websites are designed specifically for various devices, a shift in thinking that puts users first. It may be more work initially, but it’s worth it in the long run.
Progressive Web Apps
Responsive design may be somewhat polarizing in the web design community, but one trend that few designers or developers could argue with is the incredible popularity of progressive web apps.
Progressive web apps look and feel like native applications and offer many of
the same features, including "Add to Home Screen" functionality.
Progressive web apps are websites that look, feel, and function like apps developed for mobile devices, and offer users an app-like experience in their browser. This includes functionality such as push notifications, accessibility from mobile home screens, offline modes, and other elements that will be familiar to you if you’ve ever used an app on your phone.
Although the nuances of progressive web apps are a little beyond the scope of this post, it’s a fascinating area of web technology (if you’re a nerd like me) that’s definitely deserving of further reading. I’d recommend you check out this content about progressive web apps at the Google developer resource center.
Blog Design Trend #2: Hero Images & Minimalist Design
As bandwidth has increased (along with the processing power of mobile devices), we’ve seen a steady migration away from dense, text-heavy blogs to more visual sites with large, colorful images. One of the most prominent trends in blog design imagery has been the increasing popularity of huge “hero” images – a trend that’s likely to continue for at least the foreseeable future.
Many blogs and sites use this technique to great effect. Take this example from foodie companion site The Infatuation:
You’ve probably seen countless examples of this technique in action as you browse the web. It’s easy to see why the use of hero images has increased so dramatically in recent years. They’re eye-catching, visually striking, and can serve as the basis for entire designs, especially single-page websites with long scroll depth and sites that rely on gorgeous, high-resolution imagery – like food blogs.
Of course, hero images aren’t without their drawbacks. Sites that opt to use this design element must ensure that their images are tightly optimized for technical considerations such as page-load time, and there are unique accessibility concerns to address too, such as correct use of alt text and other metadata fields.
The Growing Trend of Blog Minimalism
Although many websites have firmly embraced large, bold images in their designs, other sites have been quietly advancing another, distinctly different design aesthetic – a truly minimalist approach that eschews images altogether.
Popular blogging and web publishing platform Medium (which is owned by Twitter) has been one of the driving forces of this design aesthetic. Yes, Medium does support images, and some Medium bloggers use them to great effect. However, a huge majority of Medium publishers do not use images at all, a trend that some other blogs have seized upon.
Minimal blog designs can be highly effective for certain types of content. Perhaps unsurprisingly, this aesthetic has proven popular among writers, but we’ve also seen several mainstream blogs adopt an image-light design. For some types of blog post – such as opinion-based pieces – this format can work extremely well. For others – such as the kind of instructional content WordStream publishes, for example – not so much.
Blog Design Trend #3: Duotone Color
Color is among the most important design elements you can use, and this year, we’ve seen continued adoption of strong, bold color schemes on many blogs and websites.
In terms of specific trends, the use of duotone color schemes remains popular. Some sites favor complementary duotone color schemes that use two colors that directly complement one another, and few sites have done more to further this trend than music streaming service Spotify:
Spotify has been championing the complementary duotone scheme for some time now, and this design trend features prominently across the site and Spotify’s marketing campaigns.
The image above is a powerful example of how this simple yet striking technique can be used to great effect, particularly when paired with strong, minimalist type (more on this shortly). Yes, technically there are more than two colors in play here, but you can see the effect they’re going for.
Duotone color schemes are incredibly versatile and highly effective, despite the limited number of colors in play. There are numerous ways to use duotone color schemes on your blog, so be sure to explore different schemes before settling on a final choice.
Various color schemes and their relationships, as depicted on color wheels. Image via Shopify.
Blog Design Trend #4: Strong Typography & Sophisticated Font Pairing
The web may be much more visual than it used to be, but for most sites, text is still the name of the game, making typography one of the most important design elements of any site.
Alongside bold hero images and duotone color schemes, we’ve seen continued use and increasing popularity of strong, sans serif typefaces on many blogs and sites. This example from technology training provider General Assembly illustrates how strong type can enhance even the simplest of designs, a theme that’s consistent across the entirety of General Assembly’s branding:
General Assembly’s site design uses distinctive bold typography
Font Pairing
One of the most effective techniques in typography is combining two very different yet complementary typefaces in a single design, a trend that has continued throughout this year and seems poised for at least a little more time in the sun.
Font pairings via Mimpy and Co.
Like many aspects of graphic and web design, font pairing appears a great deal simpler than it actually is. And, like many elements of the best designs, successful font pairings appear effortless precisely because of the skill and thought that went into them. Canva’s Design School offers a helpful guide to font pairing, with explanations of why each combo works.
Blog Design Trend #5: Clean, Simple Layouts
It’s easy to focus on elements such as bold color schemes or striking typefaces, but one of the most prevalent trends across the blogosphere this year has been the continued popularity of clean, simple layouts.
Sidebars crammed with buttons, badges, ads, and clutter are long gone from many blogs. There are a couple of reasons for this.
Firstly, as user experience (UX) design methodologies have filtered down into other areas of design, emphasis has shifted away from stuffing as much crap as possible into your blog sidebar (blogrolls, anyone?), and toward cleaner, more streamlined blog layouts. These principles have also been applied to other aspects of web design, such as site structure and navigation, which also help SEO and discoverability as well as reduce technical overhead.
How mobile usage has influenced blog design
Secondly, the shift toward mobile has necessitated new blog design approaches that favor speed and performance – both of which can be negatively impacted by extraneous features such as densely packed sidebars – and designs that look and feel great, even on smaller screens.
Blog Design Trends: B2B vs. B2C Websites
It’s worth noting at this point that many of the tips and techniques we’ve covered so far are applicable to most websites. That said, there are distinct considerations that B2B site owners have to reckon with that B2C sites might not.
The first is color. Ever wonder why so many corporate websites use primarily blue color schemes? It’s because the color blue signifies strength and trust – both qualities that many B2B publishers are keen to cultivate. In the figure below, you’ll notice that many large technology companies utilize a blue color scheme in their logos to convey this message:
B2B websites also have to factor tangible business objectives into their blog design decisions.
For example, many media and news organizations use sidebar content to promote other, related content – think personalized content recommendations based on topic or blog tags. This is a common design element on many sites and encourages readers to remain on the site to browse other content, reducing your bounce rate.
Compare this to WordStream’s sidebar. In the figure below – a screenshot of the main blog page on the WordStream site – you’ll notice that our most prominent call to action is more direct; it encourages readers to grade their AdWords account with the AdWords Performance Grader.
Scroll further down and you’ll see another sidebar element promoting WordStream’s free learning resource, PPC University. Both of these actions are directly tied to business objectives that drive leads and sales and also feed into various nurture pathways. It’s also worth noting that these sidebar elements do not display for every user – below a certain resolution threshold, the sidebar ads disappear in favor of a one- or two-column layout for the content.
The reality is that B2B blogs and sites are often subject to demands that B2C publishers may not be, as in the examples above. However, that doesn’t mean that corporate B2B blogs can’t adopt some of the techniques outlined in this post – you just might have to work a little harder to convince your executive team about certain design choices.
from Wordstream Blog Feed http://www.wordstream.com/blog/ws/2017/05/30/blog-design-trends
via IFTTT
No comments:
Post a Comment