Rules and Tips for Online Store Design

Today we will talk about how to design an online store for success. It’s not only about the aesthetic appeal, although it is important as well. But the principle ideas behind your design must be to help your website’s visitors to find whatever they need and motivate them to make a purchase.

Online Store Design: Basic Rules

1. Ease of navigation

We live in the age of UX/UI design, which means that the design of your store must be customer-centric. Every detail must aim to facilitate the search and purchase process for first-time website’s visitors.

Such a website must be easy to navigate and with every checkout step logically following the previous one. This means that you need a design that will provide a clear path from one important point to another, for example, from the Menu to the Product Page, then to Cart, and from there back to the website. A variety of layouts needs to be tested to pick the best option for your specific shop.

2. Aesthetic appeal

The times of elaborate typography, colorful backgrounds, and an abundance of graphics are long past. The best-selling websites of today are minimalistic and elegant.

They have lots of white space, easy-to-read fonts, and no more than three colors per page. This kind of style makes it easier for the customer to focus on the product and information that’s really important, so they won’t get distracted from making a purchase.

3. Branding

Branding is your shop’s identity. It helps you stand out among the competition and makes your shop memorable.

Most important elements of an online store’s branding include a trademark, logo, motto, unique fonts and brand colors.

4. Professional photography

If your online shop sells products you manufacture yourself, you must set up a professional photoshoot to take great product pictures you can use on your website. However, if you have a huge catalog of products from a variety of brands, you will need to contact manufacturers and request high-quality product pictures.

Note that you should never use poor-quality stock photos. They will only bring down the trustworthiness level of your store.

5. Great visualization

People come to your website not to read sheets of text but to find specific products and buy them in as short a time as possible. Therefore, you must make sure they are able to navigate the website easily, and various visual elements, like icons and buttons, will help you achieve this.

Don’t create a separate tab called “Cart” instead put a stylish cart icon at the upper corner of the page. Do the same with social media sharing buttons, which should be conveniently placed on product pages, instead of a paragraph calling for visitors to share the product on their social media accounts.

6. Cool visual effects

Web design trends change and evolve fast. This year the hottest trends are vector and 3D animations as well as Parallax, which allows pictures on your page to “come alive”.

Visual special effects are mostly used on landing pages but you can find applications for them on product pages as well.

Here’s an example of how to use cool visual elements for a retail clothing store:

PHOTO

Rules of Composition for Your Online Store Design

Check out the basic rules of composition used by artists, photographers, and designers for centuries.

1. The Golden Ratio

To forego the mathematic formulas of calculating the golden ratio, let’s just say that image proportions following this rule are 3/2 or 5/3, and so on.

This kind of shape is believed to be aesthetically pleasing, and many artists, including Salvador Dali and Le Corbusier, used it in their works. You can apply this rule of proportion when designing different blocks and elements of the website. Such as proportions in the relation of text to images, size of the header to the size of text, pictures, etc.

PHOTO

2. Rule of Thirds

The rule of thirds is the basic rule of composition. To apply it, divide your website’s page into nine parts (three by three). The points where the lines dividing the image cross are the points that a viewer’s attention will focus on first. Therefore, this is where you need to put your most important elements, such as the Buy button or information about discounts.

Whatever you want your online shop’s visitors to see first should be located at one of these points.

PHOTO

Tips for Designing Your Shop’s Main Pages

Home Page

Your Home page is the “face” of your online shop, so it must be attractive and provide maximum information.

The following tricks will help maximize the Home page impact:

• Make the navigation easy and clear, for example, Menu -> Categories -> Subcategories.
  Most importantly, remember the rule of three clicks. It means that any website visitor must be able to get to the product they are interested in taking no more than three steps. For example, for a clothing retail store this should work like this: Women’s Clothing -> Dresses -> Blue Gucci dress. If you have a big catalog with hundreds of products, this won’t be easy to achieve. Use a complex system of filters to help customers navigate your store. (More information available in this post.)
• Place banners that announce sales and special offers at the top of the page. Make the discount announcements bold and highly visible to ensure that the numbers are the first thing prospective customers see when they open the website.
• If there are no big sales announcements to make yet, put the Best Sellers category to the place of honor on your Home page. People are interested in what the most popular items are, so be sure to use this trick and have a Best Sellers page.
• You can also post your company’s story on the Home page as well as explain your business process. Use a variety of visuals to enhance it.

PHOTO

Product Page

Basic rules for designing a fantastic product page are:

• Provide several high-quality pictures that show off the product from different angles. Using poor-quality or stock images is a “big no-no”. Your goal is to present the product in the most favorable light. So, organize a professional photoshoot and add a video is possible.
• The Info section must be well-organized. The rules state that the best placement of the elements is to put the shop’s name in the upper left corner, top line is best reserved for the product name, followed by the price, with the Cart icon drawing the shopper’s eyes to the right.
• Put the price in a bold contrasting color and in size big enough to be clearly seen. Add any information about discounts right there so the customer knows how much money they can save.
• Never forget social media buttons, which you should place not far from the price. Give your customers a chance to share their favorite products and tell their friends about your shop.

PHOTO

CTA Button

The CTA, or Call-to-Action, button is one of the most important elements of e-commerce shop design. In the majority of cases, the actual call on it will be “buy” or “add to cart”, but the design is what can make a difference in your number of conversions.

• Use a contrasting color for the CTA button to enhance its visibility.
• Play around with the CTA message if you are feeling creative. “Buy” and “add to cart” work well, but depending on your target audience, you might be able to come up with a more interesting and effective message.

Never forget that it’s not only the design of your CTA button that matters but also what it leads to. Many prospective buyers abandon the shop at this particular level of the sales funnel because the checkout process is too long and complicated. It will be best to minimize the steps it takes to make a purchase. Cut them to the minimum by simplifying the registration process and enabling registration and authorization via social networks, like they do on AliExpress and other popular online retailer platforms. You need to provide the best possible customer experience, which means making it super-easy for people to buy from your shop.

PHOTO

Cart

The Cart’s design has a great impact on your conversion rate, so be sure to use the following tips:

• Always place the Cart icon at the top right corner of the page. That’s the “traditional” place for it and if customers don’t see it there they might get confused.
• Make the Cart icon big and highly-visible.
• Use contrasting colors for the icon.
• Make sure the information about the items in the cart is updated with every addition so the customer doesn’t forget what they put there.
• Have your web designer add a plugin that will enable the appearance of a dropout list of the items in the cart when the customer points the mouse cursor at the Cart icon. This way, they won’t have to open the cart every time they want to check something (remember the fewer clicks they make, the better).
• Items in the cart must be presented not only as a list of names but also have pictures and links back to product pages. This will help buyers review and compare their choices if necessary.
• Place order and shipping details right next to the cart. They are connected in the buyer’s mind, so help them see all the things that interest them at once.

PHOTO

And a Few Final Tips:

1. Of course, you want your website to have all the best features right away, but if you don’t have the budget for it yet, it’s better not to rush. An online shop designed by a non-professional or an inexperienced beginner might be cheap, but it will work against you. It’s best to minimize your requests and have a basic but top-quality design. You can always add more cool features later.
2. Test, test, and test again! All design elements need to be tested to choose the ones that perform best and increase your conversion rate.
3. Make your website unique by achieving the balance between effective design and your brand style.

Have these tips been helpful to you? Please share your opinion in the comments and on social networks. Good luck with designing your online shop!