Google Web Designer 2023 hướng dẫn A tới Z

  • Home
  • /
  • Blog
  • /
  • Google Web Designer 2023 hướng dẫn A tới Z

Cập nhật mới nhất: 07/08/2023


Tóm tắt bài viết:

Để làm gì?

Tất cả chiến dịch hiển thị (chủ yếu là Remarketing) Dương đều sử dụng Banner động được thiết kế từ Google Web Designer:

Banner ảnh động quảng cáo Google

Banner ảnh động quảng cáo Google Ads

Dành cho nhà quảng cáo

  • Tạo Banner Động (ảnh động) chuyên nghiệp hơn
  • Giao diện tối giản, người không chuyên cũng Tự thiết kế được.
  • Là phần mềm do Google phát triển phục vụ cho quảng cáo nên sẽ Ưu tiên xét duyệt trước.

Ví dụ thực tế

Trên đây là 2 ví dụ kích thước 300x250 và 300x600 Dương thiết kế để chạy quảng cáo Google Ads. Đâu đó, bạn sẽ thấy Quảng cáo này của Cao Dương trên 1 số trang web hoặc trên Youtube, Gmail của bạn.

Trên đây là 1 trong số lợi ích khi bạn sử dụng Google Web Designer. Nhưng tất cả các bài viết, Video chia sẻ của Dương đều hướng mục đích duy nhất:

Sử dụng GWD thiết kế Banner động để chạy quảng cáo Google Ads.

Khoá học

Có rất nhiều bạn mới bắt đầu tìm hiểu về GWD và muốn Làm chủ phần mềm này để tạo những banner quảng cáo động đẹp và sinh động.

Giống như các bạn Thuở ban đầu, đợt đó Dương tìm nguồn tài liệu để học và thực hành vô cùng khó vì toàn tự nghiên cứu từ trang chủ GWD bản Tiếng Anh và mò mãi mới làm được rồi quen dần.

Chính vì thế, Dương muốn chia sẻ với các bạn Kiến thức đã lĩnh hội và thực hành theo cách Nghiệp dư đơn giản nhất. 

Google Web Designer là gì?

Google Web Desginer gọi tắt là GWD là phần mềm, là công cụ do Google phát triển để thiết kế Banner HTML5 và hoàn toàn miễn phí.

google web desginer là gì

google web desginer là gì

Nói ngắn gọn, nếu bạn Chạy quảng cáo Google Ads đặc biệt là muốn tạo quảng cáo Hiển thị hình ảnh: nội dung đẹp mắt, hấp dẫn.

Thì đây là phần mềm Số 1 dành cho bạn - kể cả bạn là người mới không biết gì hay dân chuyên nghiệp.

Dương có khóa học Google Ads 2023 bạn có thể tham khảo để chạy quảng cáo bán hàng Online hiệu quả.

Tại sao?

Ảnh động thì bạn có thể thiết kế với đuôi .Gif hay Flash, tuy nhiên Dương khuyến nghị bạn nên ưu tiên chọn GWD thiết kế Banner ảnh động.

Thay thế cho file Gif và Flash

Dương đã từng dùng Photoshop để tạo ảnh .Gif nhưng gặp vấn đề:

  • Ảnh không rõ nét: bị vỡ hoặc mờ nên trông ảnh thiếu chuyên nghiệp. Nếu xuất ảnh ra sắc nét thì dung lượng lại Lớn hơn 150Kb (yêu cầu Google phải nhỏ hơn 150KB).
  • Căn chỉnh khoảng thời gian chuyển động để đáp ứng: hoạt ảnh phải ngưng sau 30 giây trước khi lặp lại. Vấn đề này rất đau đầu chuyện căn chỉnh.
  • Bị từ chối rất cao: đó là sự thật, bởi khi tạo 1 ảnh đẹp thì dung lượng quá cao, còn khi tạo đảm bảo yêu cầu (dưới 150Kb) thì ảnh mờ, vỡ. Như vậy bị từ chối rất cao: thực tế Dương bị Dính nhiều lần và rất bực bội. Phần này bên GWD có trình kiểm tra chẩn đoán trước có đạt hay không là Ad Validator.

Đó là Quá khứ, kể từ khi biết tới Google Web Designer Dương đã chuyển hẳn sang. Hiện tại, Google không cho phép chạy quảng cáo bằng File Gif động HD nữa bạn nhé.

Còn ảnh Flash gì đó, Dương chưa bao giờ tạo nên không biết gì để chia sẻ cả. Tóm lại, có GWD là không để ý File, Phần mềm khác. Cụ thể:

Trước khi biết tới và sử dụng 100% trong việc thiết kế Banner ảnh động, Cao Dương đã dùng các sử dụng phần mềm Chuyên nghiệp khác như: Adobe Photoshop, Adobe illustrator, Adobe Animate hay phần mềm trực tuyến là Canva.

Hiện tại,ngoài GWD  những phần mềm, ứng dụng trên Dương dùng thiết kế Banner tĩnh.

