Design system & những điều mà designer cần biết

* Design System là một hệ thống các tiêu chuẩn được thiết kế, phát triển và xây dựng cho sản phẩm hoặc phần mềm dành riêng cho doanh nghiệp có định hướng phát triển lâu dài.

Trong nhiều năm qua, tôi đã luôn ngấu nghiến, nghiền ngẫm các tư liệu trên mạng về design system. Trong bài viết này, tôi sẽ chia sẻ các video và bài viết theo tôi là hữu ích nhất trong quá trình học tập của mình.

Các bài học ở đây đã ảnh hưởng đến cách tôi nghĩ về design system, và cách tôi làm việc với các đồng nghiệp tại Zendesk về việc duy trì Garden, một design system riêng của chúng tôi.

Danh sách dưới đây có thể không đủ, nhưng theo tôi là hữu ích và nhiều thông tin nhất và tôi hy vọng bạn sẽ thấy vậy. Hãy cùng xem qua nhé.


VIDEO

Design Systems, when and how much?
(Tạm dịch: Design systems, khi nào và bao nhiêu?)

Tôi rất thích cách giải thích rõ ràng, tường tận về các luật lệ, ràng buộc và nguyên tắc tiếp cận design system qua một ví dụ dễ hiểu ở video này.

Evolving the design language at Big Blue
(Tạm dịch: Phát triển ngôn ngữ thiết kế ở Big Blue)

Khi design system phát triển và trở thành một phần thiết yếu của văn hóa thiết kế sản phẩm, đo lường sự thành công của design system sẽ là một đề tài quan trọng. Vói 12 phút 20 giây, họ đào sâu vào vấn đề đo lường. IBM dùng cả phương pháp nghiên cứu số lượng và chất lượng để hiểu design system vận hành như thế nào trong một nhóm thiết kế đông đúc của họ.

Design systems at Zendesk
(Tạm dịch: Design system ở Zendesk)

Design system được đặt ở vị trí có thể áp dụng nhiều kiểu thiết kế đáp ứng khả năng truy cập. Trong 17 phút 35 giây, đồng nghiệp của tôi Austin Green bắt đầu nói về mặt kỹ thuật của design system. Đây là phần yêu thích của tôi trong bài phát biểu khi Austin đi sâu vào cáchxây dựng quyền truy cập vào từng thành phần trong design system của chúng tôi. Điều tôi thích về lời giải thích của anh ấy là những người không phải là kỹ sư cũng có thể truy cập được.

Sustainable design systems
(Tạm dịch: Thiết kế hệ thống bền vững)

Với những sự cường điệu và phấn khích về design system, thật hấp dẫn làm sao khi có thể đào sâu và bắt đầu phát triển design system của chính mình. Bài phát biểu này nói về những nguyên tắc quan trọng để design system có thể vận hành lâu dài.

. . .

BÀI VIẾT

Design Systems Handbook
(Tạm dịch: Sổ tay design system)

Khi thiết kế bespoke (tạm dịch: thiết kế
theo yêu cầu khách hàng) chậm,
không ổn định và ngày càng
khó duy trì theo thời gian.
Design system cho phép
xây dựng nhanh hơn những sản phẩm
tốt hơn bằng cách làm cho thiết kế
có thể tái sử dụng hết mức có thể.
Đây là cốt lõi và là giá trị chính
của design system.

Hãy đọc nếu…

Bạn muốn tìm một nơi bắt đầu. Bài viết này là một mỏ vàng vì bao gồm tất cả các khía cạnh của design system và cung cấp một nền tảng vững chắc để bạn khám phá sâu hơn các lĩnh vực mà bạn quan tâm. Mục yêu thích của tôi là phân tích các tin đồn về design system, như là quá hạn chế làm mất tính sáng tạo của designer. Dựa trên kinh nghiệm của tôi và nhu cầu hiện tại, phần lập nhóm và các mô hình là việc chung khác nhau cũng thực sự hữu ích.

. . .

Why design systems fail| (Tạm dịch: Vì sao các design systems thất bại)

Điều quan trọng là bạn cần phải
xây dựng một design system bền bỉ,
giảm thiểu chi phí phát triển.

Hãy đọc nếu…

Bạn muốn hiểu sâu hơn về sự tuyệt vời của design system, và số lỗi lầm thông thường. Bài viết nói về những đặc điểm quan trọng cần được tính đến để design system thành công.

. . .

Your sketch library is not a design system
(Tạm dịch: Các bản phác họa không phải là một design system)

Có thể đó là điều hiển nhiên nhưng
quan trọng là bạn phải hiểu
không thể xây dựng một phần mềm
dựa trên ảnh chụp màn hình
và các bản phác họa.

Hãy đọc nếu…

Bạn muốn hiểu lý do tại sao thật thuận lợi khi ngay từ đầu đã có một design system rõ ràng như Sketch, nhưng đó không phải là mục tiêu cuối cùng (hoặc cũng chưa phải cuối cùng).

. . .

People over pixels
(Tạm dịch: Người dùng quan trọng hơn điểm ảnh)

