nghiadt.

0%
Initializing environment...

DEEUI

DeeUI Hệ thống thiết kế Examdee

Hệ thống thiết kế thống nhất được xây dựng để tối ưu hóa quy trình phát triển sản phẩm, đảm bảo tính nhất quán và mở rộng quy mô trên toàn bộ hệ sinh thái Examdee.

Khám phá DeeUIdesign.examdee.ai-vietnam.vn

Tổng quan

DeeUI là hệ thống thiết kế cốt lõi được phát triển cho Examdee — một nền tảng giáo dục hiện đại.

Mục tiêu là tạo ra một hệ thống linh hoạt, có khả năng mở rộng để hỗ trợ nhiều tính năng sản phẩm khác nhau, đồng thời duy trì tính nhất quán về mặt hình ảnh và nâng cao hiệu quả phát triển.

Giảm thiểu sự không nhất quán
Tối ưu bàn giao Thiết kế - Dev
Đẩy nhanh tốc độ phát triển
Hỗ trợ mở rộng tương lai
Hệ Thống Màu
Hệ Thống Chữ
Aa
Tiêu đề 1Nunito / Bold / 40px
Một tách trà nóng cho ngày làm việc năng động.Văn bản / Medium / 16px
Khung & Khoảng Cách
xl12px
2xl16px
full9999px
space-20016px
space-30024px
space-40032px
Vấn đề

Giải quyết những bất cập của sự tăng trưởng.

UI không nhất quán

Mỗi tính năng được phát triển riêng lẻ, dẫn đến trải nghiệm người dùng bị phân mảnh.

Thiết kế lặp đi lặp lại

Thiết kế phải tạo lại các thành phần giống nhau nhiều lần cho các module khác nhau.

Thiếu thành phần chuẩn hóa

Những thay đổi nhỏ trong button và input tạo ra nợ kỹ thuật và lỗi thiết kế.

Khó khăn khi mở rộng

Việc ra mắt tính năng mới mất nhiều thời gian hơn do thiếu cơ sở hạ tầng thiết kế.

Mục tiêu

Xác định
tầm nhìn
cho DeeUI.

Ngôn ngữ thiết kế thống nhất

Thiết lập một nguồn dữ liệu duy nhất cho tất cả các thành phần hình ảnh và chức năng.

Thư viện thành phần tái sử dụng

Xây dựng bộ UI block mạnh mẽ, dễ dàng tích hợp vào bất kỳ tính năng nào.

Cộng tác liền mạch

Xóa bỏ khoảng cách giữa thiết kế và dev thông qua các token và tài liệu dùng chung.

Khả năng mở rộng vô hạn

Đảm bảo hệ thống có thể phát triển song song với sự phức tạp của sản phẩm.

Nền tảng

Nền tảng hệ thống

Nền tảng (Foundation) định nghĩa các yếu tố cốt lõi của DeeUI, giúp đảm bảo tính nhất quán và linh hoạt trong toàn bộ sản phẩm.

Hệ thống Màu sắc

Hệ thống Màu sắc

Hệ thống màu sắc đồng nhất và bảng màu đa dạng cho giao diện.

Kiểu chữ & Phân cấp

Kiểu chữ & Phân cấp

Hệ thống kiểu chữ, kích thước và phân cấp nội dung khoa học.

Khoảng cách & Bo góc

Khoảng cách & Bo góc

Quy chuẩn khoảng cách và bo góc thống nhất, tối ưu trải nghiệm.

Hệ thống Biểu tượng

Hệ thống Biểu tượng

Thư viện biểu tượng đồng nhất, hiện đại và đa dạng kích thước.

Độ sâu & Đổ bóng

Độ sâu & Đổ bóng

Hệ thống đổ bóng và phân cấp độ sâu cho các lớp sản phẩm.

Hệ thống Lưới

Hệ thống Lưới

Hệ thống lưới chuẩn 8px giúp tối ưu bố cục và căn chỉnh tỉ lệ.

Tokens & Variables

Design Tokens & Figma Variables

