Design principle

Layout system – gauge for a modular structure

A variable module structure is used for the KWC layout system. It is very simple and versatile in its application. In addition, this structure can be easily transferred to any analogue or digital medium. This increases the variance of the layouts and allows us to place design elements accurately, regardless of the format size.

For the modular layout system we need what are known as building blocks – also called “units” (see Figure A). They are the relevant unit of measurement in the layout.

In order to determine the size of the “unit”, a square, bleed-edge surface is drawn on the short format side of the medium (see Figure B). This surface is then divided by 20. The value determined from this constitutes the size of the “unit“ (see Figure C). This unit can be used to determine margins, distances and image sizes within the layout system.

A) Unit as a unit of measurement. B) The square surface is used to calculate each unit. C) The unit represents 5% of the square surface. It is the unit of measurement, or gauge, for the modular layout system. The unit size in each case varies in terms of the format used.

Protected and design zones

The design areas in the layout can be divided into different zones on the basis of the units.

The margin is the protected zone in which no text or important content may be placed. The margin distance is determined with a minimum of one unit. But there is an exception in the design for the protected zone: images and also the brand field may be used with bleeding edges. The design zone is located in the inner area. Text and content can be flexibly arranged and structured there – by means of units. The number of units can be chosen as required.

A) Full use of the design zone (digital applications). B) Design zone with more distance down to the margin. Half units can also be used for measurement. C) Design zone with indented border and more space above and below.

Adjustment to the design zone

As already explained on page 35, the design zone can also be modified depending on the requirements of the respective medium. This is particularly true for media that require more margin space. For certain communication media, it naturally makes sense to consider them in context in order to maintain a consistent appearance. For example, catalogues, advertisements or brochures can certainly be grouped together as different groups, and an appropriate representation of the design zone can be determined using the units.

The design zone can and may be scaled. This is a decision taken based on the purpose and use of the relevant medium. It is also possible to define the margin more individually using half units. For smaller formats from DIN long, a smaller design zone is recommended for better content presentation.

Brand field – the modular KWC design element

Brand field
The most important and brand-defining design element of the KWC layout system is the square brand field. It represents the key content of the KWC brand. The brand field is always a medium for information and should not be used for decorative purposes. In addition, the brand field can also be filled with images, graphics or text (see Figure B).

The square brand field can be displayed in the brand colours KWC Deep Blue, KWC Red, KWC Skin or White (see Figure A). It is also possible to set the brand field in the defined accent colours of the corporate divisions (KWC Home, KWC Medical and KWC Professional). The function colours for information graphics may not be used for the brand field. For the exact colours, please refer to the Basic Elements Colours.

A) Brand field in Deep Blue. B) Brand field with image.
The brand field can be set in the brand colours and the defined accent colours of the corporate divisions (KWC Home, KWC Medical and KWC Professional).

Scaling in the modular system

We have significantly more options for flexible design in the modular system. This applies not only to the design zone but also to all other building blocks such as the brand field. Here, of course, the related media group (catalogues, advertisements, etc.) and the respective requirements are also crucial in order to maintain a consistent appearance.

The size of the brand field may vary depending on the media used. This is true of analogue and digital uses. In media with a focus on image, the brand field is emphasised more prominently, if necessary, than in office applications, for example. When being positioned, the brand field may also have bleeding edges (see Figures A and B) or be placed freely in the design zone (see Figure C).

A) The brand field may also be used with a bleeding edge or, as in Figure B), also with a partially bleeding edge. Free placement in the medium is possible as well (see Figure C).

Minimum and maximum image size

Generally, the purpose to be served by the brand field has to be decided before each use. Does it contain images? Text or graphics? What is its extent? It is part of a related media group? Only then is it possible to design freely. Still, the brand field should always be a square surface. This is why minimum and maximum image sizes apply here as well.

Maximum representation of a brand field in a portrait format medium.
Minimal representation of a brand field in a portrait medium – same size as the relevant unit. But only pictograms are used in this case. Text does not make any sense here.

Content with a special focus

General principle
Text, logos and graphics can also be placed and highlighted in the brand field. The units can be used to position and structure the design elements.

The minimum unit to the border of the brand field is 1 unit. This can be increased as needed and used flexibly. In principle, the font size is flexible. However, the defined 9 pt font size and the defined line spacing of 132% must be maintained for body text. The size of headlines can be set as desired.

Images with a special focus
Another way to use the brand field is to combine it with free-form product objects. This can be represented as a “stage” or also as a “surface”. The brand field, when used as a “stage”, should highlight a product three-dimensionally with a particularly high focus. It should give the impression of depth.

The product is slightly offset in front of the surface and optimally positioned. Colours must be chosen as appropriate. In the maximum size, the stage should be one unit smaller than the format. In addition, the use of the stage in the layout should not be used excessively, but really only as a highlight. Products are displayed freely without offset in the “surface” in the brand field. For example, this helps with the structural overview of product ranges.

The margin space within the brand field is also defined as 1 unit.
A) Using the brand field as a stage – only use for highlighting purposes. Its size can be modified as needed. B) The brand field as a surface is a structural device to differentiate products clearly from each other.

Digital media – banner and PowerPoint

With digital media such as banners, the use of the brand field needs to be looked at a little more closely, because the amount of content to be communicated via the brand field and the size of the banner area are crucial. If there is too much content and not enough space, it is better to omit the brand field.

In principle, the brand field can be positioned as desired and can also be optionally positioned with the bleeding edges. But the brand field can also be positioned with margin space of at least 2 units. This brings the content optimally into focus and clearly distinguishes it from the background (e.g. images).

For 16:9 presentations, the protected space is also increased so that all content can be positioned properly. In this way, handouts can also be produced for the relevant presentation. The brand field can be positioned freely in this case.

A) E-mail signature: 600 × 200 px, B) Full banner: 468 × 60 px, C) Vertical banner: 120 × 240 px
Example of a brand field in a PowerPoint presentation.

Modular design and positioning of the brand field

The positioning, number and size of the brand field can be selected freely within the medium. Using the units, the brand field can be placed at the margin as well as in the centre. This is true of analogue and digital designs.

In the modular system, the brand field can be positioned freely (centralised or with bleeding edge).
Spacing can be defined freely using the units.
Any number of brand fields can be used. They can be docked or positioned at a distance – depending on your requirements. Up to 12 brand fields may be created for product overviews with the Skin colour background.

Practical examples of the modular system

The schematic examples shown here illustrate the considerable flexibility of the modular system and provide examples of possible applications of the modular system. The maximum number of brand fields for media with a focus on images is 5. For product overviews, that number is 12.

Practical examples with one or two brand fields.
Practical examples with one or two brand fields.
Practical examples with three or up to five brand fields.

The brand field combined with additional surfaces

The brand field should always be used reasonably and not excessively in the layout. To achieve this, images or content can also be used in combination with the brand field. Especially if the image itself cannot be placed in a brand field.

The unit of measurement here is also the relevant unit of the medium. You can use the columns of the document as a guide. It is this type of flexibility that is made possible by the modular system.