Website Design For 2019 and Beyond

from 2019 Brushware July August Issue

By Meg Cooper

What does your website look like? Take a minute to pull it up and look at it and then, write down your answers to these questions:

1) Are you on a computer? A tablet? A mobile phone?2) How fast did your website load? Was it a second? Two? More than five?3) What is the first thing you notice? Your logo? The colors? A headline? An image?4) Where is your site menu? Is it easily accessible?5) Where is your call-to-action (CTA)? Do you have one?6) Do you have social media channels and are they represented clearly?

Ideally, your answers to these questions should be:1) Any device—it shouldn’t matter what I’m on, my website looks great!2) Loaded quickly (in less than two seconds)3) Logo/business name4) Yes, at the top of the page5) Yes, front and center6) Yes and, finally, yes

All these answers boil down to one point—the future of website design weighs heavily on the user experience (UX, for short). You want to have your customers’ experience at the forefront of your website design, and you can do this by thinking of one word: ease. Ease-of-use for your customers: ease of use on a mobile device, ease of accessibility and ease of conversion. Making your website user-friendly is more than just an easy layout or using stunning graphics. The UX should be a complete package from the front-end of your website, which is what the customer sees, to the back-end of your website, which is the data that you’re collecting to provide users with a comprehensive and personalized UX. Yes, this means you may have to take a few extra steps to provide a UX that converts customers, but your website is your online storefront and it is just as important to make sure your online store is working as best as it possibly can. Still not convinced? Imagine this scenario. You’re at a trade show sitting in your booth. Your booth has your logo (front and center on your banner), a few sample products, some informational packets and your best salespeople are right next to you. Now, break this down and think of it like your website. You wouldn’t want your logo to be small and hard to find in a crowd, would you? You’d want some sample products available to grab the attention of potential customers, so they can learn more about your business through your salespeople. It’s key to engage those who stop by into a deeper conversation in hopes of converting them into customers, right? So, you will want to hand out some more information to those potential customers, so they have something to remember you by, and take their contact information so you can have your salespeople follow up. This is how your website should be functioning, too. Your logo needs to be clear and the branding should reflect succinctly throughout your site—acting as a large banner to draw people in. Your website should show some of your products enough to lure in your customers, which is where a strong call-to-action comes into play. Drawing your customer in with great salespeople at your booth is akin to having a great call-to-action on your website. Your CTA is a way to pull your customer into the interior pages of your website, thus learning more about your business.

Does your website reflect these basic design components? Even though we’re well into 2019, making sure your website meets a certain standard is imperative for UX from both a customer experience and for search engine results. So, how do you bring your website up to current standards? Where do you start?

Make sure your website is user-friendly

When you implement a user-friendly approach to your website, you’re ensuring new customers (and return customers) can navigate your website with ease, find what they’re looking for and don’t leave your website frustrated. You want customers to keep coming back to your website so they convert into leads.

Below are some basic guidelines to make sure your website is taking a user-friendly approach, is up-to-date and is running at its best for 2019 and beyond.

Make Your Site Mobile-Friendly

Most users these days expect a website to be mobile-friendly. This doesn’t mean that your website should prioritize mobile design over desktop compatibility. What it does mean is you should make your website mobile-responsive. Meaning, your website should transition smoothly from a desktop view to a mobile or tablet view seamlessly. According to www.stonetemple.com, 58 percent* of global website traffic was generated through mobile devices in 2018. In fact, mobile web usage surpassed desktop views in 2016 and Google (and most

other search engines) now gives preference to websites that are mobile-friendly and regularly keep up with modern user demand. One great way to test your website to see if it is mobile-responsive is to open up your web browser on a desktop computer, click and drag the window to shrink it and look for the following:

• Swipe-able accessibility: Does the menu compact into a hamburger style menu (three horizontal bars)? Is the menu easy to navigate with your thumb? Can you swipe between pages easily? Are the buttons on your website large enough to click?

• Readability: Is the text easy to read on a small screen? Did it adjust to the window size appropriately? Do the titles stand out above the rest of the text? Do the titles line up correctly with the body of the text? Are your internal links easy to find?

You can make your website mobile-friendly without a full redesign, but it will require some code knowledge. The best way to ensure your website is mobile-friendly is to hire a web designer who can help you update your site to mobile-responsive standards.

Simplify Your Menu

Having a simple menu layout helps to keep your audience engaged without being overwhelmed. When you’re at the grocery store, do you want to visit several aisles to find cereal or do you want to easily find it in one aisle? The same concept should apply to your website; not having a simplified menu means you risk your customers becoming overwhelmed with options and not knowing where to click. Having too much clutter on your menu (and your home page for that matter) can lead to a high bounce rate (the visitors who enter the site and then leave [“bounce”] rather than continuing to view other pages within the same site). When you minimize your menu options, you are taking into consideration that your customer will be navigating through your website with ease and, therefore, more inclined to get to know your company more. You should also keep in mind that having “quirky” page names (instead of calling your Contact page a Contact page) is also a good way to confuse your customers. Stick with the tried and true page names (About, Bios, Home, Contact, etc.) and you’ll find your customers having a better experience with your website. Look at DuPont’s latest website below. Though it is a rather large company with multiple businesses, the website menu is simple, drawing you in to explore the entire website from just a few menu choices.