DeeUI sử dụng Design Tokens kết hợp với Figma Variables để xây dựng một hệ thống thiết kế có cấu trúc rõ ràng, dễ mở rộng và đồng bộ chặt chẽ với code.

Kiểu chữ
Màu sắc
Khoảng cách
Tokens JSON
Đổ bóng
Biểu tượng
Hệ lưới

Figma Variables

Figma Variables

Ví dụ về cách DeeUI sử dụng Figma Variables để xây dựng hệ thống thiết kế có cấu trúc và dễ mở rộng.

Bộ sưu tập Variable
primitives
colors
blue
gray
red
green
amber
purple
spacing
radius
semantic
components
typography
Bảng Variable
Bộ sưu tập: Primitives / Colors / Blue
TênLoạiGiá trị
50
Color
#EEF8FF
100
Color
#DAEEFF
200
Color
#BDE3FF
300
Color
#90D2FF
400
Color
#4DB2FF
500
Color
#3599FC
600
Color
#1F7AF1
700
Color
#1763DE
800
Color
#1951B4
900
Color
#1A468E
950
Color
#152C56

11 variables visible in this collection

Giá trị mang lại

Việc xây dựng hệ thống Variables trong DeeUI không chỉ giúp quản lý giao diện hiệu quả hơn, mà còn đóng vai trò như nền tảng để mở rộng và duy trì sản phẩm trong dài hạn.

Tổ chức hệ thống

Biến những giá trị rời rạc thành một hệ thống có tổ chức và dễ quản lý hơn.

01

Tối ưu hóa quy trình

Giảm sự phụ thuộc vào chỉnh sửa thủ công, giúp tiết kiệm thời gian đáng kể.

02

Tính nhất quán tối đa

Đảm bảo tính nhất quán trên toàn bộ sản phẩm từ thiết kế đến khi triển khai.

03

Phối hợp nhịp nhàng

Tăng hiệu quả phối hợp giữa Design và Development thông qua ngôn ngữ chung.

04

Bàn giao Lập trình viên

Design Tokens trong hệ thống<Frontend>

Hệ thống Design Tokens của DeeUI được đồng bộ sang code thông qua file tokens.json, đóng vai trò là nguồn dữ liệu trung tâm giữa design và development.

Nguồn chân lý duy nhất (Single Source of Truth)

Mọi thay đổi từ Figma được tự động cập nhật vào code.

Độc lập nền tảng (Platform Independent)

Định dạng JSON cho phép sử dụng trên nhiều nền tảng Web, iOS, Android.

An toàn kiểu dữ liệu (Type Safe)

Tự động tạo ra các định nghĩa TypeScript cho toàn bộ hệ thống token.

tokens.json
1{
2  "color": {
3    "brand": {
4      "primary": {
5        "default": { "value": "{color.blue.500}" },
6        "hover": { "value": "{color.blue.600}" }
7      }
8    }
9  },
10  "spacing": {
11    "md": { "value": "16px" },
12    "lg": { "value": "24px" }
13  },
14  "radius": {
15    "md": { "value": "12px" }
16  }
17}

Giá trị mang lại

Hệ thống Design Tokens không chỉ là về các con số, mà là về việc xây dựng một quy trình phát triển sản phẩm hiệu quả, chính xác và bền vững.

Đồng bộ Design – Code

Giao diện trên production luôn khớp với thiết kế.

01

Type-safe với TypeScript

Giảm lỗi khi sử dụng token trong quá trình phát triển.

02

Tăng tốc độ phát triển

Tái sử dụng token, hạn chế hard-code.

03

Dễ maintain & mở rộng

Update một nơi, áp dụng toàn hệ thống.

04

Nền tảng Trực quan

Hệ thống màu sắc

Hệ thống màu sắc của DeeUI được xây dựng dựa trên sự cân bằng giữathương hiệu vàtrải nghiệm người dùng, đảm bảo độ tương phản và khả năng tiếp cận tốt nhất.

Primary Blue

Màu sắc chủ đạo mang tính biểu tượng của hệ thống, được tinh chỉnh để đạt độ cân bằng tuyệt đối trên màn hình kỹ thuật số.

