III.

Hoàn thiện wireframe và xây dựng guideline system

Style Guide
Template
● Logos
● Fonts
● Colors
● Buttons
● Icons
III. Hoàn thiện wireframe và xây dựng guideline system

● A style guide

là một nguồn tham khảo nơi bạn thu thập và trình bày tất cả các quyết định thiết kế cho

trang web của mình. Điều này bao gồm bảng màu, kiểu chữ, khoảng cách, biểu tượng,

hình ảnh và tất cả ngôn ngữ hình ảnh được sử dụng trên trang web của bạn.
III. Hoàn thiện wireframe và xây dựng guideline system

● Style guide vs Design System

Style guide hiểu đơn giản là hướng dẫn cấp thấp khởi đầu của dự án thiết kế web nhằm

xác định hình ảnh thương hiệu và chỉ chủ yếu vào việc thể hiện hoặc trưng bày các

thành phần quan trọng.

Design System là hệ thống thiết kế mà chúng ta sẽ xác định những quy tắc về các thành

phần (element) và tất cả các yếu tố của website bao gồm các các component states

(trạng thái) của các thành phần đó.

III. Hoàn thiện wireframe và xây dựng guideline system

● Bước 1: Nghiên cứu thương hiệu của dự án

Trước tiên, sẽ cần tìm hiểu về thương hiệu và đối

tượng mục tiêu của mình. Xem xét việc tạo một

Moodboard như một điểm khởi đầu. Mục tiêu là xem

xét các giá trị chính của dự án và dịch chúng sang

ngôn ngữ hình ảnh, thu thập bất kỳ nội dung và

thành phần nào xác định giá trị đó trong suốt quá

trình.
 III. Hoàn thiện wireframe và xây dựng guideline system

● Bước 2: Quy chuẩn logo

Bước tiếp theo là xác định các quy tắc để sử dụng logo của dự án trong tất cả các biến thể của nó. Có thể bao gồm

lưới, phông chữ, màu sắc, khoảng cách và vị trí chính xác của biểu trưng của bạn, sự xuất hiện trên các nền màu khác

khác nhau, v.v.

 III. Hoàn thiện wireframe và xây dựng guideline system

● Bước 3: Xác định bảng màu của bạn (color

guide)

Màu sắc đóng một phần quan trọng trong cách trang

web và thương hiệu của bạn được cảm nhận và ghi

nhớ. Do đó, bạn sẽ muốn đảm bảo xác định các

màu cơ bản thiết yếu của mình, thường là tối đa ba

màu.

● Để hoàn thành bảng màu của mình, chúng ta sẽ cần

1. Primary color

2. Secondary color

3. Light and dark variants

 III. Hoàn thiện wireframe và xây dựng guideline system

● Bước 3: Xác định bảng màu của bạn (color

guide)

Màu sắc đóng một phần quan trọng trong cách trang

web và thương hiệu của bạn được cảm nhận và ghi

nhớ. Do đó, bạn sẽ muốn đảm bảo xác định các

màu cơ bản thiết yếu của mình, thường là tối đa ba

màu.

● Để hoàn thành bảng màu của mình, chúng ta sẽ cần

1. Primary color

2. Secondary color

3. Light and dark variants

IV. Màu sắc trong thiết kế UI/UX
Use color variants (các biến thể của màu)
Những màu bạn nên dùng để có chiều sâu hơn là những màu được gọi là biến thể. Bạn có thể thay đổi màu sắc
bằng tay hoặc sử dụng một công cụ như bảng màu thiết kế material design .

Lưu ý: Chữ “P” trên hình tròn cho biết liệu màu văn bản có dễ đọc phía trước nền hay không. Màu trắng
cho biết khi văn bản màu trắng có thể đọc được trên màu nền. Màu đen cho biết khi văn bản màu đen có
thể đọc được trên màu nền
IV. Màu sắc trong thiết kế UI/UX
Tool phối màu
Muzli Colors — Create Beautiful Color Schemes that works Colormind — An AI powered color picker.

Stylify — Online styleguide generator Canva — Extract color profiles from photos.

Color Oracle — Color blindness simulator and checker.

SC5 — Another awesome web-based styleguide generator

uiGradients — Gradient generator.

Paletton — An advanced color palette creator.
ColorZilla — Robust gradient generator for web content.
Adobe Color CC — Another robust color palette
generator. ColorSnapper — Color selector for any digital screen.
IV. Màu sắc trong thiết kế UI/UX
Tương phản hình nền
Tool giúp kiểm tra tương phản màu trên trang

https://colourcontrast.cc/ffe66b/222222
III. Hoàn thiện wireframe và xây dựng guideline system
 III. Hoàn thiện wireframe và xây dựng guideline system

● Bước 4: Create Rules for Typography

Cũng giống như màu sắc, kiểu chữ là một phần thiết

yếu của thiết kế web. Để đảm bảo của bạn hấp dẫn

và nhất quán trên toàn bộ trang web của mình, bạn

cần tạo hệ thống phân cấp kiểu chữ trong hướng

dẫn kiểu của mình.

● Trước tiên, bạn sẽ cần bao gồm các họ phông chữ

và kích thước cho các tiêu đề chính của mình,

H1-H6:
 III. Hoàn thiện wireframe và xây dựng guideline system

● Bước 4: Create Rules for Typography

Ngoài tiêu đề, bạn sẽ muốn bao gồm các kiểu cho

văn bản (nội dung) như form, alert messages, v.v.

Các kiểu này sẽ bao gồm các họ phông chữ - là các

bộ phông chữ như Roboto, Lato hoặc Montserrat -

và các kích cỡ.

● Kích thước phông chữ phải được viết bằng pixel

(px) và vẫn nhất quán giữa các phần tử. Bạn cũng

