Bỏ qua menu, vào nội dung chính

Thiết kế nhận diện thương hiệu số

Nhận diện thương hiệu số là phần thương hiệu xuất hiện trên màn hình: logo, màu, chữ và quy tắc dùng chúng thống nhất ở website, ứng dụng, thư điện tử, tài liệu. ALODEV thiết kế để dùng được: logo đọc rõ ở cỡ nhỏ và nền tối, màu đạt tương phản, chữ đủ dấu tiếng Việt.

Nhận diện thương hiệu số gồm những gì

Một bộ nhận diện dùng trên màn hình khác bộ nhận diện chỉ nằm trong tệp trình bày. Nó phải sống được ở nhiều kích thước, nhiều nền, nhiều thiết bị, và phải chuyển thành thứ lập trình viên dùng được ngay.

Các phần của bộ nhận diện thương hiệu số
PhầnGồmDùng ở đâu
LogoBản đầy đủ, bản vuông, bản một màu, bản nền tối, bản thu nhỏWebsite, ứng dụng, thư điện tử, tài liệu
Bảng màuMàu chính, màu nhấn, màu nền, màu chữ, màu trạng thái, bản nền sáng và nền tốiMọi giao diện
ChữPhông chữ tiêu đề và nội dung, cỡ chữ theo bậc, quy tắc xuống dòngWebsite, ứng dụng, tài liệu
Biểu tượng và hìnhBộ biểu tượng cùng một phong cách, quy tắc dùng ảnh và hình minh hoạGiao diện, bài viết, mạng xã hội
Bộ quy chuẩnQuy tắc dùng, ví dụ đúng và sai, cỡ tối thiểu, vùng an toàn quanh logoMọi người làm ra sản phẩm có thương hiệu
Biến thiết kếMàu, chữ, khoảng cách viết thành biến dùng trong mã nguồnĐội lập trình

Logo phải dùng được ở mọi nơi, không chỉ đẹp trên bản trình bày

Một logo chi tiết nhiều, đẹp ở cỡ lớn, thường biến mất ở cỡ 16 điểm ảnh trên thẻ trình duyệt hoặc mờ trên nền tối. Vì vậy logo được thử ở những chỗ khó nhất trước khi chốt, chứ không chỉ trên tờ giấy trắng.

  • Thử ở cỡ nhỏ nhất: biểu tượng trên thẻ trình duyệt, ảnh đại diện tròn của mạng xã hội, biểu tượng ứng dụng.
  • Thử trên nền sáng, nền tối, nền ảnh; mỗi tình huống có bản riêng thay vì đảo màu tuỳ tiện.
  • Thử bản một màu cho trường hợp in đen trắng, dấu mộc, khắc.
  • Giao tệp vector gốc, bản xuất sẵn cho web, và quy định cỡ tối thiểu cùng vùng trống quanh logo.

Khi website có dữ liệu cấu trúc tổ chức, logo được khai báo để Google có thể hiển thị. Biểu tượng nhỏ cho kết quả tìm kiếm phải là hình vuông có cạnh là bội số của 48 điểm ảnh, nên bản vuông của logo được thiết kế riêng cho việc này.

Màu và chữ: hai thứ hay hỏng nhất trên màn hình thật

Màu đẹp trong tệp trình bày nhưng chữ xám nhạt trên nền trắng thì khách không đọc nổi. Chuẩn tiếp cận web đặt mức tương phản tối thiểu giữa chữ và nền là 4,5 trên 1 cho chữ thường. Bảng màu được kiểm từng cặp chữ và nền trước khi chốt.

  • Mỗi màu có vai trò: nền, chữ chính, chữ phụ, nhấn, thành công, cảnh báo, lỗi. Không dùng màu nhấn cho chữ dài.
  • Hai bộ giá trị cho nền sáng và nền tối, cùng tên vai trò, để đổi giao diện không phải chọn lại màu.
  • Phông chữ phải có đủ dấu tiếng Việt, kể cả chữ in hoa nhiều dấu. Mọi phông chữ được thử với chuỗi chứa đủ các nguyên âm có dấu trước khi chọn.
  • Kiểm giấy phép nhúng phông chữ vào website và ứng dụng: nhiều phông chữ miễn phí cho in ấn không cho phép nhúng web. Giấy phép được ghi lại trong hồ sơ bàn giao.
  • Phông chữ dự phòng khi phông chính tải chậm, và chỉ nạp các kiểu chữ cần thiết để không làm trang chậm.

