Tóm tắt
Các đơn vị sở hữu sản phẩm và những nhà thiết kế – phát triển sản phẩm ngày nay không còn xa lạ với Hệ thống thiết kế (design system). Design system là một cách tuyệt vời để để các nhóm làm việc dễ dàng quản lý, chỉnh sửa, tái sử dụng, nâng cấp thiết kế của mình. Thông qua việc tạo thành một hệ thống các thành phần thiết kế nhất quán, các thay đổi hàng loạt dễ dàng được thực hiện, những lỗi sai nhanh chóng được chỉnh sửa bằng cách điều chỉnh lại thành phần gốc.
Atomic design cung cấp một phương pháp luận rõ ràng để xây dựng hệ thống thiết kế bằng cách thực sự nhìn thấy cách chúng được tạo lập ở từng cấp độ khác nhau. Nó giúp các nhóm làm việc dễ dàng nhìn thấy vấn đề nằm ở đâu, và cần phải xử lý nó ở cấp độ nào để tối giản chi phí và tiết kiệm nhiều thời gian nhất, đồng thời không ảnh hưởng đến tính nhất quán của thiết kế.
Lưu ý trước khi đọc
Bài viết này được biên dịch và viết lại từ bài viết gốc của tác giả. Bài viết không phục vụ mục đích thương mại! This Blog is not use for commercial purposes!
Nguồn bài viết tham khảo: https://atomicdesign.bradfrost.com/chapter-2/
Nguồn gốc khái niệm Atomic Design
Năm 2013, Brad Frost – một nhà thiết kế website – phát hành cuốn sách Atomic Design. Cuốn sách này dựa trên những gì mà anh rút ra được trong quá trình làm việc của mình. Brad Frost cho rằng cần thiết phải xây dựng hệ thống thiết kế (design system) chỉn chu, thay vì chỉ tạo ra những màn hình khi thiết kế giao diện.
Trong quá trình tìm kiếm thứ có sự tương đồng để minh họa và đặt tên cho phương pháp luận của mình, Brad Frost đã lựa chọn hóa học. Atomic là nguyên tử, là đơn vị nhỏ nhất cấu thành vật chất trong vũ trụ. Ngụ ý rằng, giao diện cũng được cấu tạo từ những thành phần nhỏ nhất, và đó là cách chúng ta sẽ bắt đầu thiết kế. Quan điểm này được đông đảo những nhà thiết kế ủng hộ, từ đó, khái niệm Atomic design cũng dần trở nên phổ biến và được áp dụng rộng rãi.
Các thành phần của hệ thống thiết kế theo Atomic Design
Các thành phần trong Hệ thống thiết kế (design system) theo phương pháp Atomic design được chia thành 5 cấp độ, được tổ chức và liên kết chặt chẽ với nhau, đó là:
- Atoms – Nguyên tử
- Molecules – Phân tử
- Organisms – Sinh vật
- Templates – Mẫu
- Pages – Trang
1. Atoms – Nguyên tử
Là các phần tử nhỏ nhất. Nó có là những thành phần nền tảng như: màu sắc, font chữ, hoặc thậm chí là mô tả các hoạt ảnh, chuyển động (animations) của thiết kế. Bên cạnh đó, các khối (block), nhãn (label), nút (button)… cũng được xếp vào nhóm này.
2. Molecules – Phân tử
Phân tử là những nhóm nguyên tử liên kết với nhau và là những đơn vị cơ bản nhỏ nhất của một hợp chất – về mặt hóa học. Các phân tử này mang các đặc tính riêng của chúng và đóng vai trò là xương sống của các hệ thống thiết kế. Lúc này mọi thứ dần trở nên rõ ràng hơn. Bạn đã có thể bắt đầu tạo các components của thiết kế cho các thành phần ở cấp độ phân tử, bởi khả năng tái sử dụng của nó. Chúng có thể là: Thanh tìm kiếm, thẻ sản phẩm, thanh nhập có nhãn,…
3. Organisms – Sinh vật
“Sinh vật” là những nhóm phân tử liên kết với nhau để tạo thành một phần tương đối phức tạp, có sự riêng biệt nhất định. Sự riêng biệt nhất định, nghĩa là chúng bắt đầu có một mức độ cụ thể nhất định, song chúng vẫn chỉ là thành phần của cấp độ cao hơn, và còn tính tái sử dụng.
Có thể xem các “Sinh vật” này chính là những section của website. Chúng có thể được cấu thành bởi những thành phần khác nhau, tạo thành header, footer, giới thiệu… hoặc section được tạo thành bởi cùng một thành phần được lặp lại, như danh mục sản phẩm, khách hàng, đối tác…
4. Templates – Mẫu
Tới đây, tác giả đã quay trở lại và tập trung vào ngôn ngữ của thiết kế. Sự kết hợp của các “sinh vật” bên trên tiếp tục cho ra các mẫu. Các mẫu đã trở nên rất cụ thể, được layout hoàn chỉnh. Ở một mức độ nào đó, các mẫu này có thể trông giống như wireframe của một trang, với đầy đủ các bố cục cần thiết.
5. Pages – Trang
Ở cấp độ cao nhất trong Atomic design, trang là sản phẩm hoàn chỉnh của thiết kế. Mỗi trang là một tập hợp duy nhất của các thành phần còn lại. Tại đây, các khối mô phỏng sẽ được thay thế bằng màu sắc, hình ảnh, nội dung, thật. Trang sẽ hiển thị chính xác những gì mà người dùng cuối nhìn thấy.
Ngoài ra, việc thiết kế trang hoàn chỉnh cũng cho phép nhà thiết kế biết chính xác điều gì sẽ xảy ra khi các nội dung được phủ đầy vào mẫu. Chẳng hạn, sẽ ra sao nếu nội dung 100 từ được gắn vào trong mẫu đang để 40 từ, một giỏ hàng được thêm 12 sản phẩm sẽ khác như thế nào khi chỉ có 4 sản phẩm trong mẫu? Do đó, cũng có thể xem việc thiết kế trang hoàn chỉnh là một bước để những nhà thiết kế kiểm tra tính khả dụng của các mẫu.
Kết luận
Ngay cả khi bạn không áp dụng hoàn toàn Atomic design vào việc xây dựng design system cho các dự án, bạn cũng nên biết về nó. Điều này có thể giúp bạn củng cố thêm phương pháp hiện tại của bạn.
