Vì sao KomuraSoft xây website trên hệ thống thiết kế của Digital Agency — chi phí thấp và chất lượng có thể đi cùng nhau

Trong báo giá làm website, một phần lớn nằm ở số giờ thiết kế. KomuraSoft rút ngắn đáng kể giai đoạn này bằng cách lấy hệ thống thiết kế do Digital Agency Nhật Bản công bố làm nền tảng: chi phí được giữ thấp, chất lượng được giữ ổn định.

Khi nghe “làm website giá rẻ”, nhiều người nghĩ rằng chất lượng đang bị hy sinh ở đâu đó. Thực tế, cắt giá bằng cách bỏ qua buổi phỏng vấn nhu cầu, hoặc chỉ đổ chữ vào template, thường cho ra website không truyền đạt được công ty đang làm gì.

Lý do giá Xây dựng website (làm website) của KomuraSoft giữ được thấp không nằm ở việc cắt những bước đó, mà ở chuẩn hóa giai đoạn thiết kế. Bài viết lần lượt giải thích hệ thống thiết kế Digital Agency mà chúng tôi dùng làm nền tảng là gì, thực tế dùng cái gì và dùng thế nào, vì sao rẻ hơn, vì sao chất lượng không giảm, và loại dự án nào không phù hợp với cách làm này.

Từ đây, tên dịch vụ của chúng tôi là “Xây dựng website”; quy trình nói chung gọi là “làm website”.

1. Hệ thống thiết kế của Digital Agency là gì

Hệ thống thiết kế của Digital Agency là đặc tả chuẩn về thiết kế do Digital Agency công bố cho website và ứng dụng của dịch vụ hành chính. Nguồn sơ cấp nằm trên trang chính thức.

• Trang chính thức: Hệ thống thiết kế Digital Agency phiên bản β
• Giấy phép và điều kiện sử dụng: Lưu ý khi sử dụng

Đại thể, những hạng mục sau được định nghĩa có hệ thống.

Điểm quan trọng: nó được phân phối công khai theo điều kiện giấy phép đã công bố, và cũng dùng được cho website tư nhân. Website thủ tục hành chính phải dùng được với mọi người, bất kể tuổi, môi trường hay mức quen thuộc với IT, nên độ tương phản, cỡ chữ và độ dễ thao tác được thiết kế sau khi đã kiểm chứng. Phần tích lũy đó, website công ty tư nhân cũng dùng làm nền tảng được ngay.

Điều kiện giấy phép cụ thể

Nếu gói gọn thành “giấy phép mở” thì không đủ để quyết định trong thực tế. Trang Lưu ý khi sử dụng chính thức tách giấy phép theo từng loại tài liệu được phân phối.

Trong thực tế có hai điểm. Một: nếu biên tập hoặc biến đổi dữ liệu Figma hay code snippet rồi gắn vào website của mình thì không bị yêu cầu ghi nguồn. Khi dùng hệ thống thiết kế này để làm website công ty, hầu hết các trường hợp đều thuộc dạng đó. Hai: đã ghi rõ không được công bố hay sử dụng bản đã biên tập/biến đổi theo cách khiến người ta tưởng Digital Agency tạo ra.

Ngoài ra, việc sử dụng không mang lại chứng nhận hay phê duyệt của Digital Agency. Chúng tôi cũng không phải “được Digital Agency chứng nhận”, mà đang áp dụng đặc tả chuẩn đã công bố cho website khu vực tư nhân. Điều kiện giấy phép ở trên là tại thời điểm viết bài, nên trước khi quyết định áp dụng, hãy luôn kiểm tra điều kiện mới nhất trên trang chính thức.

Bản đồ tri thức của bài viết này

Bài viết này giải thích vì sao việc xây dựng website của KomuraSoft lấy Hệ thống thiết kế Digital Agency làm nền, từ cách đưa vào ba lớp design token, thành phần và template. Hệ thống thiết kế Digital Agency áp dụng CC BY 4.0 cho dữ liệu thiết kế Figma (icon đi kèm theo Apache License 2.0) và MIT License cho code snippet; với cách dùng chỉnh sửa, tùy biến rồi gắn vào site của mình thì không cần ghi nguồn. Dùng thành phần đã chuẩn hóa giúp nén những bước tốn kém như đưa nhiều phương án thiết kế và các vòng chỉnh sửa, đồng thời mức khả năng tiếp cận đã được kiểm chứng trên dịch vụ hành chính đi thẳng vào sự ổn định chất lượng. Tuy nhiên, cách làm này được cho là không phù hợp các dự án kiểu site thương hiệu, nơi việc dựng thế giới hình ảnh mới là trung tâm của giá trị.

