Hệ thiết kế số
Khi thương hiệu có nhiều sản phẩm số, mỗi đội tự dựng giao diện một kiểu. Sinh Vũ biến nhận diện thành một nguồn chuẩn duy nhất cho cả người thiết kế lẫn lập trình viên.
Chúng tôi đã có brand guideline rồi, vì sao còn cần Hệ Thiết kế Số?
Brand guideline là tài liệu để con người đọc, còn Hệ Thiết kế Số là phiên bản máy đọc được của cùng nhận diện đó. Guideline cho biết thương hiệu nên trông thế nào, Hệ Thiết kế Số đảm bảo nó luôn đúng vậy trên mọi màn hình khách thấy. Đổi một token màu ở nguồn gốc, toàn bộ website, ứng dụng và component cập nhật theo, không sót chỗ nào.
Thương hiệu đẹp trên giấy vẫn loãng dần khi vào sản phẩm số, vì thiếu cơ chế thực thi tự động.
Bốn giai đoạn, có thời lượng rõ
Rà soát và chuyển đổi tokens
Kiểm kê toàn bộ giao diện số hiện có rồi chuẩn hóa thành ba lớp token theo chuẩn DTCG (Design Tokens Community Group, chuẩn chung của ngành).Bộ DTCG JSON tokens hỗ trợ sáng tối + báo cáo điểm lệch chuẩn
Dựng component và tài liệu
Từ bộ token, dựng thư viện 40-80 component lõi đầy đủ trạng thái thật, có tài liệu Storybook và nối một đổi một với Figma.Thư viện component + Storybook + Figma Code Connect
Triển khai và quản trị
Chuyển một sản phẩm điểm mẫu sang hệ thống trước rồi nhân rộng, kèm quy trình quản trị RFC minh bạch.Sản phẩm điểm mẫu chạy thật + quy trình RFC + chỉ số áp dụng
Đồng hành dài hạn
Nuôi dưỡng hệ thống định kỳ để các đội không âm thầm quay lại làm thủ công.Bản nâng cấp định kỳ + biên bản rà soát hàng quý
Anh chị nhận được gì
Mỗi tài liệu kèm định dạng file và lý do nó giúp ích cho Anh chị.
Một nguồn chuẩn duy nhất cho màu, font, khoảng cách, đổi một chỗ là cả hệ thống cập nhật theo.
Đội phát triển ghép giao diện từ component dựng sẵn thay vì code lại từ đầu.
Những tình huống giao diện phức tạp đã có lời giải chuẩn sẵn, không phải nghĩ lại mỗi lần.
Lập trình viên xem, thử và lấy code component ngay trên trình duyệt.
Người thiết kế và lập trình viên nhìn cùng một component, hết cảnh bản chạy khác bản vẽ.
Hệ thống tiến hóa có kiểm soát, mọi thay đổi có người đề xuất và người duyệt.
Được tin tưởng qua 17 năm
Hơn 200 thương hiệu trên 16 ngành đã tin Sinh Vũ tạo hình bản sắc.
Ba mức theo phân khúc
Sinh Vũ báo giá theo phạm vi và độ phức tạp của dự án, chốt trọn gói sau khi nghe brief, không phụ phí giữa chừng.
Chưa chắc mức nào hợp? Trao đổi 5 phút, Sinh Vũ gợi ý đúng mức →
- Rà soát toàn bộ giao diện số hiện có
- Bộ DTCG JSON tokens ba lớp, hỗ trợ sáng và tối
- Báo cáo điểm lệch chuẩn kèm mức độ ưu tiên
- Hướng dẫn tích hợp token vào dự án hiện tại
- Toàn bộ phần Nền tảng tokens
- Thư viện 40-80 component lõi đầy đủ trạng thái
- Tài liệu Storybook tương tác
- Figma Code Connect đồng bộ một đổi một
- Toàn bộ phần Hệ thống đầy đủ
- Quy trình quản trị RFC cho mọi thay đổi
- Bộ chỉ số đo mức độ áp dụng theo từng đội
- Bảo trì 15-30% phí dự án mỗi năm
Trước khi gửi brief về Hệ thiết kế số
Sinh Vũ trao đổi trước với đội kỹ thuật của anh chị hoặc bên phát triển để nắm công nghệ đang dùng, ví dụ nền tảng web hay ứng dụng di động cụ thể, trước khi định hình token (các giá trị thiết kế chuẩn hóa như màu sắc, khoảng cách, cỡ chữ) và component (khối giao diện dùng lại nhiều nơi, như nút bấm, ô nhập liệu). Kết quả bàn giao được dựng theo cách đội lập trình đọc và ráp vào code được ngay, không phải một bộ file thiết kế đẹp nhưng dev phải tự suy diễn.
Được, nhưng Sinh Vũ cần thống nhất trước những nền tảng cơ bản như màu, font, khoảng cách trước khi dựng component, nếu không hệ thống sẽ thiếu gốc để bám. Với trường hợp này Sinh Vũ thường đề xuất làm gọn phần quy chuẩn nhận diện song song, để hệ thiết kế số không phải đoán.
Mục tiêu của hệ thiết kế số là để đội anh chị tự thêm màn hình, tự dùng component có sẵn mà không cần hỏi lại Sinh Vũ từng chi tiết nhỏ. Sinh Vũ bàn giao kèm tài liệu quy tắc sử dụng, và có thể hỗ trợ đào tạo nhanh cho đội thiết kế hoặc lập trình nội bộ nếu anh chị cần.
Không khóa. File được dựng trên công cụ thiết kế phổ biến và token xuất ra ở định dạng chuẩn mà công cụ dựng web, ứng dụng thông thường đọc được. Đội của anh chị hoàn toàn có thể tiếp tục chỉnh sửa mà không cần quay lại Sinh Vũ.
Hệ thiết kế số được xây với tư duy component và token ngay từ đầu, chứ không phải vẽ giao diện đẹp rồi mới nghĩ cách chuyển sang code. Đây là lý do bước trao đổi với đội kỹ thuật của anh chị luôn có trước khi bắt tay dựng hệ thống, để hai bên nói cùng một ngôn ngữ.
Số lượng component, màn hình và mức độ phức tạp của sản phẩm số mỗi doanh nghiệp khác nhau rất nhiều, nên một bảng giá chung sẽ không phản ánh đúng khối lượng thật. Sinh Vũ tư vấn báo giá sau khi đã nắm rõ phạm vi sản phẩm và nền tảng kỹ thuật anh chị đang dùng.
Thời gian phụ thuộc vào quy mô sản phẩm, số lượng component cần chuẩn hóa và việc doanh nghiệp đã có quy chuẩn nhận diện hay chưa. Mốc thời gian cụ thể được thống nhất khi báo giá, dựa trên phạm vi thật đã trao đổi.
Phần token và nguyên tắc thiết kế gốc không gắn chặt với một công nghệ cụ thể nên vẫn dùng lại được. Phần cần làm lại chỉ là cách hiện thực hóa component sang công nghệ mới, việc này thường nhẹ hơn nhiều so với dựng hệ thống từ số không.
Bắt đầu dịch vụ Hệ thiết kế số
Gửi vài dòng về nhu cầu, Sinh Vũ phản hồi trong ngày làm việc.