Website Design Trends for 2017

Are you planning to create your handmade business website in 2017? Is your existing website ready for a refresh in the design?

Technology trends and the internet move quickly. It can be exhausting to keep up with it all, but I love it. I find it so fascinating to see new designs and styles emerging and breaking up the monotony of the status quo. When it comes to staying on top of fashion trends, however, I haven’t a clue; you will need to turn to someone else!

The most important point I can make though is to really consider which trends or bells and whistles are going to make a positive impact in your business. You should also consider the speed and performance implications of incorporating these trends. So just remember that you shouldn’t feel like you have to implement every. single. trend.

Many of these trends are continuations and adaptations to features and designs I’ve been seeing over the past year and how I predict they will evolve in 2017. To reduce your overwhelm a bit, I’ve distilled these trends down to the ones I think are most applicable to small handmade and craft businesses. Some more complicated and awe inspiring trends are out there, but they would require hiring a designer or developer. I tried to present here some ideas that you can implement DIY-style. Let’s dive in.

Rich Colors & Colors with Purpose

Color! I love talking about color – color psychology, color theory, color trends, you name it. I used to be a part of the Color Marketing Group, an entire organization dedicated to color. They focus on understanding how color affects purchases and predicting color trends for product development. Did you know that auto manufacturers are deciding on the car paint colors several years in advance!?

But I digress. When it comes to the web, colors can be changed on a whim. It takes only a few minutes to log in and change a little code to reveal an entirely new color palette. But on the other hand, you really don’t want to totally flip flop the colors of your website because ideally your website colors match and compliment your branding.

However, knowing some color trends can still be helpful for refreshing your website color palette, especially in terms of color intensity, accent and complimenting hues, and design treatment on those colors.

Flat Design

With the rise in popularity of “flat” design and Google’s Material Design still going strong, web color trends for 2017 are bold and rich colors, but not quite as saturated and bright as they were in 2016. You can expect to see flat design continue, which means that objects and graphics won’t be mocking realistic highlights and shadows, or looking 3 dimensional or rounded. Instead colors and objects will be solid colors or feature interesting gradients.

If you’re not sure what I mean by flat design, here are 2 examples of older styles on the left, and flat design counterparts on the right

Pantone’s Color of the Year

Pantone’s color of the year for 2017 fits right in with the bold, rich color trends. It is bright but not screaming; it’s a bit subdued with an optimistic vibe and nod to mother nature. I think more greens and neutral colors plucked from nature will gain popularity in 2017.

Color with Purpose

Additionally I think we will see color on the web become more “organized” and intentional. Material design explains how to use different values of your primary color (lighter tints or darker shades of your color) in a way that has meaning.

Watch this video to get the full explanation. I think this is really brilliant and explains the concept quickly and easily. (Also, here is the wiki article on Material Design)

If you want to play around with this, here is a slick tool called Material Palette. 

 

Mobile First

If you think your website is already mobile friendly, let me challenge you.

Smart phones and tablets have very sophisticated browsers now and your website probably does show up if someone is browsing on mobile. But that’s not necessarily enough. Google defines a website as mobile friendly if all it’s pages follow specific guidelines. Some of those are:

• Ability to easily read and browse without needing to zoom in at all
• Width of the website fits the exact width of the screen – no need to scroll side to side
• Buttons and links are spaced enough to easily click with a finger

If you want to check the pages on your site to see if they pass Google’s test, you can use their mobile friendly test tool. (and to preview how Google “sees” your website)

Okay so that is Level 1. Hopefully you already adopted responsive web design and your site automatically resizes and rearranges to best fit any screen your visitors may be browsing on.

Going Beyond “Mobile Friendly”

When I say mobile first design, I’m not just talking about mobile friendly anymore. The increase in mobile browsing via smart phones and tablets is continuing to push web design to a whole new level. Mobile first design is taking responsive web design to the next level.

Typically websites are built with a responsive design or theme so that they look good across all types of devices. The bulk of designing, building, and testing is done on a full size monitor. This this design mentality design is still primarily best suited for desktop, but it also looks good on mobile.

Now let’s switch our thinking to design that considers the content, layout, and features for mobile first, as the primary device. This is how Google thinks now. Google crawls and indexes websites as they are seen by mobile devices. If you want traffic from search engines, it is really time to step up your game and make your site optimized for mobile.

Hidden/Fly Out Navigation Menus

Moving forward, you will see websites designed with navigation menus that are hidden by default and fly out when requested.

Large Typography

You will see larger text on websites and articles for easy reading. Plus we’ll continue to see better use of headlines throughout for those who skim. Because everyone is busy and in a hurry to just get the info they want and move on to the next thing. #AmIRight

