1. Design system là gì?
Design System là một bộ quy tắc, nguyên tắc, tài liệu và công cụ được sử dụng để hướng dẫn thiết kế Ui design nhằm phát triển sản phẩm (website, ứng dụng, phần mềm) một cách nhất quán. Nó giúp đảm bảo sự đồng bộ trong thiết kế, và giúp các nhóm phát triển sản phẩm khác (code, tester) hiểu và làm việc hiệu quả hơn.
Design system hiểu đơn giản là hệ thống các quy tắc, quy định thiết kế cơ bản trong UI Design bao gồm quy tắc cột (column), quy định dàn trang (layout grid), button, font chữ, bảng màu chính/phụ/trạng thái màu, margin, padding, icon…
2. Design system gồm những gì?
1. Nguyên tắc thiết kế (Design Principles): Các quy tắc cốt lõi về thương hiệu, giao diện, trải nghiệm người dùng.
Ví dụ: Google Material Design có nguyên tắc về ánh sáng, chiều sâu và chuyển động.
2. Hệ thống UI Components (UI Component Library): Gồm các thành phần giao diện có thể tái sử dụng như button, form, navbar, card, modal, v.v.
3. Hệ thống màu sắc & Typography
- Bảng màu chính, màu phụ, trạng thái màu (hover, active, disable).
- Font chữ, kích thước, khoảng cách giữa các chữ và dòng.
4. Hệ thống lưới & Khoảng cách (Spacing & Layout System)
- Quy chuẩn về margin, padding, grid system để đảm bảo giao diện thống nhất.
5. Hệ thống text box
- Gồm các quy tắc về textbox như title, description, body text
- Các quy tắc khi xếp các textbox trong cùng 1 layout được thiết kế sẵn
6. Một số thành phần khác trong design system
- Quy tắc sử dụng icon, định dạng ảnh, kích thước, style ảnh.
- Code (React, Vue, HTML/CSS) của các component giúp developers dễ dàng triển khai.
3. Lợi ích của design system?
1. Design system giúp tăng hiệu quả và năng suất
- Design system giúp UI designer thiết kế các layout nhanh chóng bằng việc giảm thiểu việc phải thiết kế lại các thành phần giống nhau (button, textbox, layout…). Ngoài ra, các quy tắc về dàn trang cũng đã được quy định rõ từ ban đầu nên UI designer cũng không cần tốn thời gian cho chúng.
- Ngoài ra, design system còn giúp việc sửa chữ trở nên nhanh chóng và đồng bộ. Ví dụ để thay đổi màu sắc, font chữ, button … thì người thiết kế UX/UI chỉ cần chỉnh sửa trực tiếp trong design system, sau đó apply chúng cho toàn bộ thiết kế.
- Đối với các team khác như Dev, Tester thì khi có design system sẽ giúp họ hiểu được mình cần làm gì, giảm thiểu thời gian làm việc cũng như hiệu quả công việc sẽ cao hơn đáng kể.
2. Design system giúp thúc đẩy tính nhất quán và đồng bộ
- Gần như tất cả các thành phần trong sản phẩm sẽ phải tuân theo các thiết kế, quy tắc, quy định trong design system nên khi nhìn vào giao diện người dùng tổng thể sẽ có cho ta cảm giác hài hòa, đồng bộ, tinh tế và chuyên nghiệp.
- Ngoài ra, chính từ điều kể trên sẽ giúp tính nhận nhiện thương hiệu được tốt hơn bởi vì design system sẽ sử dụng các quy tắc trong bộ nhận diện thương hiệu.
3. Design system giúp tăng tốc quá trình thiết kế
Hệ thống được thiết kế tốt sẽ mang lại cho bạn sự tiết kiệm thời gian khi tạo và cập nhật giao diện người dùng. Vì do bạn có thể dựa vào một tập hợp các quy ước đã thiết lập giúp mọi việc trở nên dễ dàng hơn đối với bạn. Ngoài ra, việc sử dụng các mẫu thiết kế có sẵn trong design system có thể giúp tăng tốc quá trình tạo ra các layout mới..
4. Design system giúp dễ dàng mở rộng quy mô sản phẩm UI Design
- Nếu cần mở rộng sản phẩm trong dài hạn thì design system sẽ giúp đội ngũ hoặc đối tác đi sau dễ hiểu và dễ dàng thiết kế mới các layout UI design.
- Đơn giản đó chỉ là thiết kế thêm vào (add new) các layout dựa trên những quy tắc, quy định trước đó. Ngoài ra, nếu sau này cần chỉnh sửa thì cũng dễ dàng hơn đáng kể vì chỉ cần chỉnh lại các quy định/thiết kế mẫu và apply chúng cho toàn bộ các layout UI Design
5. Design system giúp tăng khả năng truy cập và sử dụng
- Ở một khía cạnh nào đó, việc design system logic sẽ giúp người dùng dễ dàng hiểu được đâu là việc mình cần để hoàn thành tác vụ khi sử dụng sản phẩm.
Ví dụ: đối với việc mua hàng sẽ luôn được hoàn tất bằng button “mua hàng”, “mua ngay” màu xanh dương. Điều đó sẽ giúp người dùng dễ dàng hoàn tất giao dịch mua hàng mà không cần tốn nhiều thời gian tìm kiếm bởi vì design system đã ngầm quy định bằng màu sắc một cách trực quan.
6. Hướng dẫn rõ ràng và chi tiết về sản phẩm
Tài liệu rõ ràng và chi tiết giải thích cách sử dụng các thành phần và hướng dẫn của hệ thống thiết kế. Cái này rất quan trọng để đảm bảo rằng người thiết kế và nhà phát triển có thể dễ dàng triển khai hệ, xây dựng hệ thống.
4. Cách xây dựng design system
Bước 1: Nghiên cứu và Xác định Mục tiêu
Trước khi xây dựng Design System, cần xác định rõ lý do và mục tiêu của hệ thống. Một số mục tiêu phổ biến bao gồm đồng bộ hóa giao diện, tối ưu quy trình làm việc giữa các team, cải thiện trải nghiệm người dùng và giúp sản phẩm dễ dàng mở rộng.
Việc nghiên cứu các hệ thống thiết kế hiện có như Material Design, Carbon Design System hoặc Atlassian Design System sẽ giúp rút ra những bài học quan trọng. Ngoài ra, cũng cần xác định rõ đối tượng sử dụng hệ thống, bao gồm designer, developer, product manager và marketer.
Bước 2: Phối hợp với Các Team liên quan
Design System không chỉ phục vụ đội ngũ thiết kế mà còn ảnh hưởng đến các nhóm khác như phát triển, kiểm thử, nội dung và thương hiệu. Việc phối hợp chặt chẽ giúp hệ thống hoạt động trơn tru và hiệu quả.
- Dev Team: Làm việc với developer để đảm bảo UI Components có thể triển khai dễ dàng. Cung cấp thư viện code sẵn có, hướng dẫn sử dụng và thống nhất về công nghệ phát triển.
- Tester Team: Định nghĩa các tiêu chí kiểm thử giao diện, đảm bảo UI hoạt động đúng như thiết kế trên mọi nền tảng. Xác định rõ các trạng thái component và quy tắc kiểm tra responsive, cross-browser, accessibility.
- Graphic Design Team: Đồng bộ hình ảnh, icon, animation để giữ sự nhất quán giữa thiết kế UI và hình ảnh thương hiệu.
- Content Team: Hướng dẫn cách viết nội dung phù hợp với tone & voice của thương hiệu, đồng thời đảm bảo tính nhất quán trong typography và cấu trúc nội dung.
Bước 3: Xây dựng Nguyên tắc Thiết kế
Nguyên tắc thiết kế là nền tảng giúp giữ sự nhất quán trong toàn bộ hệ thống. Các nguyên tắc này bao gồm:
- Định nghĩa phong cách thiết kế (hiện đại, tối giản, năng động, truyền thống, v.v.).
- Quy tắc về UX/UI để đảm bảo tính dễ sử dụng, khả năng mở rộng và tối ưu hiệu suất.
- Hướng dẫn thương hiệu bao gồm tone & voice, phong cách hình ảnh và quy chuẩn thiết kế chung.
Bước 4: Thiết lập Nền tảng Cốt lõi
Hệ thống thiết kế cần có các yếu tố cơ bản để đảm bảo tính nhất quán trong sản phẩm.
- Hệ thống màu sắc: Bao gồm màu chính, màu phụ, màu trạng thái (success, error, warning) và bảng màu cho light/dark mode.
- Typography: Xác định font chữ chính và phụ, kích thước chữ, khoảng cách dòng, độ dày chữ.
- Grid & Spacing: Xây dựng hệ thống lưới và khoảng cách để đảm bảo bố cục nhất quán.
- Hình ảnh và biểu tượng: Quy định về kích thước, định dạng, khoảng cách và cách sử dụng icon, illustration.
Bước 5: Xây dựng Thư viện UI Components
Thư viện UI Components giúp tạo ra các thành phần giao diện có thể tái sử dụng, giúp tiết kiệm thời gian và giảm sai sót trong quá trình thiết kế và phát triển.
- Xây dựng các thành phần UI cơ bản như button, input, card, modal, table, navigation.
- Định nghĩa rõ cách sử dụng, kích thước, trạng thái (hover, active, disable) và cách kết hợp các thành phần.
- Tổ chức thư viện UI theo phương pháp Atomic Design, bao gồm:
- Atoms: Thành phần nhỏ như button, input, icon.
- Molecules: Nhóm atoms tạo thành thành phần lớn hơn như form field, search bar.
- Organisms: Thành phần phức tạp như navbar, card với hình ảnh và văn bản.
- Kết nối với codebase bằng cách sử dụng Storybook hoặc hệ thống Design Token để đồng bộ giữa thiết kế và phát triển.
Bước 6: Xây dựng Documentation và Guidelines
Một hệ thống thiết kế tốt cần có tài liệu hướng dẫn chi tiết để đảm bảo tính nhất quán khi sử dụng.
- Tài liệu bao gồm hướng dẫn sử dụng UI Components, nguyên tắc thiết kế, hệ thống màu sắc, typography, layout, content guidelines.
- Hướng dẫn cần dễ hiểu, có hình minh họa và ví dụ thực tế.
- Sử dụng các công cụ như Notion, Zeroheight, GitHub Wiki hoặc Storybook để quản lý tài liệu.
Bước 7: Kiểm thử, Áp dụng và Duy trì
Sau khi hoàn thành Design System, cần thử nghiệm trong các dự án thực tế để đảm bảo tính hiệu quả.
- Thử nghiệm với các sản phẩm thực tế như website, ứng dụng, dashboard.
- Thu thập phản hồi từ đội ngũ thiết kế, phát triển và người dùng.
- Cập nhật và tối ưu hệ thống để đảm bảo tính linh hoạt khi sản phẩm phát triển.
Việc duy trì và cải tiến Design System là một quá trình liên tục. Cần có cơ chế để đội ngũ có thể đề xuất thay đổi, bổ sung component mới hoặc tối ưu các thành phần hiện có.
5. Những lưu ý khi xây dựng Design System
Một Design System chỉ thực sự phát huy giá trị khi được xây dựng với tư duy dài hạn thay vì chỉ phục vụ một dự án hoặc một giai đoạn phát triển ngắn. Ngoài việc chuẩn hóa màu sắc, typography hay component, doanh nghiệp cũng cần quan tâm đến khả năng duy trì, mở rộng và áp dụng hệ thống trong suốt vòng đời của sản phẩm.
Đồng bộ với bộ nhận diện thương hiệu
Design System nên được xây dựng dựa trên bộ nhận diện thương hiệu thay vì thiết kế theo cảm hứng của từng dự án. Màu sắc, typography, icon, khoảng cách, phong cách hình ảnh hay cách sử dụng thành phần giao diện đều cần phản ánh đúng bản sắc thương hiệu. Điều này giúp mọi website, ứng dụng, landing page hay các sản phẩm số khác luôn có sự thống nhất, đồng thời giúp người dùng dễ dàng ghi nhớ và nhận diện thương hiệu trong quá trình sử dụng.
Tính toán vòng đời sử dụng của Design System
Một sai lầm khá phổ biến là thiết kế theo những xu hướng đang thịnh hành mà không cân nhắc đến tuổi thọ của sản phẩm. Một Design System tốt nên ưu tiên sự đơn giản, rõ ràng và bền vững để sau nhiều năm vẫn có thể tiếp tục sử dụng mà không tạo cảm giác lỗi thời. Đồng thời, hệ thống cũng cần được thiết kế với khả năng mở rộng, cho phép bổ sung màn hình, component hoặc tính năng mới mà không phải chỉnh sửa toàn bộ cấu trúc hiện có.
Designer và Developer phải tuân thủ thống nhất
Dù Design System được xây dựng tốt đến đâu nhưng không được áp dụng đúng thì vẫn sẽ nhanh chóng mất đi giá trị. Designer cần thiết kế dựa trên các component và quy tắc đã được chuẩn hóa, trong khi Developer cũng cần triển khai đúng theo Design System thay vì tự ý thay đổi màu sắc, khoảng cách hay cấu trúc giao diện trong quá trình lập trình. Việc cả hai đội ngũ cùng tuân thủ một tiêu chuẩn chung sẽ giúp sản phẩm luôn đồng nhất, giảm sai lệch giữa bản thiết kế và sản phẩm thực tế, đồng thời tiết kiệm đáng kể thời gian chỉnh sửa và bảo trì về sau.
Một số lưu ý khác khi xây dựng Design System:
- Đồng bộ với bộ nhận diện thương hiệu.
- Chuẩn hóa Design Token ngay từ đầu.
- Hạn chế tạo quá nhiều style không cần thiết.
- Xây dựng component có đầy đủ các trạng thái.
- Ưu tiên Auto Layout và Constraint.
- Thiết kế component có khả năng tái sử dụng.
- Tổ chức Variant một cách hợp lý.
- Đặt tên component thống nhất.
- Chuẩn hóa hệ thống spacing.
- Chuẩn hóa typography theo một scale cố định.
- Xây dựng hệ thống màu sắc rõ ràng.
- Thống nhất bộ icon trong toàn bộ sản phẩm.
- Thiết kế theo hệ thống grid.
- Tính đến responsive ngay từ đầu.
- Luôn cân nhắc khả năng triển khai của Developer.
- Chuẩn hóa khoảng cách giữa các thành phần giao diện.
- Có tài liệu hướng dẫn sử dụng Design System.
- Thiết kế với tư duy mở rộng và phát triển lâu dài.
