How to design for eCommerce & basic principles of design for eCommerce

If you ask any agency, “what are your principles for design?” they’ll all have a different answer. When we design for eCommerce, whether it be branding, websites, organic content or paid advertising, we tend to align our practises by the following 12 principles:

The more something ‘pops’, the happier the client. Making sure adjacent elements are different enough will help designs stand-out more, keeping it simple and improving the customer journey. This also helps with accessible design which we always keep in mind when designing websites.

Whether it’s symmetrical or asymmetrical, finding the right balance in your design will help to draw users to the right place. Always balance heavier and lighter elements to ensure your design feels natural and purposeful.

It’s always vital to ensure the most important bits are being heard. Something as simple as typography size will help you emphasise the parts that need to be read (and even hide the bits that aren’t essential but need to be there).

Really simply put, this is the size of elements in relation to each other. The larger the element (in relation to others), the more important it becomes! Make sure your proportions are purposeful, and nothing important is getting swamped.

This is the principle of arranging your elements in relation to their importance. When users encounter a website, a paid ad, an app interface etc., they will react extremely quickly. Therefore, we need to make sure that they are prioritising the right action!

Repetition, repetition, repetition: a simple way to get an idea solidified in someone’s head. This is a tool that can be used effectively in design to unify a piece, reinforce an idea, or create visual consistency that feels natural.

There are 5 types of visual rhythm that can be achieved: random, regular, alternating, flowing and progressive. These incorporate the spaces between elements, and the elements themselves, to create a sense of rhythm. Utilising this will help users understand what they are seeing, and can create different emotions in a similar way to listening to music.

This can refer to a couple of things. Patterns can be a repeated design such as a wallpaper, but it can also refer to a pattern of design that users are used to – a navigation bar for instance.

This is the space inbetween your elements. It can be so easy to get worked up in all your fancy-designed elements but it’s equally important to pay attention to those pesky gaps! Let your design breathe, it will help to highlight the best bits.

This isn’t necessarily movement or animation of your designs but rather the way a user’s attention is moved across your design. For instance, using specific positioning for your designs will help get your users from point A to point Z, and help them find their end goal.

This may seem obvious, but variety will help create some visual interest. You’ve just grabbed a user’s attention, let’s not lose it! Use variety to reinforce other elements of your design.

It’s easy to throw a bunch of cool designs at the wall, but the key is to create harmony in your overall design and ensure that your elements are all working together as one.

These are the pillars to which all your design should be held up by. If you’re looking to create a website, a cool new brand, or some eye-catching social content, benchmark your work against these and you’ll see instant improvements!

Designing logos can be one of the most challenging tasks and encapsulating your brand, product, service, aesthetic, purpose etc. all in one bitesize piece, can feel overwhelming and almost impossible. If you’re struggling, one cheeky tip we have is to check out DesignRush who create bespoke designs, completely custom and completely unique.

Website’s are a whole other kettle of fish…

We’re going to give you some of our secret sauce now… we have 2 approaches when it comes to website design. Focussing on a sales-led design and focussing on brand-led design.

• Ideal for companies with a large range of collections and products and most likely has products in a low to medium price range.
• Users for these types of sites want to be able to view a lot of options at once and be able to understand the size and structure of the brand’s product range fast.
• Always-visible search bar for ease of use.
• Minimised white space for showing lots of options in the viewport at once.
• Condensed blocks to avoid scroll fatigue.
• Square product imagery to cater for varied product ratios and allow for utilisation across social channels. They also use 1×1 image ratios which is great for huge product ranges as resizing won’t be required.
• Visually impactful collection carousels to highlight the breadth of the brand’s collections and allowing users to understand the structure of the product range.
• Condensed product page to allow for key product information and actions to be above the fold so all important information is visible on first load.

• Ideal for companies with a product range that is smaller, more premium and requires more storytelling to justify higher priced products.
• Users for these types of sites want a lot of visuals and to be heavily informed with a range of content on the products to understand the value and quality, and ultimately justify the price.
• Understated functionality to create a premium feeling, less is more!
• Optimal white space to give design elements, imagery and content to breathe which further adds to the premium feel and allows users to absorb the content better – this is important when products have a higher price point.
• Content blocks with added padding increases the white space which creates additional breathing space and increased absorption of information. Additional content blocks for storytelling bring across the value and also justify higher price points.
• 9:16 product imagery aspect ratio utilises more screen real estate to really highlight the quality of products and the product details to further show the value of the products and further justify higher price points.
• Collection grid rather than a carousel gives a snapshot of the whole product range, and helps users navigate to collections of interest, giving them control.

So there it is, the building blocks and the secret sauce. We hope this can help with your design needs, and if you have any questions or want further inspo, feel free to contact the Studio team at Cake – we’re always happy to help!