ColorME Design System

Design System

Trang này sẽ giúp cho mọi người có được cái nhìn tổng quan nhất về thiết kế LadinPage cho ColorME

Idea

Design Concept

Ý tưởng chung

Hệ thống thiết kế LandingPage mới của ColorME tập trung vào các từ khóa

Design System

Bố cục & Khoảng trắng

Ví dụ về bố cục 6+6

Ví dụ về bố cục 3+3+3+3

Ví dụ về bố cục 4+4+4

Layout & Space

Ngôn ngữ thiết kế mới của ColorME yêu cầu cao tính đơn giản, vì vậy bố cục cũng sẽ được sử dụng với các cấu trúc siêu đơn giản

1. Chia lưới theo ước số của 12

Lưới chuẩn theo hệ thống lưới Bootstrap, giao diện mỗi Section có thể chia theo các bố cục như

12
6+6
4+4+4
3+3+3+3

Việc chia lưới này sẽ giúp cho sự Responsive trên di động trở nên dễ dàng hơn, cũng như giúp Developer dễ dàng hiện thực hóa ý tưởng của Designer hơn

2. Sử dụng không gian trắng khá nhiều

Để tạo độ thoáng cho mắt của người đọc, cũng như thời gian để người đọc trải nghiệm mỗi Section 1 cách tốt nhất, Design Language mới của ColorME sẽ ưu tiên sử dụng khá nhiều không gian trắng một cách có chủ đích để cân bằng thị giác cho người xem và tạo được nhịp điệu cho thiết kế.

Design System

Typography

Big Title - 60px

Subtitle - 30px - Bold

Big Content - 20px - Normal

Small Content - 14px - Normal

Đây là phần nội dung có khoảng cách giữa các dòng là mặc định (auto - 100% - 1.0) như bạn có thể thấy, chúng khá sát nhau và không được thoáng lắm.

Đây là phần nội dung có khoảng cách giữa các dòng là 180% (1.8). Đối với những nội dung có số lượng từ và số lượng dòng không quá nhiều như LandingPage, khoảng cách này là dễ sử dụng và khá dễ đọc.

Đây là phần nội dung có khoảng cách giữa các dòng là 220% (2.2). Khi khoảng cách dòng trở nên quá lớn, thiết kế cũng sẽ dễ trở nên rời rạc, vì vậy không nên lạm dụng quá về khoảng cách dòng.

Quy tắc sử dụng text

ColorME ưu tiên sử dụng những Font có độ tương thích lớn, vậy nên các font sẽ tạm thời được giới hạn bởi những Font có sẵn trên Google Fonts.

2. Màu của chữ

Phần lớn chữ sẽ chỉ nằm trong tone đen, trắng và xám

Chỉ trong trường hợp dùng chữ để nhấn với 1 tỉ lệ rất nhỏ thì chữ mới được phép có màu

Đối với nền có màu, chúng ta đơn giản sẽ sử dụng chữ trắng

Đối với nền trắng, chúng ta sẽ dùng chữ màu đen đối với tiêu đề lớn và tiêu đề nhỏ, chữ màu xám đậm đối với nội dung

4. Leading (Lineheight)

Đối với các thành phần nội dung, Lineheight của các dòng phải lớn hơn 160% và dưới 200% để tạo được độ thoáng nhất định cho nội dung

1. Typeface

Để đem lại được trải nghiệm đọc tốt nhất cho người dùng, ColorME chỉ sử dụng duy nhất 1 font chữ đối với LandingPage là Be Vietnam.

Be Vietnam được xây dựng bởi người Việt và được Google Fonts hỗ trợ

3. Kích thước chữ

Content - 16px - Normal

Design System

Color

Màu sắc

Các LandingPage của ColorME ưu tiên sử dụng màu sắc đơn giản và có sắc độ lớn, kể cả Gradient cũng ưu tiên sử dụng những bộ Gradient được tạo ra bởi các màu có Hue lớn, Saturation và Brightness nhỏ

1. Màu nền Section

Các Section ưu tiên sử dụng màu trắng để làm nền, tuyệt đối không sử dụng các màu sắc tối như màu đen để làm nền. Kể cả nó có đem lại sự ấn tượng lớn những sẽ không đem lại hiệu quả bán hàng cao.

2. Màu của chữ

Phần lớn chữ sẽ chỉ nằm trong tone đen, trắng và xám

Chỉ trong trường hợp dùng chữ để nhấn với 1 tỉ lệ rất nhỏ thì chữ mới được phép có màu

Đối với nền có màu, chúng ta đơn giản sẽ sử dụng chữ trắng

Đối với nền trắng, chúng ta sẽ dùng chữ màu đen đối với tiêu đề lớn và tiêu đề nhỏ, chữ màu xám đậm đối với nội dung

3. Màu của các hình khối

Bạn có thể sử dụng các màu sắc đơn trong thư viện có sẵn sau để làm nền cho các thiết kế của mình

Hoặc bạn có thể tạo ra những Gradient Linear, Gradient Mesh để tạo ra được những trải nghiệm màu tốt nhất cho người xem.

Design System

Shape

Hình khối

ColorME sử dụng hình khối cơ bản (Geometric Shape) cho những thiết kế trong LandingPage, hạn chế sử dụng những hình Blob hoặc Natural Shape.

1. Geometric Shape

Việc sử dụng Geometric Shape dễ dàng khiến cho thiết kế trở nên gọn gàng, đơn giản và hiện đại.

Tuy nhiên Chúng ta sẽ không sử dụng những hình đa giác quá phức tạp.

Các lựa chọn hàng đầu sẽ luôn là tròn, vuông, chữ nhật, hình thang, hình thoi, hình bình hành (dưới 4 đỉnh)

2. Corner Radius

Để tạo được tính mềm mại cho thiết kế, chúng ta sẽ bo góc các hình của mình.

Độ bo góc được khuyến khích từ 20px-30px

Design System

Texture & Effects

Chất liệu và hiệu ứng

Chúng ta ưu tiên những chất liệu tạo cảm giác thân thiện cho người xem, sử dụng Effects có chủ đích (tạo độ sâu hoặc độ chuyển động cho thiết kế)

1. Texture

Các LandingPage của ColorME ưu tiên sử dụng các hình khối, icon 3D có chất liệu là clay (đất sét). Chất liệu này dễ dàng hòa vào thiết kế tổng thể, tạo được sự nhẹ nhàng, thân thiện và vẫn tôn lên các nội dung khác.

Trong những trường hợp không có sẵn các Mockup với chất liệu Clay, các Mockup có chất liệu tả thật vẫn có thể sử dụng được.

2. Shadow

Phần bóng của các thiết kế được sử dụng để phân tách các thành phần thiết kế hoặc làm nổi bật 1 thành phần thiết kế.

Shadow mà ColorME sử dụng sẽ là Shadow chính diện (x:0 và y:0) Có độ lan từ 20px-30px. Màu đen của bóng có độ trong suốt dưới 15%.