Hệ thống thiết kế (Design System), kiến thức UX/UI thiết yếu mà không ai nói cho bạn biết

📖 Chỉ bằng giá một cuốn sách!
Chỉ với giá của một cuốn sách, bạn có thể học khóa học video gồm tổng cộng 18 chương!
Sở hữu trọn đời các bài giảng liên tục được cập nhật!

📝 Cung cấp file checklist, bí kíp giúp tránh bỏ sót các thành phần!
Khi quản lý hệ thống thiết kế (design system), có những lúc bạn cần nhiều phiên bản UI khác nhau cho cùng một thành phần. Ví dụ như nút bấm, bạn cần các phiên bản UI đa dạng như trạng thái mặc định + trạng thái hover + trạng thái khi nhấn, v.v. Ngoài ra, bạn cũng cần thiết lập hướng dẫn sử dụng, chẳng hạn như các chính sách liên quan như khi nào dùng nút màu xanh, khi nào dùng nút ghost. Tuy nhiên, vì phải tạo ra dựa trên việc cân nhắc rất nhiều trường hợp khác nhau như vậy nên rất dễ bỏ sót điều gì đó. Tôi sẽ cung cấp cho bạn một bản checklist để ngăn chặn những thiếu sót đó.

👆 Ví dụ về hệ thống thiết kế do Google tạo ra. Nó được gọi là 'Material Design (System)' nổi tiếng.

Thay vì những định nghĩa khó hiểu và mơ hồ về tính nhất quán hay gì đó, hãy ghi nhớ bằng một hoặc hai hình ảnh quen thuộc với bản thân. Lúc đầu, việc ghi nhớ bằng hình ảnh thay vì văn bản sẽ giúp bạn dễ hiểu và nhớ lâu hơn.

👆Nếu là nhà thiết kế, hãy ghi nhớ bằng hình ảnh Figma nhé.

Hệ thống thiết kế (Design System) = Style, Component có trong Figma + Hướng dẫn sử dụng tương ứng (những gì nhà thiết kế trong nhóm đã viết trên Notion/Slack/các trang web khác)

👆 Nếu là nhà phát triển, hãy ghi nhớ bằng hình ảnh VScode nhé.

Hệ thống thiết kế = Phần mã phong cách, thành phần được viết trong VScode + hướng dẫn sử dụng tương ứng (những gì nhà thiết kế trong nhóm đã viết trên Notion/Slack/các trang web khác)

Hãy thử tìm kiếm từ khóa 'Hệ thống thiết kế' (Design System) trên các nền tảng bài giảng trực tuyến xem sao.
Có lẽ sẽ hầu như không có bài giảng nào liên quan đâu. Không chỉ số lượng bài giảng cực kỳ thiếu hụt mà cấu trúc chương trình học cũng thường quá đơn giản hoặc ngược lại, đa số là các bài giảng quá dài.
Trên YouTube thì lượng nội dung có vẻ nhiều hơn một chút. Tuy nhiên, các video trên YouTube cũng không có nội dung cụ thể về 'hướng dẫn' (guide).
Vì thời gian của tất cả chúng ta đều quý giá, đặc biệt là những người đi làm ở Hàn Quốc vô cùng bận rộn, nên bài giảng này đã được đúc kết và gói gọn chỉ những nội dung cốt lõi cần thiết nhất!

