Các banner HTML5 đang ngày càng xuất hiện thường xuyên hơn trên Internet, và ngày càng thu hút sự chú ý của người dùng.
Các công ty hiện nay cũng đầu tư khá nhiều vào việc thiết kế banner HTML5 chất lượng, đặc biệt là trong quảng cáo Google.
Có một quan niệm sai lầm cho rằng ngành quảng cáo online hiện nay hoàn toàn không hiệu quả, không ai thực sự chú ý đến quảng cáo trên Internet, chúng làm phiền và tốn nhiều chi phí hơn những gì chúng mang lại.
Thực tế, 54% người dùng báo cáo rằng họ không tin quảng cáo banner mà họ tình cờ đọc trên Internet,nhưng điều này không liên quan đến nền công nghiệp quảng cáo, mà là cách chúng được thiết kế.
Nếu người dùng không tin tưởng vào những gì họ thấy, thì đó là lỗi của nhà quảng cáo đã tiếp cận, và thiết kế banner không đúng cách.
Nhà quảng cáo đã không nghĩ về những gì khách hàng muốn, hành vi của khách hàng, và nội dung và khách hàng tiêu thụ.
Có 2 loại quảng cáo banner phổ biến nhất trên Internet hiện nay, đó chính là banner tĩnh và banner động. Bài viết hôm nay sẽ nói một số điều cần lưu ý về banner động theo định dạng HTML5 chuẩn mới nhất.
Mình cũng sẽ cố gắng chia sẻ một số yếu tố cần thiết để thiết kế 1 banner HTML5 chuyên nghiệp theo kinh nghiệm của mình.
TÓM LƯỢC BÀI VIẾT NÀY
1/ Chọn kích cỡ phù hợp ?
Khi bạn bắt đầu thiết kế 1 banner quảng cáo (cho dù là tĩnh hay động), vấn đề cơ bản nhất, cần quan tâm đầu tiên chính là kích thước của banner cần thiết kế.
Mỗi nền tảng quảng cáo sẽ đi kèm với các yêu cầu riêng về kích thước banner quảng cáo.
Thông thường, các kích thước tiêu chuẩn banner HTML5 được sử dụng phổ biến nhất hiện nay là : (WxH – Đơn vị px)
- Hình vuông : 250×250 và 200×200
- Kích thước ngang : 468×60 và 728×90
- Chữ nhật : 300×250 và 336×280
- Chữ nhật cao : 120×600 và 160×600
- Chữ nhật lớn : 300×600
2/ Chọn định dạng file ?
Banner động trên môi trường quảng cáo internet không giống nhau.
3 định dạng phổ biến nhất là gif hoạt ảnh, flash và HTML5. Trong bài viết này mình sẽ chỉ đề cập đến định dạng HTML5.
Vậy, HTML 5 có gì khác 2 định dạng còn lại ?
Đầu tiên, hãy nói về Gif
Banner gif vẫn còn rất phổ biến hiện nay nhưng chúng dần đã trở nên lỗi thời và không hiệu quả.
Lý do mà gif trở nên lỗi thời bởi vì bản chất của chúng, chúng bị giới hạn cho thiết kế.
Định dạng ảnh gif chỉ hỗ trợ 256 màu, vì thế, chúng ta rất khó để thiết kế 1 banner gif với hiệu ứng bắt mắt và rõ nét.
Gif đã không còn đáp ứng được công nghệ quảng cáo trong vài năm trở lại đây, khi người dùng ngày càng chú ý tới những quảng cáo bắt mắt và nét căng, trên những thiết bị hiện đại.
Flash thì sao ?
So với Gif, công nghệ flash đã có những cải tiến đáng kể về chất lượng hình ảnh, cũng như hiệu ứng chuyển động nhưng chúng thiếu 1 thứ vô cùng quan trọng : Tính tương thích
Giống như Gif, công nghệ flash có tuổi thọ lâu đời và cũng đang dần trở nên lạc hậu.
Flash hoàn toàn không tương thích với 1 số trình duyệt web chưa kể chúng có những lỗ hổng bảo mật nghiêm trọng đối với máy tính và điện thoại di động.
Không tương thích có nghĩa là bạn sẽ phải cài thêm plugin của bên thứ 3 để có thể chạy hoạt ảnh Flash (Thực ra hệ sinh thái trên iPhone đã cấm tiệt flash trên các thiết bị của họ )
Vậy còn HTML5 ?
Có thể nói HTML là sự kết hợp tất cả các điểm mạnh của Flash và Gif, đồng thời loại bỏ các điểm yếu của chúng.
Mã HTML5 được hỗ trợ bởi tất cả các trình duyệt hiện nay và chúng vô cùng thân thiện với thiết bị di động. HTML 5 có thể chạy trên mọi thiết bị mà không cần cài đặt plugin bổ sung bên thứ 3.
HTML5 chất lượng cao hơn Gif, an toàn hơn Flash và dễ thiết kế, nếu bạn sử dụng đúng công cụ phù hợp.
3/ Màu sắc quảng cáo
Vì sao màu sắc lại quan trọng ?
Một mặt, chúng ta có màu sắc thương hiệu, chúng rất quan trọng để thể hiện tính nhất quán và tương thích.
Hãy ghi nhớ điều trên, đặc biệt nếu bạn chèn logo trên banner quảng cáo, nếu màu sắc logo và banner không tương thích, toàn bộ thiết kế của bạn sẽ bị huỷ hoại.
Chúng ta hãy xem xét banner dưới đây để hiểu được tính nhất quán của thương hiệu khi đề cập tới màu sắc :
1 nửa banner sử dụng màu sắc thương hiệu của Blue Apron (màu xanh đậm), nừa còn lại là hình ảnh minh hoạ những gì họ muốn gửi đến khách hàng.
Nút kêu-gọi-hành-động nổi bật trên nền xanh dễ dàng thu hút sự chú ý của khách hàng.
Màu sắc cũng thường được sử dụng để kích hoạt cảm xúc. Ý mình đang nói về những cảm xúc tích cực tạo cảm giác dễ chịu cho người dùng chứ không gây phiền nhiễu hay quấy rầy.
Lời khuyên của mình : Cho dù bạn chọn màu nào, đừng lạm dụng chúng. Quá nhiều màu sắc sẽ không làm cho banner của bạn trở nên nổi bật mà gây tác dụng ngược đáng kể
4/ Chọn font chữ – nghệ thuật sắp chữ phù hợp
Font chữ rất quan trọng vì chúng giúp bạn truyền tải thông điệp đến đối tượng khách hàng.
1 font chữ tốt không chỉ đẹp mà còn phải phải dễ đọc nữa.
Serifs, San serifs là những kiểu chữ phổ biến trên môi trường trực tuyến, bạn cũng có thể sử dụng các font chữ viết tay khá có thiết kế khá lã lướt và các font chữ trang trí khác tuỳ thuộc vào dự án thiết kế.
Dù bạn có sử dụng font chữ nào đi chăng nữa, điều quan trọng nhất là chúng phải dễ đọc đối với tất cả khách hàng và nhất quán với nhận diện thương hiệu cũng như các chi tiết đồ hoạ khác.
Ví dụ dưới đây của Kellog’s. Họ áp dụng font Sans Serif cơ bản dễ đọc. Đây không phải là 1 font chữ quá cầu kỳ nhưng cũng không xấu. Đơn giản – dễ đọc là đặc trung của San Serif
Font chữ San Serif rất thông dụng trong thiết kế
Một ví dụ khác, Yahoo Sport sử dụng font chữ cách điệu khá đẹp mắt nhưng vô cùng dễ đọc để thiết kế của họ trở nên nổi bật hơn đối với người dùng.
5/ Chèn hình ảnh
Một số banner có bao gồm hình ảnh trong thiết kế của mình, một số banner thì không.
Điều này phù thuộc vào mục đích và lĩnh vực mà bạn thiết kế. Nhưng nếu bạn chọn chèn hình ảnh vào banner quảng cáo, bạn cần lưu ý vấn đề sau
Có 3 loại hình ảnh chính mà bạn có thể chèn vào banner HTML5 :
a/ Hình stock
Hình ảnh stock là gì ?
Ảnh Stock là những hình ảnh chuyên nghiệp được chụp về các địa điểm, địa danh, thiên nhiên, sự kiện,… hoặc những người mua và bán trên cơ sở có hay không có phí bản quyền và có thể được sử dụng và sử dụng lại vì mục đích thương mại.
Có rất nhiều website cung cấp ảnh stock chuyên nghiệp, cả trả phí và miễn phí.
Tuy nhiên, hãy lưu ý rằng các banner hiệu quả không phải là những banner được chèn vào các hình ảnh ngẫu nhiên.
Bạn cần 1 hình ảnh phù hợp với những gì bạn muốn nói với khách hàng, như ví dụ dưới đây.
b/ Hình ảnh sản phẩm
1 hình ảnh sản phẩm tốt là hình ảnh làm tiêu điểm của banner và gợi cho người dùng cảm giác mua hàng.
1 hình ảnh sản phẩm có thể là hình tách nền hoặc có nền được chế biến lại cho phù hợp, điều này tuỳ thuộc vào tay nghề và khiếu thẩm mỹ của Designer.
c/ Thiết kế của riêng bạn hay hình tượng trưng.
Nếu bạn là 1 nghệ sỹ và có kỹ năng sáng tạo nghệ thuật cao. Xin chúc mừng, không có giới hạn nào cho những gì bạn có thể vẽ và thu hút sự chú ý của người dùng.
Bạn có thể sáng tạo ra các bản vẽ mang nhãn hiệu của riêng mình hoặc vẽ nên một cái gì đó độc đáo cho banner của bạn
Tóm lại, hình ảnh là thứ thu hút sự chú ý. Nếu bạn sử dụng hình ảnh một cách hiệu quả, nó không chỉ truyền tải thông điệp mà còn truyền tải cả cảm xúc.
Điều quan trọng nhất là hình ảnh phải phù hợp với mục đích thiết kế, đối tượng khách hàng, và bản sắc thương hiệu của bạn.
Trước khi bắt đầu chèn hiệu ứng chuyển động vào banner HTML5, có 3 câu hỏi bạn cần trả lời như sau :
- Làm sao để tạo ra hiệu ứng chuyển động trơn tru ?
- Chọn hiệu ứng đơn giản để thao tác nhanh chóng, tiện lợi ?
- Hiệu ứng chuyển động nên kéo dài bao lâu ?
Ở 2 câu hỏi đầu tiên, nếu bạn đã biết cách sử dụng phần mềm GWD – Google Web Designer thì hẳn bạn đã biết câu trả lời.
GWD là phần mềm thông dụng nhất hiện nay trong việc thiết kế banner HTML5, mình sẽ giới thiệu phần mềm này trong 1 bài viết khác.
Vậy, hiệu ứng chuyển động nên kéo dài bao lâu ?
Điều này phục thuộc vào số layer của banner, nghĩa là độ phức tạp của thiết kế. Hãy xem một số ví dụ dưới đây :
Thông thường với banner HTML5, độ dài hoạt cảnh từ 3-5 giây là lý tưởng.
Cũng giống như màu sắc, add quá nhiều hiệu ứng chuyển động sẽ làm cho người dùng cảm thấy bối rối và gây phản tác dụng.
7/ Thiết kế vừa đủ các khoảng trống
Trong thiết kế banner chúng ta thường quan tâm đến hình ảnh, màu sắc, nút kêu-gọi-hành-động, hay các chi tiết đồ hoạ khác mà thường quên 1 chi tiết không kèm phần quan trọng : Chính là “khoảng trống”
1 banner có thiết kế đẹp không chỉ với hình ảnh và màu sắc phù hợp mà bố cục của banner đó còn phải “thoáng” nữa.
Bạn không thể ném văn bản và hình ảnh lên banner 1 cách ngẫu nhiên, bạn còn phải làm cho chúng dễ nhìn, phù hợp với không gian thiết kế. Đây chính là yếu tố phân biệt giữa 1 thiết kế viên có và không có năng lực
Không gian trống trong thiết kế cũng giống như “dấu lặng” trong âm nhạc. Nếu bản nhạc không có dấu lặng sẽ là 1 bản nhạc không có cấu trúc và trở thành những âm thanh vô vị
Tương tự như vậy, 1 thiết kế không có khoảng trắng là một thiết kế lộn xộn và vô nghĩa.
Kết luận
Tạo và thiết kế banner HTML5 hiện nay đã khá dễ dàng với Google Web Designer.
Bạn không cần phải có kiến thức về lập trình HTML5 và CSS3 để làm ra 1 banner HTML5 chuyên nghiệp, những gì bạn cần chỉ là k cách sử dụng phần mềm.
Tuy nhiên, để thiết kế 1 banner HTML5 thành công, bạn cần biết các yếu tố chính của 1 banner cũng như màu sắc, font chữ, hiệu ứng…
Các yếu tố trên mình đã trình bày khá kỹ trong bài viết này. Nếu bạn có bất kỳ thắc mắc hay vấn đề gì cần thảo luận, hãy để lại bình luận dưới bài viết, mình sẽ trả lời trong thời gian sớm nhất.