6 Important Principles For Designing Your First Online Store

Good design is in many ways ‘invisible’ to the average internet user. 

Many of us will hardly consider an e-commerce site’s design until it fails us. That annoying moment when you can’t find the products you need to buy, or the product images are too small and take too long to load...

If you're designing your own e-commerce website, you do not want to miss this post! I'm spilling 6 principles you'll want to consider while you design your own website. Whether you're using Shopify, Squarespace, or Wordpress, this post is for you!

Functionality will always far exceed style and aesthetics when it comes to creating a design scheme that really ‘works’ for an e-commerce brand.

Here are six important principles to help you design your online store. 

 

Principle One: Create Visual Hierarchies

Visual hierarchies serve as an anchor for the viewer, allowing them to sort the elements of a page in milliseconds. Your typography, color schemes, spacing, and sizing will aid in corralling customers through the sales funnel, as well as alter their feelings towards things like your product's’ perceived, value, functionality, availability, and more. 

For example, if you are running a sale on a selection of goods, sectioning off these products into a carousel or adding prominent logos will ‘prioritize’ this content on the page. 

Conversely, negative space, i.e. an absence of anchoring elements, also serves to establish a visual hierarchy and has been found to increase reading comprehension by almost 20%. 

Visual Hierarchies Checklist:

  • Font Pairings - Although, technically, for most e-commerce brands this will mean ‘triplets’ comprising of Title, Subtitle and Body fonts. Take a look at one of my previous posts for more on choosing font pairings. 
  • Sizing - In the most obvious sense, the bigger the onpage element, the more noticeable it is. But sizing the content of your site design isn’t as ‘cut and dry’ as it seems. On a homepage, for example, a single focus, a product image, main title etc. can quickly build a brand narrative. However, for product category pages, this amount of focus will confuse viewers. In this case, they want the focus to be on a wide selection of goods to help them make the right choice.
  • Scanning - The ‘F Pattern’ is the familiar path our eye takes across a web page. The top of the ‘F’ shape represents your banner or headline; the eye then scans down to the left and across to the subtitles below, finally scanning down the page, Implementing this visual hierarchy system for product search results pages, FAQ’s, and pretty much all pages of your site design will improve your website usability. 
F pattern – ecommerce web design
 

However, you don’t have to stick rigidly to the F pattern rules, you could also make good use of the ‘Z’ pattern too. Z patterns represent the points of interest a page needs ‘before the fold’ including:

  • A catchy headline 
  • A main horizontal navigation bar in the top right corner
  • A main image or video in the center on the line below
  • A ‘call to action’ statement 
  • A button link to boost engagement 
Z pattern – ecommerce website design
 

Z pattern layouts work well with product pages that include an explanatory video. Z pattern layouts may also work well for email signups, fundraising campaigns, and shareable links. 

  • Organization - The UX of your site (more on that later) hinges on your ability to organize your products and site design into logical groupings. These considerations should be considered from your user’s point of view, rather than your needs. 

 

Principle Two: Consider Color Theory

“Color is nothing but a sensation and has no existence at all’ - Ogden Rood 

So much of our understanding of life is ingrained in our perceptions of color. Red denotes danger, green means ‘go’, blue for boys, and pink for girls —  the list is endless and the rules change constantly. 

As an example, in the early 1900’s in the U.S it was generally assumed that pink was a color for boys, and blue was the color for girls. Historians date the ‘switch’ to around the 1940’s, and we now recognize the gendered connotations today as being the opposite.

In considering coloring for your e-commerce brand, think in terms of color as more of a ‘sensation’ rather than a noticeable ‘choice’ in your design. Consider the feelings you want to create in your customers. 

The Color Theory Basics:

Red - While the connotations of red cover a wide range of feelings in the viewer (everything from ‘danger’ to ‘prosperity’), there is nothing shy about this color. In all instances, red is used to create impact. For site elements, where you need your audience to act now or pay attention, red commands that presence on screen. In most cases, designers should consider using it sparingly as an accent color, as it has a tendency to overpower and decrease readability. 

Orange - A favorite on this site, orange denotes vibrancy and energy. It’s a great color for accent use, creating a visual impact that can be as attention-grabbing as red, only slightly easier on the eye. Orange has associations with nature (i.e. the fruit of the same name) and health & vitality. 

Yellow - The shade of any given color can affect your perceptions and with yellow, the difference can sometimes mean ‘life’ or ‘death’. Bright, fluorescent yellow is used in hazardous situations thanks to its high visibility, whereas warmer, ‘sunnier’ shades have a more relaxing and calming feel. Yellow can also be accessible and impactful as a background shade.

Green - The color that most denotes nature is green and its many variants. However, it needn’t exclusively be tied to the natural world. Dark, forest green shades are also associated with stability and tradition and vivid emerald tones denote wealth and luxury (obviously). 

Blue - ‘Blue’ can represent feeling sad, as in the English meaning of the word. However, we know it well as the color of trust and integrity (darker, navy shades) as well as vibrancy and youthfulness (bright and azure shades) and calm (pale, Wedgewood blues). As this color works well as a text, accent and background color in web design, it is highly versatile for e-commerce. 

Purple- As the color of regality in ancient times, purple denoted wealth and luxury for much of history. Confectionery manufacturers like to use purple to create feelings of indulgence in their marketing campaigns and wrapping designs. Pale lavender shades can also be seen as quite romantic and calming. In general, purple denotes ‘the good things in life’ and can be utilized as an accent color successfully with everything from clothing, to lifestyle, to food brands. 

Black - Rather than an ‘absence of color,’ black can be used cleverly to create feelings of sophistication and excellence in web design schemes. 

 

