Visable Styleguide
Visable Styleguide

Introduction

Dear internal and external communication professionals, 

During the last years, our company “Wer liefert was” underwent a relevant change and internationalisation process. Not least due to the acquisition and the close collaboration with EUROPAGES, we are now a prosperous online organisation with European dimensions: 

Today, B2B in Europe starts with us, because we are Europe’s most effective one stop provider to reach B2B purchasers with our own B2B marketplaces and partner channels. 

In the course of the process, we developed a new corporate brand strategy. Our company and its subsidiaries now do business under one name: Visable. The Group’s renowned brands, i. e. “Wer liefert was” and EUROPAGES are integrated into one, stable brand architecture: a take-off point for further growth. 

As a matter of course, we also developed a new brand identity and further brand strategic components for our new corporate brand Visable, as laid down in section 02 of this document.

Anyways, this document is basically a corporate design guideline. That is why, in section 03 and 04, it answers a lot of questions on Visable’s design characteristics, which helps you to adhere to them.

Why is design important for a brand? 

For every brand, and especially for a new brand like Visable, it is important to act consistent in order to support the brand building process: 

If all the brand building elements, first and foremost the logo, but also the typography, colours, design principle and corporate ima-gery etc. are put together in a form that is always similar and consistent, we help our target groups to quickly and securely identify: This is a communication activity, launched by Visable! If, additionally and over time, positive associations come to their minds once they have identified the brand, the more likely they prefer Visable to our competitors. 

Kind greetings, the Visable team

Brand Strategy

Our corporate brand
Visable is a corporate brand.

Visable addresses B2B suppliers. It is their No. 1 in Europe  when it comes to reaching new B2B purchasers. Visable is a one stop provider because it owns the B2B marketplaces “Wer liefert was” and “EUROPAGES” and also provides the suppliers with additional online marketing services.

  • Visable is also the company’s addresser for employees. This helps the organisation to feel like one modern European company and consolidate despite our different  sites and varied nationalities.

    The B2B marketplaces are product brands.
  • The renowned B2B marketplaces “Wer liefert was” and  “EUROPAGES” address B2B purchasers. Here, they can find  the right B2B suppliers for their requirements.

This is an exemplary list to choose the right addresser for  communication activities:
 


The name “Visable” is composed of two English words: “visible” and “enable”. Why Visable? Because we enable Europe´s small and medium-sized companies to become visible online.
 

Vision, mission, position
Our vision, mission and position define our market position as well as our organisation’s mid- and long-term goals.
Target groups and core needs
The corporate brand’s identity relates to the emotional requirements of suppliers and employees. 
Corporate Identity
The brand identity matches the organisation’s characteristics with the stakeholders’ emotional requirements. Also, vision, mission, position and the corporate identity are connected via our brand core: being a „trusted digital enabler“.  
Brand architecture
It is the country companies, appearing on the market as our corporate brand. 
Information architecture
While our product brands address B2B purchasers, the corporate brand addresses B2B suppliers and (potential) employees. The communication is determined by different services, focus topics and types of communication.  

Brand Design

Logo

1. Logo idea and concept

Both of the components, logo and claim, are expressing Visable’s core competence:

Being a trusted, confident enabler for successful B2B digitalisation, merging our owned and third party product brands’ performances under one roof.
In the context of the logo, this is reflected by the V, pointing towards a promising future, as well as by a solid, stable typography – while the green and blue colours link to our owned product brands wlw and EUROPAGES.
The claim points at the online business environment – and the opportunity of being easily imparted, entering into a cooperation with us.


2. base and construction

Both of the components, logo and claim, are expressing Visable’s core competence:

The logo and the claim are based on the font “Titillium”. The font has been modified in some places.

3. Logo clear space & size

A fixedly defined clear space area positions the logo and emphasises its value. No other elements, such as fonts or foreign logos, may be positioned in the clear space area.

The clear space area is defined as “x”.
1x is the height from the baseline to the center line.

x” should never be smaller than 7,5 mm to ensure good display quality of the Visable logo with claim.
The minimum “x” size of the logo without a claim should not be smaller than 3,5 mm.

 

4. Logo colour versions

The use of the full-colour logo has priority in all media.