Fewer Pop Ups on Mobile

Can I get an AMEN!? Seriously. how annoying is it when you’re on your phone trying to read an article and you immediately get a pop up for some newsletter or to subscribe? Well we should be seeing less of this practice because Google just made it a no-no.

Only the Best Content on Mobile

Non-essential website content can be completely hidden from mobile visitors so that they get only the essentials. This will lend for a slicker (and faster) user experience. If you use Beaver Builder, you can customize your design and choose whether or not to show individual rows, columns, and modules on various device sizes. (Here’s how)

 

Minimalism in design & More white space

This is not really ground breaking; minimalism in design has been a growing trend for some time now. I believe a lot of it has to do with the over stimulation of #AllTheThings in our lives and being inundated 24/7 with information. Add in the fact that more people are browsing the web on mobile, and expect a great experience. A sleek minimal design is a must when your screen is so small it fits in your palm.

So here are a few things you can do to incorporate some minimalism in your website design-

Simple Logo

Having a logo design that can be as flexible as a gymnast is a huge asset. If you only have 1 version of your logo that doesn’t work well in certain scenarios, then it may be time for an upgrade. You can (and probably should) have multiple logos.

*record scratch*

Yes. You can have more than 1 logo. I hear you now, “What? Wait! Don’t I need to be consistent with the same logo everywhere for brand recognition?”

Consistency in design does not mean you need to show up identically everywhere. Visual consistency (and visual branding) are much more than just a logo design. Your can incorporate the same fonts, colors, type treatments, and graphic elements in all your designs to be consistent. That way you can have multiple logos for use in different applications.

Here is an example of what I mean

If you only have 1 version of your logo and it is complex or incorporates an image or illustration, I encourage you to get a secondary text-based version for other applications. You can use a minimal, text-based, horizontal logo design for your website.

Slim Header Area

Since a lot of people will be viewing your site on mobile, you don’t want a huge header. Visitors shouldn’t need to scroll through a bunch of icons and elements before they get to the main content. Opt for a simplified and slim header area with only the bare necessities. You may even want to simplify your navigation menu if you currently have more than 5 or 6 links. Save your social media icons for the footer. The goal here is to not cram 645 things into your header. Keep it Simple.

White Space

Less is more. Be sure to leave some spacing between objects and elements on your website. Having gracious margins and … will really elevate your website design. Even if you have a lot of content, you don’t need to cram it all together. You want to guide the visitor’s gaze throughout your content. Too much all at once will be distracting and cause their attention to jump around the page and leave them confused about what to do next.

“Simplicity is the ultimate sophistication.”
Leonardo da Vinci

FYI, white space is also known as negative space. It doesn’t have to be white. It is simply space that is blank, open, uncluttered.

Welcome Mat or Hero Banner with a single CTA

If that just sounded like mumbo jumbo, hold on a second and I’ll explain!

A “Welcome Mat” is actually a term coined by SumoMe (a company that sells apps for your website & marketing) – it’s a full screen that shows above your menu bar and content. (This would technically be a no-no under Google’s new rules, however SumoMe as adjusted the way theirs works and you can follow the rules)

A Hero Banner is essentially the same thing, it’s a full-width banner with the most important content front and center.

A CTA is short hand for Call to Action. That’s when you are suggesting your website visitor performs a certain action, usually with a pretty direct message. Here’s an example: “Sign up today”

So putting a single Call to Action on a Hero Banner is an effective way to encourage your site visitors to do something. These are usually combined with an interesting background image and an enticing offer.

To implement this on your site, think of the main purpose you’re creating your website. What is the most important action you want them to take? What page do you really hope they see? Here are some examples

Primary Purpose	Desired Action/Page	Example CTA
Lead Generation	Sign up for an email list	Get your free checklist (link to opt in form)
Ecommerce	Buy Products, Shop Page	Styles for every budget. Shop Now (link to shop page)
Hotel	Book a Stay	Free WiFi at every location. Book Your Weekend Now (link to booking)

Then you need to create your Welcome Mat or Hero Banner and add your offer and CTA – Voila!

A Winning Combination

Zendesk does a great job with this. In the image above you can see their website is an excellent example of all 4 minimalist trends I’ve just mentioned. Check out the simple logo design, the slim header, ample white space, and the hero banner (animation). They have a short and sweet blurb of text and a single call to action – watch the video.

Additionally you can check out their website on desktop vs mobile to see how they’ve implemented some mobile-first concepts. Some of their content that is only visible on desktop. You won’t see the secondary top bar navigation, the full navigation menu, or 5 columns of links in the footer.

If you want to do all this too, check out and try the new default WordPress theme, called Twenty Seventeen.

 

