The eCommerce Website Design Guide for Beginners

eCommerce Website Design Featured

The eCommerce Website Design Guide for Beginners

Over 75% of consumers admit to making judgement’s on a company’s credibility based on their website design alone.

That statistic may seem shocking to you (It definitely surprised me) but it’s true. This can be critical for any small to medium size business as most people won’t buy from a business they don’t find credible resulting in a loss of  potential sales. Keeping that in mind, this page is about giving you all the information and resources you need to create a damn near perfect website design for your eCommerce site. We’ll go over a handful of topics that we consider essential for any successful website design. Sound good? Well sit back, relax, and let’s get started.

Why your websites design needs principals

While you’re designing your website, keep the following information top of mind. Let’s take a moment to think about and dig deeper into figuring out why principals are even important in your web design strategy in the first place. Doing the ground work is essential so make sure to read on as it’ll prove useful in the near future.

First off, what do we even mean by ‘principals’?

Principals are the most important aspects of your website that visitors will see or experience. An example of a principal within your websites design could be fast loading pages.

Your page load time is the first thing a customer experiences on your site making it one of the most important aspects and one you may want to focus on. Increasing you websites speed has already been proven in the past to increase conversions making it a good principal to focus on.

According to skilled.co, testing by AI healthcare software company mPulse Mobile found that:

  • Pages that loaded in 2.4 seconds had a 1.9% conversion rate
  • At 3.3 seconds, conversion rate was 1.5%
  • At 4.2 seconds, conversion rate was less than 1%
  • Past 5.7 seconds, conversion rate was 0.6%

This shows just how important fast loading pages can be for a business.

So to answer the question, we need website principles to…

to keep up with customers high demands 

Nowadays most customers don’t have the patience to wait for your site to slowly load or search through every page on your website to  find the products or information they came to your site to find in the first place. More than likely, they will simply leave your website and visit a competitors site who might have faster page loading times or easier navigation, leading to them getting the sale instead of you.

principals can increase chances of success

By implementing the right principals into your website design strategy, you may find you’re able to reach your business goals faster than before. For example, let’s say your companies monthly goal is to increase conversion rates on a specific call to action, you can focus on using Visual Hierarchy to highlight the importance of that CTA along with leading the user throughout your websites design. Just by doing that you may find your goal of “increasing conversion rates on CTA’s” has been reached a lot faster than if you weren’t to implement any principles.

eCommerce Website Design Target

Through website design principals you can decrease your websites bounce rate, provide a better user experience for your sites visitors, and increase your conversion rates above all.

Properly incorporating these latest eCommerce website design principals into your strategy can do wonders for your business, especially in 2020. These principals have proven to be and are expected to continue to be among the most important to any website. However, you can always implement your own principals, the principals that you find are most likely to help your business reach it’s specific goals.

Another thing to note is that principals are consistently changing along with customer demands so making sure to always be tweaking your strategy is necessary.

If you have a pre-existing website try an pick a couple principals to add into your sites design, give it time, and then measure the results seeing how effective it was for your business. No matter the case, we suggest doing research and creating a list of the top principals that you find would be the most important for your business and focus on those.

Picking the right Theme for your website

No matter what platform you’ve decided to start your eCommerce store on (whether that be Shopify, WordPress, Magneto, etc) choosing the RIGHT theme for your brand is critical. There are thousands of possible themes to choose from, however finding one that’s right for your business is essential in ensuring the success of your online store.

Before you start looking for a theme ask yourself what your ‘ideal theme’ would require

Every business has specific needs. For example, you may require your website to fit a large inventory of products. Some themes may be optimized to hold that larger inventory and some may not be. No matter the case, always keep in mind the requirements a theme must have to match the demands of your brand. We suggest making a list outlining the criteria your ideal theme would require.

eCommerce website design theme

As you can see from the image above, on Shopify’s theme store there is a filter depending on the catalog size your website will require. This is because certain themes are built for different sizes of product catalogs. Going through those theme filters and seeing which ones your website will require is a good way to start the criteria making process.

While your searching for a theme keep  your ‘ideal theme’ criteria top of mind

Now that you have criteria set in place, the selection process can start. There’s many different places where you can find both paid for along with free themes for you site.

If you’re using WordPress, you can find themes on…

If you’re using Shopify, you can find themes on…

We’re certain you’ll be able to find a beautiful theme to match your brand image along with your demands. Remember to take your time and not to rush this process, your theme is the foundation of your website and is something that you should put time and effort into finding. If your wondering if you have to spend  money on a theme the answer is no. You may be able to find a free theme that matches your criteria. These FREE Shopify Themes have proven to be a popular option for many small business who don’t have the funds to spend a couple hundred on a paid theme at this moment in time.

Choosing a theme can definitely be a hard decision. However, outlining criteria of what your ideal theme requires should make the search a lot easier as you’ll be able to easily eliminate themes that don’t match the set criteria, moving along the process fast and efficiently.

How to choose a Website Color Scheme

Choosing a color scheme for your website can be a difficult task but also very rewarding. A color scheme is a group of well fit colors used for designs, colors that go together and ones that match your brand image. Not only that, but you should also keep color psychology top of mind when choosing your color scheme. Color psychology is the study of how different colors affect users and their emotions. This is important as learning color psychology will enable you to be able to intrigue and captive your website visitors just from the colors you choose in your websites design.

