Skip to main content

The 4 Pillars of ECommerce Design

Lesson 6 from: How to Design Your Online Store

Stephan Peralta

The 4 Pillars of ECommerce Design

Lesson 6 from: How to Design Your Online Store

Stephan Peralta

buy this class

$00

$00
Sale Ends Soon!

starting under

$13/month*

Unlock this classplus 2200+ more >

Lesson Info

6. The 4 Pillars of ECommerce Design

Lesson Info

The 4 Pillars of ECommerce Design

design trends come and go, but there are design elements that are fundamental in modern e commerce in this lesson. I'm going to share the four design elements that will help your store sell more and distract less. So let's get into the elements of modern e commerce design. There's trust, visual appeal, form, and navigation. Some of these may be review though. I encourage you to approach these with the beginner mindset first. Let's talk about trust. So imagine visiting an online store for the very first time, you know nothing about the brand, the quality of their products or the commitment to making the customer happy. What would encourage you to actually make a purchase? You may be lured into a deal but to actually go through the whole purchase really requires trust. So what are trust indicators? Here are the top three must have trust indicators that I would recommend for every entrepreneur first contact information. Nothing throws people off more than the website without contact infor...

mation include an email, a possible phone number or even a mailing address. This is the kind of information along with an about us page that really helps potential customers feel like they're buying from a person instead of just a brand 2nd. You'll want to return policy. A policy doesn't only make it easier for a person to return a product that doesn't satisfy them. It actually increases purchases by instilling a sense of confidence and trust in the customer knowing that you can return the product if they need to. And another great way to build trust is by displaying technical certifications on your shop. Just by using Shopify, your site will automatically be secure by using Shopify payments alone. Shopify payments is a very powerful payment gateway that uses the latest security technologies to make sure that you can protect your customers sensitive information. So don't hesitate to use graphics showing the security compliance is your store has as well as even the payment methods you can accept on your online store customers trust is hard as to earn when you don't have any customers. So I highly recommend you include these trust indicators as an important aspect of designing your store. Another critical element of your shop and the one you've probably thought about the most is visual appeal and there are a few elements to this, whether it's photography, colors, fonts and so on. When selling your product online perception is everything. People form their first impression within the first few seconds of visiting your store on your Shopify store. Making that impression count rests on the quality of your images. Think of it. This way your product photography is like an ambassador sharing the promise of your product online. Your customers can try taste or feel or where the product before they buy, So they'll rely heavily on the visuals to decide if that product is actually right for them. Products, photographs on the white background are typically a gold standard for e commerce photography notice how when you purchase a product on the big box retailers website, there's always a white background photo including lifestyle photos as well. Here's the reason why it's easier to see the product details as it strips away the branding so your product can appeal to different demographics. If you want to learn more about the product photography, check out Shopify academies free course on product photography, lifestyle or branded photos are also important because it allows customers to envision themselves interacting with your product on a day to day basis. Overall, your product photos are a key factor in your store engagement conversion and even retention. Let's continue with the visual appeal of your online store and talk about colors and fonts, you may have created the most incredible product, but if the aesthetic on your website specifically to the colors and fonts don't work, your customers will be put off and may not make a purchase of that incredible product. The look of your store plays into the overall experience of buying this product that you're looking to sell. Color is one of the most powerful tools that you can use to spark interest and emotion. Color can also be used to draw attention to specific sections of your website and even lead your customers down a specific buyers journey in module two, we'll talk more about how to choose your brand colors though. For now, I want you to keep in mind the golden rules for using colors on an e commerce website. I recommend using two main colours for your website, a primary color and a secondary color. There are two ways I recommend choosing complementary colors. Firstly, I go to dribble dot com and search for a color palette. For example, if I can type in red and I can see examples of websites that use red in their color palette and see which options look most officially appealing to myself. That works great. The second option is to check out the website or a tool like cooler by adobe, which allows you to pick a primary color and it generates complementary colors associated with it. Another important topic that I'm passionate about is ensuring that your website is accessible. You want to ensure the colors that you're choosing contrast well enough that people of all ages can read the text that you're looking to communicate. I've also included a guide and the resources below to ensure your website is accessible. Now, let's talk about fonts and typography These days, customers expect to see dynamic and interesting typography on the website rather than an old school stale looking font like times new roman, for example. Well, the words you write share information is important that typography communicates the emotion of the information to help you build brand identity and more of that. In Module two, the Good news is with the Shopify theme story. Each template comes with tons of recommendations for fonts. You can use the recommended fonts for your website or if you do choose to make changes. Here's some good foundational rules. First to find a hierarchy of typography, keep your body font style simple and easy to read and when it comes to headings you can be a bit more adventurous with the font style you choose. Second stick to two fonts as a beginner, it's just easier to manage to different font styles. Now, let's talk about form. How does your website take shape when you answer that question? Just in your head right now, I guarantee you visualized a website on the desktop computer. That has to change. There's no doubt that your potential customer will expect to buy their products on the phone when people pick up the phone, they want to just get something done immediately. Mobile commerce is taking over According to Comscore, nearly 70% of digital media time is actually spent on the mobile device. Unfortunately, many e commerce websites and platforms were built only to keep desktop browsing in mind, luckily you're building your business with Shopify. Shopify themes are responsive. This means that the site expands and contracts nicely between different devices. Whether you're viewing a website on the desktop computer, smartphone or tablet, Shopify themes has you covered as you saw in the theme tour. In the overview, you can see what themes look like in a mobile perspective when choosing a theme based on mobile, it's best to attempt to make a purchase to see if you're happy with the transactional flow. If you're not, there's a good chance your customers might not be as well. Elements like a cart drawer slide out or an easy to follow navigation that might have an accordion drop down are crucial when choosing your potential mobile shop 15, the last critical piece of e commerce design is navigation. Your website navigation should help customers find the product quickly and easily. A good navigation improves the online stores shopping experience and helps merchants increased sales and profits. Navigation can influence your theme choice as well. If you have a large catalog of products, a theme with a larger menu display might be best for you. I have a guideline that I recommend entrepreneurs follow when launching their store first. Only 3-4 headers on the navigation. You also want to be clear when you label your headers for your navigation. There's no time to be clever, so you want to be as clear as possible. These are the headers I recommend at the top of the navigation when getting started, first shop, product or collection name, add your about us your best sellers as well as contact us second your footer. That's the bar at the very bottom of your page. Here are the labels I recommend for your footer. Try shop once again for a collection or product. This time at the return policy terms of service as well as contact information. This is a great place to get started and you can change your headers if you notice that they're not being clicked on. You can see this is when you go through your iteration process and use products like heat map or user testing to validate the correct navigation items. It's important to keep these four fundamental design elements in mind as you build your Shopify store. I've worked on dozens of businesses from startups to massive brands and these are the four factors that constantly come through when building out these projects, build trust, make it visually appealing, think about the device your visitors are using and keep the site navigation as simple as possible and get the visitor to the product as quick as possible. So in the next lesson I'm gonna be breaking down two of my favorite stores and what they're doing successfully has made them strong merchants. Yeah. Mhm.

RELATED ARTICLES

RELATED ARTICLES