Zalando Email Design UI Kit 2017 by Alexander Perevalov

CBM Design UI Kit

ELEMENTS CTAs Sale 1

Primary: Editorial, Campaigns etc

PRIMARY CTA

Category or Price

42px

SALE CTA

SHOES

270px PULLOVER & STRICKJACKEN

Maximum characters: 30 Sale 2

BOOTS & STIEFEL

12px CLICKETY CLICKY CLICKY BUTTON 12px 12px 12px

SALE CTA

Performance

Spacing

Size Pannel

20px PERFORMANCE CTA

PRIMARY CTA 40px Top 5 Small CTA

SMALL CTA

Maximum characters: 12

Premium

PREMIUM

CBM Design UI Kit

ELEMENTS Text Main Headline

Subline / Headline

24/30 Arial Bold Subline

Secondary Headline (for Editorial NL)

18/24 Arial Bold

Maximum characters: 30

Headline

Maximum characters: 60 (1 line: 30)

Headline

Maximum characters: 60 (1 line: 30)

Subline

18/24 Arial Regular Headline / Subline Text Body

14/24 Arial Regular Short Disclaimer

Subline

Maximum characters: 30

14/24 Arial Regular CTA 12/18 ARIAL BOLD UPPERCASE

Headline / Text Body

Headline

Maximum characters: 60 (1 line: 30)

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s

Maximum characters: 150

standard dummy text ever since the 1500s.

Subline / Headline Left aligned

Subline

Maximum characters: 30

Headline

Maximum characters: 60 (1 line: 30)

Vouchercode

VOUCHER CODE**:

CLICKETY CLICKY CLICK

SKU Description 450 px viewport

Maximum characters: 30 Maximum characters: 20

SKU Description with commodity

Version 1

173px

25px

Brand Name

United Colours of Benetton

Maximum characters: 30 (1 line)

99,99 €

T-shirt

Maximum characters: 25

99,99 €

Maximum characters: 25

SKU Description 320 px viewport

Brand Name

99,99 €

Brand Name

99,99 €

Short disclaimer

* This is left aligned disclaimer. Click here.

Alt Text

THIS IS ALT TEXT

CBM Design UI Kit

ELEMENTS Colours PRIMARY BLACK #1A1A1A

DARK GREY #4A4A4A

MEDIUM GREY #CCCCCC

LIGHT GREY #F3F3F3

Text, Primary CTA, Premium CTA

Footer base part

Social Icons

Applied to images with white BG Footer upper part

ZALANDO ORANGE #FF6900

Performance CTA, text etc

SALE RED #DA331B

Sale

CBM Design UI Kit

ELEMENTS Header & Footer GENDER HEADER

OPTIONAL HEADER

Web view

DAMEN

HERREN

KINDER

Get The Look

Neu In

10 ch

12 ch

FOOTER

Kostenlose Hotline 0800 33 00 900 Erreichbar von Mo - So 8-22 Uhr Mail us service@zalando.de Answer in 24h FAQ

Free Delivery

100 Days Return

Brands USP

Zalando Apps:

Finde mehr Inspiration:

Newsletter von Zalando.de abbestellen* Alle werblichen Nachrichten (der Zalando SE) abbestellen.* Impressum: Zalando.de ist ein Angebot der: Zalando SE Tamara-Danz-Str. 1, 10243 Berlin Telefax: +49 (0)30 2759 46 93 E-Mail: service@zalando.de Vorstand: Robert Gentz, David Schneider, Rubin Ritter Vorsitzender des Aufsichtsrates: Lothar Lanz Eingetragen beim Amtsgericht Charlottenburg Berlin, HRB 158855 B Umsatzsteuer-ID: DE 260543043 Steuernummer: 37/132/45004 Verantwortlicher für eigene Inhalte der Zalando SE gem. § 55 RStV: Robert Gentz

Bekleidung 12 ch

CBM Design UI Kit

SPACING 450px viewport

450px viewport Web view

DAMEN

Web view

HERREN

KINDER

DAMEN Fixed space after header

40px

HERREN

KINDER

40px

Headline 10px

Subline 20px

Fixed space after header

TEASER

TEASER 20px

Headline 20px

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.

20px

Fixed space after header

PRIMARY CTA 10px

20px

PRIMARY CTA PRIMARY CTA 40px

Space between blocks 40px

Shop by size

Headline

20px

30px

L 40px

25px

40px PRIMARY CTA 40px

40px Brand Name

Brand Name

99,99 €

Brand Name

25px

10px Brand Name 5px 99,99 €

Brand Name 99,99 €

99,99 €

99,99 € 20px PRIMARY CTA 40px