HTTPS:// (SSL or TLS Encryption)

You might recognize more https (and less http) in website browser bars over the past few years. But what does it mean? In plain English, https indicates that the site is verified and sends/receives data over the web in a secured (encrypted) manner. In order for your site to be https, you need to get a certificate from a trusted 3rd party. That process used to require some jumping through hoops, but it has gotten easier as of late. The certificate authority must verify your identity and ownership of said website. Additionally, all data collected from user input (personal info, email addressed, credit card numbers via web forms) is encrypted before it’s sent on its merry way.

Why HTTPS is gaining momentum

Google

In 2014, Google started to use HTTPS as a ranking signal in their search algorithm and began to encourage all website owners to move in this direction. Over the next 2+ years, the percentage of Page 1 Google results that were HTTPS sites increased from 8% to over 30%. (Source)

Free SSL Options

This growth has not been only due to Google’s algorithm updates. Over the past year, these certificates have become more accessible thanks to the Let’s Encrypt project and the widespread support and adoption of it by hosting companies. Let’s Encrypt is a free certificate authority. In spring of 2016, Let’s Encrypt had issued over a million certificates in public beta and then officially launched in April. By September, they’d issued over 10 million certificates. Now, at the time of writing this post, they have over 21.3 million active certificates! (You can see up to date stats!)

Easier Implementation & More Support

Some web hosting providers have teamed up with Let’s Encrypt and now offer a seamless experience in issuing certificates to their customers. SiteGround is one of those. It was as easy as clicking a button for me, and now they are automatically issuing them for new domains. Literally you don’t even have to lift a finger!?

Thanks to @SiteGround for continued sponsorship and now auto issuing Let's Encrypt certificates for new domains! https://t.co/mwyz0n8G8K

— Let's Encrypt (@letsencrypt) January 13, 2017

It’s not just Let’s Encrypt that is seeing massive growth. The market share of sites using SSL certificates by Comodo nearly doubled in the past year. (source)

WordPress is on this bandwagon too, promoting only hosting companies issuing SSL certificates by default. (source)

Browser Warnings

I expect this trend to continue because recently the Chrome browser began indicating that a page is “not secure” if that page contained password or credit card form fields without using https. Note: this is not on all non-https pages, only those pages with forms collecting sensitive information. For now.

“Beginning in January 2017 (Chrome 56), we’ll mark HTTP sites that transmit passwords or credit cards as non-secure, as part of a long-term plan to mark all HTTP sites as non-secure.”

How to get HTTPS on your site

If you want to get that pretty little green lock icon and https in the address bar, get an SSL certificate for your site. It’s easier than ever before. You can contact your web hosting provider and see what options they have available. If their options are too pricey or they don’t have a free option, you can always get an affordable SSL from NameCheap.

If you are accepting payments directly on your site, you should consider some of the premium SSL options rather than the bargain options.

 

More Sites built with WordPress, Shopify, and Squarespace!

WordPress was identified as the fastest growing content management system in 2016 and has been in the #1 spot for 7 years in a row. Not only has WordPress exhibited the fastest growth, but it also has a strong hold as the most popular CMS with 58% of the market share! (source)

Even Obama built his website with WordPress. #JustSayin

And following WP, Shopify was cited as the second fastest growing moving up the rankings in market share to 8th place.

In 3rd place for growth in 2016 was Squarespace.

All of these platforms are excellent choices when it comes to building your website.

 

Shopping Cart Marketing

What if I told you that you could direct some of your marketing efforts to existing customers instead of only new ones? Since it is much easier to increase the value of an existing customer, you can get some small wins and increased sales by focusing on them. Target them by implementing some marketing right within checkout.

Just like that delicious candy in the grocery check out line. Sometimes I just cannot resist! #TreatYoSelf

Upsells, Cross sells, and Bundles, Oh My!

Upsell – Suggest better (or more expensive) products

Cross Sell – Suggest similar or related products

Bundles – Offer bundles of complementary products

You, too, can add on some of this sales revenue voodoo to your own ecommerce website!

WordPress + WooCommerce

If your shop is built with WordPress + WooCommerce (which is highly likely), you can specify upsells and cross sells for each product and display those items on the product details pages. This is a standard feature of WooCommerce right out of the box. But if you want even more advanced options and to implement these powerful suggestions during checkout, there are plenty of extensions you can add on to accomplish this.

One simple and affordable options is the Cart Add-ons extension

Chris Lema has a great in-depth post about all your options.

Shopify

If your shop is built with Shopify, have no fear! I looked up some options for you too.

A very popular (albeit pricey) option is the Product Upsell app