Mình nghĩ rằng, hầu như các bạn thiết kế đồ hoạ hay các bạn làm quảng cáo chuyên nghiệp như Dương ít hay nhiều đã sử dụng các phần mềm Dương kể trên.

Nói tới đây, Dương không bảo là chê các phần mềm khác hay thần thánh quá GWD bạn nhé. 

Ưu việt

Bạn sẽ thấy sự khác biệt khi tiếp xúc với Phần mềm này kể từ lần đầu:

Rất nhẹ

Bất cứ Laptop hay PC nào cũng có thể chạy được từ Window 7 trở lên; Mac 10.10 trở lên, Linux 64 bit.

phần mềm rất nhẹ

phần mềm rất nhẹ

Dương đã thử chạy trên mấy laptop cùi với ram 2Gh và Window 7 cũng như trên Mac rồi. Thực sự là rất nhẹ và xử lý nhanh.

Giao diện Đơn giản

Tiêu chí chuyên phục vụ riêng cho thiết kế Banner quảng cáo nói riêngvà các sản phẩm quảng cáo Google nói chung. Google đã giản lược đi rất nhiều giúp cho tất cả mọi người đều dễ dàng tiếp cận.

giao diện Google Web Desginer đơn giản

giao diện Google Web Desginer đơn giản

Dương là 1 trong số những nhà quảng cáo chứ Không phải dân thiết kế chuyên nghiệp nhưng vẫn sử dụng được GWD để thiết kế phục vụ "Vừa Đủ".

Kiểm duyệt trước

Banner của bạn được Xem xét trước ngay trong khi bạn đang thiết kế. Bạn không phải lo lắng chỉnh sửa không rõ thiết kế của bạn có được duyệt hay không như tạo banner GIF hay bất cứ Flash nào khác.

chẩn đoán trước quảng cáo google web desinger

chẩn đoán trước quảng cáo google web desginer

Kho thư viện Miễn phí

Có sẵn kho thư viện Miễn phí để bạn Sử dụng và tham khảo khi thiết kế. Kho này khá hay và Dương chủ yếu sử dụng để tạo Banner quảng cáo Tiếp thị lại động Dynamic Remarketing.

Kho thư viện Google Web Desginer

Kho thư viện Google Web Desginer

Trên đây là những Ưu điểm và Ví dụ thực tế GWD trong việc thiết kế Banner chuyên chạy quảng cáo Google Ads.

Nào, chúng ta bắt đầu tải và dùng thôi

Tải và cài đặt

Yêu cầu

  1. Kết nối mạng trong suốt quá trình tải và cài đặt bạn nhé
  2. Hệ điều hành Window 7 trở lên (32 hay 64 bit đều được); Mac 10.10 trở lên, Linux 64 bit

Yêu cầu chỉ đơn giản thế thôi

Tải phần mềm

Truy cập vào trang chủ của Google Web Desginer tại đây (giao diện mặc định là tiếng Anh bạn nhé): https://webdesigner.withgoogle.com/

Bấm tải và chọn nơi lưu File:

tải google web desginer

hướng dẫn tải Google Web Desginer

Thực hành

Như đã nói ở đầu bài viết, Cao Dương chỉ chia sẻ với bạn trong phạm vi tạo Banner để chạy quảng cáo Google Ads cụ thể là quảng cáo Hiển thị.

Bạn cần nắm rõ yêu cầu của Google về Banner được duyệt để đảm bảo chính sách và quảng cáo của bạn chấp thuận. Cần nắm rõ để tránh mất thời gian thiết kế banner xong rồi không được duyệt.

Dương ghi chú tóm tắt lại giúp bạn những yêu cầu của Google như sau:

Chọn Kích thước thiết kế

Có rất nhiều kích thước khác nhau, tuy nhiên sẽ có kích thước thông dụng sử dụng nhiều nhất Dương bôi đen bên dưới.

kích thước phổ biến quảng cáo Google GDN

kích thước phổ biến Google hiển thị

Hình vuông và hình chữ nhật

200 × 200 Hình vuông nhỏ
240 × 400 Hình chữ nhật dọc
250 × 250 Hình vuông
250 × 360 Màn hình rộng gấp ba
300 × 250 Hình chữ nhật trong dòng
336 × 280 Hình chữ nhật lớn
580 × 400 Netboard

Nhà chọc trời

120 × 600 Nhà chọc trời
160 × 600 Hình chữ nhật cao và rộng
300 × 600 Nửa trang
300 × 1050 Thẳng đứng

Bảng dẫn

468 × 60 Biểu ngữ
728 × 90 Bảng dẫn
930 × 180 Biểu ngữ đầu trang
970 × 90 Hình chữ nhật dài lớn
970 × 250 Bảng thông cáo
980 × 120 Toàn cảnh

Di động

300 × 50 Biểu ngữ di động
320 × 50 Biểu ngữ di động
320 × 100 Biểu ngữ lớn trên thiết bị di động

Dung lượng

Dung lượng tối đa 150 Kb trong tất cả các định dạng quảng cáo HTLM5 nói riêng và tất cả quảng cáo Google Web Desginer nói chung.

