[1] Design System là gì?

Trước đây mình nghĩ thiết kế chỉ đơn giản là vẽ giao diện cho đẹp. Nhưng càng làm, mình càng nhận ra một vấn đề, mỗi lần bắt đầu một dự án mới là gần như… làm lại từ đầu. Button mỗi nơi một kiểu, màu sắc không đồng nhất, code và design không khớp nhau. Và đó là lúc mình biết tới một khái niệm Design System.

Hiểu đơn giản, Design System là một “bộ quy tắc + bộ công cụ” giúp việc thiết kế trở nên nhất quán và dễ mở rộng hơn. Nhưng nếu chỉ nói vậy thì vẫn hơi khó hình dung, nên thử nghĩ theo những ví dụ đời thường.

Trong một trường học, tất cả học sinh đều mặc đồng phục giống nhau. Không ai mỗi ngày mặc một kiểu khác nhau, vì như vậy sẽ rất lộn xộn và khó quản lý. Đồng phục giúp nhìn vào là biết cùng một hệ thống, mọi thứ trở nên gọn gàng và có tổ chức. Design System cũng giống như “đồng phục” của toàn bộ giao diện mọi thứ được thống nhất theo một chuẩn chung.

Hoặc giống như khi bạn chơi LEGO. Bạn không tự tạo ra từng viên gạch, mà dùng những viên có sẵn để lắp thành xe, nhà hay robot. Design System chính là hộp LEGO của designer, trong đó mỗi button, input hay card đều là những “viên gạch” đã được định nghĩa sẵn, bạn chỉ việc lấy ra và sử dụng thay vì làm lại từ đầu.

Một ví dụ khác dễ hiểu hơn là menu của một quán trà sữa. Quán có sẵn các món như trà sữa trân châu, trà đào hay matcha. Nhờ có menu, việc phục vụ trở nên nhanh hơn và ổn định hơn. Design System cũng giống như vậy nó là “menu” để bạn chọn và sử dụng, không cần sáng tạo lại mọi thứ mỗi lần làm.

Trong một Design System thường sẽ có:

• Màu sắc (color palette)
• Font chữ (typography)
• Các thành phần giao diện như button, input, card
• Nguyên tắc sử dụng (guidelines)

Nhờ đó, thay vì phải thiết kế lại từ đầu mỗi lần, bạn chỉ cần lấy những gì đã có trong hệ thống và áp dụng.

Điểm quan trọng của Design System không phải là để “cho có”, mà là nó thực sự giúp ích trong quá trình làm sản phẩm. Cụ thể, nó giúp:

• Thiết kế nhanh hơn
• Giao diện đồng bộ hơn
• Dễ làm việc với dev hơn
• Scale sản phẩm tốt hơn

Nói đơn giản, Design System giúp biến “thiết kế” từ việc làm theo cảm hứng thành một hệ thống rõ ràng và có thể tái sử dụng.

Tuy nhiên, nó cũng không phải lúc nào cũng hoàn hảo. Nếu dùng không đúng cách, Design System có thể khiến thiết kế trở nên cứng nhắc và thiếu sáng tạo. Việc xây dựng ban đầu cũng tốn thời gian, và nếu không được cập nhật thường xuyên thì hệ thống sẽ nhanh chóng lỗi thời. Nguy hiểm hơn là nếu system được xây dựng kém, thì bạn đang vô tình nhân rộng những thứ chưa tốt ra toàn bộ sản phẩm.

Mình quyết định sẽ tự xây dựng một Design System hoàn chỉnh từ đầu, không chỉ để dùng mà còn để hiểu rõ cách nó hoạt động. Trong những bài viết tiếp theo, mình sẽ chia sẻ lại toàn bộ quá trình đó:

• Cách mình chọn màu sắc
• Cách xây dựng typography
• Cách tạo component (button, input…)
• Và cách tổ chức tất cả thành một hệ thống hoàn chỉnh

Mục tiêu của mình không phải là làm ra thứ gì đó “đẹp nhất”, mà là làm sao để nó dễ dùng, dễ hiểu và có thể áp dụng được trong thực tế.

Nếu bạn cũng đang học thiết kế, hoặc đang cảm thấy mọi thứ còn rời rạc, thì hy vọng series này sẽ giúp bạn nhìn rõ hơn cách một sản phẩm được xây dựng từ bên trong bắt đầu từ những thứ nhỏ nhất.

Hình minh hoạ