Before we start off, i’d like to suggest you learn why a website color scheme is important in the first place. Doing the ground work will give you a better understanding of the strategies you’re implementing into your website design which in turn will help you out in the long run.

Step 1: Pick your dominant color

To start off, you’ll need to pick a main color for your website. This color will be the center of focus throughout your brands color scheme. Considering this color will be the center of focus, you’ll want to ensure it conveys the main message or emotion you’re trying to get across to your site visitors.

For an example we’ll look at Whole Foods.

If you aren’t already familiar with Whole Foods, it’s a multinational supermarket chain which exclusively sells products free from hydrogenated fats and artificial colors, flavors, and preservatives. In other words its a supermarket which sells natural and whole foods. This message of being a natural, healthy supermarket is conveyed by the choose of green as their dominant color. Green is a sign of growth and health across the world, making it a great dominant color to convey Whole Foods message.

Another thing to keep in mind is making sure you use your dominant color in your logo. This is essential in connecting your websites color scheme to your overall brand image.

If you don’t already have a dominant color in mind, you can refer to the image below to pick a main color that matches the types of emotions you want to bring out of your website visitors.

eCommerce website design infographic

For your dominant color, you can use it in your logo, menu tabs, buttons, title and headings, and to highlight important text.

Step 2: Pick an accent color

Choosing an accent color is very important. Without accent colors there would be no emphasis on the more important parts of your websites such as call to actions. This would most likely result in a low conversion rate for your website. Picking an accent color can be quite simple if you have your dominant color. We suggest using this color calculator to help find your accent colors.

We’ll walk you through how to use this tool. Once you’re on the color calculator  you should be greeted by a page like the one below.

ecommerce website design color scheme 1

The first thing you’re going to want to do is type the HEX color code of your dominant color in the box outlined below. (If you aren’t sure what the HEX color code is don’t panic, simply type the name of the color you chose into your search engine of preference followed by “HEX code” and Voilà). 

ecommerce website design color scheme

Now you want to choose a harmony. We suggest choosing the first option which will be complementary to your dominant color but if you don’t like that one you can always play around and choose another option.

ecommerce website design color scheme 3

As you can see from the image above, the tool generated a complimentary color from our dominant color. That will be our accent color.  We suggest using your accent color for your sites hovering menu tab text, call to actions, and even subheadings.

Step 3: Choosing a Website Background Color

Congratulations! You’re almost done your website color scheme. The only thing let to do is choose a background color for your site.

If your dominant and accent colors are more on the bold side we suggest using a lighter background to provide a contrast. Play around with your background color and see what fits. However, remember to never choose a background color that makes the important parts of your website hard to see or read.

Why following current eCommerce Website Design Tips can be beneficial

Following new tips in web design is essential. You should always keep an eye out for emerging web design tips to get your business ahead of competition. In today’s world, customers have high demands as they have an abundance of resources to choose from on search engines.

If you’re constantly looking for ways to further improve your site, chances are you’ll catch on to new innovative ideas before your competition. This can bring you one step ahead and allow you to create an effective more enjoyable user experience for your customers before competitors catch on.

Start looking at these eCommerce website design tips and see what you find. Have you already used some of these tips? If these tips aren’t new to you don’t worry. Here are a couple recent articles with more emerging web design tips and trends.

What makes an amazing eCommerce website design?

Throughout your life, it is very likely that you’ve visited thousands of websites. Some nicely designed websites, and others not so much. Can you remember any websites that stood out to you or stuck in your brain?

I’d like you to try something for a minute. I want you to sit back and close your eyes. Now think back to all the nicely designed websites that stood out to you in the past month or so (we know this may seem weird, but give it a try). What common qualities do these ‘amazing’ websites have? Excluding the products they were selling,  most likely it’ll be something about their design. Was it the colors? How about layout? or maybe even the feeling you get from visiting the site.

Note these things down. As if these website have stood out in your mind due to certain characteristics, chances are they stand out in other peoples minds as well. Keep those things in mind when you’re designing your own website as the goal is to get YOUR website to stand out in other peoples mind.

To answer the question of what makes an amazing eCommerce website design, it really depends on the individuals taste and what they like. However like mentioned, there are many universal traits of amazing website designs such as…

  • Easy navigation
  • Clear brand message
  • Unique

Do you agree with these characteristics? I’d say the majority of people will as they’re quite universal. I personally,  have not met a lot of people who don’t like being able to easily navigate a website or prefers a bland generic site compared to a unique one. Now you may disagree and that’s perfectly fine but the same can’t be said for the majority of people.

If you’re looking for examples here are few that I’ve personally considered amazing eCommerce website designs and that have stood out in my mind.

Conclusion: The eCommerce Website Design Guide for Beginners

Above all, your website is an asset to your business and it should be treated that way. Putting the time and effort into learning important aspects of web design can give you a huge advantage over your competitors.

So that being said, we congratulate you for putting the ground work in. We wish others would also put that time and effort into learning about web design before jumping straight into it considering how beneficial the ground work can turn out to be.

Feel free to share this blog post with a friend if you found it helpful as learning simple aspects of web design can be extremely beneficial for you and your business in the long run.

Let’s work together!

We’re the leading full service eCommerce agency in Toronto. Our passion is in helping small to medium size businesses reach their goals through eCommerce. We’re looking forward to speaking with you, contact us today or check out the web design services we offer here at Verdure Digital.