TÀI LIỆU DÀNH CHO NHÀ BÁN HÀNG

HƯỚNG DẪN SỬ DỤNG BANNER

BAN N E R GUIDELINE 2018

Mã tài liệu: 04-DT-MPNgày ban hành: 10/08/2018Lần ban hành/Sửa đổi: 01/00

Sử dụng hệ thống lưới đơn giản sắp xếp

các thành phần trên banner, đảm bảo chữ

và SKU nằm trong vùng an toàn, tránh

xung đột với các thành phần có sẵn khác.

Safe zone

• Được quy định bởi padding bao quanh

vùng an toàn (tùy theo banner cụ thể -

quy định chi tiết được gửi kèm bằng file

.ai kèm bản guideline này)

• Text luôn được đặt trong vùng an toàn

để đảm bảo không bị che bởi bất cứ

thành phần nào khác.

• Hạn chế sắp xếp hình ảnh vượt ra khỏi

vùng an toàn nếu không thực sự cần thiết.

Layout color SKU typo CTA

safe zone

padding

padding

pad

din

g

pad

din

g

THE QUICK BROWNFOX

Lorem IpsumThe quick brown fox jumps over the lazy dog

THE QUICK BROWNFOX

LoremThe quick brown fox jumps over

Sử dụng đúng Sử dụng saiTHE QUICK BROWNFOX

Lorem IpsumThe quick brown fox jumps over the lazy dog

THE QUICK BROWNFOX

LoremThe quick brown fox jumps over

•Tạo sự đồng bộ, thống nhất cho

banner hiển thị trên web/mobile app.

•Đảm bảo sự tương phản, dễ đọc và

nổi bật của thông tin (chữ - SKU)

trên banner.

•Phù hợp với khách hàng của Tiki (nữ/18 - 35 tuổi).

•Bao gồm

Quy định sử dụng màu nền

Quy định sử dụng màu chữ

Màu nền

NÊN

• Sử dụng màu theo bảng quy định dựa trên SKU và đối tượngkhách hàng.

•Có thể dùng gradient khi cần thiết nhưng đảm bảo giữ tông màuchính của bảng màu quy định.

•Kết hợp thêm 1 hoặc tối đa 2 màu để tăng tương phản và chính -phụ cho banner.

•Trường hợp NCC đề nghị màu nền: cần làm việc để đảm bảo 2 bên

thỏa thuận màu sắc chung, tránh dùng 1 màu hoàn toàn khác biệt,

không phù hợp.

KHÔNG NÊN

•Sử dụng màu ngoài bảng màu quy định.

•Kết hợp các màu có độ tương phản quá cao hoặc sai tương phản.

•Màu quá chói hoặc quá nhạt.

•Màu sắc xung đột vớiSKU.

Bảng màu nền cơ bản

#D6223B #FF668B #F6871F #FFDE59 #7EC358 #6AC17B

#36E0CB #60CBEA #7E5BA6#0092F2

#FF8140

#C7C1F2 #A8BEFF #D9D9D9 #414042

Layout Color Typo CTASKU

•Kết hợp dùng các màu tươngđồng.

•Sử dụng màu gradient hợp lý.

Gradient color

Sử dụng đúng Sử dụng sai

Lorem

Lorem

Lorem Lorem

Lorem Lorem

Solid color

Layout Color Typo CTASKU

Layout Color SKU Typo CTA

Quy định lựa chọn SKUs

•Chỉ sử dụng hình ảnh đủ chất lượng, độ

phân giải, rõ ràng và nổi bật.

•Sử dụng tối đa 6 SKUs trên banner. Khi sắp xếp

phải đảm bảo dù bị che 1 phần nhưng vẫn nhận

biết được SKU. Chú ý hướng sản phẩm.

•Hạn chế kết hợp các SKUs không liên quan

(sữa - bao cao su, sữa tắm - điện thoại...)

•Hạn chế các SKUs có chi tiết rất nhỏ hoặc

nhiều chi tiết dễ gây rối khi kết hợp nhóm

SKUs.

•Sử dụng hình người minh họa, người mẫu phù

hợp,tránh gây phản cảm. Ưu tiên sử dụng ngườ

mẫu ChâuÁ

