Thành phần của design system & Các cách thực hiện design system

Thành phần của Design System

2 bộ phận quan trọng của design system là:

1. Kho lưu trữ design system (repository)
2. Nhóm phụ trách design system

Kho lưu trữ của design system gồm có:

• Style guide
• Component library
• Pattern library

Style guide

Style guide gồm các hướng dẫn triển khai cụ thể, các ví dụ tham khảo trực quan, và các nguyên lý thiết kế để áp dụng cho giao diện cũng như các thiết kế khác.

Style guide thường sẽ tập trung vào:

• Các yếu tố nhận diện thương hiệu (hệ thống màu sắc, kiểu chữ, logo, nhãn hiệu...).
• Hướng dẫn biên soạn nội dung (giọng điệu và cách diễn đạt).
• Các tiêu chuẩn thiết kế trực quan (visual design) và thiết kế tương tác (interaction design) hay còn được gọi là front-end style guide.

Style guide cũng thường được tích hợp vào trong component library để chúng ta có thể áp dụng các hướng dẫn theo từng trường hợp cụ thể.

Việc sử dụng style guide đã có từ năm 1976 trong Graphics Standards Manual (NHB 1430.2) của NASA: https://www.nasa.gov/image-feature/nasa-graphics-standards-manual/

Style guide này biên soạn chi tiết về các yếu tố nhận diện thương hiệu, hướng dẫn về các cách kết hợp màu sắc sao cho dễ thấy, dễ đọc; các nguyên tắc thiết kế cũng được nêu ra rõ ràng.

Một ví dụ khác là Content Style Guide của Mailchimp gồm các hướng dẫn về cách viết các dạng nội dung khác nhau cho phù hợp với các giá trị và giọng điệu (tone of voice) của thương hiệu: https://styleguide.mailchimp.com/

Component library

Component library hay còn được gọi là design library là nơi thường được sử dụng nhiều nhất trong design system.

Thư viện này chứa các thành phần UI đã được định nghĩa sẵn, có thể tái sử dụng. Đây là nơi để designer và developer tìm hiểu và triển khai các thành phần cụ thể của UI. Để tạo ra thư viện này cần nhiều thời gian và nguồn lực.

Các thành phần của thư viện này gồm có:

Ví dụ trực quan (visual examples) của từng component.

• Tên component (component name) - Tên của component cần đặt cụ thể và không bị trùng nhau để tránh sự hiểu nhầm giữa designer và developer.
• Mô tả (description) - Mô tả cần giải thích rõ ràng đây là component gì, thường được sử dụng như thế nào, có thể kèm theo các ví dụ nên và không nên (do’s & don’ts).
• Thuộc tính (attribute) - Chúng ta có thể điều chỉnh tham số của các thuộc tính (màu sắc, kích thước, hình dạng, câu chữ) để tùy chỉnh component cho các trường hợp khác nhau.
• Trạng thái (state) - Hình thức của component khi ở trạng thái mặc định và các trạng thái khác.
• Code snippet - Code snippet là các đoạn mã được viết sẵn cho component. Design system có thể kèm theo ví dụ thực tế khi áp dụng các đoạn mã này và cung cấp chỗ thử (sandbox) để xem trước các tùy chỉnh khác nhau cho component.
• Front-end & backend frameworks - Các framework được dùng khi triển khai để tránh gặp phải các lỗi nghiêm trọng không đáng có.

Chúng ta có thể xem qua ví dụ về component library trong Material Design system của Google: https://material.io/components
Component library này gồm có:

• Hướng dẫn triển khai và code snippet cho từng framework và hệ điều hành cụ thể.
• Hướng dẫn thiết kế chi tiết kèm theo các ví dụ nên và không nên để đảm bảo tính khả dụng của thiết kế.

Một ví dụ khác là Carbon design system của IBM: https://www.carbondesignsystem.com/components/overview/
Design system này cung cấp các hướng dẫn về style & code, cũng như những yếu tố cần cân nhắc về tính tiếp cận (accessibility). Ngoài ra còn có sandbox để designers & developers có thể xem trước các tùy chỉnh về giao diện trước khi triển khai.

Pattern Library

Khác biệt giữa pattern library và component library:

• Component library định nghĩa từng thành phần riêng lẻ của UI.
• Pattern library định nghĩa cách phối hợp các thành phần riêng lẻ.

Pattern library cung cấp cấu trúc nội dung, layout, template để chúng ta có thể tái sử dụng và điều chỉnh theo từng trường hợp cụ thể.

Chúng ta có thể xem qua ví dụ của Atlassian design system: https://atlassian.design/patterns/
Design system này định nghĩa sẵn các pattern có thể tái sử dụng ví dụ như template của page header.
Ngoài việc cung cấp các ví dụ trực quan, design system này còn làm nổi bật các thành phần mà designer nên tận dụng và kèm theo hướng dẫn sử dụng của từng thành phần.

Một ví dụ khác là US Web Design System (USWDS): https://designsystem.digital.gov/
Design system này cung cấp các hướng dẫn giúp tạo ra sự thống nhất giữa các cơ quan khác nhau của chính phủ Mỹ.
Nội dung của USWDS gồm có template cho các trang, nguyên lý thiết kế, component và các thông số kỹ thuật dùng cho code.

