Mở đầu — vì sao bài này quan trọng
Có một câu hỏi mà rất nhiều bạn UI designer gặp phải nhưng ít khi được trả lời rõ ràng: "Tôi là brand designer hay product designer?" Và câu hỏi khó chịu hơn nữa xuất hiện ngay trong công việc hằng ngày — khi marketing gửi cho bạn một cái banner với logo méo mó, màu sai brand guideline, thì đó là lỗi của ai? Khi sếp bảo bạn "làm cái landing page cho chiến dịch Tết", nhưng bạn lại là người chuyên thiết kế màn hình app, bạn có nên nhận không?
Ranh giới giữa Brand Design và Product Design là một trong những thứ mơ hồ nhất trong nghề, và chính sự mơ hồ đó khiến rất nhiều designer trẻ bị lạc: hoặc là ôm đồm mọi thứ rồi làm không sâu được cái nào, hoặc là từ chối làm những việc lẽ ra sẽ giúp họ phát triển. Tệ hơn, ở nhiều công ty Việt Nam — đặc biệt các startup và SME — người ta gộp hết vào một chức danh "designer" và kỳ vọng bạn làm tất: từ logo, standee, ảnh Facebook, cho đến từng cái nút bấm trong app.
Hiểu rõ ranh giới này không phải để bạn "chọn phe" và từ chối phần còn lại. Nó giúp bạn biết mình đang đứng ở đâu, hệ giá trị và tiêu chí đánh giá của mỗi bên khác nhau thế nào, khi nào hai bên phải hợp tác, và quan trọng nhất: làm sao để sản phẩm và thương hiệu không "đá nhau" trên cùng một màn hình. Đây là kiến thức nghề nghiệp thuần túy — không phải kỹ thuật Figma — nhưng nó quyết định bạn có được nhìn nhận như một người chuyên nghiệp trưởng thành hay không.
Khái niệm cốt lõi
Brand Designer làm gì
Brand designer (đôi khi gọi là brand/visual designer, communication designer) chịu trách nhiệm về bản sắc thương hiệu — cách thương hiệu trông như thế nào, nghe như thế nào, và cảm giác nó để lại trong tâm trí người ta. Công việc điển hình gồm:
- Visual identity: logo, bảng màu thương hiệu, hệ typography, các icon đặc trưng, hình minh họa (illustration), pattern, và cả "tone" nhiếp ảnh.
- Marketing materials: landing page cho chiến dịch, ảnh mạng xã hội (Facebook, Instagram, TikTok), banner quảng cáo, email marketing, ảnh bìa sự kiện.
- Print & packaging: bao bì sản phẩm, danh thiếp, standee, ấn phẩm sự kiện, brochure.
- Brand guidelines: tài liệu quy định cách dùng logo, khoảng cách an toàn, màu sắc, giọng điệu — để mọi người trong công ty dùng thương hiệu nhất quán.
Product Designer làm gì
Product designer (bao gồm UI/UX designer trong ngữ cảnh sản phẩm số) chịu trách nhiệm về trải nghiệm sử dụng — cách người dùng thực sự tương tác với sản phẩm để hoàn thành một công việc. Công việc điển hình gồm:
- Thiết kế luồng (flow) và màn hình: đăng ký, thanh toán, tìm kiếm, quản lý tài khoản.
- Design system cho sản phẩm: component, state (trạng thái), token, pattern lặp lại nhất quán qua hàng trăm màn hình.
- Giải quyết vấn đề tương tác: xử lý lỗi, empty state, loading, validation form, accessibility.
- Làm việc chặt với engineer và product manager: cân nhắc feasibility (tính khả thi kỹ thuật), edge case, dữ liệu thật.
Hai hệ giá trị, hai tiêu chí thành công
Đây là phần quan trọng nhất. Hai vai trò không chỉ khác về việc làm mà khác về cách đo lường thành công:
| Khía cạnh | Brand Design | Product Design |
|---|---|---|
| Mục tiêu chính | Ấn tượng, cảm xúc, nhận diện | Hoàn thành tác vụ, hiệu quả sử dụng |
| Thời gian tiếp xúc | Ngắn (giây) | Dài (hằng ngày) |
| Đo lường | Nhận biết thương hiệu, click, chuyển đổi cảm xúc | Task success rate, error rate, retention |
| Tính nhất quán | Nhất quán cảm giác | Nhất quán hành vi (component) |
| Khi được phá luật | Thường xuyên — sáng tạo, gây bất ngờ | Hiếm — nhất quán quan trọng hơn "wow" |
Vùng chồng lấn — nơi xảy ra xung đột
Ranh giới không phải một đường thẳng. Có một vùng xám mà cả hai cùng đụng vào, và đó chính là nơi phát sinh mâu thuẫn:
- Landing page marketing của một sản phẩm số: nó là "cửa" của sản phẩm (product) nhưng lại phục vụ chiến dịch (brand).
- Onboarding và splash screen: nơi cảm xúc thương hiệu và chức năng sản phẩm gặp nhau.
- Màu sắc và typography: brand có màu chủ đạo rực rỡ, nhưng product cần màu trung tính để không làm người dùng mỏi mắt sau 8 tiếng.
- Illustration và empty state: chúng vừa phải "đúng chất brand" vừa phải phục vụ tình huống sử dụng cụ thể.
Tình huống thực tế
Ví dụ 1 — Startup fintech Việt: khi brand màu tím "ăn" cả sản phẩm
Một startup ví điện tử tại TP.HCM (gọi là "PayViet") có màu thương hiệu là tím đậm rực rỡ (#6B21A8) — rất nổi bật trên billboard và quảng cáo Facebook. Brand designer đã dùng màu này cực kỳ thành công cho các chiến dịch: tỷ lệ click quảng cáo cao, nhận diện tốt.
Vấn đề xảy ra khi product designer bê nguyên màu tím đó vào app. Nút chính màu tím, header màu tím, thậm chí background của một số card cũng tím nhạt. Kết quả: người dùng phản hồi rằng app "gây mỏi mắt", và tệ hơn, khi mọi thứ đều tím thì chẳng còn gì nổi bật — nút "Chuyển tiền" quan trọng nhất bị chìm giữa một biển tím.
Diễn giải: brand color được thiết kế cho tiếp xúc ngắn và mạnh (2 giây nhìn quảng cáo). Product cần một palette mở rộng — màu tím thương hiệu chỉ dùng làm accent (điểm nhấn) cho hành động quan trọng nhất, còn phần lớn giao diện phải là trung tính (xám, trắng) để mắt nghỉ và để điểm nhấn thực sự nổi bật. Sau khi tách ra, họ giữ tím cho logo và một nút primary duy nhất mỗi màn hình; tỷ lệ hoàn thành giao dịch cải thiện rõ.
Bài học: Brand color không phải là product color. Brand cung cấp nguồn cảm hứng và điểm neo, còn product design phải mở rộng nó thành một hệ thống dùng được lâu dài — với sắc độ, trạng thái, và tỷ lệ sử dụng hợp lý.
Ví dụ 2 — Sàn TMĐT khu vực: hai team, hai design system, một cuộc chiến
Một sàn thương mại điện tử lớn ở Đông Nam Á có hai đội tách biệt: đội Brand (lo campaign, sự kiện sale 11.11, 12.12) và đội Product (lo app mua sắm). Mỗi mùa sale, đội Brand tạo ra các trang campaign lộng lẫy với gradient cam-đỏ, animation bay nhảy, font tiêu đề riêng. Nhưng khi người dùng bấm từ trang campaign vào trang sản phẩm thật, họ bước vào một thế giới hoàn toàn khác: giao diện product gọn gàng, font khác, màu khác. Cảm giác "đứt gãy" — như đi từ hội chợ vào siêu thị.
Ngược lại, engineer thì đau đầu vì trang campaign của đội Brand không dùng component của product design system, nên mỗi mùa sale phải code lại từ đầu, tốn cả tuần và đầy bug.
Diễn giải: đây là vấn đề kinh điển khi ranh giới bị tách rời quá mức. Giải pháp họ áp dụng: thiết lập một "bridge layer" — một bộ token chung (màu campaign, spacing, typography tiêu đề) mà cả brand lẫn product cùng tham chiếu. Trang campaign vẫn được phép "bay bổng" hơn, nhưng phải dùng lại component nền tảng (nút, card sản phẩm, giá) từ product design system. Kết quả: thời gian dựng trang campaign giảm từ 5 ngày xuống còn 1,5 ngày, và trải nghiệm chuyển tiếp mượt hơn nhiều.
Bài học: Ranh giới không có nghĩa là "tường lửa". Brand và product cần một điểm giao tiếp có cấu trúc — thường là design token chung và một bộ component nền tảng dùng lại được. Tự do sáng tạo của brand nên nằm trên nền tảng đó, không phải thay thế nó.
Ví dụ 3 — Freelancer nhận cả gói: khi một người phải đội hai mũ
Một designer freelance ở Hà Nội nhận job cho một chuỗi cà phê nhỏ: vừa làm nhận diện thương hiệu (logo, menu, bao bì ly), vừa làm app đặt hàng. Vì là một người làm cả hai, cô ấy có lợi thế nhất quán — nhưng cũng rơi vào bẫy: cô dùng chính font chữ viết tay đẹp mắt của logo (một script font mảnh) làm font cho toàn bộ text trong app.
Kết quả: menu in ra trông tuyệt, nhưng trong app, font script khiến giá tiền và tên món khó đọc trên màn hình nhỏ, đặc biệt với khách lớn tuổi. Đơn hàng lỗi tăng vì khách chọn nhầm món.
Diễn giải: khi một người đội cả hai mũ, cái khó không phải là năng lực mà là chuyển đổi tư duy. Cô ấy đã giải quyết bằng cách giữ script font làm "brand font" chỉ cho tiêu đề lớn và logo trong app, còn toàn bộ nội dung chức năng (giá, tên món, nút) dùng một sans-serif dễ đọc, có cùng "cảm giác thân thiện" nhưng đọc rõ ở mọi kích thước.
Bài học: Ngay cả khi bạn là một người làm cả hai, bạn vẫn phải chuyển mũ có ý thức. Hỏi "đây là khoảnh khắc cảm xúc (brand) hay khoảnh khắc chức năng (product)?" và áp dụng đúng bộ tiêu chí. Nhất quán về tinh thần thương hiệu không có nghĩa là bê nguyên xi tài sản thương hiệu vào mọi ngóc ngách sản phẩm.
Hướng dẫn từng bước
Dưới đây là quy trình để bạn xác định và quản lý ranh giới brand–product trong công việc thực tế.
Bước 1 — Xác định bản chất của từng deliverable. Với mỗi việc được giao, hỏi ba câu: (1) Thời gian tiếp xúc dài hay ngắn? (2) Mục tiêu là gây ấn tượng hay giúp hoàn thành tác vụ? (3) Nó được đo bằng nhận diện/chuyển đổi hay bằng task success? Câu trả lời sẽ cho biết bạn đang ở "chế độ" brand hay product.
Bước 2 — Lập bản đồ vùng chồng lấn. Liệt kê những điểm chạm mà cả hai cùng đụng vào trong dự án của bạn: landing page, onboarding, splash, email giao dịch, empty state, campaign banner trong app. Đây là những nơi bạn cần thỏa thuận rõ ai chủ trì, ai review.
Bước 3 — Thiết lập nguồn sự thật (source of truth) cho tài sản chung. Brand color, logo, brand typography nên nằm ở một nơi (thường brand giữ). Product design system tham chiếu tới đó chứ không copy cứng. Trong Figma, dùng variable/token để "brand tím" là một biến duy nhất, cả hai bên cùng trỏ vào.
Bước 4 — Định nghĩa "bridge layer". Quyết định những gì được chia sẻ: bộ token nền tảng, các component cốt lõi (nút, card, form), và những gì được phép khác biệt (campaign được dùng gradient, animation riêng). Viết ra thành nguyên tắc rõ ràng, đừng để nó là "hiểu ngầm".
Bước 5 — Chuyển đổi tài sản brand thành hệ thống product khi cần. Đừng bê nguyên. Mở rộng brand color thành palette đầy đủ (sắc độ 50–900, màu trạng thái). Chọn font đọc được cho nội dung, giữ brand font cho khoảnh khắc cảm xúc. Đây là công việc dịch thuật từ ngôn ngữ brand sang ngôn ngữ product.
Bước 6 — Thống nhất quy trình review chéo. Landing page của sản phẩm nên được cả brand (đúng chất thương hiệu) lẫn product (dùng lại component, đúng flow) duyệt. Ai duyệt cái gì cần rõ ngay từ đầu để tránh đùn đẩy.
Lỗi thường gặp & mẹo
Lỗi 1 — Bê nguyên brand asset vào product. Dùng thẳng brand color rực rỡ làm màu nền, dùng brand font làm body text. Mẹo: coi brand asset là nguyên liệu thô, luôn cần "dịch" thành hệ thống product trước khi dùng ở quy mô lớn.
Lỗi 2 — Dựng tường lửa giữa hai team. Brand và product làm việc tách biệt hoàn toàn, dẫn đến trải nghiệm đứt gãy và code trùng lặp. Mẹo: luôn có một bridge layer — token chung và component nền tảng dùng lại.
Lỗi 3 — Nhầm tiêu chí đánh giá. Đánh giá một màn hình product bằng tiêu chí brand ("chưa đủ wow, chưa đủ nổi bật") hoặc đánh giá một banner bằng tiêu chí product ("thông tin chưa đầy đủ, chưa có empty state"). Mẹo: xác định "chế độ" trước, rồi mới phê bình bằng đúng bộ tiêu chí.
Lỗi 4 — Từ chối học phần còn lại. Product designer coi thường brand ("chỉ là làm đẹp"), brand designer coi thường product ("chỉ là xếp component"). Mẹo: hiểu cả hai giúp bạn giá trị hơn nhiều — đặc biệt ở thị trường Việt Nam nơi công ty nhỏ cần người linh hoạt.
Lỗi 5 — Không ai sở hữu vùng chồng lấn. Landing page bị đùn đẩy, cuối cùng không ai chịu trách nhiệm chất lượng. Mẹo: với mỗi điểm chạm chung, chỉ định rõ một chủ sở hữu (owner) và một người review từ phía còn lại.
Mẹo nâng cao — Xây "personality spectrum". Vẽ một thang từ "cực brand" (splash, campaign) đến "cực product" (form nhập liệu, cài đặt). Với mỗi màn hình, đặt nó lên thang này để biết được phép "bay" đến đâu. Splash được phép rất brand; màn hình nhập số thẻ thì gần như thuần product.
Bài tập thực hành
Bài 1 — Audit một sản phẩm quen thuộc. Chọn một app Việt Nam bạn hay dùng (MoMo, VNPay, Shopee, một app ngân hàng). Chụp 5 màn hình khác nhau và đặt chúng lên "personality spectrum" từ brand đến product. Ghi chú: chỗ nào brand lấn quá (gây khó dùng)? Chỗ nào product khô khan đến mức mất chất thương hiệu?
Bài 2 — Dịch brand thành product. Lấy một bộ nhận diện thương hiệu bất kỳ (có thể tự chọn một brand bạn thích) với 1 màu chủ đạo và 1 font tiêu đề. Hãy "dịch" nó thành nền tảng product: mở rộng màu thành palette 9 sắc độ + 4 màu trạng thái, chọn một font body dễ đọc phù hợp, và ghi rõ khi nào dùng brand font vs body font.
Bài 3 — Thiết kế một điểm chạm chồng lấn. Thiết kế một màn hình onboarding cho một app giả định. Yêu cầu: nó phải "đủ chất brand" để tạo cảm xúc ở màn hình đầu, nhưng vẫn dùng lại component product (nút, input) một cách nhất quán. Viết 3–4 câu giải thích những quyết định bạn đưa ra ở vùng chồng lấn này.
Bài 4 — Viết nguyên tắc ranh giới. Giả sử bạn là lead design của một startup 2 người làm design. Viết một trang "nguyên tắc brand vs product": cái gì chia sẻ chung, cái gì brand được tự do, ai review cái gì. Đây chính là kỹ năng bạn sẽ cần khi lên vị trí cao hơn.
Tóm tắt
Brand design và product design không phải hai nghề đối nghịch, mà là hai chế độ tư duy phục vụ hai mục tiêu khác nhau: brand tạo ấn tượng và cảm xúc trong khoảnh khắc ngắn, product giúp người dùng hoàn thành công việc qua thời gian dài. Chúng khác nhau không chỉ ở việc làm mà ở cả tiêu chí đo lường thành công — và chính điều này khiến việc lẫn lộn tiêu chí trở nên nguy hiểm.
Ranh giới giữa hai bên không phải một bức tường, mà là một vùng chồng lấn cần được quản lý có chủ đích: landing page, onboarding, màu sắc, typography, illustration. Cách xử lý tốt nhất là thiết lập một "bridge layer" — token và component nền tảng dùng chung — để brand được tự do sáng tạo trên nền tảng đó chứ không thay thế nó. Đừng bao giờ bê nguyên brand asset vào product; hãy dịch nó thành một hệ thống dùng được lâu dài.
Dù bạn chuyên về một bên hay phải đội cả hai mũ (rất phổ biến ở công ty Việt Nam), kỹ năng cốt lõi là chuyển mũ có ý thức: với mỗi màn hình, hỏi "đây là khoảnh khắc brand hay product?" và áp dụng đúng bộ tiêu chí. Hiểu ranh giới này giúp bạn không lạc lối trong chức danh mù mờ, hợp tác hiệu quả với đội còn lại, và quan trọng nhất — tạo ra sản phẩm vừa có hồn thương hiệu vừa thực sự dễ dùng.