Tổng hợp các mẫu Banner quảng cáo dọc cho Website

Topic này chia sẻ các mẫu Banner dọc để bạn có ý tưởng Design và thiết kế nhanh hơn.
Các tông màu như xanh dương, xanh lá cây, Đỏ có tính kêu gọi hành động rất cao, giúp tăng tỷ lệ conversion.

Về cơ bản thì một banner quảng cáo đúng chuẩn luôn có 3 phần:
1. Logô/thương hiệu: thường được đặt ở ngay đầu banner hoặc Footer, đây là thành phần bắt buộc để quảng bá thương hiệu và tạo niềm tin cho người xem
2. Nội dung: là nội dung, thông điệp quảng cáo, sử dụng cách sắp xếp chữ typography để trình bày và chứa hình ảnh, bao bì sản phẩm luôn được đánh giá cao. Theo thống kê thì đa phần mua hàng bằng mắt, cảm tính, do đó khi gặp hình ảnh mẫu mã sp bắt mắt sẽ kích thích mua hàng nhiều hơn là xem banner toàn chữ hay ảnh minh họa dạng vector
3. Call to Action: là câu kêu gọi hành động, như click vào banner, mua hàng ngay,...

Ứng dụng của Banner:
+ DÙng làm Banner quảng cáo trên website
+ Làm Banner quảng cáo đặt trên website khác
+Làm Banner để quảng cáo adwords


Mẫu 1. Style xanh dương

Banner theo tông màu xanh dương & Vàng này khá thông dụng.
Xem hướng dẫn vẽ đường cong tại đây: http://thietkeps.blogspot.com/2014/12/cach-ve-uong-cong-voi-cong-cu-pen-tool.html



thiet ke banner - dich vu thiet ke banner - thiet ke banner gia re - huong dan thiet ke banner - banner quang cao - hinh anh quang cao - banner quang cao psd - banner quang cao cho web
Mẫu 1 - Tông màu xanh dương
Để thiết kế Banner này không cần công cụ nào cao cấp, chỉ toàn là chữ, ở mấy hình tròn, các bạn có thể thay thế bằng hình ảnh sản phẩm để banner ấn tượng hơn.

Về màu sắc chữ: Theo nguyên tắc nền tối thì chữ sáng và ngược lại, trên nền xanh (thuộc gam màu trung tính) thì chữ màu sáng (vàng, trắng) là hợp gu nhất
Về Font chữ: Tiêu đề luôn dùng Font đậm UTM và chữ mô tả dùng Font thường, không có "chân" 
Bố cục Typography: không cần sắp xếp phức tạp, nên sắp theo chiều dọc sao cho dễ đọc nhát, không nên đặt chồng chéo như mấy Style nghệ thuật vì banner này thuộc loại thương mại, nhìn vào vào đọc đc ngay.

Mẫu 2: Tông màu xanh lá cây

Bộ ba màu Xanh lá cây - Vàng - Cam được nhiều website về công nghệ sử dụng, bộ màu này có tính tương tác cao và dễ phối hợp với màu chữ, bạn có thể chọn màu chữ là trăng, đỏ, đen, vàng, cam đều hợp. Gợi ý nhỏ là tiêu đề nên dùng hiệu ứng Stroke + Shadow để dễ đọc hơn và font chữ "cứng" hơn.

thiet ke banner - dich vu thiet ke banner - thiet ke banner gia re - huong dan thiet ke banner - banner quang cao - hinh anh quang cao - banner quang cao psd - banner quang cao cho web
Mẫu 2 - Tông màu Xanh lá cây

Về màu sắc chữ: nền xanh lá thuộc gam màu sáng, do đó chữ nên có Stroke để dễ phân biệt
Về Font chữ: Font chữ tiêu đề: chọn các Font nét đậm như Rockwell hoặc các Font UTM nét đậm.
Bố cục Typography: tương tự mẫu 1, trình bày các nội dung quan trọng nhất, các lợi ích đặc trưng nhất của sản phẩm, tránh viết chi chít chữ nghĩa.

Hướng dẫn tạo nút bấm có viền Footer




Mẫu 3. Style màu đỏ
thiet ke banner - dich vu thiet ke banner - thiet ke banner gia re - huong dan thiet ke banner - banner quang cao - hinh anh quang cao - banner quang cao psd - banner quang cao cho web
Bộ Banner quảng cáo theo tông màu ĐỎ

Về màu sắc: Đỏ - Đen - Trắng là bộ màu gây kích thích mạnh, ảnh trên là bộ sưu tập Banner áp dụng bộ màu này.
Về bố cục: Tạo điểm nhấn trong một Box đặt ngay trung tâm của banner, Logo đặt ở Header, Nội dung thông tin bổ sung + Nút bấm Call to Action đặt ở Footer

Mẫu 4. Style màu Aqua

Aqua là màu sáng, dễ phối hợp với các màu đậm như màu cam, đỏ. Tông màu này không nổi trội bằng các màu ở trên
thiet ke banner - dich vu thiet ke banner - thiet ke banner gia re - huong dan thiet ke banner - banner quang cao - hinh anh quang cao - banner quang cao psd - banner quang cao cho web

Mẫu 5. Style xanh dương

Style này khá phức tạp và cần nhiều nội dung hơn, Banner này có thể dùng làm Standee, in bảng lớn.

thiet ke banner - dich vu thiet ke banner - thiet ke banner gia re - huong dan thiet ke banner - banner quang cao - hinh anh quang cao - banner quang cao psd - banner quang cao cho web

Mẫu 6. Style Ảnh minh họa Crop tròn

thiet ke banner - dich vu thiet ke banner - thiet ke banner gia re - huong dan thiet ke banner - banner quang cao - hinh anh quang cao - banner quang cao psd - banner quang cao cho web
 

Mẫu 7. Style Đỏ - Đen

thiet ke banner - dich vu thiet ke banner - thiet ke banner gia re - huong dan thiet ke banner - banner quang cao - hinh anh quang cao - banner quang cao psd - banner quang cao cho web