•Có thể dùng thêm họa tiết trang trí để làm nổi

bật SKUs (nước, lá, shape,...) nhưng phải đảm

bảo sự dễ nhìn và hài hòa.

Sử dụng đúng Sử dụng sai

Màu sắc nổi bật, rõràng

Kết hợp không quá 6 SKUs

Không bị mất chi tiết quá nhiều

Gợi ý kết hợp màu nền, màu chữ và SKUs trên layout

MASCARA MAYBELLINE

Magnum Barbie 9.2ml

119.000đ

MUA NGAY

NỘI Y GỢI CẢM

GIÁ CHỈ TỪ

299.000đ

MUA NGAY

BẾP ĐẸP CƠM NGONGiảm

đến

40%√ Miễn phí giao hàng

√ Trả góp 0%

MUA NGAY

TÃ QUẦN BOBBY

MÁT CHO BÉ - MẸ THÊM VUI

CHỈ

TỪ 299.000đ

√ Miễn phí giao hàng √ Quà ++

Layout Color SKU Typo CTA

Fonts

•Sử dụng font đồng bộ cho tất cả banner trênwebsite, bao gồm các font chủ đạo: Roboto,Roboto Condened (san - serif) & Prata(serif).

•Có thể sử dụng thêm fonts khác không hạn chế(không khuyến khích) nếu cần thiết cho headline - tên chương trình. Nhưng vẫn đảm bảotính dễ đọc của text.

•Đảm bảo sử dụng size font có thể đọc được khihiển thị trên web/m-app

•Không dùng font viết tay, thưpháp, decor...

•Không dùng 2 fonts tương tự nhau (serif - serif,san serif

- san serif)

•Không dùng quá 2 fonts chữ trên cùng 1 banner.

•Không dùng nhiều hơn 3 styles cho font chữ.

•Không dùng các dấu “,” “;” “.” trênbanner.

Roboto

ABCDEFGHI J KLMNOPQRSTUVWXYZabc def ghi j kl mnopqr st uvwxyz0123456789?!ç ñ$@# %̂ &* ( ) _+{ } :”

ẠạẢảẤấẦầẨẩẪẫẬậẮắẰằẲẳẴẵẶặẸẹẺẻẼẽẾếỀềỂểỄễỆệỈ ỉ Ị ị ỌọỎỏỐốỒồỔổỖỗỘộỚớỜờỞởỠỡỢợỤụỦủỨứỪừỬửỮữỰựỲỳỴỵỶỷỸỹ

Roboto Condensed

A B C D E F G H I J K L M N O P Q R S T U V W S YZ

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

1 2 3 4 5 6 7 8 9 0 @ # $ % &*

ABCDEFGHIJ KLMNOP QRS TUVWS YZ

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

1234567890@ # $ % &*

A B C D E F G H I J K L M N O P Q R S T U V W S YZ

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

1 2 3 4 5 6 7 8 9 0 @ # $ % &*

Prata

A B C D E F G H I J K L M N O P Q R S T U V W S Y Za 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 1 2 3 4 5 6 7 8 9 0 @ # $ % & *

SKU TypoLayout Color CTA

Những font không được sử dụng Một số font phụ có thể sử dụng (tham khảo)

Roboto Slab

A B C D E F G H I J K L M N O P Q R S T U V W S Y Za 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 1 2 3 4 5 6 7 8 9 0 @ # $ % & *

A B C D E F G H I J K L M N O P Q R S T U V W S Y Za 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 1 2 3 4 5 6 7 8 9 0 @ # $ % & *

Quicksand

A B C D E F G H I J K L M N O P Q R S T U V W S YZa 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 12 3 4 5 6 7 8 9 0 @ # $ %&*

A B C D E F G H IJ K L M N O P Q R ST U V W SY Za b c d e f g h i jk l m n o p q r s t u v w xy z 1 2 3 4 5 6 7 8 9 0 @ # $ % &*

Font chữ không hiện đại

Font viết tay

Font viết phấn, brush...

Font có nét quámảnh

Font có nét quá phứctạp

SKU TypoLayout Color CTA

SKU TypoLayout

Các thành phần TỐI ĐA CÓ THỂ CÓ trên một banner:

