Guidelines 01. Logo & Mark 02. Colors Pallet 03. Typeface 04. Social Media/ In-App banner 05. Presentation Slides 06 Graphics
01. Logo & Mark
safe zone
Logo w/ tagline
Persian Green
Nhận diện
HEX: #00b38a RGB: 0/179/138 CMYK: 78/1/61/0
Nhận diện hiện tại của iCheck gồm Logo và Brandmark.
Black Russian HEX: #0e1030 RGB: 14/16/48 CMYK: 94/89/48/63
Mark
Aa
Roboto Medium
01. Logo & Mark
Các trường hợp được sử dụng
(Logo tiêu chuẩn)
(Logo không có tagline)
(Logo dương bản)
(Logo trên nền tối)
(Logo âm bản)
(Logo Grayscale)
Các trường hợp sử dụng sai
Quy chuẩn sử dụng Sử dụng Logo sai quy chuẩn gây ảnh hưởng đến nhận diện thương hiệu.
Mạng xã hội sản phẩm & tiêu dùng
x
(Kéo dãn logo)
x
(Thay đổi màu)
x
x
x
(Kéo dãn logo)
(Sử dụng effect cho logo)
x
(Thay đổi font tagline)
(Đặt logo lên các nền phức tạp, màu sắc tương phản cao)
Primary colors
02. Colors pallet
Dominant Black Russian HEX: #0e1030 RGB: 14/16/48 CMYK: 94/89/48/63
Các quy chuẩn về màu - Sử dụng màu đúng mục đích (hệ màu in và hệ màu hiển thị)
Subdominant Persian Green
- Luôn sử dụng 2 màu chính trong thiết kế, theo tỉ lệ 8/2 (Black Russian/ Green Persian) - Không sử dụng quá nhiều màu trong ấn phẩm.
HEX: #00b38a RGB: 0/179/138 CMYK: 78/1/61/0
Complementary colors
- Tránh sử dụng các tone đối lập với 2 màu nhận diện C:13
M:0
Y:5
K:0
C:0
M:0
Y:20
K:0
C:100
M:68
Y:35
K:18
C:13
M:5
Y:0
K:0
C:100
M:82
Y:38
K:52
- Hạn chế để màu solid làm background - Tỉ lệ màu xanh tím than thương hiệu tối thiểu hiển thị >30% tỉ lệ màu trong thiết kế
Analogue 1 (Màu có thể thay thế cho Dominant color trong 1 vài TH)
02. Colors pallet Analogue 2 (Màu có thể thay thế cho Subdominant color trong 1 vài TH)
Các màu sắc, dải màu bổ trợ Bên cạnh các màu sắc chính của thương hiệu, các bảng màu bổ trợ cũng giúp thiết kế linh hoạt hơn và không gây nhàm chán.
Monochromatic (Phối màu đơn sắc)
Gradient Blue/Green (Dải màu chuyển)
03. Typeface
Roboto The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy dog
Aa
Kiểu chữ Kiểu chữ sử dụng có family font từ 3 trở lên, có tính dễ đọc và được dùng rộng rãi. Lựa chon Google Font giúp tăng tính thân thiện và đảm bảo an toàn cho web. Typeface chính: Roboto Typeface phụ đề xuất: Muli Dosis
Muli The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy dog
Aa
Dosis The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy dog
Aa
Roboto x Muli
03. Typeface
Lorem ipsum Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu
Các quy chuẩn về font - Kích thước phông chữ body ở mức 12 đến 16pt, phông chữ tiêu đề ở mức 18 đến 24pt để dễ đọc nhất. - Không sử dụng quá nhiều kiểu font chữ trong thiết kế. (<2 font/thiết kế) - Không sử dụng các font chữ Handwriting/Script cho đoạn văn bản
Muli x Dosis
- Không để leading, tracking, kerning trong font quá lớn, hoặc quá bé - Không Uppercase 1 đoạn văn bản - Không sử dụng effect cho text - Hạn chế sử dụng các font Serif , hand writting, caligraphy, brush... - Text phải có tương phản tốt với hình - Không Scale, Shear Font
Lorem ipsum Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at
04. Social Media/ In-App banner
Lorem ipsum dolor sit
Lorem ipsum dolor sit
Lorem ipsum dolor sit amet, consectetuer
Lorem ipsum dolor sit amet, consectetuer
Lorem ipsum dolor sit Lorem ipsum
label
Social Media Banner
Bài ảnh đơn
Hợp tác nhãn
- Banner sử dụng trên Facebook và Instagram sử dụng kích thước chung 1200x1200px (bài ảnh đơn), hiển thị tối thiểu 150ppi. - Dạng bộ ảnh, kích thước cover 900x603. - Cover facebook kích thước: 1920x1080, text và hình đặt trong safe zone: 1634x751px - Sử dụng chân trang (footer) cho các bài ảnh đơn chương trình hợp tác nhãn, campaign, ảnh dạng lifestyle. Một số trường hợp có thể linh hoạt trong sử dụng chân trang (nền solid, màu tương đồng, bài creative...) nhưng vẫn đảm bảo vị trí đặt của logo.
Safe zone:1634x751px
Cover facebook
Creative
04. Social Media/ In-App banner Footer social banner
Social Media Banner - Banner sử dụng trên Facebook và Instagram sử dụng kích thước chung 1200x1200px (bài ảnh đơn), hiển thị tối thiểu 150ppi.
287px
label 1200px
- Dạng bộ ảnh, kích thước cover 900x603. - Cover facebook kích thước: 1920x1080, text và hình đặt trong safe zone: 1634x751px - Sử dụng chân trang (footer) cho các bài ảnh đơn chương trình hợp tác nhãn, campaign, ảnh dạng lifestyle. Một số trường hợp có thể linh hoạt trong sử dụng chân trang (nền solid, màu tương đồng, bài creative...) nhưng vẫn đảm bảo vị trí đặt của logo.
label
Một số option khác
label
04. Social Media/ In-App banner Key Visual
In-App Banner - Banner trên App iCheck có kích thước: 750x300px, hiển thị bắt buộc: 72ppi - Banner Popup: 700x700px, hiển thị bắt buộc: 72ppi
Popup
- Collection banner: 750x300px, hiển thị bắt buộc: 72ppi - Các banner và collection dapt theo KV của campaign chính hoặc sử dụng theme tương tự (màu sắc, graphics)
Banner In-App
- Thống nhất style cho toàn bộ banner trên app trong 1 campaign - Banner có kích thước nhỏ không cần đặt logo Collection Banner
AN TÂM MUA SẮM
Tích điểm mỗi ngày TẢI APP NGAY
Tiêu dùng thông minh và an toàn cùng iCheck
Tiêu dùng thông minh và an toàn cùng iCheck
Tìm hiểu ngay
Tìm hiểu ngay
TÍCH ĐIỂM 5%
Demo
Hợp tác nhãn
Bài ảnh đơn
Minh bạch thông tin
Creative Post
Banner In App
Pop up Banner
05. Presentation Slides Các yêu cầu về slide - Slide làm theo tỉ lệ: 16:9 - Thống nhất về template, typeface và style. - Các template powerpoint đảm bảo các yếu tố: trang master có thể tùy chỉnh được, thiết kế tinh- gọn -sạch, đa dạng layout trong 1 template.
Template hiện tại của iCheck
Kích thước font trên slide
Title
40pt
Subtitle
32pt
Body
24pt
Typeface phổ biến - Roboto - Open Sans - Montserrat - Arial - Tahoma
- Typeface sử dụng trong slide cần dễ đọc, phổ biến và có Việt hóa. Tối đa 2 typefaces trong 1 thiết kế - Icon trong slide cần thống nhất theo bộ, tham khảo các trang icon phổ biến: flaticon.com, icons8 - Sử dụng màu thương hiệu và màu nhận diện đối tác trong các slide hợp tác. - Nội dung trong slide bắt buộc chỉnh
Template có nhiều layout
06. Graphics Các yêu cầu chung về đồ họa - Sử dụng đồ họa vector dạng flat illustration, ít chi tiết và có màu thương hiệu, hạn chế sử dụng hand drawn illustration nhiều chi tiết. Sử dụng cùng style các graphics trong 1 ấn phẩm.
Vector flat illustration
Hand drawn illustration
- Các thiết kế cân bằng giữa hình ảnh và text, có khoảng nghỉ cho mắt(white space) - Hình ảnh sử dụng trong thiết kế phải rõ nét, có độ phân giải cao. - Không sử dụng hình ảnh hay vector có quá nhiều màu sắc, hiệu ứng. - Sử dụng hình ảnh phù hợp với nội dung, ảnh chụp cần có sự sắp đặt, không được lộn xộn. Có khoảng nghỉ trong bố cục
Sử dụng nhiều hiệu ứng Không cùng style
Lưu ý chung Cân bằng giữa nội dung và hình ảnh, ít nhất 60% văn bản đến 40% hình ảnh. Sử dụng nhiều không gian màu trắng cho một cái nhìn sạch sẽ, gọn gàng tách biệt trực quan các yếu tố thiết kế nhưng vẫn đảm bảo yếu tố thương hiệu trong ấn phẩm Ưu tiên phân cấp nội dung, với nội dung quan trọng nhất được nêu đầu tiên/trên màn hình đầu tiên. Tagline, sub-tagline và content cần được phân cấp rõ ràng. Sử dụng hình ảnh đồ họa, element, icon dạng flat. Không sử dụng quá nhiều màu sắc trong thiết kế
Không sử dụng nhiều font trong thiết kế Không sử dụng nền tối, có hoa văn hoặc họa tiết cho nội dung thiết kế Không thiết kế bố cục quá rối, bố cục thiết kế luôn clean&clear Không sử dụng một khối văn bản dài ở bất cứ đâu trong email. Thay vào đó, chia nội dung thành các phần ngắn gọn.
Resource Logo - Guildelines - Tài nguyên https://pwht-my.sharepoint.com/:f:/g/personal/mkt_icheck_office365vn_online/EpPN4DG8BB ZBmylM2dA26vkBqZ8hJmAhNE87Vxr-B1eOAw?e=gYKGQf
Nguồn ảnh, vector, icon: https://www.freepik.com/ https://vn.pikbest.com/ https://pixabay.com/vi/ https://unsplash.com/ https://www.flaticon.com/home https://icons8.com/
Font: https://www.myfonts.com/ https://www.dafont.com/ https://fonts.google.com/
Phối màu: https://uigradients.com/ https://colorhunt.co/ https://color.adobe.com/create
Tham khảo: https://www.behance.net/https://colorhunt.co/ https://www.pinterest.com/ https://dribbble.com/ https://huaban.com/
