Sơn Thành Logistic - Design System
Tổng quan
Với mục tiêu tăng tốc phát triển sản phẩm số một cách nhất quán và tiết kiệm nguồn lực, Sơn Thành Holdings đã triển khai xây dựng một hệ thống thiết kế nội bộ (design system) dùng chung cho cả website và ứng dụng di động. Là một công ty còn non trẻ trong lĩnh vực logistics xuyên biên giới, bài toán lớn nhất của đội ngũ là làm sao đảm bảo trải nghiệm người dùng ổn định, giao diện nhất quán mà không phải tái thiết kế từ đầu ở mỗi giai đoạn phát triển.
Trong bối cảnh nhóm thiết kế và lập trình ban đầu còn hạn chế về nhân sự và kinh nghiệm hệ thống hóa, việc xây dựng một design system đã giúp đội ngũ thoát khỏi vòng lặp chỉnh sửa thủ công, rút ngắn thời gian phát triển, đồng thời mở đường cho việc mở rộng tính năng trong tương lai. Từ màu sắc, thành phần UI cho tới cấu trúc bố cục, mọi yếu tố đều được chuẩn hóa và tái sử dụng dễ dàng thông qua thư viện thiết kế tập trung.
Đây không chỉ là một nỗ lực về mặt giao diện, mà còn là bước chuyển mình quan trọng để Sơn Thành Holdings có thể phát triển sản phẩm số với tốc độ nhanh hơn, chi phí thấp hơn mà vẫn giữ được sự chuyên nghiệp và nhận diện thương hiệu rõ ràng trong từng điểm chạm.
Ngày bắt đầu
16 thg 10, 2023
Khách hàng
Sơn Thành Holdings
Mục tiêu dự án
Xây dựng Hệ thống thiết kế hoàn chỉnh
Phù hợp cho cả website và ứng dụng di động
Tăng tốc độ phát triển dự án lên ít nhất 15%
Các vấn đề
Xây dựng từ đầu và sau khi website đã hoàn thành một nửa
Đội ngũ thiếu kinh nghiệm: Sơn Thành Holdings chỉ có 1 Nhà thiết kế đồ hoạ và 2 Lập trình viên, họ quá bận rộn để xây dựng một hệ thống hoàn chỉnh. Khi bắt đầu thiết kế website admin cho Sơn Thành Holdings, tôi cũng không chủ đích sẽ xây dựng một bộ Hệ thống thiết kế lớn, vì thế, hệ thống này ra đời sau khi dự án website đã hoàn thành được hơn một nửa.
Vì là lần đầu tiên xây dựng hệ thống, chúng tôi mát nhiều thời gian để trao đổi xem nên đưa những gì vào đây để phù hợp với kinh phí cũng như nguồn lực của công ty. Đội ngũ cũng chưa từng xây dựng một Hệ thống thiết kế lớn nào nên cũng còn thiếu khá nhiều thành phần và phải bổ sung lặp đi lặp lại nhiều lần.
Cơ bản về hệ thống này
Token là gì?
Token là phần nhỏ nhất trong hệ thống thiết kế. Chúng đại diện cho một thuộc tính hoặc đặc điểm của thiết kế, chẳng hạn như màu sắc, kiểu chữ, khoảng cách hoặc đổ bóng.
Token được sử dụng để duy trì tính nhất quán và hợp lý hóa quy trình thiết kế và phát triển trong một hệ thống thiết kế. Mỗi thành phần trong hệ thống thiết kế được xây dựng từ nhiều token khác nhau. Trong hệ thống thiết kế của chúng tôi, tôi gọi token là Foundation.
Hệ thống Grid-8 là gì? Tại sao lại dùng nó?
Sử dụng số 8 để tính kích thước và các thành phần khoảng cách giúp việc thiết kế cho nhiều loại thiết bị trở nên dễ dàng và nhất quán. Phần lớn các kích thước màn hình phổ biến đều chia hết cho 8, giúp dễ dàng tính toán.
Nguyên tắc của Lưới 8pt là sử dụng bội số của 8 để bố trí, kích thước, khoảng cách và căn lề của các phần tử.
Xây dựng nền tảng (Thiết kế các token)
Hệ thống thiết kế Sơn Thành Holdings có hai thành phần chính: Foundation và Component. Foundation là nơi chúng tôi lưu trữ tất cả các token thiết kế của mình, chẳng hạn như kiểu chữ, màu sắc và khoảng cách. Các thành phần nền tảng này rất quan trọng vì chúng đóng vai trò là các khối xây dựng trong thư viện của chúng tôi.
Màu sắc
Tổng quan
Tôi đã sắp xếp và đặt tên cho các màu thành 5 danh mục chính dựa trên cách sử dụng (ngữ nghĩa): chính, phụ, ngữ nghĩa, trung tính, nhấn mạnh thương hiệu. Đối với mỗi màu, tôi đã kiểm tra khả năng truy cập văn bản bằng công cụ màu của Material Design.
⭐ Đặt tên ngữ nghĩa
Mỗi màu không nên chỉ là mô tả về sắc thái, phải nêu rõ mục đích và tính chất của màu đó (chính, phụ, nhấn, v.v.). Điều này giúp các Lập trình viên hoặc các Nhà thiết kế sau này dễ dàng chọn đúng màu và tránh bị thiếu nhất quán.
Kiểu chữ
Tổng quan
Giống như cách tiếp cận của tôi với màu sắc, tôi đã tổ chức và đặt tên cho hệ thống kiểu chữ theo cách ngữ nghĩa, bao gồm các danh mục như hiển thị, tiêu đề, đoạn văn, hành động và chú thích.
Ngoài ra, tôi đã căn chỉnh chiều cao và khoảng cách của các dòng theo hệ thống lưới 8 để đảm bảo rằng tất cả chúng đều chia hết cho 8.
⭐ Nghiên cứu
Do nhiều nhân viên và khách hàng của chúng tôi có độ tuổi trung bình là 35 và đa phần đều có vấn đề về thị giác (90% nhân viên CS - đối tượng sử dụng hệ thống nhiều nhất, bị cận) nên tôi đã tiến hành nghiên cứu và cộng tác với các Lập trình viên để xác định kích cỡ phông chữ tối ưu cho hệ thống.
Các token khác
Xây dựng components
Hệ thống thiết kế bắt đầu xây dựng sau khi website đã hoàn thành được hơn một nửa, vì thế tôi cần phải làm càng nhanh càng tốt để có thể vừa đồng bộ và thay thế các thành phần cũ đã thiết kế xong, vừa có nguyên liệu để thiết kế tiếp các phần khác của website dựa vào hệ thống thiết kế mới xây dựng này. Sau đây là phân tích chi tiết về dự án trong sprint:
Đối với tất cả các thành phần, tôi sẽ xây dựng tất cả các trạng thái của chúng và kết hợp chúng thành các biến thể.
Đối với một thành phần, các nhà thiết kế chỉ cần tìm kiếm tên thành phần trong bảng Tài sản, kéo thành phần vào và điều chỉnh cài đặt theo ý thích của họ. Tôi cũng đã tiến hành các buổi Workshop để giúp các Lập trình viên, BA, DA, Nhà thiết kế đồ hoạ tham gia vào hệ thống thiết kế.
Đây là cách mà các component hoạt động!
Nó cực kỳ dễ sử dụng và cho phép các chúng tôi xây dựng thiết kế hi-fi cực kỳ nhanh chóng. Các component cung cấp một mẫu chuẩn hóa cho tính nhất quán của thiết kế nhưng cũng cung cấp đủ tùy chỉnh giúp chúng tôi sáng tạo.
Cập nhật lại các giao diện theo hệ thống thiết kế mới
Tôi đã chỉnh sửa mọi màn hình trong bằng hệ thống thiết kế mớ. Điều này liên quan đến việc căn chỉnh mọi thứ với hệ thống lưới 8pt và sử dụng Auto layout để chỉnh sửa và bảo trì dễ dàng hơn. Mặc dù tốn nhiều thời gian, nhưng nó cho phép tôi hiểu rõ hơn về sản phẩm.
Sơn Thành Logistic - Design System
Tổng quan
Với mục tiêu tăng tốc phát triển sản phẩm số một cách nhất quán và tiết kiệm nguồn lực, Sơn Thành Holdings đã triển khai xây dựng một hệ thống thiết kế nội bộ (design system) dùng chung cho cả website và ứng dụng di động. Là một công ty còn non trẻ trong lĩnh vực logistics xuyên biên giới, bài toán lớn nhất của đội ngũ là làm sao đảm bảo trải nghiệm người dùng ổn định, giao diện nhất quán mà không phải tái thiết kế từ đầu ở mỗi giai đoạn phát triển.
Trong bối cảnh nhóm thiết kế và lập trình ban đầu còn hạn chế về nhân sự và kinh nghiệm hệ thống hóa, việc xây dựng một design system đã giúp đội ngũ thoát khỏi vòng lặp chỉnh sửa thủ công, rút ngắn thời gian phát triển, đồng thời mở đường cho việc mở rộng tính năng trong tương lai. Từ màu sắc, thành phần UI cho tới cấu trúc bố cục, mọi yếu tố đều được chuẩn hóa và tái sử dụng dễ dàng thông qua thư viện thiết kế tập trung.
Đây không chỉ là một nỗ lực về mặt giao diện, mà còn là bước chuyển mình quan trọng để Sơn Thành Holdings có thể phát triển sản phẩm số với tốc độ nhanh hơn, chi phí thấp hơn mà vẫn giữ được sự chuyên nghiệp và nhận diện thương hiệu rõ ràng trong từng điểm chạm.
Ngày bắt đầu
16 thg 10, 2023
Khách hàng
Sơn Thành Holdings
Mục tiêu dự án
Xây dựng Hệ thống thiết kế hoàn chỉnh
Phù hợp cho cả website và ứng dụng di động
Tăng tốc độ phát triển dự án lên ít nhất 15%
Các vấn đề
Xây dựng từ đầu và sau khi website đã hoàn thành một nửa
Đội ngũ thiếu kinh nghiệm: Sơn Thành Holdings chỉ có 1 Nhà thiết kế đồ hoạ và 2 Lập trình viên, họ quá bận rộn để xây dựng một hệ thống hoàn chỉnh. Khi bắt đầu thiết kế website admin cho Sơn Thành Holdings, tôi cũng không chủ đích sẽ xây dựng một bộ Hệ thống thiết kế lớn, vì thế, hệ thống này ra đời sau khi dự án website đã hoàn thành được hơn một nửa.
Vì là lần đầu tiên xây dựng hệ thống, chúng tôi mát nhiều thời gian để trao đổi xem nên đưa những gì vào đây để phù hợp với kinh phí cũng như nguồn lực của công ty. Đội ngũ cũng chưa từng xây dựng một Hệ thống thiết kế lớn nào nên cũng còn thiếu khá nhiều thành phần và phải bổ sung lặp đi lặp lại nhiều lần.
Cơ bản về hệ thống này
Token là gì?
Token là phần nhỏ nhất trong hệ thống thiết kế. Chúng đại diện cho một thuộc tính hoặc đặc điểm của thiết kế, chẳng hạn như màu sắc, kiểu chữ, khoảng cách hoặc đổ bóng.
Token được sử dụng để duy trì tính nhất quán và hợp lý hóa quy trình thiết kế và phát triển trong một hệ thống thiết kế. Mỗi thành phần trong hệ thống thiết kế được xây dựng từ nhiều token khác nhau. Trong hệ thống thiết kế của chúng tôi, tôi gọi token là Foundation.
Hệ thống Grid-8 là gì? Tại sao lại dùng nó?
Sử dụng số 8 để tính kích thước và các thành phần khoảng cách giúp việc thiết kế cho nhiều loại thiết bị trở nên dễ dàng và nhất quán. Phần lớn các kích thước màn hình phổ biến đều chia hết cho 8, giúp dễ dàng tính toán.
Nguyên tắc của Lưới 8pt là sử dụng bội số của 8 để bố trí, kích thước, khoảng cách và căn lề của các phần tử.
Xây dựng nền tảng (Thiết kế các token)
Hệ thống thiết kế Sơn Thành Holdings có hai thành phần chính: Foundation và Component. Foundation là nơi chúng tôi lưu trữ tất cả các token thiết kế của mình, chẳng hạn như kiểu chữ, màu sắc và khoảng cách. Các thành phần nền tảng này rất quan trọng vì chúng đóng vai trò là các khối xây dựng trong thư viện của chúng tôi.
Màu sắc
Tổng quan
Tôi đã sắp xếp và đặt tên cho các màu thành 5 danh mục chính dựa trên cách sử dụng (ngữ nghĩa): chính, phụ, ngữ nghĩa, trung tính, nhấn mạnh thương hiệu. Đối với mỗi màu, tôi đã kiểm tra khả năng truy cập văn bản bằng công cụ màu của Material Design.
⭐ Đặt tên ngữ nghĩa
Mỗi màu không nên chỉ là mô tả về sắc thái, phải nêu rõ mục đích và tính chất của màu đó (chính, phụ, nhấn, v.v.). Điều này giúp các Lập trình viên hoặc các Nhà thiết kế sau này dễ dàng chọn đúng màu và tránh bị thiếu nhất quán.
Kiểu chữ
Tổng quan
Giống như cách tiếp cận của tôi với màu sắc, tôi đã tổ chức và đặt tên cho hệ thống kiểu chữ theo cách ngữ nghĩa, bao gồm các danh mục như hiển thị, tiêu đề, đoạn văn, hành động và chú thích.
Ngoài ra, tôi đã căn chỉnh chiều cao và khoảng cách của các dòng theo hệ thống lưới 8 để đảm bảo rằng tất cả chúng đều chia hết cho 8.
⭐ Nghiên cứu
Do nhiều nhân viên và khách hàng của chúng tôi có độ tuổi trung bình là 35 và đa phần đều có vấn đề về thị giác (90% nhân viên CS - đối tượng sử dụng hệ thống nhiều nhất, bị cận) nên tôi đã tiến hành nghiên cứu và cộng tác với các Lập trình viên để xác định kích cỡ phông chữ tối ưu cho hệ thống.
Các token khác
Xây dựng components
Hệ thống thiết kế bắt đầu xây dựng sau khi website đã hoàn thành được hơn một nửa, vì thế tôi cần phải làm càng nhanh càng tốt để có thể vừa đồng bộ và thay thế các thành phần cũ đã thiết kế xong, vừa có nguyên liệu để thiết kế tiếp các phần khác của website dựa vào hệ thống thiết kế mới xây dựng này. Sau đây là phân tích chi tiết về dự án trong sprint:
Đối với tất cả các thành phần, tôi sẽ xây dựng tất cả các trạng thái của chúng và kết hợp chúng thành các biến thể.
Đối với một thành phần, các nhà thiết kế chỉ cần tìm kiếm tên thành phần trong bảng Tài sản, kéo thành phần vào và điều chỉnh cài đặt theo ý thích của họ. Tôi cũng đã tiến hành các buổi Workshop để giúp các Lập trình viên, BA, DA, Nhà thiết kế đồ hoạ tham gia vào hệ thống thiết kế.
Đây là cách mà các component hoạt động!
Nó cực kỳ dễ sử dụng và cho phép các chúng tôi xây dựng thiết kế hi-fi cực kỳ nhanh chóng. Các component cung cấp một mẫu chuẩn hóa cho tính nhất quán của thiết kế nhưng cũng cung cấp đủ tùy chỉnh giúp chúng tôi sáng tạo.
Cập nhật lại các giao diện theo hệ thống thiết kế mới
Tôi đã chỉnh sửa mọi màn hình trong bằng hệ thống thiết kế mớ. Điều này liên quan đến việc căn chỉnh mọi thứ với hệ thống lưới 8pt và sử dụng Auto layout để chỉnh sửa và bảo trì dễ dàng hơn. Mặc dù tốn nhiều thời gian, nhưng nó cho phép tôi hiểu rõ hơn về sản phẩm.
Sơn Thành Logistic - Design System
Tổng quan
Với mục tiêu tăng tốc phát triển sản phẩm số một cách nhất quán và tiết kiệm nguồn lực, Sơn Thành Holdings đã triển khai xây dựng một hệ thống thiết kế nội bộ (design system) dùng chung cho cả website và ứng dụng di động. Là một công ty còn non trẻ trong lĩnh vực logistics xuyên biên giới, bài toán lớn nhất của đội ngũ là làm sao đảm bảo trải nghiệm người dùng ổn định, giao diện nhất quán mà không phải tái thiết kế từ đầu ở mỗi giai đoạn phát triển.
Trong bối cảnh nhóm thiết kế và lập trình ban đầu còn hạn chế về nhân sự và kinh nghiệm hệ thống hóa, việc xây dựng một design system đã giúp đội ngũ thoát khỏi vòng lặp chỉnh sửa thủ công, rút ngắn thời gian phát triển, đồng thời mở đường cho việc mở rộng tính năng trong tương lai. Từ màu sắc, thành phần UI cho tới cấu trúc bố cục, mọi yếu tố đều được chuẩn hóa và tái sử dụng dễ dàng thông qua thư viện thiết kế tập trung.
Đây không chỉ là một nỗ lực về mặt giao diện, mà còn là bước chuyển mình quan trọng để Sơn Thành Holdings có thể phát triển sản phẩm số với tốc độ nhanh hơn, chi phí thấp hơn mà vẫn giữ được sự chuyên nghiệp và nhận diện thương hiệu rõ ràng trong từng điểm chạm.
Ngày bắt đầu
16 thg 10, 2023
Khách hàng
Sơn Thành Holdings
Mục tiêu dự án
Xây dựng Hệ thống thiết kế hoàn chỉnh
Phù hợp cho cả website và ứng dụng di động
Tăng tốc độ phát triển dự án lên ít nhất 15%
Các vấn đề
Xây dựng từ đầu và sau khi website đã hoàn thành một nửa
Đội ngũ thiếu kinh nghiệm: Sơn Thành Holdings chỉ có 1 Nhà thiết kế đồ hoạ và 2 Lập trình viên, họ quá bận rộn để xây dựng một hệ thống hoàn chỉnh. Khi bắt đầu thiết kế website admin cho Sơn Thành Holdings, tôi cũng không chủ đích sẽ xây dựng một bộ Hệ thống thiết kế lớn, vì thế, hệ thống này ra đời sau khi dự án website đã hoàn thành được hơn một nửa.
Vì là lần đầu tiên xây dựng hệ thống, chúng tôi mát nhiều thời gian để trao đổi xem nên đưa những gì vào đây để phù hợp với kinh phí cũng như nguồn lực của công ty. Đội ngũ cũng chưa từng xây dựng một Hệ thống thiết kế lớn nào nên cũng còn thiếu khá nhiều thành phần và phải bổ sung lặp đi lặp lại nhiều lần.
Cơ bản về hệ thống này
Token là gì?
Token là phần nhỏ nhất trong hệ thống thiết kế. Chúng đại diện cho một thuộc tính hoặc đặc điểm của thiết kế, chẳng hạn như màu sắc, kiểu chữ, khoảng cách hoặc đổ bóng.
Token được sử dụng để duy trì tính nhất quán và hợp lý hóa quy trình thiết kế và phát triển trong một hệ thống thiết kế. Mỗi thành phần trong hệ thống thiết kế được xây dựng từ nhiều token khác nhau. Trong hệ thống thiết kế của chúng tôi, tôi gọi token là Foundation.
Hệ thống Grid-8 là gì? Tại sao lại dùng nó?
Sử dụng số 8 để tính kích thước và các thành phần khoảng cách giúp việc thiết kế cho nhiều loại thiết bị trở nên dễ dàng và nhất quán. Phần lớn các kích thước màn hình phổ biến đều chia hết cho 8, giúp dễ dàng tính toán.
Nguyên tắc của Lưới 8pt là sử dụng bội số của 8 để bố trí, kích thước, khoảng cách và căn lề của các phần tử.
Xây dựng nền tảng (Thiết kế các token)
Hệ thống thiết kế Sơn Thành Holdings có hai thành phần chính: Foundation và Component. Foundation là nơi chúng tôi lưu trữ tất cả các token thiết kế của mình, chẳng hạn như kiểu chữ, màu sắc và khoảng cách. Các thành phần nền tảng này rất quan trọng vì chúng đóng vai trò là các khối xây dựng trong thư viện của chúng tôi.
Màu sắc
Tổng quan
Tôi đã sắp xếp và đặt tên cho các màu thành 5 danh mục chính dựa trên cách sử dụng (ngữ nghĩa): chính, phụ, ngữ nghĩa, trung tính, nhấn mạnh thương hiệu. Đối với mỗi màu, tôi đã kiểm tra khả năng truy cập văn bản bằng công cụ màu của Material Design.
⭐ Đặt tên ngữ nghĩa
Mỗi màu không nên chỉ là mô tả về sắc thái, phải nêu rõ mục đích và tính chất của màu đó (chính, phụ, nhấn, v.v.). Điều này giúp các Lập trình viên hoặc các Nhà thiết kế sau này dễ dàng chọn đúng màu và tránh bị thiếu nhất quán.
Kiểu chữ
Tổng quan
Giống như cách tiếp cận của tôi với màu sắc, tôi đã tổ chức và đặt tên cho hệ thống kiểu chữ theo cách ngữ nghĩa, bao gồm các danh mục như hiển thị, tiêu đề, đoạn văn, hành động và chú thích.
Ngoài ra, tôi đã căn chỉnh chiều cao và khoảng cách của các dòng theo hệ thống lưới 8 để đảm bảo rằng tất cả chúng đều chia hết cho 8.
⭐ Nghiên cứu
Do nhiều nhân viên và khách hàng của chúng tôi có độ tuổi trung bình là 35 và đa phần đều có vấn đề về thị giác (90% nhân viên CS - đối tượng sử dụng hệ thống nhiều nhất, bị cận) nên tôi đã tiến hành nghiên cứu và cộng tác với các Lập trình viên để xác định kích cỡ phông chữ tối ưu cho hệ thống.
Các token khác
Xây dựng components
Hệ thống thiết kế bắt đầu xây dựng sau khi website đã hoàn thành được hơn một nửa, vì thế tôi cần phải làm càng nhanh càng tốt để có thể vừa đồng bộ và thay thế các thành phần cũ đã thiết kế xong, vừa có nguyên liệu để thiết kế tiếp các phần khác của website dựa vào hệ thống thiết kế mới xây dựng này. Sau đây là phân tích chi tiết về dự án trong sprint:
Đối với tất cả các thành phần, tôi sẽ xây dựng tất cả các trạng thái của chúng và kết hợp chúng thành các biến thể.
Đối với một thành phần, các nhà thiết kế chỉ cần tìm kiếm tên thành phần trong bảng Tài sản, kéo thành phần vào và điều chỉnh cài đặt theo ý thích của họ. Tôi cũng đã tiến hành các buổi Workshop để giúp các Lập trình viên, BA, DA, Nhà thiết kế đồ hoạ tham gia vào hệ thống thiết kế.
Đây là cách mà các component hoạt động!
Nó cực kỳ dễ sử dụng và cho phép các chúng tôi xây dựng thiết kế hi-fi cực kỳ nhanh chóng. Các component cung cấp một mẫu chuẩn hóa cho tính nhất quán của thiết kế nhưng cũng cung cấp đủ tùy chỉnh giúp chúng tôi sáng tạo.
Cập nhật lại các giao diện theo hệ thống thiết kế mới
Tôi đã chỉnh sửa mọi màn hình trong bằng hệ thống thiết kế mớ. Điều này liên quan đến việc căn chỉnh mọi thứ với hệ thống lưới 8pt và sử dụng Auto layout để chỉnh sửa và bảo trì dễ dàng hơn. Mặc dù tốn nhiều thời gian, nhưng nó cho phép tôi hiểu rõ hơn về sản phẩm.