Vì hệ thống thiết kế (Design System) là nội dung cốt lõi tạo nên khung xương cơ bản cho mọi sản phẩm web/app, nên đây là kiến thức bắt buộc mà các nhà thiết kế đặc biệt cần phải nắm vững.
Tuy nhiên, dù là một khái niệm quan trọng và thiết yếu như vậy, tại sao lại có rất ít bài giảng về 'Hệ thống thiết kế'? Đó là bởi vì 'Hệ thống thiết kế' không phải là công việc dễ dàng lộ ra bên ngoài và cũng không phải là nội dung trực tiếp tạo ra doanh thu.
Nó giống như 'việc nhà' vậy. Việc nhà dù có chăm chỉ làm mỗi ngày cũng không dễ dàng nhận thấy được thành quả rõ rệt. Làm việc nhà chăm chỉ cũng không tạo ra tiền bạc ngay lập tức. Vì làm việc nhà không để lại dấu ấn rõ ràng và cũng không sinh ra tiền, nên từ trước đến nay nó luôn bị đánh giá thấp. Có lẽ rất ít người từng thấy bài giảng nào dạy cách làm việc nhà sao cho tốt. Thế nhưng, chỉ cần không làm việc nhà trong 3 ngày là sẽ thấy ngay hậu quả, 'Hệ thống thiết kế' cũng vậy, nếu không chú trọng đến nó, bạn sẽ liên tục gặp phải những bất tiện khi làm việc. Và nếu những vấn đề lớn nhỏ liên quan đó cứ tiếp tục bị bỏ mặc, sau này có thể chúng sẽ rơi vào tình trạng khó có thể cứu vãn.
Tại các tập đoàn khổng lồ như Google, Apple, Samsung, họ có những đội ngũ riêng biệt chỉ để quản lý hệ thống thiết kế. Những doanh nghiệp thông minh này chắc chắn không tự nhiên dư tiền để lập ra những đội ngũ như vậy mà không có lý do, đúng không? Đó chính là minh chứng cho thấy họ hiểu rất rõ tầm quan trọng của hệ thống thiết kế này. Tại Hàn Quốc, công ty Toss cho biết họ đang tiết kiệm được 15.800 giờ mỗi năm sau khi tái cấu trúc mạnh mẽ hệ thống thiết kế của mình.
Mặc dù là một hệ thống có sức ảnh hưởng lớn như vậy, nhưng thật đáng tiếc là có quá ít người hướng dẫn về hệ thống thiết kế.

Như tôi sẽ còn nhắc lại nhiều lần sau này, không nhất thiết phải là khóa học này cũng được. Dù là qua sách hay YouTube, tôi rất mong bạn sẽ nhất định tiếp tục nghiên cứu về thứ gọi là hệ thống thiết kế (Design System). Hệ thống thiết kế đã phát triển rất nhiều nhưng vẫn còn nhiều điểm cần được cải thiện. Càng có nhiều người quan tâm thì hệ thống mới có thể ngày càng được nâng tầm tiêu chuẩn chung.

🔥 Những điều chỉ có trong bài giảng của Needesign

👍 Bài giảng được cập nhật liên tục!

Tốc độ thay đổi trong lĩnh vực IT cực kỳ nhanh chóng. Chỉ nhìn vào Figma thôi cũng thấy mỗi lần cập nhật là có quá nhiều thứ thay đổi đến mức phải học hỏi liên tục. Do đó, bạn cần kiểm tra lịch sử cập nhật để xem liệu khóa học đó có được cập nhật thường xuyên nhằm bắt kịp tốc độ thay đổi nhanh chóng hay không. Tần suất cập nhật cũng là phần phản ánh tâm huyết của giảng viên đối với chất lượng bài giảng.

👍 Bài giảng của giảng viên luôn lắng nghe những phản hồi tiêu cực từ học viên!

Đừng chỉ tham khảo điểm số đánh giá mà hãy để mắt đến cả những bình luận mà giảng viên để lại. Nếu giảng viên phản ứng một cách phòng thủ trước những phản hồi tiêu cực của học viên, hoặc chỉ trả lời một cách hình thức, thì khó có thể nói rằng họ có thái độ tốt của một người dạy học. Nếu thực lòng mong muốn học viên tiến bộ và thành công, khi học viên nói rằng "em thấy tiếc ở điểm này điểm kia~", giảng viên sẽ nghĩ rằng "Ôi, đúng rồi. Mình đã bỏ lỡ phần này. Mình phải bổ sung thêm cho bài giảng thôi".

1. Tăng hiệu quả công việc

Đây là điều mà nhiều người đã biết rõ rồi. Chẳng hạn như giảm bớt các công việc lặp đi lặp lại, giúp duy trì tính nhất quán của thiết kế trong toàn bộ sản phẩm, v.v.

