TÀI LIỆU DÀNH CHO NHÀ BÁN HÀNG HƯỚNG DẪN SỬ DỤNG BANNER BANNER GUIDELINE 2018 Mã tài liệu: 04-DT-MP Ngày ban hành: 10/08/2018 Lần ban hành/Sửa đổi: 01/00
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