3 bài học từ lịch sử phát triển của design system

December 6, 2024
Nội dung chính

3 bài học từ lịch sử phát triển của design system

Mặc dù chúng ta đều mong muốn được thiết kế những thứ mới mẻ từ đầu mỗi khi bắt tay vào một dự án, sự thật là cách tiếp cận vậy không thể mở rộng quy mô. Nó chậm chạp, không nhất quán, và khó duy trì khi dự án trở nên lớn hơn, mở rộng hơn, và phức tạp hơn. Để vận hành ở quy mô lớn mà không gặp phải những hạn chế thường thấy trong việc thiết kế sản phẩm số, các nhà thiết kế ngày càng sử dụng hệ thống thiết kế (design system) thường xuyên hơn vì chúng giúp tái sử dụng và lặp lại các thành phần thiết kế một cách dễ dàng.

Mặc dù design system (hệ thống thiết kế) ngày càng phổ biến ở cả các doanh nghiệp lớn và nhỏ, nhưng chúng không phải là một phát kiến mới. Các giải pháp phần mềm dạng module đã tồn tại từ những năm 1960, và một số lĩnh vực nghiên cứu đã có các kho dữ liệu kiến thức trung tâm làm tham chiếu trong nhiều thập kỷ.

Hãy cùng ngược dòng thời gian, cùng Capi Demy khám phá chặng đường hình thành và đổi mới của các hệ thống thiết kế – nơi những bài học quý giá được chắt lọc, tạo nên sự phát triển cho design system trong thế giới hiện đại. Có lẽ, giữa những tinh hoa ấy, bạn sẽ tìm thấy nguồn cảm hứng để nâng tầm quy trình thiết kế sản phẩm của riêng mình!

Thư viện mẫu thiết kế (Pattern Libraries) - sự khởi nguồn cho hệ thống design system

Nguồn: The Wayback Machine

Trước khi design system - hệ thống thiết kế trở thành quy chuẩn trong thiết kế UI/UX, các nhà thiết kế đã sử dụng thư viện mẫu để làm cho công việc của họ dễ tái sử dụng hơn. Thư viện mẫu là tập hợp các thành phần thiết kế xuất hiện nhiều lần trên một trang web. Thư viện này sẽ định nghĩa các các thành phần tương tác, cách hiển thị, và kể cả cách code. Chức năng chưa có nhiều, nhưng đây là điểm khởi đầu cho một thiết kế nhất quán.

Vào đầu những năm 2000, khi nhu cầu hiểu rõ hơn về thế UI tăng cao, các nhà thiết kế đã tạo ra các trang tài nguyên trực tuyến như UI Patterns và cuốn sách hướng dẫn UI/UX nổi tiếng Designing Interfaces của Jenifer Tidwell. Những tài nguyên này không chỉ thu thập các ví dụ thiết kế tiêu biểu mà còn định hướng cách thực hiện thiết kế tốt hơn trong tương lai.

Bài học rút ra:

Theo dõi cách đồng nghiệp và đối thủ cạnh tranh làm việc có thể giúp bạn định hình và cải thiện hệ thống thiết kế của mình. Hãy tìm kiếm lời khuyên và cảm hứng từ họ.

Atomic Design: Khuôn khổ tạo nên sức mạnh

Cuối những năm 2000 và đầu 2010 chứng kiến một sự thay đổi lớn trong loại sản phẩm số được thiết kế và các nền tảng mà chúng được triển khai. Sự xuất hiện của công nghệ di động thúc đẩy sự chuyển đổi từ phần mềm trên máy tính bàn và các trang web thiết kế bằng Flash sang các ứng dụng di động và giao diện tương thích trên nhiều nền tảng.

Để đáp ứng những thay đổi này, Brad Frost đã có một ý tưởng tuyệt vời gọi là Atomic Design - Thiết kế Nguyên tử. Thay vì mô phỏng sản phẩm theo các ví dụ sẵn có, Atomic Design khuyến khích thiết lập một framework mà nhà thiết kế UX có thể xây dựng thư viện của riêng mình để tái sử dụng các thành phần.

Brad Frost cho rằng bằng cách nhìn vào các yếu tố thiết kế theo module, chúng ta có một sự linh hoạt chưa từng có trong lịch sử hệ thống thiết kế. Mặc dù phương pháp này có khác biệt với thư viện mẫu (đặc biệt là quy định về các quy tắc tốt nhất), đây là lần đầu tiên chúng ta thấy một design system cung cấp hướng dẫn sử dụng cùng với các yếu tố bên trong.

Bài học rút ra:

Hãy tiếp cận theo hướng các module có thể tái sử dụng. Đây không phải là hạn chế sự sáng tạo; mà là làm cho việc đưa ra một số quyết định dễ dàng hơn để có thể tập trung vào những ý tưởng tổng thể.

Material Design: Thế giới mới

Nguồn: Brad Frost’s Atomic Web Design

Một trong những design system sớm gây tiếng vang lớn là Material Design của Google, ra mắt năm 2014. Google kết hợp những quy tắc tốt nhất từ các thư viện mẫu ban đầu và ý tưởng Atomic Design để tạo ra một ngôn ngữ thiết kế thống nhất trên tất cả các thiết bị, nền tảng, và kích thước màn hình.

Việc ra mắt Material Design không chỉ đơn giản là có thêm một bộ sưu tập các yếu tố mẫu có thể được nhân bản và tái sử dụng. Đây còn là một tập nguyên tắc đã được chứng minh là hiệu quả. Các hướng dẫn của Material Design đã là một trang quan trọng trong lịch sử hệ thống thiết kế mà hầu hết designer bây giờ đều phải tham khảo.

Bài học rút ra:

Một thư viện bao gồm các yếu tố thành phần là chưa đủ. Sức mạnh của một hệ thống thiết kế nằm ở các hướng dẫn sử dụng, các quy chuẩn, và định hướng rõ ràng. Nhờ vậy sẽ đem đến sự thống nhất trên các nền tảng ngày càng đa dạng mà một doanh nghiệp phải tiếp cận.

Đọc thêm: Những quy luật trong thiết kế UX

Tương lai của hệ thống thiết kế

Gần đây, các công ty như IBM, Airbnb, và Uber đã triển khai các hệ thống thiết kế - design toàn diện nhằm cải thiện trải nghiệm người dùng đồng thời giúp các designer lẫn developer làm việc dễ dàng hơn.

Nguồn tham khảo: internet