2. Ngăn chặn những lời góp ý không cần thiết

Tôi cũng là một nhà thiết kế và làm công việc này vì yêu thích thiết kế, nhưng đôi khi cũng có những khoảnh khắc khiến tôi phải suy nghĩ. Thiết kế là một lĩnh vực mà bất kỳ ai cũng có thể dễ dàng đưa ra ý kiến về sản phẩm của tôi vào bất cứ lúc nào. Ví dụ, một nhân viên nhóm kinh doanh đi ngang qua có thể nói: "Phông chữ này trông hơi cứng nhắc nhỉ?" hay "Số trong cột này để căn giữa trông sẽ đẹp hơn đúng không?". Những phản hồi từ góc nhìn của người khác luôn được chào đón, nhưng trong trường hợp nhà thiết kế không phải làm việc thiếu suy nghĩ mà đã nghiên cứu và cân nhắc kỹ lưỡng mới quyết định, hoặc khi có quá nhiều người đưa ra những ý kiến trái chiều nhau, nhà thiết kế có thể sẽ muốn nghe tiếng chim hót buổi sáng hay tiếng suối chảy trong thiên nhiên để tìm lại sự bình tĩnh cho tâm hồn.
Tuy nhiên, nếu áp dụng hệ thống thiết kế (design system) một cách tích cực, nó sẽ không chỉ dành riêng cho nhà thiết kế mà trở thành một hệ thống được tạo ra với sự tham gia của tất cả mọi người. Vì đây là hệ thống được quyết định dựa trên việc phản ánh tiếng nói của mọi người, nên số lượng người không hài lòng cũng sẽ giảm đi. Chúng ta cũng sẽ không cần phải tổ chức những cuộc họp hỗn loạn mỗi khi có ý kiến khác biệt nảy sinh.

3. Luyện tập cải thiện tính khả dụng

Xét về khía cạnh cần phải cải thiện tính khả dụng liên tục, hệ thống thiết kế cũng giống như các sản phẩm thông thường. Điểm khác biệt là, nếu bạn cải thiện tính khả dụng của trang web/ứng dụng mình tạo ra thì người dùng cuối sẽ hạnh phúc, còn nếu bạn cải thiện tính khả dụng của hệ thống thiết kế thì chính bạn và các đồng nghiệp của mình sẽ trở nên hạnh phúc. Người dùng sản phẩm của tôi có thể là bất kỳ ai nên rất khó nắm bắt và mất nhiều thời gian, nhưng người dùng hệ thống thiết kế của công ty chúng ta lại được xác định chính xác là các thành viên trong nhóm, vì vậy đây là môi trường tuyệt vời để thực hành nghiên cứu người dùng và cải thiện tính khả dụng!

Việc công ty đã đang sử dụng hệ thống thiết kế có nghĩa là sự phản đối của các thành viên trong nhóm đối với việc nâng cấp hệ thống thiết kế sẽ ít hơn! Nếu bạn cố gắng áp dụng hệ thống thiết kế vào một công ty chưa từng sử dụng, các thành viên có thể phản đối đáng kể vì có nhiều thứ mới cần học hỏi và thích nghi, cũng như nhiều công việc cũ cần phải chỉnh sửa lại. Nhân cơ hội này, việc thảo luận với các thành viên trong nhóm hoặc với toàn công ty về việc tái thiết lập hệ thống thiết kế cũng sẽ rất tốt!

Lĩnh vực IT là một trong những lĩnh vực thay đổi rất nhanh chóng trong số tất cả các ngành công nghiệp. Các công nghệ mới liên tục ra đời mỗi ngày. Nếu cụm từ 'Design Token' còn xa lạ với bạn, thì dù không phải qua bài giảng này, tôi cũng khuyên bạn nên tìm hiểu sơ qua về khái niệm này ở một nơi nào đó khác.

