Design principles - basic rules for e-commerce visuals

Introduction

When it comes to creating visuals for the e-commerce world, there is no formula or even a set of formulas that guarantee engagement. However, there are design principles that have stood the test of time, when it comes to visually communicating information. Whether it be a book layout, a poster, an advertisement or an e-commerce visual.

We’ll break down some of these basic principles, some of which may seem obvious enough, and illustrate them in their most basic form. We’ll also give some examples of what not to do, when it comes to making copy easy to read.

Composition

When arranging elements on an e-commerce visual, organization is paramount. Users should not have to struggle scanning the visual and easily finding the information they are looking for. Below are a few basic techniques for establishing order and hierarchy on a visual.

Order hierarchy

This one is most basic: follow the scanning direction that is natural to your audience. In this case, since reading from left to right, top to bottom is most natural for our audience, we’ll organize elements from left to right, top to bottom. 

Scale & proportion

This one is perhaps the most powerful principle and have the most impact when used correctly. While different sized elements create a proportional relationship, it also adds dynamics and visual excitement to the overall composition.

Alignment & spacing

Not only does alignment make scanning for information easier, it is also an effective way to make disparate elements feel as part of one whole. In addition, having repetitive spacing creates a rhythmic relationship between elements. Remember, align and space items according to the visible parts of the element, not to the bounding box (which may have extra white space).

Negative space

Shapes in space become recognizable partly because of their own shape, but partly because of the space  that surrounds it. Giving space around the object, or negative space, creates visual breathing room so the object sits more comfortably to the eye and therefore can be recognized easier.

Symmetry

This is another effective way to unite disparate elements together, because symmetry creates a feeling of order. As mentioned above, when elements are in order, scanning and finding information becomes very easy.

Color

Color, and its effects on the human, is a complex topic that even scientists have yet to get to the bottom of. That said, there are some established theories on color combinations and the response they elicit from the viewer. 

Complimentary colors

Why Christmas colors are traditionally green and red you ask? Well, to create tension and excitement with color contrast, whether it’s difference in brightness or color hue. Complimentary colors are any two colors that are on the opposite sides of the color wheel.

Analogous colors

Using similar colors can create unity and a comfortable feel for the viewer. Analogous colors are ones that are next to each other on the color wheel.

Monochrome

Unite completely separate elements by using one color at different brightness settings. Monochrome colors are ones that share the same hue, but are different in brightness. 

Typography

Selecting fonts can be fun, as it satisfies a personal curiosity, however, such selection should not be taken lightly. As mentioned above, if our aim is to make our customer's life as easy as possible, then we must make the information as easy to read as possible. 

Do’s

Use simple and easy-to-read fonts. This makes it much easier for your customers to scan through product information. 

There are times that a visual needs some emphasis or just need to improve legibility. Feel free to add effects, but keep them as simple as possible and use as few as possible.

Don’ts

Use decorative or ultra bold fonts that are hard to read quickly. This makes it very difficult for the customer to scan through the visual and will quickly lose interest in your product.

It’s very tempting to add more effects to jazz up a visual, but remember, the more fun effects we add, the harder the user has to work to decipher the copy. 

Conclusion

While the principles we mentioned above have been simplified, they have served as the core of design for centuries. If you’re interested in learning how these principles are applied to everyday e-commerce visuals, follow us on LinkedIn, where we break down some of today’s best ads into the basics we mentioned in this article.