sẽ muốn giữ cho các nhà phát triển của mình hài

lòng bằng cách sử dụng các kích thước tăng dần

như 14px, 16px, 18px hoặc 20px và tránh các kích

thước trung gian như 15px.

III. Hoàn thiện wireframe và xây dựng guideline system
 III. Hoàn thiện wireframe và xây dựng guideline system

● Bước 5: Set Layout and Spacing Rules

Các phần quan trọng khác của hướng dẫn kiểu là

quy tắc bố cục, lưới và khoảng cách, hầu hết các

quy tắc này có thể được triển khai bằng cách sử

dụng HTML và CSS. Những điều này sẽ xác định

được cấu trúc các trang web. Để bắt đầu, hãy tạo

một số mẫu cơ bản cho các bố cục chính của mình.

 III. Hoàn thiện wireframe và xây dựng guideline system

● Bước 6: Consider Icon Style

Iconography là một lựa chọn phong cách quan

trọng khác cho trang web và xác định một số quy

tắc cơ bản để sử dụng nó. Điều này bao gồm các

quyết định như liệu bạn có đang sử dụng thư viện

biểu tượng tạo sẵn chẳng hạn như Font Awesome

hay các biểu tượng tùy chỉnh của riêng bạn, cũng

như phong cách của các biểu tượng - màu so với

đơn sắc, tô màu so với đường viền, v.v.

https://material.io/design/iconograp
hy/system-icons.html#design-princi
ples
 III. Hoàn thiện wireframe và xây dựng guideline system

● Bước 6: Consider Icon Style

Giống như với phông chữ, cũng sẽ muốn bao gồm

các kích thước icon chính sẽ được sử dụng. Hãy

nhớ rằng với các icon tùy chỉnh, có thể cần phải

bao gồm các lưới biểu tượng hoặc quy tắc nhất

quán về cách tạo đồ họa.

III. Hoàn thiện wireframe và xây dựng guideline system

https://material.io/design/iconograp
hy/system-icons.html#grid-and-keyli
ne-shapes
 III. Hoàn thiện wireframe và xây dựng guideline system

● Bước 7: Define Guidelines for Illustrations and

Imagery

Để thêm một số tính độc đáo cho trang web và

thương hiệu, Có thể tạo các hình minh họa tùy

chỉnh. Điều này có thể mang lại một diện mạo và

tiếng nói riêng cho trang web. Sẽ đảm bảo bao

gồm các tham chiếu về kiểu dáng và màu sắc cho

loại hình minh họa bạn sử dụng.

 III. Hoàn thiện wireframe và xây dựng guideline system

● Bước 7: Define Guidelines for Illustrations and Imagery

Có thể cần phải tạo một số quy tắc và nguyên tắc nghiêm ngặt về loại hình ảnh sẽ sử dụng trên trang

web của bạn. Ví dụ: Có thể bao gồm một số điều nên làm và không nên để kết hợp ảnh có sẵn.

● Ngoài ra, để đảm bảo hình ảnh trên trang web của bạn nhất quán về mặt trực quan, có thể bao gồm các

tùy chọn chỉnh sửa ảnh cho hình nền, bộ lọc, độ sáng, độ tương phản, v.v.
 III. Hoàn thiện wireframe và xây dựng guideline system
● Bước 7: Define Guidelines for Illustrations and Imagery
 III. Hoàn thiện wireframe và xây dựng guideline system
● Bước 7: Define Guidelines for Illustrations and Imagery
 III. Hoàn thiện wireframe và xây dựng guideline system
● Bước 7: Define Guidelines for Illustrations and Imagery
 III. Hoàn thiện wireframe và xây dựng guideline system
● Bước 8: UI Component
 III. Hoàn thiện wireframe và xây dựng guideline system
● Bước 8: UI Component

● Khi các định nghĩa cơ bản về phong cách của bạn đã có, đã đến lúc giới thiệu các thành phần chính của

trang web vào design guideline. Hình dạng , kích thước , trạng thái các button , form fields, form

elements, navigation menus, notifications and alerts, cards, modals, và nhiều hơn nữa.
 III. Hoàn thiện wireframe và xây dựng guideline system
● Bước 8: UI Component
 III. Hoàn thiện wireframe và xây dựng guideline system
● Bước 8: UI Component
 III. Hoàn thiện wireframe và xây dựng guideline system
● Bước 8: UI Component
 III. Hoàn thiện wireframe và xây dựng guideline system
● Bước 8: UI Component
III. Hoàn thiện wireframe và xây dựng guideline system
III. Hoàn thiện wireframe và xây dựng guideline system
V. Components với button

Main component (thành phần chính) vs

instance (phiên bản)
 Nếu bạn thay đổi bất kỳ giá trị nào khác
V. Components với button chưa được instance ghi đè, hãy lưu ý rằng
các thay đổi vẫn được chuyển từ main
component sang các instance của nó.

Biết cách component / instance hoạt động

sẽ giúp bạn rất nhiều khi nói đến UI / UX, vì
bạn có thể giữ cho các nút và giao diện
phần tử của mình nhất quán trên bảng.

Trên thực tế, để cho một UI / UX có thể vận

hành, bạn nên sử dụng một tập hợp các
style nhất quán ngay từ đầu, thay vì tự tạo
các phần tử mới. Quy trình tạo bộ quy tắc
cho các phần tử ngay từ đầu, sau đó thiết
kế giao diện người dùng dựa trên bộ quy
tắc này được gọi là Atomic Design.

Bằng cách tận dụng các thành phần nhiều

lớp, ghi đè và các kiểu thay thế, bạn có thể
nhanh chóng tạo nhiều biến thể từ một
phần tử bắt đầu chung.