Màu Cốt Lõi500
#3599FC
PrimaryĐạt Chuẩn WCAG
50
#EEF8FF
100
#DAEEFF
200
#BDE3FF
300
#90D2FF
400
#4DB2FF
600
#1F7AF1
700
#1763DE
800
#1951B4
900
#1A468E
950
#152C56
N

Neutral Gray

Bảng màu trung tính làm nền tảng cho mọi cấu trúc giao diện, phân cấp nội dung và điều hướng.

0
#FFFFFF
50
#F6F7F9
100
#ECEEF2
200
#D4DAE3
300
#AFBACA
400
#8495AC
500
#8495AC
600
#506079
700
#414E63
800
#374151
900
#333B47
950
#22272F

Màu sắc Ngữ nghĩa (Semantic)

Hệ màu đại diện cho trạng thái hệ thống và phản hồi người dùng.

Thành côngGreen Series
50#F2FBF3
100#E1F7E3
200#C5EDC8
500#39A244
700#266F2E
900#1E4924
Cảnh báoAmber Series
50#FDF8ED
100#F8EBCD
200#EFD598
500#DA8526
700#A0491D
900#6C301B
Nguy hiểmRed Series
50#FEF4F2
100#FFE6E1
200#FFD2C9
500#F35C3F
700#BD3318
900#812B1B
Thông tinPurple Series
50#FCF5FF
100#F7E8FF
200#F0D5FF
500#C255F7
700#9922CE
900#691C87

Hệ thống Typography

Hệ thống Typography

DeeUI sử dụng hệ thống typography được thiết kế dựa trên từng nhóm người dùng, nhằm tối ưu trải nghiệm đọc và cảm nhận giao diện.

Teacher

Giao diện Giáo viên

Inter

Inter mang lại cảm giác chuyên nghiệp, chính xác và tối ưu cho các tác vụ quản lý dữ liệu phức tạp.
Bold / 48pxProfessional
Medium / 32pxAccurate & Clear
Regular / 20pxDeeUI provides a specialized experience for educators.
Student

Giao diện Học sinh

Nunito

Nunito với các đường bo góc mềm mại mang lại cảm giác thân thiện, nhẹ nhàng và giảm bớt áp lực trong học tập.
Bold / 48pxCreative
Medium / 32pxFriendly & Warm
Regular / 20pxLearning is an exciting journey with DeeUI.

Hệ thống phân cấp Typography

Cả hai hệ thống đều chia sẻ chung một bộ thông số kỹ thuật (Hierarchy specs) để đảm bảo tính đồng bộ, trong khi sự khác biệt về font-family giúp định hình cảm xúc phù hợp với mỗi nhóm người dùng.

Bảng Phân cấp

Hệ Giáo viên (Inter)

Heading 1

Cỡ chữ:64px
Chiều cao dòng:76px
Khoảng cách chữ:0%
Giáo viên / Đậm

Typography

Giáo viên / Trung bình

Typography

Giáo viên / Thường

Typography

Heading 2

Cỡ chữ:48px
Chiều cao dòng:56px
Khoảng cách chữ:0%
Giáo viên / Đậm

Typography

Giáo viên / Trung bình

Typography

Giáo viên / Thường

Typography

Heading 3

Cỡ chữ:40px
Chiều cao dòng:48px
Khoảng cách chữ:0%

Heading 4

Cỡ chữ:32px
Chiều cao dòng:40px
Khoảng cách chữ:0%

Heading 5

Cỡ chữ:24px
Chiều cao dòng:32px
Khoảng cách chữ:0%

Body lg

Cỡ chữ:20px
Chiều cao dòng:28px
Khoảng cách chữ:0%

Body md

Cỡ chữ:16px
Chiều cao dòng:24px
Khoảng cách chữ:0%

Body sm

Cỡ chữ:14px
Chiều cao dòng:20px
Khoảng cách chữ:0%

Footnote

Cỡ chữ:12px
Chiều cao dòng:16px
Khoảng cách chữ:0%
Bảng Phân cấp

Hệ Học sinh (Nunito)

