Brand Guidelines v2

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/