Hệ thống thiết kế trong mã nguồn

Bộ quy chuẩn trên giấy chỉ có tác dụng khi người làm sản phẩm nhớ ra nó. Cách chắc chắn hơn là viết nó thành biến trong mã: màu, chữ, khoảng cách, bo góc, đổ bóng đều lấy từ một nơi. Đổi một giá trị ở nơi đó, mọi trang và ứng dụng đổi theo.

  • Biến màu theo vai trò, không theo tên màu, để đổi bản nền sáng sang nền tối chỉ là đổi bộ giá trị.
  • Thang cỡ chữ và thang khoảng cách cố định; giao diện không dùng giá trị tuỳ ý ngoài thang.
  • Thành phần dùng lại (nút, thẻ, ô nhập) viết một lần và dùng ở mọi trang.
  • Website và ứng dụng cùng đọc một bộ biến, nên không có chuyện màu ở web một đằng, ở app một nẻo.

Thiết kế giao diện chi tiết và nghiệm thu trên màn hình thật mô tả ở trang Thiết kế UI/UX.

Bộ quy chuẩn thương hiệu: ngắn, có ví dụ, đọc được trong mười phút

Bộ quy chuẩn tốt không dày. Người ngoài công ty, như nhà thiết kế thuê ngoài hay đối tác in ấn, mở ra phải biết ngay cách dùng đúng. Nó gồm những mục sau.

  1. Logo: các biến thể, khi nào dùng bản nào, cỡ tối thiểu, vùng trống xung quanh.
  2. Những cách dùng sai kèm hình minh hoạ: kéo giãn, đổi màu, đặt trên nền khó đọc.
  3. Bảng màu với giá trị cho màn hình, tỷ lệ dùng và các cặp chữ nền đã kiểm tương phản.
  4. Chữ: phông chính và phụ, cỡ theo bậc, cách trình bày tiêu đề và đoạn văn.
  5. Ảnh và biểu tượng: phong cách chung, cách xử lý ảnh.
  6. Mẫu dùng ngay: chữ ký thư điện tử, ảnh chia sẻ liên kết trên mạng xã hội, ảnh đại diện.

Ảnh chia sẻ và biểu tượng: chỗ thương hiệu được thấy đầu tiên

Khi ai đó chia sẻ liên kết website của doanh nghiệp lên Facebook, Zalo hay gửi qua tin nhắn, ảnh xem trước là thứ họ thấy đầu tiên, nhiều khi trước cả tên trang. Ảnh này được thiết kế theo tỷ lệ chuẩn của các nền tảng, chữ đủ lớn để đọc trên điện thoại, và dùng đúng bảng màu.

  • Ảnh chia sẻ chung cho website và ảnh riêng cho các trang quan trọng.
  • Biểu tượng thẻ trình duyệt, biểu tượng thêm vào màn hình chính điện thoại, biểu tượng ứng dụng.
  • Kiểm xem trước bằng công cụ Preview thẻ Social miễn phí trên alodev.vn trước khi công bố.

Quy trình

Chi tiết
  1. Tìm hiểu doanh nghiệp và khách

    Doanh nghiệp bán gì cho ai, khách thấy thương hiệu ở đâu đầu tiên, thương hiệu đang dùng gì, điều gì cần giữ và điều gì cần bỏ.

  2. Hướng thiết kế

    Vài hướng khác nhau cho logo và hệ chữ màu, trình bày trên màn hình thật và trên nền khó, doanh nghiệp chọn một.

  3. Hoàn thiện và thử khó

    Hoàn thiện hướng đã chọn, thử ở cỡ nhỏ nhất, nền tối, bản một màu; kiểm tương phản từng cặp màu.

  4. Bộ quy chuẩn và biến thiết kế

    Viết bộ quy chuẩn có ví dụ đúng sai, chuyển màu chữ khoảng cách thành biến trong mã.

  5. Áp dụng lên website và tài liệu

    Áp lên website hoặc ứng dụng nếu có, làm mẫu chữ ký thư, ảnh chia sẻ, biểu tượng.

  6. Bàn giao

    Tệp vector gốc, bản xuất, bộ quy chuẩn, giấy phép phông chữ, hướng dẫn dùng biến thiết kế.