7 kích thước Dương đề xuất bạn nên chọn và sử dụng: 300 x250; 300x600; 728x90; 160x600;300x50; 320x100.

Dưới đây, Dương sẽ đưa ra 1 ví dụ thiết kế Banner Kích thước 300x600 để chúng ta thực hành. Trong Banner có những thành phần nào bạn cần chuẩn bị

Chuẩn bị

Để có Banner đẹp và truyền tải đúng mục đích bạn mong muốn, bạn cần chuẩn bị thật kỹ và Tối thiểu những phần sau:

Hình ảnh

  1. Ảnh Logo (thương hiệu): đây là phần bắt buộc bạn cần có, nên để logo nền trong suốt là tốt nhất.
  2. Ảnh sản phẩm, dịch vụ (Không bắt buộc nhưng cần có): Ảnh truyền tải thông điệp quảng cáo của bạn, tăng CTR cao từ ảnh bắt mắt bạn nhé.

Nội dung

  1. Nội dung: Title, Mô tả: tương tự như bạn tạo quảng cáo Google Search vậy
  2.  Bổ trợ tăng CTR, Bán hàng: Nút kêu gọi hành động (Xem ngay, Mua ngay); số điện thoại, website,.. thông tin để khách liên hệ.
Trong Banner quảng cáo Google Ads cần có gì

Trong Banner quảng cáo Google Ads cần có gì

Tới đây bạn thấy công đoạn chuẩn bị sẽ khác biệt có phần hơn so với quảng cáo Tìm kiếm ở phần Hình ảnh và Nút kêu gọi hành động phải không nào?

Thực hành

Dương sẽ tạo 1 kích thước 300x600 từ bắt đầu tới Xuất bản

Chọn kích thước và đặt tên

Khởi động phần mềm, bạn sẽ được hỏi các phần bạn muốn

Create New File: tạo File mới

Open File: Mở File thiết kế trước hoặc File sẵn có

Use Template: sử dụng thư viện sẵn

Find Help: Trợ giúp

Tùy chọn kích thước và đặt tên

Tùy chọn kích thước và đặt tên

Environment: chọn Google Ads

Phần này tùy theo bạn muốn, thông thường sẽ chọn Tạo File mới hoặc Mở File sẵn có. Dương sẽ chọn Tạo File mới:

Tại đây, Bạn chọn Tab Banner và Đặt tên File (thông thường đặt tên kích thước và chiến dịch cho dễ nhớ).

Chọn nơi Lưu file để sau tải lên quảng cáo; chọn kích thước; chọn định dạng là Google ads. Chi tiết xem tại ảnh.

chọn nơi lưu trữ và định dạng file

chọn nơi lưu trữ và định dạng file

Xuất File đuôi ZIP

Sau khi bạn thiết kế xong, bạn xuất File để dùng thường sẽ có nhiều lựa chọn để Lưu file.

Tuy nhiên, trong mục đích chính là để chạy quảng cáo Google GDN hoặc tải lên Website để sử dụng chúng ta thường lưu về máy.

xuất file Google Web Designer

xuất file gwd

Chọn Local để lưu về máy của bạn, sau khi xuất ra bạn sẽ nhận được File đuôi .ZIP - đây là đuôi được chấp thuận quảng cáo Banner HTML5 của Google Ads.

Link kiểm tra

Có 3 cách để bạn kiểm tra Banner bạn tạo từ GWD có được qua vòng gửi xe của Google hay không:

  • Trong quá trình bạn Thiết kế
kiểm tra google web designer

kiểm tra google web designer

Ở mục Ad Validator bạn kiểm tra các chỉ số kiểm duyệt trước điều kiện của Google Ads. Hãy đạt các tiêu chí để đạt được tích xanh, trong ảnh có 1 tích vàng và mình cần phải khắc phục phần đó.

  • Kiểm tra từ Trình xác thực HTML5 của Google Ads
kiểm t

kiểm tra html5 google ads

Bạn tham vào website này: https://h5validator.appspot.com/adwords/asset sau đó tải gửi ảnh lên.

Miễn phí (tặng)

Tặng bạn 1 vài mẫu Banner HTML5 động và ảnh tĩnh để bạn sử dụng: cảm ơn bạn đã dành thời gian đọc chia sẻ này.

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

Tải Google Web Desginer ở đâu?

  • Trang chủ tải GWD: https://webdesigner.withgoogle.com/

Dùng Google Web Desginer miễn phí hay mất phí?

  • Đây là phần mềm Miễn phí, thường xuyên nâng cấp

Có dễ dàng sử dụng cho Người mới bắt đầu không?

  • Rất dễ dùng, chỉ cần bạn tập trung học và thực hành trong khoảng 2 tiếng đồng hồ ra được sản phẩm hoàn chỉnh

Bạn thấy Google Web Designer 2023 hướng dẫn A tới Z thế nào?

Chân thành, Dương rất muốn lắng nghe chia sẻ của bạn dưới phần Comment

Dương không chèn quảng cáo giảm trải nghiệm của bạn. Bạn có tương tác:

  • {"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}

    >
    Success message!
    Warning message!
    Error message!