Đối với chương trình nhóm Sách và các ngàng hàng khác

•Tên chương trình - Tên sản phẩm -Logo

•% giảm giá - Giá sản phẩm (giá giảm)

•Thời gian - Điều kiện áp dụng

•Quy định giao hàng - Hỗ trợ trảgóp

Đối với chương trình Sách lẻ

•Tên sách

•Bubble giảm giá

•Trích dẫn

Yêu cầu chung

•Tên chương trình không quá 10 từ và sắp xếp quá 2 dòng.

•Tên sản phẩm có thể linh động rút gọn hoặc sắp xếp cho

phù hợp nếu quá dài nhưng không vượt quá 16 từ và sắp xếp

quá 2 dòng.

•Làm nổi bật %giảm giá hoặc Giá giảm bằng màu sắc hoặc

kích thước. Luôn dùng ”199.000đ“ cho phần giá tiền.

•Kích thước chữ không nhỏ hơn 11pt.

•Không dùng hiệu ứng 3D, drop shadow mạnh nếukhông

thực sự cần thiết và hiệuquả.

•Không để text ảnh hưởng/chồng lấpSKU.

Sử dụng đúng

Sử dụng sai

MỖI NGÀY 10 ÝTƯỞNG

99.000đ

Thời gian: 30/02 -31/04

MÁY ĐÁNH TRỨNG BLUESTONE

Thời gian: 30/02 -31/04

√ TRẢ GÓP 0% √ GIAO HÀNG MIỄN PHÍ

MÁY ĐÁNH TRỨNG BLUESTONE

SẢN XUẤT TẠI VIỆT NAM ĐẢM BẢO CHÍNH HÃNG

KHÔNG PHẢI HÀNG FAKE

999.000đThời gian: 30/02 - 31/04

√ TRẢ GÓP 0% √ GIAO HÀNG MIỄNPHÍ√ TRẢ GÓP0% √ GIAOHÀNGMIỄNPHÍ

MÁY ĐÁNH TRỨNG BLUESTONE

999.000đThời gian: 30/02 - 31/04

Banner ngành sách không dùng giá bán

Text quá nhiều. Text lẫn với SKU gây khó đọc

Không dùng trên 2 fonts, 3styles trên cùng 1 banner Chú ý khoảng cách và canh text giữa các dòng text

Không dùng effects cho textnếu không thực sự cần thiết

MASCARA MAGNUM BARBIE 9.2ML

119.000đ

√ Miễn phí giao hàng √ Quà + +

MUA NGAY

Typography

Color CTA

Layout Color SKU Typo CTA

Call To Action (CTA)

•Sử dụng cho tất cả banner trên website, m-app và các kênh

quảng cáo có thể dẫn link được.

•Vị trí: luôn nằm ở phía dưới cùng của phần chữ/nội dung

trên banner. Giữ khoảng cách nhất định với text, tối thiểu

35px.

• Tùy theo kích thước banner để chọn size phù hợp.

40px: Mobile, FBShare

25px: Các banner còn lại

Sử dụng sai

CTA quá gần text

Dùng sai màu CTA quy định

CTA sai vị trí

MỖI NGÀY 10 ÝTƯỞNG

99.000đ

Thời gian: 30/02 -31/04

MỖI NGÀY 10 ÝTƯỞNG

99.000đ

Thời gian: 30/02 -31/04

MỖI NGÀY 10 ÝTƯỞNG

99.000đ

Thời gian: 30/02 -31/04

MUA NGAY

110 px

30 px Font: Roboto Medium

Size: 16 pt

Radius: 3 px

MUA NGAY

128 px

30px: Banner Home Main, Category Main

40 px Font: Roboto Medium

Size: 18 pt

Radius: 3 px

MUA NGAY

90 px

25 pxFont: Roboto Medium

Size: 13 pt

Radius: 3 px

Màu sắc và kích thước thực tế

#414042

MUA NGAY

MUA NGAY

MUA NGAY

MUA NGAY

MUANGAYMUANGAY

30 px

40 px

25 px

MUA NGAY

MUA NGAY

MUA NGAY

#FFFFFF#EF5051

Quy định về Key Visual