Bàn giao

  • Tệp logo vector gốc và các bản xuất cho web, mạng xã hội
  • Bộ quy chuẩn thương hiệu có ví dụ dùng đúng và sai
  • Bảng màu và bảng chữ, đã kiểm tương phản từng cặp
  • Biến thiết kế trong mã nguồn, nếu doanh nghiệp có website hoặc ứng dụng
  • Biểu tượng trình duyệt, ảnh chia sẻ liên kết và hồ sơ giấy phép phông chữ

Quyền sở hữu

Mã nguồn đứng tên doanh nghiệp · Không phí bản quyền · 3 đến 5 buổi đào tạo vận hành

Bảo hành

Bảo hành theo hợp đồng · Thời gian phản hồi sự cố theo gói bảo trì trong hợp đồng · Điều khoản tiến độ và bồi thường thỏa thuận trong từng hợp đồng

Thanh toán

Nghiệm thu từng chặng · Chia 3 đợt, có hoá đơn VAT

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

Tất cả câu hỏi
Dịch vụ này có gồm chiến lược thương hiệu hay đặt tên không?

Trang này mô tả nhận diện thương hiệu số: logo, màu, chữ, bộ quy chuẩn và biến thiết kế. Phạm vi vượt ra ngoài phần đó được trao đổi riêng ở buổi làm rõ yêu cầu.

Tệp thiết kế thuộc về ai?

Theo điều khoản chung, tài sản thiết kế như tệp thiết kế, hình minh hoạ và nội dung chữ thuộc về doanh nghiệp. Hồ sơ bàn giao kèm tệp vector gốc.

Logo cũ đang dùng thì có phải đổi hoàn toàn không?

Không bắt buộc. Có thể chỉ chỉnh để dùng được trên màn hình: làm bản vuông, bản nền tối, bản một màu, chỉnh cho đọc rõ ở cỡ nhỏ. Quyết định đổi hay giữ thuộc về doanh nghiệp.

Phông chữ có dùng được cho cả website lẫn tài liệu không?

Chỉ khi giấy phép cho phép cả hai. ALODEV kiểm giấy phép từng phông chữ và ghi vào hồ sơ bàn giao; phông chữ không cho nhúng web sẽ được thay bằng phông tương đương.

Thiết kế nhận diện xong có áp lên website luôn không?

Có thể, nếu doanh nghiệp có website hoặc ứng dụng do ALODEV làm hoặc bảo trì. Bước áp dụng nằm trong quy trình; website của đơn vị khác được trao đổi ở buổi làm rõ yêu cầu.

Chi phí thiết kế nhận diện thương hiệu bao nhiêu?

Tuỳ số biến thể logo, số mẫu ứng dụng và có áp lên website hay không. Chi phí được báo sau buổi làm rõ yêu cầu, thanh toán ba đợt 30/40/30.

Hỏi đáp về hợp đồng

Điều khoản
Thanh toán chia mấy đợt?

Mặc định ba đợt: 30% khi ký hợp đồng (đã chốt phạm vi và lịch từng chặng); 40% khi chạy thử hạng mục chính (hệ thống chạy trên dữ liệu thật của doanh nghiệp); 30% khi nghiệm thu, bàn giao (đã bàn giao mã nguồn, cơ sở dữ liệu và tài liệu). Mỗi đợt có hoá đơn VAT.

Dữ liệu doanh nghiệp cung cấp được xử lý thế nào?

Ký NDA trước buổi khảo sát. Dữ liệu thật, thông tin nghiệp vụ và mã nguồn được giữ bí mật cả sau khi dự án kết thúc, không chia sẻ với bên thứ ba khi chưa có đồng ý bằng văn bản. Khi hệ thống đã vận hành, dữ liệu thật được xoá khỏi môi trường phát triển, chỉ giữ dữ liệu thử.

Ước tính chi phí cho dự án

Cần tư vấn?