It must always be placed clearly on white, lightgrey, or bright pictures. This means: Do not place it on coloured backgrounds or dark pictures.

Exceptions:
•  On coloured backgrounds or dark, lifely pictures, all elements of the logo can be used in white.
•  For line conversions, all elements of the logo can also be displayed in black. The black and white-version may only be used on a white background.
 

5. Logo and claim “Online business made easy”

Adding the descriptive claim to the logo gives our stakeholders an extra opportunity to get familiar with our benefit bundle. This is why we have decided that the logo shall be accompanied by the claim as often as possible, especially in sales contexts. Please pay extra attention to its appearance where only limited information regarding the brand is provided, e. g. on a sponsorship wall. There are only a few situations where we do not use the claim alongside with the logo:

  • To ensure an adequate readability, the logo shall measure at least x = 7,5 mm (cf. p. 15) to be accompanied by the claim. Please adhere to the layout principle – don't enlarge it to make that possible!
  • We do not carry the information around the logo to excess. This is why a version of the logo including claim and .com is not available.
  • There might be situations where a very sensitive context is concerned. You might feel that explaining the brand or even selling seems inadequate. Here, you might like to leave out the claim. Please get in touch with the brand manager, mentioned in this guideline under “contact”, to take the decision.
Typography

1. Corporate font

The consistent use of our house font Source Sans Pro strengthens the reference to our B2B marketplaces.

Source Sans Pro is a serif typeface with a humanistic look. The slightly narrow letters of Source Sans Pro are ideal for user interfaces which offer little space. Source Sans Pro works in print media just as well as it does on the screen.  Only the bold, semibold, regular and italic font styles are used.

Source Sans Pro is available as a webfont and can be found on Google Fonts.

Note: The headlines can be set in "Visable Bright Green" and also in "Visable Dark Blue".
 

2. Replacement font

In order to ensure maximum compatibility with browsers and operating systems, Arial is stored as a fallback font for the website. Arial is a sans serif font and can be used without any complex adaptations due to its similar running width. Arial is always used when no web font and can be loaded, e. g. for e-mail-newsletters or e-mail-communication. Only the black, bold, regular and italic font styles are used.

Note: The headlines can be set in "Visable Bright Green" and also in "Visable Dark Blue".
 

3. Title element – corporate font

As a further brand building element, headlines can be markered. This increases the visibility of the headline and directs the eye to the core message.  For reasons of readability, headlines on pictures shall always be markered.

The font is always white, written in all caps and set in Source Sans Pro Bold. The background of the headlines is always formatted in the colour Visable Bright Green.
Markered headlines shall be short and crisp.

Note: To clearly indicate the addresser of a communication activity, there should always be enough space between the headline and the Visable logo.

Colour

Colour climate

In order to keep the layouts fresh and clean, white is the dominating colour in all layouts. The logo must always be placed prominently on white. 

Colours should be used as highlights.

On special occasions, like chapter charts in PowerPoint, larger areas of colour might be applied.

To ensure the unique Visable design, please generally apply the following colour climate:

At least 70% primary colours and not more than 30% secondary colours.

Primary colours

A reduced colour concept with the guiding colours white, light grey and green characterises the appearance and ensures a stable visual appearance.

The green is the connecting colour for the two marketplaces “Wer liefert was” and “EUROPAGES”. It is mainly used in the headlines. The blue is only used as content font.
 

Secondary and accent colours

Within the colour climate for offline advertising media

  • blue and turquoise serve as secondary colours. This means they are used to a minor degree (< 30%), compared to the primary colours (> 70%).
  • Orange is used even less. It’s an additional accent colour, e. g. for disrupters.
     

UX colours

Within the colour climate for online advertising media, blue and turquoise were optimised for screen purposes.

  • Blue serves as a secondary colour. This means it is used to a minor degree (< 30%), compared to the primary colours (> 70%).
  • Turquoise is used even less. It's an additional accent colour, e. g. for disrupters.
     
Design principle

Visable is a trusted enabler for successful B2B digitalisation. In the context of the logo, this is reflected by the “V”, pointing towards a promising future, as well as by solid, stable typography. The aspect of a promising future is picked up on in the design principle, too!

