Introduction

During the current COVID-19 pandemic, more people have moved online to do business, communicate, find entertainment, and shop. Given that businesses in most states are just starting to reopen in limited fashion, the internet has been the backbone of American daily life for the past few months. In fact, some statistics show that web traffic has more than doubled in some areas and online transactions have increased by over 40%. Even when businesses fully reopen and life returns more or less to normal, internet use will probably remain significantly higher than it was in 2019. Consequently, having a strong web presence anchored by a well-designed website has become even more critical to run a successful business. But what exactly differentiates “good” website design from the “bad”? Which website elements comprise strong design, and which ones hurt your site? While the answers to these questions are different for each individual business and website, there are a few general characteristics that contribute to good design. If you’re worried you have to have your own extensive website design portfolio to find examples of good website design, we have good news: you don’t. Below, we’ve picked out 5 websites that we think exemplify the key design elements that create a solid, user-friendly website. Although you could make a comprehensive list of 30-50 sites with good design features, we’ve narrowed it down to 5 with the most important ones in our opinion. Without further ado, here are 5 websites for design inspiration in 2020 and beyond.

Images and Mobile-Optimized Navigation Menu: Panini Bay

Panini Bay is an Italian restaurant on the New Jersey coast. Right off the bat, Panini Bay differentiates itself from most sites by using a visually-appealing loading screen. As the page loads, the logo outline fills out followed by the body colors just before the home page appears. Rather than make visitors wait with a blank page until the content loads, Panini Bay decides to provide something to occupy visitor attention to reduce the likelihood of bounces (people leaving your site before it loads). This is a strategy to consider if your site has large high-quality images which can take longer to load: in Panini Bay’s case, visitors are rewarded for their patience with high-quality images of menu dishes and restaurant ambiance. The high-quality pictures on each page do most of the talking, as text is used sparingly and is used to attract attention to the most important pieces of info about the restaurant (e.g. Italian Cuisine, Fresh & Local).

Exploring the website a bit more, you’ll see that instead of having the navigation bar at the top, Panini Bay’s website has a “burger”-style navigation menu accessed by clicking the 3 horizonal lines in the top right corner. This kind of navigation deviates from traditional practices because it addresses the shift towards mobile web browsing. Now that more than half of web traffic comes from mobile devices, websites are increasingly prioritizing the mobile experience. Most mobile-optimized websites offer the traditional top navigation on desktop and different popout navigation menu for mobile, though the burger-style navigation bar is becoming more popular across all platforms because it’s more space-efficient and directly optimizes navigation for the larger half of website visitors. Panini Bay’s website is a prime example of capturing attention using strategic, well-done animations, mobile optimization, and high-quality visuals. If we were to offer one critique, it would be that the Menus link in the navigation currently doesn’t go anywhere if you’re not on the homepage, which appears to be a case of misused anchoring (more on anchoring in URLs here, if you’re curious). While best practice is to consistently test your links and always test new links to make sure they are working, overall Panini Bay has a well-designed website filled with visual appeal. My mouth is watering after visiting the site, and I’m willing to bet yours will be as well.

Gated Content: BrightGauge

One of the most frustrating things as a website owner is developing great content assets for sales but not being able to collect prospect information from said content. While some visitors may fill out a contact form on your website after reading, these people probably don’t represent the majority. This is the problem that gated content seeks to solve. Gated content requires visitors to fill out their contact information before proceeding to the actual content file or page. The contact form functions as the “gate” to filter out and capture the information of visitors who are most likely to be interested in what you offer vs. those that might just be browsing. BrightGauge demonstrates this very well: their primary service is providing business owners a centralized data and KPI dashboard for their business activities. As such, they’ve developed a series of whitepapers around metrics and goal-setting. While some of these are not gated and free to read, the high-value whitepapers directly related to the ultimate goal they help businesses achieve (growing and scaling your business) are gated in order to collect information from their main targets: business leaders looking to find new ways to grow.

Looking at the other pages, BrightGauge’s site keeps things rather simple so customers can focus on how well they do gated content and understand BrightGauge’s overall offerings. If we were to nitpick, we’d maybe add some sort of Our Clients or Testimonials module on the homepage. If you’re thinking of using gated content, be aware that doing so requires strategy and balance. Although it does play a big role in collecting lead information, it can also lead to more bounces (people visiting the page and closing it immediately) and prevent prospects from exploring further if you’re not careful. While longer, more targeted content items like whitepapers tend to be good choices for gated content, something like your bi-weekly blog post might not be the best idea to make gated. The general rule for gated content is to use it for higher-value content like whitepapers and case studies for prospects who already know a bit about your business and are trying to find out what you can do for them. Additionally, gated content works much better for B2B selling than for B2C, and our recommendation is to generally avoid gating if you’re a B2C company.

Ecommerce: Gitman

Global ecommerce sales totaled over $3.5 trillion last year, a number that is projected to almost double to $6.5 trillion by 2023. So, if you’re a company that sells a B2C product, your website in just about every case should have ecommerce capabilities–especially during these times. If you haven’t added ecommerce to your website but are looking to do so, please talk to us and we’ll recommend some solutions. Gitman is an example of a small business website that leverages ecommerce functionalities well. Immediately upon visiting the homepage, shoppers are shown a popup which offers 10% off their first order if they sign up for the Gitman newsletter.

