When a brand secures a foothold in a market, it needs its own design system: how we developed a visual communication guideline for the client

A common problem that companies face with is that different designers interpret the brand style in their own way. The reason for that is a lack of understandable techniques, principles and rules for making layouts. This was the case with Sleep.8 and our team prepared a detailed guideline for them with new style-forming elements for various price segments.

Many brands start without a detailed design system

Sleep.8, manufacturer of mattresses and sleep products, engaged us to create advertising banners on design support. The client gave us their brand book, as usual in such cases. The brand book prescribed two versions of the logo, fonts and the brand color scheme. It did not contain, however, any rules and principles for building a visual design or any elaborate design system for digital media.

Other contractors were making creatives for Sleep.8 in parallel with us. In the absence of a clear design system, a problem inevitably arose: we interpreted the brand book differently and our framings were different.

It was especially difficult to work when creatives with new formats appeared. For example, the content of the layouts changed: several products together instead of a single product had to be demonstrated. More text appeared on some of the layouts.

“We started experimenting more. Advertising and communication formats became more diverse, several designers were involved. The task came up to harmonize the visual designs in order to avoid the need to explain everything to each designer over and over again. Previously, the folks from maryco demonstrated examples of similar work with other companies. It was decided to entrust the task to them.”

Nikita Evsey, Head of Marketing in Spain and Portugal

Transformation of the brief brand book of Sleep.8 into the detailed guideline

What we had to do:
— Refresh the existing elements of the client’s corporate identity.
— Complement them with new elements.
— Prepare sample layouts for different creatives.
— Prepare the guideline with rules for use of all the visual identity elements.
— Assemble all the components, layouts and the guideline in Figma. This tool is convenient for the Sleep.8 team. All the source elements for the work are loaded into it. There is no need to search for them in various folders, and a member of the staff can easily assemble media.

The elaborate guideline ensures a predictable result. This is particularly important for the companies that have extensive communications with their target audience in social media and work with various design contractors. By following the general rules and using the well-developed components and elements of the style different contractors will maintain the visual integrity of the brand.

Several versions of the logo

It seems that logo is a constant and it’s enough just to come up with one image. But this is not the case. Firstly, it is necessary to take into account the protected area (clear space) around the logo so that the logo is easily readable and does not “stick together” with other elements.

Secondly, it is important to adapt the logo to different sizes while maintaining the proportions. For example, the full version is used in the menu bar on the website and the iconic version is used in the favicon, the full version is used in the letterhead and the iconic version is used on the pen.

The client already had the full version of the logo and the abbreviated iconic version. The latter was used for avatars (account pictures) in social media and as an element on layouts. We formulated requirements to dimensions of the logo with reference to its media and set the size of the protected area. We produced additional solution for the full horizontal version: background image. It is needed for the logo to stand out on photos or against a variegated background.

This is how the elaborated logo section of the guideline looks like.

Font combinations

Fonts are the elements of corporate identity and the tools for visual arrangement. Font allows building a visual hierarchy by separating the title from other textual information. And there is also a jobbing font to highlight a core statement or a keyword.

Therefore, it is important to pick the font combinations and prescribe how they should relate to each other. For Sleep.8 we left one main font for text blocks: Airport. The client already used it before. And we also picked two additional fonts: job font Dela Gothic One and typeface font Commissioner. Fine thin type of the latter stylistically fits the particular price segment, which we will discuss later.

Different color schemes for the price segments and special occasions

It is important to adapt corporate colors for use in an online environment. The same shade may be reproduced differently on print and digital media. Our client’s brand book had muted colors. We refreshed them by choosing brighter shades for advertising banners.

In addition, we introduced color coding. After discussing the new solution with the client, we picked three color schemes for the respective price segments.

Low price segment

The target audience of this category is mainly young people. That is why we selected bright colors: orange, blue, purple, and green. They go well with each other, however, it is not a must to use them all together. To be flexible within the selected color scheme we developed three principles for combinations of the colors.

Quadruple. Neutral dark or light background prevails. One of the accent colors is used in a larger proportion.

Pair. Neutral dark or light background prevails. Two accent colors are used in close proportion.

Background. One of the accent colors is used as a background, the other shades are monochrome.

Medium price segment