Đó là nét đẹp khi xây dựng design system.
Bằng cách quyết định chi tiết một lần,
bạn giúp toàn bộ nhóm phát triển sản phẩm
của mình có thời gian để tập trung
giải quyết các vấn đề thực tế của khách hàng.

Hãy đọc nếu…

Bạn muốn tìm hiểu trải nghiệm thực tế của một nhóm thiết kế từng bước cùng nhau thiết kế lại những thành phần ảnh hưởng đến hơn 40 sản phẩm ở hai châu lục.

Tôi thích cách họ phân tích những vấn đề có vẻ to tát bằng cách thiết kế lại giao diện chính cùng những nhóm designer khác. Thật thú vị làm sao khi họ phân tách và thử nghiệm nhiều phương pháp khác nhau trước khi cam kết hướng đi cuối cùng.

. . .

The most exciting design systems are boring (Tạm dịch: Những design systems thú vị nhất lại là những điều tẻ nhạt)

Khi design system đáng chán, designers và các nhà phát triển có thể tự do làm những cái mới để giải quyết vấn đề.

Hãy đọc nếu…

Bạn đang tìm lý do tại sao design system không chỉ là một tập hợp các yếu tố giao diện người dùng. Tôi là một người tin tưởng vững chắc về tầm quan trọng của các nguyên tắc và hướng dẫn những việc cần làm (và những gì không nên làm) với các thành phần trong design sytem.

Có một điểm mà tôi đồng tình, đó là design system không nên được xem là cơ hội để tái định vị thương hiệu và phải vứt bỏ tất cả để thay mới framework cùng các thành phần liên quan. Thay vào đó, phát triển design system cần phải hiểu những tương tác giá trị nhất, thường xuyên nhất và thông thường nhất là gì, cũng như cách tối ưu hóa chúng trong các ràng buộc của hệ thống hiện có.

. . .

AirBnB: Building a visual language
(Tạm dịch: AirBnB: Xây dựng ngôn ngữ thị giác)

Thiết kế phần mềm có vài ràng buộc vật chất
so với các nguyên tắc thiết kế khác.
Vấn đề này có nhiều phương pháp
để giải quyết, nhưng đồng thời
lại dẫn đến những trải nghiệm
rời rạc đối với người dùng.
Là chủ và là người thiết kế sản phẩm,
chúng ta phải tuân theo những ràng buộc đó.

Hãy đọc nếu…

Bạn đang tìm lời giải thích tại sao phải xây dựng design system và các lợi ích cùng cách thực hiện. Bài viết đi qua một danh sách các lý do tại sao design system lại là một ý tưởng hay. Đây có lẽ là danh sách tốt nhất mà tôi đã đọc cho đến nay. AirBnB là một trong những nhà lãnh đạo trong khu vực này, vì thế đây là một bài viết đáng đọc, đồng thời kèm theo các trích dẫn tuyệt vời về design system và lợi ích của chúng.

Phần thú vị nhất của bài viết là thảo luận về định nghĩa các thành phần lớn hơn, chứ không phải là các thành phần nhỏ.

. . .

Designing design systems for complex products
(Tạm dịch: Thiết kế design system cho những sản phẩm phức tạp)

Tôi đã từng đặt rất nhiều “gạch đầu dòng”
cùng những mô tả chi tiết về thiết kế của tôi
để cung cấp càng nhiều chi tiết
càng tốt cho các nhà phát triển.
Nhưng đó không phải là một cách hiệu quả
để bàn giao công việc, và đôi khi
họ cũng không tuân theo tất cả
các chi tiết tôi đưa vào thiết kế.

Hãy đọc nếu…

Bạn muốn có lời giải thích về sự khác biệt giữa style guide và design sytem. Bài viết khá đơn giản và phù hợp hơn với những người mới bắt đầu tìm hiểu về các design system và lợi ích của chúng.

. . .

Animation in design systems
(Tạm dịch: Hoạt họa trong design system)

Một phần lý do chúng ta xem hoạt họa
như một công dân hạng hai là vì
không thực sự cân nhắc sức mạnh của nó.
Khi người dùng đang quét trang web
(hoặc bất kỳ môi trường hoặc ảnh nào),
họ đang cố xây dựng bản đồ không gian
xung quanh khu vực hoạt động.
Trong quá trình này,
không có gì gây chú ý hoàn toàn
như thứ gì đó đang chuyển động.

Hãy đọc nếu…

Bạn đang tìm các mẹo thiết thực về cách căn lề, sắp xếp ưu tiên và bao gồm ảnh động trong giao diện người dùng vào design system.

. . .

Atomic Design

Atomic Design là phương pháp
thiết kế giao diện mà designer sẽ ưu tiên
thực hiện thiết kế các thành phần riêng lẻ
và kết hợp chúng lại với nhau,
thay vì thiết kế cả trang.

Hãy đọc nếu… 

Bạn hãy đọc đi, vì đây sẽ là một trong những bài viết then chốt về design system.

. . .

Atomic design: how to design systems of components
(Tạm dịch: Atomic Design: làm thế nào để thiết kế các thành phần trong hệ thống)

Hãy đọc nếu…

Bạn muốn xem cách một designer áp dụng atomic design như thế nào.


Người dịch: Long Hwarang
Nguồn: Medium.com