This is how it works: We draw a solid, uplift ing line, corresponding to the angle of the V’s right leg, over a communication material’s whole surface. Boldly, we fully colour one side of the so-emerging surface. This principle is quite recognisable and adds an additional dimension to the visual communication.

Combining the logo with this so-called

V-Angle

we signify the “V-impact”, the notion of “widening” opportunities through increased online reach, provided by Visable.
 


V-angle definition

The V-angle is derived from the inclination of the Visable „v“.
The angle is 61.8 degrees.

This is how the angle can be used:

•  filled with a primary colour
•  filled with a photo
•  used with transparency

Landscape and portrait format DinA4

Clear positions and sizes have been defined for the logo and the
endorsements. On an A4 page in landscape and portrait format, the height of the logo x is 9 mm. The height of the endorsement is 9 mm.

The border around the page is 12,75 mm, which defines the printing
area.

The Visable logo is positioned with the letter „e“ in the top right
corner of the printing area.

The endorsements are positioned on the right side and centered on
the lower border of the printing area.

 

Landscape format DinA4/DinLong

A minimum and maximum size of the V-angle have been defined for landscape format.

It is measured from the top or bottom of the page.

The V-angle must not start below 25% of the top of the page and must not exceed 68% of the page width, again measured from the top.

On the bottom of the page, the V-angle must not exceed 68%.

Between the minimum and the maximum size, the V-angle can be applied flexibly, in order to support the content.  
With the V-angle on the bottom of the page, are two options:  

A The logo is on top and the endorsements are on the bottom, placed on white in the V-angle. Here, the V-angle has a width of 68% of the page.  

B The logo is on the bottom, without endorsements, placed on white in the V-angle. Here, the V-angle has a width of 68% of the page.

Note: The V-angle must not be cut through the Logo.

 

Portrait format DinA4/DinLong

A minimum and maximum size of the V-angle have also been defined for portrait format.

It is measured from the top or bottom of the page. 

The V-angle must not start below 25% of the top of the page and must not exceed 58% of the page width, again measured from the top. 

On the bottom of the page, the V-angle must not exceed 58%. 

Between the minimum and the maximum size, the V-angle can be applied flexibly, in order to support the content. With the V-angle on the bottom of the page, there are two options: 

A The logo is on top and the endorsements are on the bottom, placed on white in the V-angle. Here, the V-angle has a width of 58% of the page. 

B The logo is on the bottom, without endorsements, placed on white in the V-angle. Here, the V-angle has a width of 58% or 25% of the page. 

Note: The V-angle must not be cut through the Logo.

 

Examples for the landscape and portrait format DinA4

For best results and maxium impact, illustrations and images can be used with the V-angle.

They can be placed on top of the V-angle, which creates a fresh and dynamic page layout.

Images can also be inserted into the shape of the V-angle. Images must be carefully selected to work well with the shape.

For details selection criteria, please take a look at the chapter “corporate imagery”.

Corporate imagery
Visable's corporate imagery confirms a realistic relationship between our offer and our target groups. It communicates quite directly: 
We show authentic business reality and natural characters in small and medium-sized enterprises as well as our employees.

Motifs – customers, small and medium-sized B2B suppliers

The motifs shall be evaluated on the basis of our brand competence:

1. Trusted
2. Digital
3. Enabler

whereby the focus lies on the first and the third component.

For our customers, small and medium-sized B2B suppliers, this means:

TRUSTED – We show (dialogue) situations between business people (signifies: exchange between Visable employeesand [potential] B2B suppliers).

DIGITAL – We show digitized production and digital marketing contexts. We show our product on the screen.