Here we continued with the same color scheme: gray and blue. Color accents in layouts do not serve as a background, but emphasize the typography. For example, they appear in headings.

Luxury segment

We chose gray and graphite gamut for creatives within this category. It is neutral and easy to perceive. By the way, an interesting detail: the dark green appeared inadequate. The client told us that it is not read as an attribute of the premium segment in Spain.

The three color schemes above are suited for daily tasks. However, holidays (Christmas), sales (Black Friday and seasonal sales (rebajas)) and other special occasions require specific creatives. For each of the price segments we came up with additional colors for special occasions: Christmas, discounts / seasonal discount sales (rebajas) and Black Friday.

The standardized graphic techniques may be used flexibly

Formerly Sleep.8 used line patterns in their layouts. We suggested more complex and modern-looking geometric patterns. They are based on a combination of a triangle and a rectangle with rounded corners. All it takes is to connect the two figures together in any composition and then round off the corners. The resulting combinations of the shapes are used as a background or highlight other elements of the creative: e.g., a product photo.

Selection of photos, photo filter and mask in Instagram

Sleep.8 already had its own library of captured and processed photos. We had to look through them, filter out the poor ones and group the remaining by categories.

They were:
— People interacting with the company’s products.
— Products.
— Thematic photos.
— Environment, that is, the interiors of a store or a house with Sleep.8 products.

In addition, we picked examples of the poor photos and explained the errors.

Finally, we created a filter preset in Photoshop to align the quality and tone of the photos to standardize them visually. The filter dims the light areas and enhances contrasts and dark areas.

We also used the techniques from the preset for the mask in Instagram. With the mask, Sleep.8 staff will be able make photos of the goods and apply the necessary color adjustments automatically. E.g., to release video stories directly from the shops.

Stylistics and composition for video

We came up with techniques for dynamic creatives aimed at different price categories. In the lower price segment, animation is more dynamic and saturated in techniques.

In the middle price segment, transitions are smoother, frames are used, there is less color in them.

In the luxury category, the techniques are the most conservative and smooth.

Rules for making the layouts

With the set of the stylistic elements and the elaborate designing principles it is possible to create the layouts quickly. This is especially important if a company needs to urgently announce important news about its product or launch several advertising campaigns in parallel.

We called the client’s marketing specialists to find out what layouts they use for advertising and what categories are there. We elaborated own designing principles for the different types of the advertising creatives.

Text on top of the photo. We use gradient to make the text stand out against the photo background. We use the jobbing font to make an accent in the header.

Text only. There is a lot of air in the layout. Text blocks of various lengths are integrated with branded combinations of linear shapes with smooth lines.

Photo and logo on the background image.

Several products. Product images “cling” to the corners and lines of the corporate graphics and are arranged asymmetrically on the layout.

The layout consists of the two parts: photo and text placed separately. We developed several grid options for such media.

Result: well-arranged and flexible design system

Visual integrity of the brand. In fact, preparation of the guideline turned into updating the corporate visual identity. We streamlined the use of the fonts, colors and patterns, selected photos, created a photo filter, prescribed animation techniques and rules for making static layouts.

A variety of solutions within the framework of the general rules. The design system describes the logic of the developed style and leaves a room for an experiment. The suggested techniques may be used in combination with each other in different ways. E.g., different principles for designing the layouts provide for using the colors in different proportions, integrating photos with text or a text with combinations of the shapes. In turn, the latter, flexibly change their shapes and do not look the same each time.

Predictable result. By following the general rules, several designers may make banner ads in parallel, and the result will be predictable in each case.

Saving resources. The rules and the templates streamline preparation of specifications and help the designers creating layouts without any need in long iterations. So the company saves time and money.

“The design system makes it possible to easily engage new designers. Also, together with maryco, we develop a template library in Figma and Adobe After Effects. This makes our lives much easier. Half of all the creatives may be produced by the in-house marketing staff without involving designers. In case we need something new or more complex, we go back to maryco and replenish the template library. As a result, we get high-quality visual designs faster and cheaper than before.”

Nikita Evsey, Head of Marketing in Spain and Portugal

Project team:

Nika Octyabr — art director;
Andrey Telminov — creative designer;
Rosalia Karimova — motion designer.