•Các thiết kế sử dụng màu sắc dễ đọc và đảm bảo

sự tương phản cần thiết.

•Ưu tiên các thiết kế sử dụng phần mềm Illustrator,

embed file đầy đủ. Outline font hoặc gởi kèm font.

Các text phụ ưu tiên sử dụng font Roboto.

•Nếu thiết kế bằng phần mềm Photoshop, vui lòng

dùng hình ảnh chất lượng caovà chưa merge layers.

Quy định xuất file banner

•Tất cả banner XUẤT HIỆN TRÊN WEBSITE TIKIđều

phải xuất size gấp đôi so với size hiển thị.

Ví dụ: Size Home Cat hiển thị trên size là 870 x 260px,

file cần xuất là 1740 x520px.

•Sử dụng đúng size CTA cho từng banner (Vui lòng

xem quy định về kích thước CTA ởtrên).

•Chỉ sử dụng CTA 3 màu quy định (nền đỏ, viền đen,

viền trắng)

BANNER TRÊN WEBSITE TIKI.VN

1. Trang HOMEPAGE:

- Chỉ thiết kế banner Home Main (H30px), các khu

vực khác (Home Small, Home Sub) team Tiki sẽ phụ

trách theo guideline.

- Home Cat, Home Menu, Home right (H25px) sử

dụng size CTA như quy định.

2. Trang Landing Page:

- Banner Top Landing Page không dùng CTA

3. Banner Facebook:

- Có CTA: Banner FB Share (H40px), FB Ads (H25px).

- Không CTA: Banner FB Cover, FB Post,

4. Banner Email:

- CTA: H25px

LƯU Ý CHO ĐỐI TÁC KHI HỖ TRỢ THIẾT KẾ CHO TIKI.VN

•Các thiết kế banner trên Tiki trước khi on site phải

được Tiki Team duyệt.

•Tiki Team và đối tác có thể thảo luận để tìm ra

phương pháp tối ưu cho 2bên.

•Tiki có quyền reject nếu banner không đủ chất

lượng thẩm mỹ hoặc sai guideline để đảm bảo chất

lượn và đồng bộ cho website.

•Size tấtcả banner và guide cho banner được gởi

kèm với bản Guideline này (file .ai)

•CTA tất cả các size (file png và .ai) đcợc gửi kèm với

bản Guideline này.

#414042

MUA NGAY

MUA NGAY

MUA NGAY

MUA NGAY

MUANGAYMUANGAY

30 px

40 px

25 px

MUA NGAY

MUA NGAY

MUA NGAY

#FFFFFF#EF5051

Quy định về Call To Action Quy định về duyệt Thiết Kế

GIẢMGIÁ

Các sản phẩm Anker

khi nhập mã “TIKIANKER”

MUA NGAY

COMBO NƯỚC GIẶT ARAU BABY

(BÌNH 800ML + TÚI720ML)

450.000đ

270.000đ

CÁPLIGHTING

ANKER200CM

200.000đ

99.000đ

#TEAMBLUEBITI’S XANH DƯƠNG

450.000đ

498.000đ

LUMINARCTHỦY TINH TỪPHÁP

ĐỒNG GIÁ

50k - 60k

HARRY POTTER 7 VOLUME

BCK BOXED SET

BESTPRICE

999.000đ

SIÊU THỊ TÃ BỈM

BÉ KHỎE - MẸ VUI

GIẢM ĐẾN

50%

SAMSUNG GALAXY J7 PROĐẸP KIỆT XUẤT - ĐẬM KHÍ CHẤT

ĐẶTTRƯỚC

6.990.000đ

TIỂU THUYẾT TIẾNG ANH

HAY NHẤT MỌI THỜIĐẠI

GIẢM ĐẾN

50%

Quà ++ | Miên phí giaohàng Miễn phí giaohàng

Tặng chữ ký SơnTùng

Số lượng

có hạn

Roboto Regular

Size 12, ALL CAP

Tối đa 2 dòng

RobotoRegular

Size 12

Roboto Bold

Size 18

Roboto Medium

Size 11

CTA

size H25px

Roboto BOLDsize 24

màu tương phản

với nền

NEW HOME PAGE OVERVIEW

THANK YOU