Bài này đi qua cách làm banner website theo đúng thứ tự một người làm nghề vẫn làm: chốt thông điệp trước, dựng bố cục sau, chọn chữ và nút sau cùng. Làm ngược thứ tự đó là lý do nhiều banner nhìn đẹp nhưng không ai bấm.
Trước khi bắt đầu, hiểu banner cần làm được gì
Nhìn qua thì banner trên website trông giống một tấm ảnh đẹp có thêm chữ. Nhưng nếu chỉ nhìn như vậy, bạn sẽ làm ra thứ đẹp mà vô dụng.
Mỗi banner có một nhiệm vụ cụ thể: dẫn người xem tới bước tiếp theo trong hành trình của họ trên trang web của bạn. Hero banner đầu trang chủ muốn người ta bấm vào “Xem dịch vụ” hay “Liên hệ ngay”. Banner khuyến mãi giữa trang muốn người ta nhấp vào ưu đãi. Banner thu thập email muốn người ta điền form.
Khi biết banner cần dẫn người xem tới đâu, mọi quyết định về ảnh, chữ, màu sắc đều sẽ có lý do. Không có lý do, bạn sẽ chọn ảnh đẹp nhất, màu thích nhất, chữ nhiều nhất, rồi tự hỏi tại sao không ai bấm vào nút.
Nếu bạn chưa rõ banner là gì và có mấy loại, bài giới thiệu về banner website sẽ giúp bạn định hướng trước khi đọc tiếp.
Cách làm banner website theo bốn bước
Bước 1 – Xác định một thông điệp duy nhất
Lỗi số một khi làm banner là muốn nói quá nhiều thứ cùng một lúc. Cùng một banner vừa giới thiệu sản phẩm, vừa thông báo khuyến mãi, vừa kể về thương hiệu. Kết quả là người xem không biết tập trung vào đâu và bỏ qua tất cả.
Mỗi banner nên có một thông điệp chính và một lời kêu gọi hành động. Nếu bạn cần nói hai thứ, làm hai banner, đặt ở hai chỗ khác nhau, hoặc dùng dạng carousel slider cho phép người xem cuộn qua từng thông điệp riêng.
Câu hỏi để xác định thông điệp: “Sau khi nhìn vào banner này, tôi muốn người xem làm gì?” Câu trả lời đó là thông điệp của bạn.
Bước 2 – Xây dựng bố cục trước khi chọn màu hay ảnh
Bố cục là vị trí tương đối của từng thành phần: chữ tiêu đề, chữ phụ, nút, và ảnh. Quy tắc đơn giản nhất là chia banner thành hai vùng: một vùng cho chữ và nút, một vùng cho hình ảnh. Hai vùng không nên lấn sang nhau.
Trên thiết bị di động, hai vùng này thường sắp xếp lại theo chiều dọc: ảnh phía trên hoặc làm nền mờ, chữ và nút phía dưới trên nền đủ tương phản để đọc được. Nếu không nghĩ tới bố cục mobile ngay từ đầu, khi website hiển thị trên điện thoại thì chữ sẽ bị ảnh chèn lên hoặc bị thu nhỏ đến mức không đọc được.
Mẫu bố cục phổ biến: chữ bên trái, ảnh bên phải (hoặc ngược lại), nút ngay dưới chữ tiêu đề. Đây không phải quy tắc cứng nhắc, nhưng nó hoạt động vì mắt người quen đọc theo hướng trái sang phải, trên xuống dưới.
Bước 3 – Viết chữ đủ to, đủ ngắn, đủ tương phản
Chữ trên banner không phải chỗ để viết mô tả dài. Người ta không đọc banner như đọc bài viết. Họ lướt qua và chỉ tiếp nhận những gì đập vào mắt ngay lập tức. Nếu phải nheo mắt hay nghiêng đầu để đọc, họ sẽ không đọc.
Ba tiêu chí cần đáp ứng: đủ to để đọc được ở cả trên điện thoại (không chỉ trên màn hình máy tính lớn), đủ ngắn để truyền đạt thông điệp trong một cái nhìn (thường không quá 10 từ cho tiêu đề chính), và đủ tương phản với nền để không phải cố gắng đọc.
Tương phản (contrast, tức sự tương phản) là yếu tố nhiều người bỏ qua nhất. Chữ trắng trên nền ảnh sáng, chữ đen trên nền ảnh tối, hay chữ màu nhạt trên nền màu gần tương tự đều khiến banner trở nên khó đọc. Nếu dùng ảnh làm nền, nên thêm một lớp màu mờ phủ lên ảnh trước khi đặt chữ.
Bước 4 – Nút hành động rõ ràng, đặt đúng chỗ
Nút hành động (button hay CTA) là phần quyết định banner có làm được việc hay không. Nút cần nổi bật hơn mọi thứ khác trên banner: màu khác, đủ lớn để bấm thoải mái trên điện thoại (ít nhất 44 x 44 px theo khuyến nghị của Apple cho iOS), và đặt gần chữ tiêu đề chứ không phải tận góc dưới của banner.
Chữ trên nút cũng cần cụ thể. “Tìm hiểu thêm” hay “Nhấp vào đây” không cho người xem biết họ sẽ đến đâu. “Xem bảng giá”, “Đặt lịch tư vấn”, “Nhận ưu đãi” cụ thể hơn và thường được bấm nhiều hơn.
Để hiểu thêm về vùng đầu trang và tại sao vị trí nút quan trọng, xem bài về above-the-fold là gì trong bài riêng.
Các lỗi phổ biến khi làm banner website
Nhìn qua nhiều website Việt, Web22 thấy một số lỗi xuất hiện rất thường xuyên. Không phải do người làm không biết thiết kế, mà do bỏ qua một số tiêu chí căn bản.
| Lỗi hay gặp | Biểu hiện | Tại sao hỏng |
|---|---|---|
| Chữ quá nhỏ | Nhìn trên máy tính thấy vừa, mở điện thoại ra thấy chữ như kiến | Hơn 60% người dùng web vào từ điện thoại, banner không đọc được trên mobile là banner vô dụng |
| Ảnh nặng, tải chậm | Banner mất 3-5 giây mới hiện, người dùng thấy vùng trống hoặc ảnh hiện dần từng phần | Banner nặng làm chậm LCP (Largest Contentful Paint, tức thời điểm phần tử lớn nhất trên trang hiện ra) và kéo điểm Core Web Vitals xuống, ảnh hưởng thứ hạng tìm kiếm |
| Chữ đè lên mặt người | Ảnh có người, chữ tiêu đề đặt thẳng lên mặt hoặc vùng đặc trưng nhất của ảnh | Gây khó đọc và nhìn không tự nhiên, người xem không tiếp nhận được cả ảnh lẫn chữ |
| Thiếu nút hành động | Banner có ảnh và chữ nhưng không có nút | Người xem không biết bước tiếp theo là gì, banner không đạt mục tiêu ban đầu |
| Tương phản thấp | Chữ vàng nhạt trên nền trắng, chữ xám trên nền xám | Khó đọc ở ngoài sáng, và vi phạm tiêu chuẩn khả năng tiếp cận web (WCAG) |
Lỗi ảnh nặng đáng chú ý hơn các lỗi còn lại vì nó ảnh hưởng tới cả hiệu năng của toàn trang, không chỉ riêng banner. Hero banner thường là phần tử lớn nhất hiển thị khi người dùng vào trang, nên nó thường là LCP element. Nếu banner nặng và tải chậm, điểm LCP của trang sẽ bị kéo xuống. Bài về lazy load ảnh giải thích cách xử lý vấn đề này đúng cách.
Ai làm banner và dùng công cụ nào
Câu này phụ thuộc vào loại banner và mức độ phức tạp.
Banner giao diện đơn giản (ảnh + chữ + nút, không hoạt hình): nhiều chủ web có thể tự làm bằng Canva sau khi được hướng dẫn về kích thước và bố cục cơ bản. Một số hệ quản trị web có công cụ dựng banner ngay trong giao diện quản trị, không cần ra ngoài.
Banner phức tạp hơn (nhiều lớp, hoạt hình, responsive theo màn hình, hay liên kết với hệ thống quản lý nội dung để thay tự động theo sự kiện): cần người thiết kế và lập trình viên phối hợp. Phần ảnh do người thiết kế làm trong Figma hay Adobe XD, phần code do lập trình viên dựng.
Banner quảng cáo (dùng cho Google Ads hay Facebook Ads): có kích thước chuẩn riêng theo yêu cầu của mạng quảng cáo, và thường cần xuất ra nhiều kích thước khác nhau cùng một lúc. Các công cụ như Google Web Designer hay Figma đều hỗ trợ việc này.
Kích thước là phần kỹ thuật bạn cần biết trước khi đặt hàng thiết kế banner. Bảng kích thước chuẩn cho từng vị trí trên website có trong bài kích thước banner website chuẩn theo từng vị trí.
Làm banner không phức tạp nếu biết đi đúng thứ tự: thông điệp rõ trước, bố cục sau, chữ và ảnh cuối cùng. Bỏ qua bước xác định thông điệp là lý do phổ biến nhất khiến banner đẹp mà không có ai bấm vào.
Nếu bạn đang làm web mới và cần tư vấn cách bố trí banner phù hợp với từng trang, dịch vụ thiết kế website của Web22 xử lý phần này ngay trong giai đoạn thiết kế, không phải thêm vào sau.
Câu hỏi thường gặp
Cách làm banner website cần những gì để bắt đầu?
Cần xác định rõ mục tiêu: banner này muốn người xem làm gì. Sau đó mới đến ảnh hoặc màu nền, văn bản ngắn, và nút hành động. Chọn công cụ và kích thước phù hợp là bước cuối cùng.
Banner website có thể tự làm không hay cần thuê thiết kế?
Banner đơn giản (ảnh nền, chữ, nút) có thể tự làm bằng Canva nếu bạn đã có sẵn ảnh chất lượng tốt và biết kích thước phù hợp. Banner phức tạp hơn, cần nhiều lớp hoặc hoạt hình, hoặc cần responsive tốt trên mọi màn hình, thường cần người có kinh nghiệm thiết kế.
Tại sao banner của tôi trông đẹp trên máy tính nhưng xấu trên điện thoại?
Thường là do bố cục không được thiết kế cho màn hình nhỏ. Khi thu nhỏ, chữ bị nhỏ theo, nút bị xê dịch, hay ảnh bị cắt mất phần quan trọng. Cần thiết kế phiên bản mobile riêng hoặc dùng bố cục responsive có tính tới cả hai màn hình ngay từ đầu.
Kích thước banner ảnh hưởng gì đến tốc độ tải trang?
Ảnh banner thường là phần tử đồ họa lớn nhất trên trang nên file nặng sẽ kéo dài thời gian tải. Nên dùng định dạng WebP, nén ảnh xuống mức cần thiết và dùng kỹ thuật lazy load để không tải ảnh bên dưới khi người dùng chưa cuộn tới.