Kostenlose Hotline

0800 33 00 900 Erreichbar von Mo - So 8-22 Uhr Mail us Brand Name

service@zalando.de

Brand Name

99,99 €

Answer in 24h FAQ

99,99 € 20px PRIMARY CTA 40px

FREE DELIVERY

100 DAYS RETURN

BRAND USP

Kostenlose Hotline 0800 33 00 900 Erreichbar von Mo - So 8-22 Uhr

Zalando Apps:

Mail us service@zalando.de Answer in 24h FAQ

Finde mehr Inspiration:

Free Delivery

100 Days Return

Brands USP Newsletter von Zalando.de abbestellen*

Zalando Apps: Alle werblichen Nachrichten (der Zalando SE) abbestellen.* Impressum: Zalando.de ist ein Angebot der: Zalando SE Tamara-Danz-Str. 1, 10243 Berlin Telefax: +49 (0)30 2759 46 93

Finde mehr Inspiration:

E-Mail: service@zalando.de Vorstand: Robert Gentz, David Schneider, Rubin Ritter Vorsitzender des Aufsichtsrates: Lothar Lanz Eingetragen beim Amtsgericht Charlottenburg Berlin, HRB 158855 B Umsatzsteuer-ID: DE 260543043 Steuernummer: 37/132/45004

Verantwortlicher für eigene Inhalte der Zalando SE gem. § 55 RStV: Robert Gentz

CBM Design UI Kit

MODULES Module 1

Module 1.2

Teaser_Headline_Subline_1-3_CTA

Teaser_Headline_Text_1-3_CTA

SNIPPET: headline_subline_divider_image_headline_text_3cta_disclaimer

Headline

Subline

TEASER

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna PRIMARY CTA

aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.

PRIMARY CTA PRIMARY CTA PRIMARY CTA PRIMARY CTA

* This is a disclaimer. Click here. PRIMARY CTA

* This is a disclaimer. Click here.

Module 2

Module 2.1

Teaser_Headline_Subline_Voucher_1-3_CTA

Teaser_Headline_Text_Voucher_1-3_CTA

SNIPPET: image_headline_text_voucher_1cta_disclaimer

Headline

Subline

TEASER TEASER

Lorem Ipsum is simply dummy text of the printing and VOUCHER CODE**:

typesetting industry. Lorem Ipsum has been the industryâ&#x20AC;&#x2122;s standard dummy text ever since the 1500s.

VOUCHERCODE VOUCHER CODE**:

VOUCHERCODE

PRIMARY CTA

* This is a disclaimer. Click here.

PRIMARY CTA

* This is a disclaimer. Click here.

Module 3

Module 3.1

Teaser_Headline_Subline_Voucher_Steps_1-3_CTA

Teaser_Headline_Text_Voucher_Steps_1-3_CTA

SNIPPET: image_headline_ _voucher_3step_3cta_disclaimer

SNIPPET: image_headline_text_voucher_3step_3cta_disclaimer

Headline

Subline

TEASER TEASER

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed VOUCHER CODE**:

do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation

VOUCHERCODE

ullamco laboris nisi ut aliquip. VOUCHER CODE**:

30 ch

Lorem ipsum dolor sit amet

100 ch

1. Lorem ipsum dolor sit amet, consectetur adipiscing elit

100 ch

2. Lorem ipsum dolor sit amet, consectetur adipiscing elit

100 ch

3. Lorem ipsum dolor sit amet, consectetur adipiscing elit

VOUCHERCODE

Lorem ipsum dolor sit amet 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit

PRIMARY CTA

2. Lorem ipsum dolor sit amet, consectetur adipiscing elit 3. Lorem ipsum dolor sit amet, consectetur adipiscing elit

PRIMARY CTA PRIMARY CTA PRIMARY CTA PRIMARY CTA

* This is a disclaimer. Click here. PRIMARY CTA

* This is a disclaimer. Click here.

CBM Design UI Kit

MODULES Module 4

Module 4.1

Teaser_Headline_Subline_Steps_1-3_CTA

Teaser_Headline_Text_Steps_1-3_CTA

SNIPPET: image_headline_text_3step_3cta_disclaimer

Headline

Subline

TEASER

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna

Lorem ipsum dolor sit amet 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit

aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.

2. Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet

3. Lorem ipsum dolor sit amet, consectetur adipiscing elit

1. Lorem ipsum dolor sit amet, consectetur adipiscing elit 2. Lorem ipsum dolor sit amet, consectetur adipiscing elit

PRIMARY CTA

3. Lorem ipsum dolor sit amet, consectetur adipiscing elit PRIMARY CTA PRIMARY CTA PRIMARY CTA PRIMARY CTA

