Information

WMF verwendet Cookies, um die Webseite bestmöglich an die Bedürfnisse unserer Besucher anpassen zu können. Mit Verwendung dieser Webseite stimmen Sie zu, dass Cookies auf Ihrem Computer gespeichert werden. Nähere Informationen:  Datenschutzerklärung


Visual Language


The new WMF visual language communicates the pleasure of making things.

It combines premium with real life: we aren't presenting a staged, artificial world, but rather a subtly enhanced reality - with the product in the centre.

The basic ingredients of every image are drawn from the trinity of people, food and product. Even in situations in which we don't see whole people or hands, the individual always remains tangible in the form of traces (chopped vegetables, half-empty glasses, a knife left on the tablet, etc.). Not only that, but the products are actually used!

In other words, we always show SITUATIONS, never an individual product that is separated from its context. We never zoom too much into a motif in order to show an individual pot, for example – we only use knock-outs for product explanations. The situations involving preparation, cooking, eating and drinking recount a little story and have an emotional effect.

Do & Don't

Do: The styling must not be too fixed, but instead provide freedom arising from the moment. Natural foods.

Don't: Artificial, overly-decorated or sterile-looking, colourless sets and lifeless studio situations. Models must not come across as overstyled.

Do: In collages, close-ups and moments are combined in a vibrant and harmonious way.

Don't: In collages, we never show more than two images with the same content (such as only hands, only close-ups). No extreme close-ups!


Text Language


In the same way as the new visual language, the actual language used must also communicate the pleasure of creation and ideally in an emotional, real-life way.

The most important textual ingredients: we address the customer directly, often with active imperatives. We use specific words, not artificial ones. All texts have a degree of lightness, inviting the reader to chop, cook and enjoy. We not only communicate product benefits, but also create an underlying mood; we describe situations which, just like the images, are based on the trinity of people, food and products.

In headlines, readers are addressed with an emotional, informal style.


Color Palette

The WMF brand has a distinct color palette that should be used.


Website Colors

Gray Colors

WMF Coffee Colors

WMF Hotel Colors

WMF Group Colors


Typefaces

All text is typeset in WMF’s house font, “WMF Rotis”. This font is the only one used in all communications.


WMF Rotis

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z Ä Ö Ü
a b c d e f g h i j k l m n o p q r s t u v w x y z ä ö ü ß
0 1 2 3 4 5 6 7 8 9

For Headlines WMF Rotis Regular, WMF Rotis Bold and WMF Rotis Regular Italic is used.

Sinova Pro

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z Ä Ö Ü
a b c d e f g h i j k l m n o p q r s t u v w x y z ä ö ü ß
0 1 2 3 4 5 6 7 8 9

For body text Sinova Pro, Sinova Pro Medium and Sinova Pro Italic is used.


Headings

For the web WMF Rotis and Sinova Pro is used for Headings. Print Headings are not in Sinova Pro and only WMF Rotis Regular, WMF Rotis Regular Italic, WMF Rotis Medium and WMF Rotis Bold can be used.


h1. The quick brown fox jumps over the lazy dog

h2. The quick brown fox jumps over the lazy dog

h3. The quick brown fox jumps over the lazy dog

h4. The quick brown fox jumps over the lazy dog

h5. The quick brown fox jumps over the lazy dog
h6. The quick brown fox jumps over the lazy dog

!WMF Rotis must be licensed if the font-family will be used as a webfont (@font-face). Contact GDM for more details.


Grid


a

b

c

d


Grid Multiline


x6

x6

x3

x3

x4

x2


Media Queries

Website content is limited to a width of 1170px inside a centered container. The container changes the size depending on the current viewport size.


Website Content Width

Size Name Width
Default 1170px
Large 940px
Medium 720px
Small 90%

Iconography


ajax-loader

arrow-down-34x18

arrow-left-18x34

arrow-left-neg-s-10x16

arrow-left-s-10x16

arrow-left-s-7x11

arrow-right-18x34

arrow-right-neg-s-10x16

arrow-right-neg-s

arrow-right-s-10x16

arrow-right-s-7x11

arrow-up-34x18

caret-features-tabs-40x20

caret-flyout-24x12

caret-left-dark

caret-left-lightblue

caret-left-slider

caret-meta-16x8

caret-meta-20x10

caret-meta-dark-up

caret-meta-dark

caret-meta-fly

caret-right-dark

caret-right-lightblue

caret-right-slider

cart-white-20x20

check-dark

checkbox-box

checkbox-checked

close-18x18

close-22x22

close-bright-22x22

basket-dark

delete

search-dark

divider-dunkel.png

divider.png

filter-off-25x25

filter-on-25x25

icon-minus-9x9

icon-plus-9x9

icon_sprite.png

product-download-16x16

rss-30x30

scroll-arrow-30x16

select-arrow-dark-45x45

select-arrow-dark

select-back.png

star-big.gif

stars-empty.png

stars-full.png

stars-rating

flagg-31x49

storelocator-dark

storelocator-white

topscroll-arrow-45x45

youtube-26x18

facebook-12x18

facebook-16x24

facebook-circle-45x45

pinterest-circle-45x45

btn-facebook-35x35

btn-google-35x35

btn-xing-35x35

mein-wmf-logo-green

mein-wmf

meinWMF-100-gruen.png


Buttons

Buttons are available as <a> and <button> elements.


Default Buttons

Button Color
Link #333333
Button #71B430

Styled Buttons

Customized buttons to be used in specific areas.


Lists


  • item 1
  • item 2
  • item 3
  • item 4
  • item 5
  1. item 1
  2. item 2
  3. item 3
  4. item 4
  5. item 5


Tables


Simple Table

Table 1 Table 2
Table 2 Table 3
Table 4 Table 5

Table with head, body and foot

Head Head Head Head
Foot Foot Foot Foot
Body Body Body Body

PDP Specification Table

Marke WMF
Kollektion WMF ProfiSelect
Artikelanzahl 2-teilig
Hauptmaterial Glas

Notifications



Tooltips



Forms


  • * Pflichtfelder
  • (z.B. zusätzliche Adresse oder Packstation)

Form Example

Forms Layouts are defined for a specific container or page.


Basic Input

Email Input

Password Input

Telephone Input

Textarea

Select

Checkbox

Radio


Tabs



Breadcrumbs

Breacrumbs use Schema.org Microdata attributes to provide search engines with structured data.



Modals