Nhóm phụ trách design system

Design system luôn cần được theo dõi và cập nhật liên tục để đảm bảo hệ thống không bị lỗi thời, các thành phần không bị trùng lặp, dư thừa.

Do đó, hiệu quả của design system sẽ phụ thuộc vào đội ngũ quản lý nó.

Nhân sự của nhóm phụ trách sẽ tùy thuộc vào quy mô của design system nhưng thường sẽ có các vị trí sau:

• Interaction designer: thực hiện các hướng dẫn về tương tác.
• Visual designer: trình bày các ví dụ trực quan cụ thể.
• Developer: viết code snippets của các thành phần, các thông số kỹ thuật khi triển khai.

Một nhóm lý tưởng có thể sẽ có thêm các vị trí sau, thường là các công việc ngắn hạn:

• Researcher: tiến hành các nghiên cứu.
• Architect: phân tích kiến trúc hệ thống.
• Content writer: viết nội dung.

Đặc biệt cần cân nhắc đến vai trò của người bảo trợ (executive sponsor) trong ban lãnh đạo để giúp điều phối nguồn lực cho việc triển khai design system.

Người này sẽ đảm bảo về tiền bạc và nhân sự cũng như giúp truyền đạt tầm quan trọng của design system đến các bộ phận khác trong tổ chức.

Các cách để thực hiện design system

Có 3 cách:

1. Adopt: áp dụng theo một design system đã có sẵn.
2. Adapt: điều chỉnh lại từ một design system đã có sẵn.
3. Create: tạo ra một design system hoàn toàn mới cho riêng bạn.

Cả 3 cách đều có ưu điểm và nhược điểm.

• Adopt theo một design system đã có sẵn là cách ít tốn kém nhất vì càng phải điều chỉnh và tạo mới nhiều thì sẽ càng tốn nhiều thời gian và công sức để thực hiện.
  Tuy nhiên trong quá trình thiết kế về lâu dài, chúng ta vẫn cần phải cập nhật, điều chỉnh, cũng như tạo thêm các thành phần trong design system cho phù hợp với yêu cầu sử dụng trong thực tế.
• Adapt và create sẽ phù hợp khi tổ chức của bạn có những nhu cầu đặc thù mà các design system mã nguồn mở hiện có không thể đáp ứng được.
• Hoặc nếu chúng ta xác định nhu cầu về lâu dài sẽ cần phải điều chỉnh và thay đổi nhiều trong hệ thống thiết kế thì cũng nên cân nhắc việc tạo mới design system từ đầu.

Khi chúng ta chỉ mới ở giai đoạn thử nghiệm sản phẩm mẫu (prototyping), chứng minh tính khả thi của ý tưởng (POC - proof of concept) và mọi thứ sẽ còn phải thay đổi nhiều thì việc thực hiện một design system hoàn chỉnh sẽ không đem lại được ROI (Return on investment) - giá trị, hiệu quả mong muốn so với sự đầu tư của chúng ta.

Nhưng về lâu dài, chúng ta sẽ thấy lợi ích của design system trong việc tạo mới và nhân rộng thiết kế.

Cần nhớ rằng, design system không phải là công việc chỉ cần làm một là xong, mà nó là công cụ và tài nguyên luôn cần được cập nhật để giúp designer và developer làm việc nhanh và hiệu quả hơn.

Design system sẽ phát huy hiệu quả nếu tổ chức của bạn xác định được mục tiêu về lâu dài cần phải tái sử dụng và nhân rộng thiết kế.

Tóm tắt lại về Design System

Design system là hệ thống các quy chuẩn dùng để quản lý công việc thiết kế theo quy mô lớn bằng cách tái sử dụng các thành phần và mẫu thiết kế đã được tạo sẵn.
Chúng ta có thể xem design system chính là một sản phẩm để phục vụ cho việc phát triển các sản phẩm khác.

Design system được tạo thành từ:

• Components
• Patterns
• Styles

Design system giúp vận hành và tối ưu công việc thiết kế.
Design system được thiết kế, quản lý, triển khai bởi một nhóm.

Các yếu tố cần cân nhắc khi thực hiện design system:

• Quy mô, khả năng nhân rộng của dự án
• Nguồn lực
• Thời gian

Khi không được triển khai, bảo trì tốt thì design systems chỉ là một cái kho lộn xộn và khó sử dụng, ngược lại, nếu triển khai tốt thì design system có thể dùng làm nguồn tham khảo cho các thành viên trong nhóm, giúp công việc hiệu quả hơn, và designer có thể tập trung giải quyết các vấn đề phức tạp về UX.

Và cuối cùng, nếu bạn là người mới, đang tìm kiếm một lộ trình học UI/UX toàn diện thì có thể tham khảo khóa học dài hạn UI/UX Design Completed này: https://keyframe.vn/cth/chuong-trinh-hoc-uiux-design-completed-4.html

---

Bài viết được biên soạn & tổng hợp bởi GV Lê Minh Quang, phát hành độc quyền tại Keyframe. Thiết kế minh họa bởi Keyframe.