flowchart LR
    accTitle: Bản đồ tri thức xây dựng website lấy Hệ thống thiết kế Digital Agency làm nền
    accDescr: Sơ đồ cho thấy việc xây dựng website của KomuraSoft lấy design token, thành phần và template của Hệ thống thiết kế Digital Agency làm nền, kết hợp giấy phép riêng của dữ liệu Figma, icon và code snippet để giảm chi phí giai đoạn thiết kế đồng thời đảm bảo khả năng tiếp cận, nhưng không phù hợp các dự án cần visual thương hiệu cầu kỳ
    digital_agency_design_system["Hệ thống thiết kế của Digital Agency"]
    website_development["Xây dựng website"]
    design_token["Design token"]
    design_system_component["Thành phần của hệ thống thiết kế"]
    web_accessibility["Khả năng tiếp cận web"]
    digital_agency_copyright_policy["Chính sách bản quyền của website Digital Agency"]
    cc_by_4_license["CC BY 4.0"]
    apache_license_2["Apache License 2.0"]
    mit_license["MIT License"]
    site_template["Template website"]
    design_process_cost["Chi phí giai đoạn thiết kế"]
    brand_visual_design["Thiết kế visual chuyên về thể hiện thương hiệu"]
    website_development -.->|"sử dụng"| digital_agency_design_system
    digital_agency_design_system -->|"sử dụng"| design_token
    digital_agency_design_system -->|"sử dụng"| design_system_component
    design_system_component -->|"sử dụng"| web_accessibility
    digital_agency_design_system -->|"sử dụng"| digital_agency_copyright_policy
    digital_agency_design_system -->|"sử dụng"| cc_by_4_license
    digital_agency_design_system -->|"sử dụng"| apache_license_2
    digital_agency_design_system -->|"sử dụng"| mit_license
    website_development -.->|"sử dụng"| design_token
    website_development -.->|"sử dụng"| design_system_component
    website_development -.->|"sử dụng"| site_template
    site_template -->|"yêu cầu"| design_token
    site_template -->|"yêu cầu"| design_system_component
    digital_agency_design_system -.->|"giảm thiểu"| design_process_cost
    digital_agency_design_system -.->|"không khuyến nghị"| brand_visual_design

Trong sơ đồ, đường liền nét biểu thị quan hệ luôn đúng và đường nét đứt biểu thị quan hệ có điều kiện (điều kiện nằm trong phần giải thích từng quan hệ trên trang chi tiết). Danh sách đầy đủ các quan hệ (tổng 15, kèm bằng chứng và mức chắc chắn) cùng định nghĩa các khái niệm chính được tập hợp tại trang chi tiết bản đồ tri thức (bằng tiếng Nhật). Dữ liệu: JSON-LD / Turtle

2. “Lấy làm nền tảng” cụ thể là làm gì

Cụm “lấy hệ thống thiết kế làm nền tảng” tiện dùng, nhưng độ chi tiết khi triển khai có nhiều tầng. Ở phía chúng tôi, việc tiếp nhận được chia thành ba lớp sau. Chính website này (comcomponent.com) dùng cấu trúc đó.

Cũng nên viết rõ việc chúng tôi cố ý không làm. Chúng tôi không mang nguyên mã thành phần do phía chính thức phân phối rồi giữ như một dependency bên ngoài. Các phần mà website công ty cần thì có hạn; nhập trọn bộ làm trang tải nặng hơn, và phát sinh chi phí bảo trì để theo các bản cập nhật phía upstream. Quyết định là: chỉ giữ những phần cần thiết, dưới dạng triển khai của chính mình, đúng theo đặc tả.

Hiệu quả của cấu trúc này hiện ra khi thêm trang. Dù thêm một trang dịch vụ mới, hình nút, thứ bậc tiêu đề và khoảng cách vẫn khớp với các trang sẵn có, nên không phải nghĩ lại “thiết kế sẽ thế nào” mỗi lần.

3. Vì sao rẻ hơn — giai đoạn thiết kế không còn trong báo giá

Báo giá làm website thông thường chứa tỷ lệ lớn các hạng mục liên quan thiết kế. Trong bảng tham khảo nhanh chi phí làm website cho doanh nghiệp vừa và nhỏ, cấu hình gồm thiết kế riêng nằm trong khoảng 300.000–1.000.000 yên; trong khoảng đó, giai đoạn thiết kế chồng lên chủ yếu từ các việc sau.