Another options that’s more affordable is the In Cart Upsell app – But I recommend you don’t use the free version because it will say “Powered By…” and that just looks kind of cheesy. Then again the developer is called “Awesome Software” so it might just be kind of funny – “Powered By Awesome Software”

 

Video & Interactivity

This entire post would be kind of dumb if I didn’t mention the incredible popularity of video. One-third of all online activity is watching video! (source)

In addition to videos on social media and/or embedded into blog post, I think we will see more video and animations in every day website browsing.

Dial Down the Video Backgrounds

I’ve seen several website that incorporate video as the entire website background or as the background in a section of a page. Most memorably, PayPal’s website was like that for a little while. But it’s not like that anymore.

I do, however, think that these flamboyant full background videos will be taking a back seat as more subtle, mobile-friendly, and fast-to-load solutions become more popular. Here are some other thoughts to ponder when it comes to video as a background.

Enter Cinemagraphs and Subtle Animations

A cinemagraph is like a moving photo. It looks like a still photograph but feature some minor or subtle repeated movement that plays on a loop. They are often in GIF format, but look and feel like video.  They sometimes are video files too.

Champagne anyone?

Other subtle animations you may see in use around the web include tiny animations when you hover over something or the occasional wiggle of a call to action box or button – just enough to catch your eye.

Live Chat

Another interactive feature growing in popularity is live chat interfaces. Just don’t use that super cliche photo of the customer service lady with the headset, ok?

I think the most common solution for this is Zendesk chat, formerly Zopim. (Also, when I went to their site just now I saw that they use the subtle animations too. When you mouse over the icons for their services, you’ll see the animation. Check it out.)

I have personally used Tawk.to as a free live chat solution and it worked pretty well. I didn’t use it a ton, but it did help to embed it on a sales page and chat with people who were interested in enrolling in my online course.

 

Trust & credibility

My final trend for 2017 goes hand in hand with the HTTPS trend. In today’s world, lies and rumors are shared rampantly across social media and the web. People everywhere are growing more and more skeptical of what they read and see on the internet.

There are so many skewed views and misleading headlines, it’s hard to know what is real. When you see contradicting information everywhere, you really begin to question everything and you wonder where to find the truth.

This is why I think those websites and articles that prove trustworthy and focus on credibility will rise to the top. I think it’s time for all the hype and click bait to fade away, don’t you?

I could write an entire post with tips on how to do this, but some quick suggestions for you –

Site Verification & Human Contact

Verify your site and your business with Google. You can verify site ownership on Google Search Console. You can also add your business and verify there too.

Additionally, you should have at least 1 or 2 ways that potential customers can contact you. This doesn’t mean you need to post your phone number, especially if you’re small without a dedicated business phone line. You should at least add a contact form and links to your (active) social media profiles.

You can also add photos of you and your team on your site somewhere to add a human touch.

Check & Cite Sources

When sharing information, data, and news, double check your information across a few sources. Also when you present that info, be sure to link back to the original source. I know, it feels a lot like writing your high school term papers. Maybe what they taught us in school actually was relevant!?

Keep your Site Safe

Encrypting data isn’t the only way! In fact it’s just a small piece of the security pie. Make sure that incorporate best security practices on your website and use a hosting company that keeps security top-of-mind. You can also invest in daily malware scanning services for your website. One thing you really don’t want is to get some malware on your site and then have Google flag your site as compromised.

Social Proof, Customer Reviews, and Testimonials

Let your customers do the talking! People really value customer reviews when deciding to make a purchase or not. If you can, add some testimonials or kind words from happy customers on your website. If you can turn on product reviews in your shop, do it (if you’re using WooCommerce you definitely can).

Here’s an interesting article if you want to explore the topic of instilling trust even more

[bctt tweet=”Check out these website design trends for #handmadebiz in 2017!” username=”bexmarie_”]

---

OK — That’s a wrap!

I hope you’re feeling inspired now with some ideas for ways that you can bring your website into 2017. But one thing I really hope that you understand before you go try and implement trends I’ve presented here —

ONLY implement what feels RIGHT for your business and what you feel will ENHANCE your business. Don’t just add in these things to “be trendy” or fit in. Pick and choose what interests you the most and what you think your customers will appreciate and get value from.

Adding bells and whistles to your site without purpose is never a good idea. Being untrue to your business and wearing a mask to fit in is never a good idea either. So If you designed your business branding with a country store vibe, then perhaps this minimalism movement doesn’t really apply to you! If your branding is incredibly girly and flowery and your style is going for a Victorian era feel, then don’t make your website into a super-slick straight-lined minimalist’s haven! It just won’t feel right!

You can pick and choose which of these trends will work well for you.

Ready to create your own website but unsure where to start? Grab your free Website Launch Checklist!

 

 

Keep Creating-