Đối với các tập đoàn lớn, thường có một đội ngũ riêng biệt chỉ chuyên trách về hệ thống thiết kế (design system). Tại Mỹ, một nhóm hệ thống thiết kế thường bao gồm khoảng 4 đến 9 thành viên. Tuy nhiên, đối với các doanh nghiệp vừa và nhỏ hoặc startup, khả năng cao là chỉ có 1 đến 2 nhân viên quản lý hệ thống thiết kế. Sẽ không dễ dàng để một nhà thiết kế duy nhất tại startup có thể tạo ra một hệ thống thiết kế tốt hơn so với 7 người ở một tập đoàn lớn. Cho dù năng lực của cá nhân đó có xuất sắc đến đâu, thì 7 người ở tập đoàn lớn vẫn dành cả ngày chỉ để nghiên cứu và cải thiện hệ thống thiết kế, trong khi một nhà thiết kế ở startup phải chắt chiu từng chút thời gian ít ỏi để cố gắng xây dựng nó. Nhưng may mắn thay, các tập đoàn lớn đó đã công khai nội dung về hệ thống thiết kế mà họ dày công tạo dựng thông qua trang web của mình. Vì vậy, chúng ta có thể tham khảo những nội dung đó với lòng biết ơn và phát triển chúng thành hệ thống thiết kế riêng cho công ty mình. Tuyệt đối đừng cố gắng tự mình tạo ra mọi thứ ngay từ đầu. Bạn sẽ gặp phải vô số sai lầm và thử thách đấy. Thay vào đó, việc tận dụng tích cực những nội dung mà nhiều chuyên gia toàn cầu hàng đầu đã cùng nhau xây dựng trong một thời gian dài là một quyết định sáng suốt.

👆 Cách đưa component vào library và lấy ra sử dụng

👆 Cách sử dụng danh sách kiểm tra (checklist) để đảm bảo không bỏ lỡ bất kỳ phần nào

👆 Hệ thống Atomic

👆 Khái niệm và cách sử dụng Token

📢 Nội dung sau đây sẽ không được đề cập
Cách 'nhà phát triển' xử lý mã hệ thống thiết kế

Q. Người không chuyên có thể tham gia khóa học này không?

Thay vì chuyên ngành, có thể nói rằng điều này phụ thuộc vào mức độ kiến thức tiên quyết về Figma. Nếu bạn có kiến thức về khái niệm Component trong Figma và có khả năng tìm kiếm các nguồn mở trên Figma Community, bạn sẽ không gặp nhiều khó khăn khi theo học.

Q. Nội dung bài học bao gồm đến cấp độ nào?

Nội dung không bao gồm việc sử dụng công cụ Figma để tự tay tạo ra từng thành phần (component) một. Như tôi sẽ đề cập nhiều lần trong bài giảng, mục tiêu của chúng ta là xây dựng một hệ thống thiết kế một cách nhanh chóng và hiệu quả. Chúng ta sẽ tận dụng triệt để các hệ thống thiết kế được xây dựng bài bản bởi nhiều chuyên gia hàng đầu tại các tập đoàn lớn trong một thời gian dài!

• Hiện là đại diện của NeeDesign
• Hoàn thành chương trình Thạc sĩ chuyên ngành Thiết kế tại cao học
• Tham gia vào nhiều dự án với đa dạng chủ đề và quy mô khác nhau, từ các tập đoàn lớn đến các công ty khởi nghiệp.
• Hơn 7 năm kinh nghiệm thực tế
• Youtube: @needesign (Needesign)

Do điều kiện thu âm và thiết bị không được tốt nên tôi đành phải sử dụng giọng nói nhân tạo. Rất mong các bạn thông cảm cho điều này. Tuy nhiên, tôi đã chọn giọng nói tự nhiên nhất nên sẽ không cảm thấy quá gượng gạo đâu.

• Vì chúng ta sẽ sử dụng Figma, vui lòng chuẩn bị sẵn sàng trước nhé.
• Nếu bạn đã biết về khái niệm Component và Community trong Figma thì việc thấu hiểu sẽ trở nên dễ dàng hơn nhiều.