Heading 1

Cỡ chữ:64px
Chiều cao dòng:76px
Khoảng cách chữ:0%
Học sinh / Đậm

Typography

Học sinh / Trung bình

Typography

Học sinh / Thường

Typography

Heading 2

Cỡ chữ:48px
Chiều cao dòng:56px
Khoảng cách chữ:0%
Học sinh / Đậm

Typography

Học sinh / Trung bình

Typography

Học sinh / Thường

Typography

Heading 3

Cỡ chữ:40px
Chiều cao dòng:48px
Khoảng cách chữ:0%

Heading 4

Cỡ chữ:32px
Chiều cao dòng:40px
Khoảng cách chữ:0%

Heading 5

Cỡ chữ:24px
Chiều cao dòng:32px
Khoảng cách chữ:0%

Body lg

Cỡ chữ:20px
Chiều cao dòng:28px
Khoảng cách chữ:0%

Body md

Cỡ chữ:16px
Chiều cao dòng:24px
Khoảng cách chữ:0%

Body sm

Cỡ chữ:14px
Chiều cao dòng:20px
Khoảng cách chữ:0%

Footnote

Cỡ chữ:12px
Chiều cao dòng:16px
Khoảng cách chữ:0%

Nguyên mẫu Bố cục

Spacing & Radius

DeeUI định nghĩa hệ thống spacing và border radius nhằm đảm bảo sự nhất quán trong layout, khoảng cách và hình dạng trên toàn bộ giao diện.

Hệ thống Khoảng Cách

Hệ thống spacing chuẩn giúp việc thiết kế layout trở nên khoa học và đồng bộ. Các giá trị được tối ưu hóa cho hiển thị kỹ thuật số.

space-00 px
space-0252 px
space-0504 px
space-0756 px
space-1008 px
space-15012 px
space-20016 px
space-25020 px
space-30024 px
space-40032 px
space-50040 px
space-60048 px
space-80064 px
space-100080 px

Khám phá Bo Góc Tương Tác

Khám phá cách các chuẩn bo góc thay đổi diện mạo của thành phần. Click vào danh sách bên phải để áp dụng ngay lập tức.

lg
Bo Góc8px

Ngôn ngữ Trực quan

Icon System

DeeUI sử dụng thư viện Phosphor Icons làm nền tảng cho hệ thống icon, đảm bảo tính nhất quán, linh hoạt và dễ tích hợp trong quá trình phát triển.

Phosphor Icons

Tuỳ biến từ Thin tinh tế đến Duotone nổi bật

phù hợp mọi ngữ cảnh thiết kế.

Kiến trúc Bố cục

Hệ thống Grid

DeeUI sử dụng hệ thống grid để tổ chức layout một cách nhất quán, giúp các thành phần UI được căn chỉnh chính xác và dễ mở rộng.

Chế độ Thiết bịMáy tính
Số cột12
Lề (Margin)100px
Máng (Gutter)24px
Độ rộng cột0px
100%
1
2
3
4
5
6
7
8
9
10
11
12

Hệ thống Lưới Phản hồi Tương tác

MODULAR
REGISTRY
DESIGN_TOKENS: ATOMICCOORDINATES: 40.7128° N

Hệ thống Thành phần

Hệ thống Components

DeeUI cung cấp một hệ thống component được chuẩn hoá, giúp xây dựng giao diện nhanh chóng, nhất quán và dễ mở rộng.

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Nút bấm

Nút bấm (Buttons)

Được xây dựng với màu sắc ngữ nghĩa và các trạng thái nhất quán để làm rõ thông tin.

Gợi ý nhập liệu
Văn bản hướng dẫn

Trường nhập liệu (Inputs)

Phân cấp rõ ràng: nhãn, trường nhập, văn bản hướng dẫn và trạng thái xác thực.

Thẻ
1

Thẻ phân loại (Chips)

Các thành phần nhỏ gọn được sử dụng để gắn thẻ, lọc hoặc lựa chọn.

HỌC SINH

Ảnh đại diện (Avatars)

Nhận diện trực quan hỗ trợ hiển thị trạng thái người dùng và phân nhóm.