* This is a disclaimer. Click here. PRIMARY CTA

* This is a disclaimer. Click here.

Module 5

Module 6

Teaser_Headline_Text_Size_Panel_1-3_CTA

Headline_Subline_Teaser_1-3_CTA

SNIPPET: image_headline_text_6size_3cta_disclaimer

SNIPPET: Hheadline_subline_divider_image_1cta.html

Headline

Headline Subline

TEASER TEASER

Shop by size S

PRIMARY CTA

* This is a disclaimer. Click here.

Module 7 Headline_Subline_Teaser_CTA_Teaser_CTA SNIPPET: headline_subline_divider_image_1cta_image_1cta

Headline Subline

TEASER

PRIMARY CTA

TEASER

PRIMARY CTA

CBM Design UI Kit

MODULES Module 8

Module 9

Teaser_Headline_Subline_Wave_1-3_CTA

Headline_Subline_1-3_CTA

SNIPPET: headline_subline_divider_image_headline_value_text_3cta_disclaimer

SNIPPET: headline_text_1cta_disclaimer

Headline Subline

Headline Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.

PRIMARY CTA

TEASER 900x500 * This is a disclaimer. Click here.

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Maximum characters: 60 (1 line: 30)

-20% Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industryâ&#x20AC;&#x2122;s standard dummy text ever since the 1500s.

PRIMARY CTA

* This is a disclaimer. Click here.

Module 10

Module 11

Headline_Subline_Voucher_Steps_1-3_CTA

Headline_Subline_Voucher_1-3_CTA

SNIPPET: headline_text_voucher_3step_1cta_disclaimer

SNIPPET: -

Headline

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed

do eiusmod tempor incididunt ut labore et dolore magna

aliqua. Ut enim ad minim veniam, quis nostrud exercitation

ullamco laboris nisi ut aliquip.

VOUCHER CODE**:

VOUCHERCODE

Lorem ipsum dolor sit amet

PRIMARY CTA

1. Lorem ipsum dolor sit amet, consectetur adipiscing elit 2. Lorem ipsum dolor sit amet, consectetur adipiscing elit

PRIMARY CTA

3. Lorem ipsum dolor sit amet, consectetur adipiscing elit PRIMARY CTA PRIMARY CTA

* This is a disclaimer. Click here. PRIMARY CTA

PRIMARY CTA

* This is a disclaimer. Click here.

CBM Design UI Kit

MODULES Module 17

Module 18

Flex_Step_1

Flex_Step_2

SNIPPET: flex_image_headline_text_step1_of3_1cta_disclaimer

SNIPPET: flex_image_headline_text_voucher_step2_of3_1cta_disclaimer

Headline

TEASER

Lorem Ipsum is simply dummy text of the printing and

typesetting industry. Lorem Ipsum has been the industry’s

standard dummy text ever since the 1500s.

standard dummy text ever since the 1500s. VOUCHER CODE**:

Und so geht’s

30 - 60 ch

VOUCHERCODE 100 ch

Our website has fresh, new look.

Und so geht’s 100 ch

100 ch

Shop our petite, tall and plus size collections.

Save items to your wish list and get notified when something you like goes on sale.

PRIMARY CTA

Our website has fresh, new look.

Shop our petite, tall and plus size collections.

Save items to your wish list and get notified when something you like goes on sale.

PRIMARY CTA

CBM Design UI Kit

MODULES Module 14 | Brandwall

Module 38 | Bottom CTAs SNIPPET: headline_divider_3cta

SNIPPET: headline_subline_brandwall

Headline Subline

Headline PRIMARY CTA

PRIMARY CTA

CBM Design UI Kit

MODULES Module 20 | SALE

Module 21 | SALE

SALE_Headline_Voucher_1-3_CTA

SALE_Headline_Subline_1-3_CTA

SNIPPET: banner_sale_headline_voucher_3cta_disclaimer

SNIPPET: sale_headline_text_3button

Headline VOUCHER CODE**:

Headline Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna

VOUCHERCODE

aliqua. Ut enim ad minim veniam, quis nostrud exercitation

PRIMARY CTA PRIMARY CTA PRIMARY CTA PRIMARY CTA PRIMARY CTA PRIMARY CTA

* This is a disclaimer. Click here.

Module 22 | SALE

Module 23 | SALE

SALE_Headline_Subline_Voucher_1-3_CTA

SALE_Teaser_Headline_Subline_1-3_CTA

SNIPPET: sale_headline_text_voucher_3button_disclaimer

SNIPPET: sale_image_headline_text_3button_disclaimer

Headline Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna

TEASER

