Essential Website Design Tips for Ecommerce Stores

In 2014, I founded MOTE agency with Rembrant Van der Mijnsbrugge. Specializing in ecommerce, we partner with clients at every stage of their brand journey—from initial market strategy and brand identity to design, development, and marketing—always with a focus on sustainable growth. Across my 15 years of ecommerce web design experience, I’ve shaped the strategies of clients ranging from independent brands to Fortune 500 companies. I’m excited to share the web design tips and advice I’ve gathered throughout my career.

Design is communication. It’s a conversation. It has the power to captivate an audience, convey information, and evoke emotions—all of which directly impacts consumer decision-making.

Good design improves the quality of the conversation. With ecommerce in particular, you want to give a customer the information that they need to feel well-informed and confident enough to make a purchase.

Well-designed web pages help create an engaging customer experience, which reinforces your brand identity and drives performance metrics like sales and customer retention.

To get your own conversation, here are some website design tips learned over the last decade while designing for clients.

What are the elements of great website design?

1. Accessibility
2. Color palette
3. Images and video
4. Functionality
5. Navigation
6. Typography

Great web design often comes down to the interaction of these six core elements:

1. Accessibility

Accessibility is both a legal consideration and a design consideration. From a design perspective, better accessibility makes for a better overall user experience.

For example, design triggers like overcrowded layouts and flashing animations can cause overstimulation in many neurodivergent people and often result in visual strain and lower content comprehension for neurotypical people as well. Considering cognitive ease and other web accessibility principles from the start helps you make more design choices that allow all users to seamlessly flow through your site.

Shopify has built-in accessibility features, like the ability to add alt text to images. Including alt text on your website is a low-effort high-reward place to start, from both an accessibility and SEO perspective. You can also use an accessibility app or hire an accessibility team to audit your site and ensure W3C compliance (baseline standards for optimal web design) for the following criteria:

• Animation and movement
• Forms, inputs, and errors
• Processes and task completion
• Image and media alternatives
• Interactive components
• Input/orientation
• Layout
• Consistency across views
• Policy and protection
• Text and wording
• Help and feedback
• User control

2. Color palette

Color can affect every other element of web design, since the colors you choose determine what stands out and what fades into the background. This is especially important for legibility when it comes to text.

But you don’t necessarily need to sacrifice branding for legibility. For example, high-contrast color palettes such as black text on a white background are more legible. But you can play with that contrast by using off-white and charcoal instead of pure black and white.

Even within a color like off-white, you can incorporate your own branding; some off-whites are more on the gray-blue side, and others are warmer, more on the cream side. The colors you choose should complement your brand and remain consistent throughout your site and other brand touchpoints.

3. Images and video

Even if your brand’s color palette is subtle, you can always add accents of color through photography, video, and other visual assets. Incorporating branded imagery is a great way to add a variety of different colors to your website, bringing to life your brand personality. It’s also something you can change season to season to shift the look of your site.

With product photography, it’s wise to standardize your aesthetic approach, so visitors can easily flow through the site with a cohesive view of your product catalog. For example, you might shoot all of your products on the same slightly off-white background with the same quality of natural lighting.

When it comes to lifestyle photography and videography, there’s a lot more room to strengthen your brand’s narrative. For example, jewelry designer Jacquie Aiche’s website features a video and photos of brand ambassadors and celebrity couple Adam Levine and Behati Prinsloo.

A celebrity endorsement can be great social proof for establishing brand trust. The images of Adam and Behati casually embracing while wearing the brand’s jewelry positions Jacquie Aiche jewelry as bold and romantic.

4. Functionality

At the end of the day, a website needs to serve its intended purpose, whether that’s selling products or providing information. That means that the functionality of your site is as important as the look of it. To support those efforts, whenever you add a design element, measure how it impacts site speed.

For example, if you choose to incorporate videos, consider adding an image fallback. In other words, if someone’s connection is unstable and the video is slow to load, the fallback image will instantly pop into place instead of the video.

Remember that, even if you’re designing your website on a laptop or desktop computer, your customers are browsing your site on a variety of devices, including mobile phones and tablets. In fact, mobile commerce accounts for more than half of all ecommerce sales. For this reason, many business owners opt for responsive design, which means the site will automatically adjust based on the user’s device. That will create a more mobile-optimized experience for your high percentage of mobile shoppers.

5. Navigation

Navigation design is about creating a funnel that allows users to find what they’re looking for in as few clicks as possible. You don’t need to reinvent the wheel with this design element; there are standards for intuitive website navigation.

For example, you can meet user expectations by placing the navigation links on the left-hand side, the logo in the center, and tools such as search, user registration, and the shopping cart in the upper right-hand corner.