This strategy is effective as it offers visitors something of tangible value in exchange for their contact information, making signing up feel more worthwhile. Continuing down the homepage, you see high quality images of fabrics and their made-to-order dress shirts. The site background, apart from imagery, is white and gives a clean and crisp feel, simulating the feeling of opening a dress shirt and wearing it for the first time. Text is used to complement imagery and calls out the most important aspects of Gitman’s business (e.g. New Fabrics, American-made). If you visit one of their product pages, you’ll be taken to a module which allows you to specify the size and features of the dress shirt. You’ll also find descriptions of the dress shirt and its main features, with high-quality images that showcase each. If the size you want doesn’t happen to be in stock, there’s an immediate popup that lets you know your shirt will take a bit longer to arrive since it will be a special order, which is useful to avoid customer dissatisfaction. Rather than inform customers just as they are about to check out (or worse, after they’ve placed an order), Gitman provides this notification upfront and details why there will be a delay.

Gitman’s overall website is very well done. The pages balance imagery with text copy and non-product or company pages (e.g. Contact Us) have a streamlined feel while retaining brand identity to help visitors focus on the desired action. One minor possible improvement we might recommend is to add a testimonials or ratings section so potential customers know the quality they are receiving (given these dress shirts are on the pricier side), but Gitman is still one of the better small business ecommerce website examples we’ve found.

Data Presentation and Prospect Pathways: Strala

Just having a good product or service won’t maximize sales nowadays. You also need to ensure you effectively communicate what your offering does and how it adds value to the customer. One of the best ways to do this is through charts, because they provide a visual, quantitative measure of how your product or service improves a customer’s business. Though numbers are good, you can multiply their impact if you use a visually attractive and easy-to-understand presentation method. Strala’s website shows the different ways their platform helps businesses find where leads are coming from through use of varied, complementary colors in the charts and graphs they use.

The site uses animations to direct attention, and does so in a way that doesn’t confuse visitors and distract from the content. Information is easy to understand as visitor’s don’t need to read long paragraphs of text on each page: like most good websites, Strala opts to “show” rather than “tell.” A second noteworthy element used by Strala’s site is the different calls-to-action (CTAs) for each potential customer group. On strong websites, these play a critical role as starting points for different visitor pathways. The rationale behind visitor pathways is that you want to separate visitors into groups to find out both what they’re interested in and which stage of the sales funnel they fall into.

Using these different CTAs, you provide a journey or “pathway” that visitors take that ultimately leads to them taking an action based on how sales-ready they are. For example, a top-funnel (new, just browsing) prospect’s pathway may direct them to sign up for a newsletter or watch an About Us video, while a bottom-funnel (ready to talk to a sales rep) prospect’s pathway leads them to fill out a contact form and schedule a sales call. Setting up these strategic prospect pathways on your website can help you organize website leads more effectively and use your site to increase sales efficiency. One critique we have for Strala’s site is that the navigation bar is fixed and stuck between transparent and opaque, so it cuts off and clashes with some of the modules on the page as you scroll down. Usually, it’s best to make the navigation bar opaque to avoid color clashing as visitors scroll down; or, as pointed out above, you could use a burger-style popout navigation menu to avoid this problem. In addition, though Strala uses animations well, keep in mind that best practices are to keep animations minimal to focus attention on your page content (remember, this is your website, not a Prezi).

Humanization: Nigel Green

Humans are complex, social beings, which means that even though AI programs like Siri and Alexa are convenient assistants, it really takes another person to understand our needs (for now). The same principles are reflected with websites: even though graphs, words and numbers look nice, most of us prefer buying things from people rather than bots or programs. Nigel Green is a prime example of using the human factor to build a strong website. He runs an independent sales consultancy/training program, but instead of using his logo or other brand elements, the first image that welcomes visitors to the Nigel Green website is a smiling, professional photo of himself.

This theme continues throughout the home page, as you see not only another picture of Nigel but also headshots of a few of the business leaders that he has helped. In addition, the copy speaks mostly to the business leader browsing the site (e.g. “Here’s how we can help you,” “Tell us about your sales needs, struggles, and growth goals”) rather than to the at large company (e.g. We help businesses scale their growth to reach the next level).

It’s clear that Nigel Green’s strategy is to form a connection and appeal to the business owner or sales leader themselves to use his consultant services. This strategy works great if you’re running a one- or two-person company and/or want to position someone as the “face” of your brand. Even if you aren’t someone like Nigel Green running a P2P consultancy, you can benefit from adding personal elements to your website. Things like company leadership headshots on the About Us page, an Our Story section on the homepage, or Customer Testimonials from business owners that you’ve helped allows visitors to form a personal connection with your company and allows them to see beyond just your brand name. Even in the age of digitization and automation, customers still prefer to speak with a person rather than just follow automated processes. By showcasing the humans behind your company, you’re communicating that you’re proud of your people and value the human-to-human connection. Like with most website elements, be strategic with how much humanization you use. Different industries have different humanization standards based on the primary entity they are trying to help (e.g. more humanization is better for individual person-focused training or lawyer services, but probably not for business-focused factory equipment manufacturers). Don’t try to add in something like employee headshots just for the sake of doing so if it doesn’t fit your overall targeting and sales strategy: this will appear forced, maybe even desperate and discourage people from exploring further.

Conclusion

Website design inspiration can come from many sources. Though we’ve highlighted 5 sites and their main features above, we encourage you to look through other examples if you’re looking for ways to modernize or revamp your website design. However you choose to update your website, just remember that you don’t need to create the “flashiest” website with all of the features above (that might actually be excessive). Instead, focus on a handful of elements that fit well with your website strategy and overall mission, and before you know it your website will be ready to take on 2020 and beyond.