aliqua. Ut enim ad minim veniam, quis nostrud exercitation VOUCHER CODE**:

VOUCHERCODE

PRIMARY CTA

Headline Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed

PRIMARY CTA

do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.

PRIMARY CTA PRIMARY CTA

* This is a disclaimer. Click here.

PRIMARY CTA

* This is a disclaimer. Click here.

CBM Design UI Kit

MODULES Module 24 | SALE

Module 25 | SALE

sale_subline_headline_4price_1cta

sale_image_subline_headline_4price_1cta

Subline

Headline TEASER €75 €50 €25

Subline 5000CHF

Headline

PRIMARY CTA

€75 €50 €25 5000CHF

PRIMARY CTA

Module 26 | SALE

Module 27 | SALE

sale_headline_text_3voucher_1cta_disclaimer

sale_headline_divider_subline_6size_1cta

Headline Subline

Headline Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation

Lorem ipsum dolor sit amet S

€50** VOUCHER CODE**:

VOUCHERCODE

PRIMARY CTA

€50** VOUCHER CODE**:

VOUCHERCODE

€50**

Module 28 | SALE

VOUCHER CODE**:

VOUCHERCODE sale_headline_divider_image_subline_6size_1cta

PRIMARY CTA

Headline Subline

* This is a disclaimer. Click here.

TEASER

Lorem ipsum dolor sit amet S

PRIMARY CTA

CBM Design UI Kit

MODULES Module 30

Module 31

Simple banner: banner_text.html

Icon banner: banner_icon_text.html

Maximum characters: 70

Maximum characters: 100 8px

20px 20px

Lorem ipsum dolor sit amet, consectetur adipiscing elit adipiscing 20px

20px

60px 20px 8px

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore 20px 20px 20px

60px Text centered

Examples with coloured background

Lorem ipsum dolor sit amet, consectetur adipiscing elit adipiscing

Icon 60x60

Text left aligned

Examples with coloured background (check colours with graphics)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore

Lorem ipsum dolor sit amet, consectetur adipiscing elit adipiscing

Module 32

Module 35

Sale banner / normal banner: banner_sale_headline_2cta_disclaimer.html

Short disclaimer

Maximum characters: 60

* This is a disclaimer. Click here.

Lorem ipsum dolor sit amet sitamet dolor sit amet sitamet PRIMARY CTA

PRIMARY CTA

* This is a disclaimer. Click here.

Module 39 Banner with voucher: banner_sale_headline_voucher_1cta_disclaimer.html Maximum characters: 60

Lorem ipsum dolor sit amet sitamet dolor sit amet sitamet VOUCHER CODE**:

VOUCHERCODE

PRIMARY CTA

* This is a disclaimer. Click here.

CBM Design UI Kit

MODULES Module 33

Module 34

2 handpicked SKU’s

4 handpicked SKU’s

255px

173px Brand Name

Brand Name

99,99 €

Brand Name

99,99 €

Module 36

Module 37

4 recommendations SKU’s

6 recommendations SKU’s

Top picks for you

Brand Name

99,99 €

Brand Name

99,99 €

Brand Name

99,99 €

CBM Design UI Kit

Dynamic Elements Module 40

Module 41

Dynamic countdown

Subscription promo

Active

20 09 04 29 DAYS

HOURS

MINUTES

Join our subscriberâ&#x20AC;&#x2122;s club

SECONDS

900 x 500 Inactive

Oops, 20 09 04 29 Sorry! You the offer is over our sale is over DAYS

HOURS

MINUTES

SECONDS

Your current benefits Product recommendations Image option

Exclusive offers Expert tips on trends & styling

JOIN TODAY

CBM Design UI Kit

MODULES Module 15 zStars PE Banner

PRIMARY CTA

Module 16 zStars_NL_Banner

PRIMARY CTA

CBM Design UI Kit

ICONS App icons 52x52@2x #CCCCCC Android app

Apple app

Windows app

Social icons 52x52@2x #CCCCCC Facebook

Twitter

Instagram

Free delivery

Free returns

Address book

Mobile

USP for footer 38x38@2x Hotline

Mail

Brands

Icon Banner 60x60@2x Newsletter

Giftcard

Custom Icons Play Button 1

Play button 2

Commodity Icons 80x80@2x

Star rating transparent 40x40@2x

Star rating white BG 40x40@2x

Star rating active 40x40@2x

FAQ

CBM Design UI Kit

Whatsapp templates

CBM Design UI Kit

Sports Modules

Looking for something different

What’s your sport?

Training

15 ch

Tennis

Hiking

Yoga

Hiking

Training

ALL DISCIPLINES

Training

ALL DISCIPLINES