6. Typography

Good typography guides the reader’s eyes smoothly through the text. For example, larger text emphasizes important information and enhances comprehension by creating a visual hierarchy.

Your choices with these design elements can also strengthen your brand’s visual identity. In typography, the typeface is the design, and the font is a specific implementation of that design. For example, Arial bold, Arial italic, and Arial regular are different fonts within the Arial typeface. When building your visual identity, it helps to choose one to two complimentary typefaces to use throughout your branding. Many of the built-in Shopify typefaces are really fantastic and easy to select when you’re launching a theme on Shopify.

For example, Basic Commercial Light is a great alternative to a more generic regular Arial or Helvetica, used by luxury brands on Shopify like The Row.

You can also license premium typefaces from independent foundries. Klim and Commercial are solid choices for branding that endures the test of time. Some foundries release typefaces that feel hyper-relevant and a little bit more experimental, like Schick Toikka and Pangram Pangram.

Every single font has its own story and inspiration, and it’s the subtle nuances within the letterforms that give your brand a distinctive voice and tone.

Essential website design tips

• Balance the expected with the unexpected
• Choose fonts based on their applications
• Pare down
• Pay attention to line length
• Avoid pure white
• Design for the worst-case browsing experience

Every website is different, but some guiding principles will always apply when you design a site:

Balance the expected with the unexpected

Humans have a knack for pattern recognition. For that reason, websites that feel intuitive often have strong underlying patterns repeated throughout the design.

What we think of as web design best practices are only conventions repeated so many times users expect them. For example, we expect to see the word “bag” or “cart” or an icon representing one of those at the topmost right corner of an ecommerce website. Users often don’t consciously notice these patterns, but will notice the absence of them.

The more best practices a website follows—such as placing the navigation on the left, a shopping cart in the top right, and product descriptions to the right of product images—the easier (in theory) a site will be for a new user to navigate.

But there’s definitely a shadow side to that approach: the “sea of sameness.” That’s what happens when websites feel overly optimized and devoid of character. It’s why brand elements like typography, imagery, and color are important—they allow you to create a strong branded experience within a site that still feels very intuitive to navigate.

Choose fonts based on their applications

The most common pitfall when choosing typography is selecting a font that isn’t ideal for the exact type of text you’re presenting to website visitors.

For example, a call-to-action button or product description requires a legible size, weight, and line length to ensure instant, thorough comprehension. If a font is overly difficult for a reader’s eye, that could be fatiguing and cause them to leave the site without taking action.

But with large display headlines, there’s more creative flexibility. If you have a full-width hero or banner image with the words “new arrivals” across it, that’s going to be very large, so you can use more flourish and decoration while maintaining legibility.

Pare down

Taking a less-is-more approach can often result in a far stronger site experience. You can use a single typeface for your product packaging and your website, like the skin-care company Klur did. As a rule of thumb, try not to have more than two brand fonts, perhaps with a third as an accent, to avoid overwhelming your site visitors or missing out on brand recognition opportunities.

Klur, for example, went with a sans serif and monospaced combination. The site header and menu items are monospaced for emphasis while the product names and descriptions are sans serif for legibility. Different line weights provide an additional level of distinction.

Your brand colors, too, will make a stronger statement if there are fewer of them. You want enough colors to create contrast on the website (at least two), but not so many so as to be distracting.

Pay attention to line length

If your website contains blocks of text, like product descriptions, line length is an important consideration when creating the underlying grid of your website.

If you have a line that spans all the way across a page, your eyes are traveling from the left side of the screen all the way to the right side and back again. It can be very tiring.

That’s why a common best practice for product description pages is to have an image on the left half of the page and text on the right half—that way, the user’s eyes only have to travel half the width of the page.

Avoid pure white

With backlit screens and blue light-emitting devices, pure white can be really fatiguing for the eye.

Instead, go for palettes that are ever-so-slightly off-white and ever-so-slightly dark charcoal rather than full, high-contrast black. It’s something very minimal that the user might not even be able to call out when they land on a site. But it makes a website feel a little bit more considered and can impact the overall accessibility of the site.

Design for the worst-case browsing experience

When designing and testing websites, you are probably in a controlled environment with perfect Wi-Fi, but you want your users to be able to find what they need under any conditions.

Imagine your users are shopping from their phones on a flight with spotty in-air Wi-Fi, and every time they load a new web page they might be in for a dropped site or really long loading times. If a design element wouldn’t work under those conditions, you need to have a backup. Adhere to best practices for optimizing site speed, like disabling mobile video autoplay and using asynchronous loading to prioritize important content.