The Dupont home page features a simple menu and utilizes the hero image concept. Source: www.dupont.com

Web Design Terms

• UX: User Experience – all aspects of the user’s interaction with the website.

• Responsive Design: Website approach with a flexible layout that detects the user’s screen size and renders pages that are optimized for the device in use (desktop, laptop, smartphone or tablet).

• Call-to-Action: A marketing technique intended to urge the user (customer) to engage in an activity. This could be a survey, a PDF download or actual purchase.

• Parallax Scrolling: Generally refers to a website layout where the background images move at a slower rate in relation to the foreground images … creating a “3D” effect.

• Micro-Animation: Short animations intended to visually direct a user through tasks while interacting with a website or digital product.

• Hamburger Menu: Three lines stacked horizontally that indicate a menu that gained popularity with the rise of smartphones and the need to save screen space.

• Hero Image: A large image front and center on the home page of the website intended to capture the visitors attention.

Website Load Speed

Making sure your website loads quickly is a major component for websites. Google gives preference to websites that load quickly and easily, so don’t bog your website down with too much “stuff” or large files. Keep in mind that too many videos, large images and tons of pages can all factor into how quickly (or slowly) your site will load. The faster the load time, the less chance you have of someone “bouncing” from your website. To check this, you can visit websites that will tell you how long it takes for your website to load (https://tools.pingdom.com/). Using sites, such as the pingdom.com, can be helpful in determining whether or not you should hire a web designer to help you shrink your large files and images into a size that is more compatible with quicker load times.

Include Social Media/Networking Links

It’s 2019. You need to have social media for your company. If not Facebook, then LinkedIn, if not LinkedIn, then Twitter or Pinterest or Instagram. If you have a social media channel, you need to have the icon(s) on your website. As the millennial generation starts taking over the workforce (and then Generation Z after that), they’re going to be looking for more ways to get to know your company and that is where they are going to look: your social media channels. Social media is a great way to get your company voice established and to create an online reputation that customers can relate to and connect with. Understanding that these outlets are the virtual versions of “word-ofmouth” marketing is the best way to get started. Add those social media icons to your website and make sure they link up to the appropriate channels. They can be in the header (the top of the page usually where your menu is located), the footer (the bottom of the website) or even the sidebar, but they should be visible somewhere on your website.

Maker of handcrafted quality brushes since 1929 Producer of private label and branded brushes Two custom manufacturing facilities Family owned and operated

Interactive Design

Grab customer attention with micro-animation and parallax scrolling, hero images and videos. I’m not saying you need to add all these items to your website to make it stand out; on the contrary, pick a few that really represent your brand and what you do, and do them well. Micro-animation and parallax scrolling are great ways to make your website seem interactive without bogging down your load time. Hero images are large images that are front and center on your website—they make a statement, are on-brand and add a level of design to your website that gives your company a voice without having to say too much. This kind of interactive design can make the customer feel like they’re on a journey, within your website, that is all about your company. Engaging design within your website makes the experience unique and memorable…and who wouldn’t want to keep coming back to that?

Minimal Design

On the flip side, there is the option to do a simple website design, wherein you really scale back the features on your site. Minimal design can help convey a powerful first impression, guiding the customer through your website with simple graphics, punchy text or clean lines. Minimal design also helps when it comes to mobile-responsive design (it looks better on a smaller screen) and website load speed as less “stuff” is cluttering your website, which means faster load time. This approach can also make a great first impression as it is less overwhelming and a strong design can feel more like art. Minimal design is great for those companies that specialize in one or just a few things and don’t have a ton of products that compete with each other.

Though we’re well on our way through 2019, undertaking at least part of these guidelines will set you up for more success with your customers moving forward. Clean design, easy-to-navigate menu and pages as well as readable text can be simple adjustments that make a huge impact and good UX interface. Good UX leads to potential customers returning to your website repeatedly, which increases the chances of you converting them into lifelong customers. And who doesn’t want repeat customers?

To test for responsive design, use the restore down button in the upper right corner of your browser (just left of the “X”). Then drag the edge of the browser in to shrink the site.

For www.brushwaremag.com, in the above screenshot the middle column moves down in the website flow and the menu changes to a “hamburger” icon at the approximate size for a tablet window. As the browser is sized down to a phone view (left), the right column also pushes down in the flow. Those elements indicate the site is mobileresponsive.

- brm

Source:

*“Mobile vs Desktop Traffic in 2019” – https://www.stonetemple.com/mobile-vsdesktop-usage-study/

This article is from:

2019 Brushware July August Issue