Odoo CMS - a big picture

Online shop Design

How do you design a successful online shop?

Freddy Czaja

For a first impression, there is no second chance - so it is said. And it is true! Consider for yourself how quickly you decide whether you like an online shop / website or not, whether you stay in the online shop or leave it. A few seconds, therefore, in which the design must convince, so that customers are won. But what makes good design? How do we use it for a online shop? What needs to be paid special attention? We would like to take a closer look at these questions and the individual sub-disciplines of web design in order to make an online shop more interesting for customers.

Target group

The target group plays a special role in the design process. The goal is that the target group is addressed emotionally and positively and thus in the end the sales and profits of the company increases. Design is therefore an important part of marketing, whose job it is to offer products and services in a way that buyers perceive this offer as desirable.
However, it is not up to designers to find out who the target audience is, other marketing specialists take over this.

Odoo CMS - a big picture

Picture: Zalando.de


Colors are processed emotionally (immediately) and therefore they have a large part when new users get a first impression - and later in the branding. Basically, there should be only one or two main colors, so that there is a clear line and the products are in the middlepoint. Zalando, for example, uses orange as the main color, otherwise the online shop is in black, white and gray. Best conditions to focus the products. The same goes for Adidas and Nike. Both sporting goods manufacturers rely in the online shop on the colors black and white. All three brands have decided to use white as the background color. Why? An online store with a white (or light) background looks more inviting and positive than an online shop with a black or dark background. For this reason, a light background is usually preferable.

Grid, Structure & Content

An online shop should have a clear grid, even if the different page types such as product pages, category pages, home or checkout have their own grid. It should be harmonious, not too tight and also support responsive web design. For example, two columns, three columns or a pleasant combination of these are possible. Important: leave room so that the existing space is not overcrowded.

Take, for example, the product pages. Here are headlines, a product image gallery, product details (price, sizes, delivery time, etc.), one or more product texts and a product recommendation gallery. Here it is important to sort the whole thing according to the importance of the elements and to design a harmonious product page. Not an easy task, but there are very good examples like Zalando.


The header - the top website element - in which the logo, navigation and search are integrated, is always visible. Whether in the desktop or mobile version, the header must be well designed and easy to understand. Especially important here is the navigation, which not only has to look good, but also be user-friendly. Because users have to understand the navigation right away, otherwise they are gone. But more about User experience and navigation in the section "usability".

Product images

A significant share of the long-term success of an online shop are product images. From the very first viewing of the product pictures and other pictures, customers feel whether an online shop is professional or not - this is simply about seriousness. So what is there to consider? First of all, the images should be taken in high quality and clearly show the product. The background also plays a major role here. Products can photographed with a bright background or gray background ore the background of the product pictures are delated. But there should be a line to it. Also, product images should have a minimum size of 500px to be looked at in detail - and thereby additionally get the chance to appear in the pictures search engines (too small product images are not indexed). Furthermore, it is advantageous for each product to show multiple product images in order to provide added value to customers and to strengthen search engine optimization.


Webfonts should be easy to read and support the design of the online shop (modern, playful, retro). The most important thing is of course the selection of the font family, such as Arial, Open Sans or Roboto. The font color is usually black or a dark gray. Negative fonts should be avoided they are bad to read.

Also, the spacing between the lines or letters is important to make the design consistent. If, for example, you increase the distance between the lines, more white space is created, which makes it easier to read and makes the content appear more generous.

Corporate Design

The corporate design - ie the uniform appearance of a company - should pull through the whole online shop. This includes all things that we show in this article as well: logo, font, color concept, design elements, grid or imagery. The stringent enforcement helps the company to be recognized at all times, to differentiate itself from the competition and to have a common thread that makes branding easier.


The logo is most important for the corporate design, because the logo represents the company. It should have a high recognition value and if possible be simply structured. It should be ensured in the online shop that the logo in the desktop and mobile version is available in high quality. Because lots of online shops and other websites display the logos unsharp.

Design elements

Design elements bring a website to life. They are buttons, small graphics or lines that make the difference and positively influence and make customers feel good. However, each item must fulfill a purpose and seamlessly fit in that size, color and number.


You can not design an online shop without paying attention to usability. Design and usability go hand in hand in the online shop! Take, for example, the main navigation. A main navigation that opens when hovering in the header, not only has to look good, but above all have a high degree of user-friendliness. This includes that the whole thing is well structured (headings) and all important navigation items are displayed. For this reason, the navigation must be well planned in order not to make gross errors in terms of usability and SEO.

Responsive web design

All areas mentioned here should be applied in the desktop version, as well as in the responsive version of tablet and smartphone. This is important because the proportion of mobile users is always will always be higher - even if users in the customer journey in the first step only use smartphones to inform themselves and then buy. These customers will convinced with a very good design in all devices of the online shop, and after this buy the products in the desktop version.

It is important that users have a smooth transition across all devices with a very good usability and user experience.


Designing a really good and successful online shop is a challenging task that requires a lot of experience. It is important, above all, that we work very closely with the various marketing specialists and that the target group is reflected in the design. It is also fundamental that design and usability are considered as a single entity, because it will be bad if an online shop is only beautiful, bud the usability is bad.

Lass uns deine Nummer da!

Oder ruf uns einfach direkt an   0391/5630690