Hạng mục “trọn gói thiết kế” trên báo giá gồm những gì thì khác nhau tùy công ty, nên khi so sánh, cách chắc chắn là nhờ công ty đó mở tới mức chi tiết này (cách đọc đó được viết kỹ hơn trong bài về chi phí).

Khi lấy hệ thống thiết kế làm nền tảng, cấu trúc này đổi.

• Chuẩn về màu, cỡ chữ, khoảng cách, nút đã được chốt từ đầu
• Vòng “đưa vài phương án thiết kế, chọn, rồi sửa” về nguyên tắc không còn cần
• Quyết định phụ thuộc cảm tính của nhà thiết kế giảm, nên ít phải làm lại

Nói cách khác, giá thấp không phải vì chiết khấu, mà vì bản thân quy trình giảm đi. Số giờ tiết kiệm được chuyển sang phần gắn trực tiếp với hiệu quả — thiết kế cấu trúc truyền đạt công ty đang làm gì, viết nội dung, và thiết kế luồng dẫn đến liên hệ. Nguyên nhân website không truyền đạt được gần như luôn nằm ở cấu trúc, không phải ở thiết kế; điều đó chúng tôi đã viết trong ba chỗ cần sửa đầu tiên trên một website không tạo ra liên hệ.

4. Vì sao chất lượng không giảm — ngược lại còn ổn định hơn

Trực giác “bỏ thiết kế thì chất lượng giảm” xuất phát từ giả định thiết kế được làm từ con số không. Khi dùng hệ thống thiết kế đã chuẩn hóa, logic đảo chiều.

Thứ nhất, khả năng tiếp cận. Các thành phần của hệ thống thiết kế Digital Agency được thiết kế có tính đến độ tương phản màu, cỡ chữ, độ hiện rõ của focus và độ dễ thao tác bằng cảm ứng. Nếu mỗi dự án phải tự bảo đảm mức này trên thiết kế riêng, bản thân việc kiểm chứng đã tốn giờ. Dùng thành phần đã được kiểm chứng thì kết quả là chất lượng ổn định hơn.

Thứ hai, thành tích vận hành thực tế. Dịch vụ hành chính đang chạy trong tình huống thật với người dùng cực kỳ rộng, từ người chưa quen điện thoại đến chuyên gia. Quy tắc thiết kế dùng ở đó không được rèn bằng câu hỏi “giao diện có mới không”, mà bằng “ai cũng dùng được mà không lạc không”. Đúng phẩm chất đó mới quan trọng với khách tiềm năng vào website công ty.

Thứ ba, tính nhất quán. Website mà hình nút hay quy tắc tiêu đề lệch từ trang này sang trang khác đã khó đọc hơn chỉ vì thế. Làm theo hệ thống thiết kế thì cấu trúc và giọng điệu không lệch dù sau này thêm trang.

Chính website này được xây trên hệ thống thiết kế đó. Nghiên cứu tình huống làm mới website của Douzu Carry Service cũng được xây theo cùng chính sách. Cách triển khai việc làm mới được viết kỹ trong bài nghiên cứu tình huống.

Thành phần nào đang phát huy tác dụng ở đâu, cách nhanh nhất là so các trang thật. Điểm dùng trên website này như sau.

Website khác dùng cùng thành phần là Douzu Carry Service. Màu, ảnh và văn bản đương nhiên khác hẳn, nhưng độ dễ nhấn của nút và cách gắn thứ bậc tiêu đề được làm theo cùng quy tắc thiết kế — đặt cạnh nhau sẽ thấy.

5. Chuẩn hóa không biến thành “trông giống nhau”

Nỗi lo thường gặp: “thiết kế chuẩn thì chẳng hóa giống website công ty khác?”

Phần được chuẩn hóa là nền tảng: chuẩn màu, thang cỡ chữ, quy tắc thiết kế thành phần. Ấn tượng thực của website do logo, ảnh, slogan, cấu trúc trang và giọng văn quyết định, và những thứ đó được làm từ đầu cho từng website. Nền tảng khớp nhau và không có cá tính là hai chuyện khác nhau.

Đồng thời, có điều cần nói thẳng. Cách làm này không phù hợp với dự án cần hình ảnh riêng, công phu hay animation như một cách thể hiện thương hiệu. Ví dụ: website thương hiệu hay website chiến dịch mà giá trị cốt lõi nằm ở việc dựng thế giới hình ảnh. Với những dự án đó, kết quả tốt hơn nếu đầu tư đúng mức cho thiết kế và giao cho công ty thiết kế chuyên môn. Nếu trong buổi tư vấn với chúng tôi, nhu cầu kiểu đó là trọng tâm, chúng tôi sẽ nói thẳng ngay từ đầu.