Nhãn

Đường dẫn (Breadcrumbs)

Giúp người dùng hiểu được vị trí của họ trong cấu trúc trang.

Huy hiệu

Huy hiệu (Badges)

Làm nổi bật trạng thái hoặc số lượng bằng các token màu sắc ngữ nghĩa.

1
2
3
100

Phân trang (Pagination)

Cho phép điều hướng qua các tập hợp nội dung hoặc trang lớn.

Hộp chọn & Nút chọn

Các điều khiển lựa chọn đơn giản với trạng thái kích hoạt và tiêu điểm rõ ràng.

Chú giải cơ bản
Chú giải đầy đủ

Chú giải (Tooltips)

Tiết lộ ngữ cảnh bổ sung mà không làm gián đoạn dòng trải nghiệm.

...và nhiều thành phần khác

Core Components

Button Components

Button trong DeeUI được thiết kế theo từng nhóm người dùng, nhằm đảm bảo trải nghiệm phù hợp với ngữ cảnh sử dụng và hành vi tương tác.

Student Button
Student Button
Teacher Button
Teacher Button

1. StudentButton

Code Implementation

Smart Variations
Size
States
Variant
Icons
Label

Figma Properties

StudentButton
Properties+
sizemd
stateDefault
variantprimary
fullWidthFalse
hasLeadingIconFalse
hasTrailingIconFalse
LabelBắt đầu học

2. TeacherButton

Code Implementation

Smart Variations
Size
States
Variant
Icons
Label

Figma Properties

TeacherButton
Properties+
sizemd
stateDefault
variantprimary
fullWidthFalse
hasLeadingIconFalse
hasTrailingIconFalse
LabelGiao bài ngay

Core Components

Input Components

Input trong DeeUI được tối ưu hóa cho việc nhập liệu chính xác, hỗ trợ đầy đủ các trạng thái và thành phần bổ trợ để tối ưu trải nghiệm người dùng.

1. StudentInput

Code Implementation

Smart Variations
Size
States
Icons
Content
Label
Placeholder
Helper Text

Figma Properties

StudentInput
Properties+
sizemd
stateDefault
labelHọ và tên
placeholderNhập tên của bạn...
hasLeadingIconTrue
leadingIconUser
hasTrailingIconFalse
helperTextDùng tên thật để giáo viên dễ nhận biết

2. TeacherInput

Code Implementation

Smart Variations
Size
States
Icons
Content
Label
Placeholder
Helper Text

Figma Properties

TeacherInput
Properties+
sizemd
stateDefault
labelTiêu đề bài kiểm tra
placeholderVí dụ: Kiểm tra 15 phút - Chương 1
hasLeadingIconTrue
leadingIconSearch
hasTrailingIconFalse
helperText—

Core Components

Selection Components

Checkbox và Radio Button trong DeeUI được tối ưu hóa cho tương tác nhóm, hỗ trợ đầy đủ các trạng thái và nhãn linh hoạt cho cả Học sinh (phông Nunito) và Giáo viên (phông Inter).

1. Checkbox

Code Implementation

Smart Variations
Size
Typography
States
Custom Icon
Content
Label Text

Figma Properties

Checkbox
Properties+
sizemd
labelTypestudent
stateUnchecked
labelGhi nhớ đăng nhập
customIconFalse

2. Radio Button

Code Implementation

Smart Variations
Size
Typography
States
Custom Icon
Content
Label Text

Figma Properties

Radio Button
Properties+
sizemd
labelTypestudent
stateUnchecked
labelNam (Lựa chọn giới tính)
customIconFalse

More Work

Other projects.

Examdee

Examdee

2025 — 2026

Gamified learning platform for 120,000+ students.

ProductUX/UI DesignDesign System
Storecake

Storecake

Mar 2023 — 2025

Create and manage sales websites.

Web DesignProduct
Webcake Rebranding

Webcake Rebranding

2024 — 2025

A modern, high-converting visual identity and interface redesign for Pancake's leading landing page builder.

BrandingWeb DesignUI/UX Design