Principle Three: Repetition, Repetition, Repetition

Brand consistency is an elusive quality that is sadly missing from many fledgling e-commerce businesses. It is more than just creating an impactful logo. 

Although, to find out more on DIYing your own logo, check out this post. 

Brand recognition is about creating a ‘narrative’ across your entire site. From a design perspective, the narrative building begins by thinking about your ideal customer and your company values in terms of what you want to provide to the public at large. 

Brainstorm some key phrases, until you’re happy with three to five core ideas and use these considerations throughout your design and implementation process.

For example, a natural cosmetics brand may wish to be seen as ‘responsible, health-conscious and affordable’. Their design scheme considerations for colors, layout, typography, and imagery can be planned with this unique ‘magic formula’ in mind. 

Human brains are designed to seek and recognize patterns to help them build connections and understanding of the world. By ensuring that, like a strand of DNA, all of the separate elements of your web design contain the ‘building blocks’ of your magic formula, you should be well on your way to creating a cohesive brand voice that can be applied to any marketing goal. 

 

Principle Four: Harmonious Balance Creates Positive Feelings

The most intangible principle of good design is aesthetic ‘beauty’. As we all know, beauty is in the eye of the beholder. However, in terms of e-commerce web design, it is far more likely that most of us will share certain expectations and preferences for design. 

Here are some quotes on aesthetics to consider in building a site design with style and appeal: 

  • Beauty is not necessarily a matter of form or style, but a result of order achieved” - Will Burtin 
  • “...variety without confusion, simplicity without nakedness, richness without tawdriness, distinctness without hardness and quantity without excess” - William Hogarth 
  • Beauty is the purgation of superfluities - Michelangelo 
  • ‘My work has no aesthetic values, other than the aesthetics of communication’ - Jeff Koons

Getting to grips with commonly understood UI (user interface) patterns can help you create sales pages that effectively push your customers through the sales funnel. 

Tips for creating effective e-commerce sales funnels that look as good as they function: 

  • Eliminate distracting elements further along the sales process to help your visitor complete their purchase. For example, in a checkout sequence, remove footer links to your site blog, as this may only serve to distract during the crucial sale completion phase. 
  • Enable users to alter their shopping basket without having to click off the page. 
  • Use expanding text to present heavy written copy only when it is required.

 

Principle Five: K.I.S.S Keep It Simple, Stupid! 

  • If you ‘wanna rock and roll all night and party every day’ with your e-commerce sales, then stick to the main principle of User Experience (UX) design,  keep it simple. 

You need to ensure that in everything you do in the design stage of making your online store is geared towards making life easier for your customers.

For example, your customers need to:  

  • Navigate your site and find what they need within seconds. 
  • They need to be inspired with related items in view and sensible category groupings they can search through to find the best products for their needs. 
  • They need to be able to reach the homepage easily if they need more information or an alternative product. 
  • They need an accessible source of product information to help inform their buying decisions. 

All of these needs can be fulfilled through good UX design, with the onus being placed on simplicity. For example: 

  • To find products simply and effectively, a site search bar can help your customers track down the things they need. 
  • E-commerce recommendation tools utilize big data and can generate personalized, automated product recommendations menus based on internet behavioral algorithms. These tools also come with reporting dashboards, giving you real-time insight on how your customers may navigate and group products in search categories. 
  • Considering your information architecture, i.e sitemap design, with keywords in mind will help search engines guide potential customers towards you organically. However, rather than keyword stuffing your titles with search-friendly terms, think in terms of how your customers would most naturally group key terms together. For this, you could try carrying out card sorting exercises with members of the public or potential customers. 
  • Set-up your navigation bars to be displayed prominently on all pages. In essence, your customers should be no more than three clicks from the home page at any and all stages of the sales process. 
  • Product information should be accessible and should be convincing enough to eliminate any customer hesitations. A blog is a simple and effective way to explore your customer’s deeper needs for more information on your products. You can also ensure that any sizing or shipping information is prominently displayed, so your customers can reassure themselves during the ordering process. 
  • If are you are not a web design pro, you may want to use a simple store builder like the one offered by Shopify — the templates it offers can give you a nice clean background for your products. Another popular one with visually-minded merchants is Squarespace, for many of the same reasons. 


Principle Six: Consider Flexibility In All That You Do

Incorporating tools and templates that allow you to expand your product and website offering is the key to creating a business that can scale-up easily. 

  • For example, you may wish to incorporate product videos in the future, in which case you will need to create product pages with enough ‘breathing room’ to accommodate them when the time is right. 
  • You will need to consider your review ratings and how you can incorporate and monitor these social signals in your website dashboard. Use these WordPress tools to help aggregate reviews. 
  • Going further than reviews, you should also consider your need for regular customer feedback surveys on your store design.
  • You will need to find an e-commerce host that will allow you to expand your inventory and site as much as you need. You don’t want a web environment that’s going to hold you back.
  • You will need to set-up and track data using Google Analytics, as well as monitor social networking insights to help refine your store’s design. 

Automation is the key to getting flexibility right. With big data analysis, you can track pre-defined data points and create actionable goals to truly meet your customer’s needs for years to come. 

Website design for e-commerce starts with deep consideration for your customer’s needs. By appreciating your customers’ cravings for simplicity, functionality, and cohesiveness, you can design an e-commerce site that sustainably builds brand loyalty and sales. 


 
Victoria Headshot

Meet my fabulous guest blogger:

Victoria Greene works as a brand consultant and freelance writer. Her blog, Victoriaecommerce is dedicated to giving entrepreneurs, designers and marketers all the tips they need to make their brand a success online. 

 

Comment