6. Tóm tắt

• Trong chi phí làm website, thiết kế từ con số không chiếm tỷ lệ lớn
• KomuraSoft rút ngắn đáng kể giai đoạn này bằng cách lấy hệ thống thiết kế do Digital Agency công bố (trang chính thức) làm nền tảng
• Giấy phép tách theo loại tài liệu phân phối: dữ liệu Figma dùng CC BY 4.0, code snippet dùng MIT License. Nếu biên tập/biến đổi rồi gắn vào website của mình thì không cần ghi nguồn
• Nội dung của “lấy làm nền tảng” là ba lớp: dùng chung design token, biến thành phần thành lớp CSS, và gắn vào template
• Lý do giá thấp không phải chiết khấu, mà vì quy trình giảm đi. Số giờ tiết kiệm được chuyển sang thiết kế cấu trúc, nội dung và luồng liên hệ
• Chất lượng ngược lại ổn định hơn vì dùng thành phần chuẩn được thiết kế có tính đến khả năng tiếp cận và đã vận hành thực trong dịch vụ hành chính
• Logo, ảnh và văn bản được làm theo từng website, nên không thành cùng một diện mạo. Tuy nhiên cách làm này không phù hợp với dự án cần hình ảnh riêng, công phu

Nếu muốn website có cấu trúc truyền đạt được trong khi giữ chi phí, cách làm và mức giá xem được trên trang Xây dựng website. Nếu liên hệ kèm URL website hiện tại, chúng tôi sẽ chốt lại điểm nào nên sửa trước thì dễ thấy hiệu quả, rồi gửi lại.

Bài viết liên quan

• Chi phí làm website cho doanh nghiệp vừa và nhỏ — bảng tham khảo nhanh về giá và cách đọc báo giá
• Nghiên cứu tình huống làm mới website: Douzu Carry Service, công ty vận tải tại Miyazaki
• Ba chỗ cần sửa đầu tiên trên một website không tạo ra liên hệ
• Xây dựng website

Tài liệu tham khảo

• Digital Agency, Digital Agency Design System β. Đặc tả thiết kế chuẩn được công bố cho website và ứng dụng của dịch vụ hành chính.
• Digital Agency, Lưu ý khi sử dụng. Giấy phép và điều kiện sử dụng hệ thống thiết kế; giấy phép cho dữ liệu Figma, icon đi kèm và code snippet được nêu tách riêng.
• Digital Agency, Chính sách bản quyền. Chính sách bản quyền áp dụng cho website của hệ thống thiết kế (văn bản giải thích và hướng dẫn) (Điều khoản sử dụng dữ liệu công, phiên bản 1.0).

Bài viết liên quan

Các bài viết gần đây có cùng thẻ để tìm hiểu sâu hơn những chủ đề lân cận.

Chủ đề liên quan

Các trang này đặt chủ đề trong bối cảnh rộng hơn của dịch vụ và quyết định.

Dịch vụ liên quan đến chủ đề này

Bài viết liên quan trực tiếp đến các dịch vụ sau.

Câu hỏi thường gặp

Các câu hỏi thường gặp khi tư vấn về chủ đề của bài viết.

Hệ thống thiết kế của Digital Agency có được dùng cho website công ty tư nhân không?

Có. Digital Agency công bố hệ thống thiết kế theo giấy phép mở, và có thể dùng cho cả các website ngoài cơ quan nhà nước. Việc sử dụng không đồng nghĩa với chứng nhận hay phê duyệt của Digital Agency. Lập trường của chúng tôi cũng vậy: chúng tôi áp dụng hệ thống thiết kế đã được công bố cho website khu vực tư nhân.

Thiết kế chuẩn hóa có khiến website trông giống website của công ty khác không?

Phần dùng chung chỉ là quy tắc thiết kế về màu, khoảng cách và thành phần. Logo, ảnh, slogan và cấu trúc trang được làm riêng cho từng website. Ấn tượng thực tế chủ yếu đến từ những phần đó, nên chuẩn hóa không biến website thành "trang đã thấy ở đâu đó". Ngược lại, những phần vốn phải thống nhất — độ dễ nhấn của nút và độ dễ đọc của chữ — mới được căn đều. Đó là hiệu quả của chuẩn hóa.

Hồ sơ tác giả

Trang giới thiệu tác giả bài viết.

Go Komura

Đại diện của KomuraSoft LLC

Chuyên về phát triển phần mềm Windows, tư vấn kỹ thuật và điều tra lỗi, đặc biệt trong các dự án có hệ thống hiện hữu và lỗi khó tái hiện.