ENABLER – We show pictures of success. The wealthy effect Visable has on suppliers where their performance and (Visable's) contacts meet, e. g.: A well-equipped research and development department, another bespoken product is completed in the production, the company‘s super-digitised storage works fine.
 

Motifs – employees

For Visable employees, this means:
 

TRUSTED – We show employees, especially in teamwork situations, in our company.

DIGITAL – We show aspects from online/digital contexts.

ENABLER – We show the effect one employee/team has on the successful company Visable.
 

Style and usage
The style is truthful, documentary and modern – it very much feels like an authentic, contemporary reportage.

Visable’s primary or secondary colours shall not be overrepresented. The colours are realistic, i. e. reduced, but adequately contrasted.
We do not use light effects, filters or exaggerated in-motion unsharpness. Anyways, images that do not fully comply with the style can be moderately optimised. The proportion between images and the rest of a medium’s surface as well as the images’ positioning are clarified in the chapter design principle. If only a section of an image is shown, it shall transport the context’s core message.

Do's

Authentic, contemporary reportage style 

Realistic colours – reduced, but adequately contrasted

Don'ts
 

Graphs, infographics & tables

Graphs & infographics

Diagrams help to present developments and statistics in a transparent, striking and comprehensible way. When implementing a chart, the chart style should be chosen in a way that reflects its content in the most simple and unambiguous way.

Primary and secondary colours can be used.

There are three display formats available for this purpose: pie charts, line charts and bar charts.
Attention must be paid to good contrast so that legibility and accessibility are guaranteed.
 

Colour scheme


Colour scheme pie charts


Colour scheme bar charts


Pie chart
 


Line chart
 


Bar charts horizontal

Tables
 

Endorsements

The endorsements describe how our corporate brand, our renowned product brands and third party product brands/partnerships quote or refer to each other in the form of a depiction of their logos, contents or links.

Endorsing does not mean “showing the product portfolio”.

In fact, it is like “word-of-mouth”. A brand indicates that it has a strong connection to another brand. Thereby, it leans onto the others’ reputation. If this information is relevant for the target groups, the connection supports the brand building process.

We do not refer to a product like “retargeting”, as it is not a brand.

We do also not refer to a brand like “Bing”, as for our target groups, it is not as relevant as e. g. the Google-partnership.

We do also not refer to a brand like "Yext", as it is not as familiar to our target groups and a white label-solution.

 

To date, the following brands are involved
in the endorsement process:
 

The brands involved in our endorsement process can relate to each other in the following scenarios:

A) The product brands appear in the corporate brand context. The renowned product brands support the new corporate brand! The awareness and trustworthiness of our product brands are used to introduce Visable and give it a headstart.

B) The third party product brands appear in the corporate brand context. They underline the expertise of Visable in online marketing and help us to position Visable not only as a corporate brand for B2B marketplaces, but as a one-stop provider.

C) The corporate brand appears in the product context. Visable may only appear where B2B purchasers can be encouraged to become Visable customers (sales promotion) or in a context where B2B purchasers might have an interest in the organisation behind the platform.

D) The product brands refer to each other. Due to their local diff erentiation, wlw and EUROPAGES do not support each other a lot. Small indications in a context where B2B purchasers might be encouraged to use the other platform might be relevant, though.

E) The third party brands do not appear around the product brands. wlw and EUROPAGES do not benefi t from the third party brands at all – a reference to the fact that the suppliers, listed on the platform are possibly not factually relevant, but pushed though e. g. SEA might even be negative.

Focus of operationalisation

In the context of this guideline, we will give examples on scenarios A to C, whereby A and B always appear together (as wlw, EUROPAGES and Google are all renowned owned or associated product brands, strengthening Visable’s performance and brand building together). Scenario D is not part of Visable’s launch, and will thus not be concretised. E will not be depicted at all, as it has negative brand building effects.

A/B – The owned product brands and the third party product
brands always appear together in the corporate brand context.

  • No competition between the corporate brand and the product brands – the corporate brand must be clearly identifiable as the addresser of a communication activity
  • There is a fixed clear space area between the endorsement logos. It is depicted below.
     



The standard alignment of the endorsement logos is horizontal:



The alternative alignment of the endorsement logos is vertical:


Logos in horizontal combination

The logos of the endorsement are always set in a clearly defined relation, in order to give every logo the desired space.

Note: On Visable materials, used specifically by our EUROPAGES colleages, the endorsement logo order may be alternated.


Relations and distances between the endorsements:


Logos in vertical combination

The logos of the endorsement are always set in a clearly defined relation, in order to give every logo the desired space.

Note: On Visable materials, used specifically by our EUROPAGES colleages, the endorsement logo order may be alternated.


Relations and distances between the endorsements:

Brand Applications

Print
Business cards

A new umbrella for "Wer liefert was" and Europages

You have been redirected to Visable.

The new home of our B2B marketplaces and online marketing services is live online. Discover even more ways to extend your reach on the internet at visable.com.

No content