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



    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