Bài 10: Tạo landing page bán hàng — Phần 2: Làm đẹp và hoàn thiện
Giai đoạn 3: BIẾT LÀM 🔨 Thời lượng: 45-90 phút (đọc + thực hành + bài tập) Công cụ: Google AI Studio — aistudio.google.com
🎯 Mục Tiêu Bài Học
- Sau bài này, bạn sẽ biết cách chỉnh sửa giao diện landing page cho đẹp và chuyên nghiệp
- Sau bài này, bạn sẽ biết các “bí kíp” thiết kế cơ bản: khoảng cách, cân đối, tương phản màu, hierachy (thứ bậc thông tin)
- Sau bài này, bạn sẽ có landing page hoàn chỉnh, sẵn sàng dùng được
💡 Ví Dụ Thực Tế
Anh Đức đã tạo xong bản nháp landing page cho dịch vụ sửa máy tính tại nhà. Nội dung đủ rồi, nhưng trang nhìn hơi “thô” — các phần dính sát nhau, nút bấm nhỏ quá, màu sắc chưa hài hòa, hình ảnh placeholder chưa được thay. Anh bắt đầu “trang điểm” cho trang bằng cách: yêu cầu AI tăng khoảng cách giữa các phần, thêm hiệu ứng đổ bóng cho card sản phẩm, đổi gradient nền cho hero banner, thêm animation (chuyển động) nhẹ khi cuộn trang. Sau 30 phút chỉnh sửa, trang trông chuyên nghiệp ngang ngửa trang 10 triệu thuê dev.
📚 Kiến Thức Cần Biết
Thiết kế tốt không phải “nhiều màu nhiều hiệu ứng” — mà là rõ ràng, dễ đọc, dễ hành động. 4 nguyên tắc thiết kế cơ bản cho người không chuyên: khoảng cách (spacing — các phần không nên dính sát nhau, cần “khoảng thở” giống như giữa các đoạn văn cần xuống dòng), tương phản (contrast — chữ trắng trên nền tối, nút màu nổi trên nền nhạt, tiêu đề to hơn nội dung), thứ bậc thông tin (hierarchy — điều quan trọng nhất phải to nhất, rõ nhất, ở trên cùng), và nhất quán (consistency — dùng 2-3 màu xuyên suốt, không dùng 10 font chữ khác nhau).
Khi yêu cầu AI chỉnh thiết kế, bạn nên dùng ngôn ngữ cụ thể thay vì trừu tượng. Thay vì nói “làm đẹp hơn”, hãy nói cụ thể muốn chỉnh gì: “Tăng khoảng cách giữa phần 3 và phần 4”, “Đổi nút CTA sang màu đỏ cam với góc bo tròn”, “Thêm hiệu ứng fade-in khi cuộn đến phần đánh giá.”
🧪 Thực Hành Từng Bước
- Mở lại project landing page từ Bài 9 trên Google AI Studio
- Bắt đầu “trang điểm” theo thứ tự sau. Gõ từng yêu cầu một:
Bước 2a — Tổng thể:
Cải thiện thiết kế tổng thể của landing page:
- Tăng khoảng cách (padding) giữa mỗi section lên 60-80px
- Thêm background màu xen kẽ giữa các section (trắng - xám nhạt - trắng - xám nhạt) để phân biệt rõ
- Đảm bảo tất cả tiêu đề section căn giữa và có kích thước đồng nhất- Nhấn Send, xem kết quả
Bước 3a — Hero banner:
Cải thiện hero banner:
- Tăng chiều cao hero banner lên ít nhất 80% màn hình (80vh)
- Thêm overlay gradient tối mờ lên ảnh nền để chữ nổi bật hơn
- Tiêu đề chính kích thước lớn, đậm, có text-shadow
- Nút CTA lớn hơn, có hiệu ứng hover (đổi màu nhẹ khi rê chuột)
- Thêm animation nhẹ: chữ fade-in từ dưới lên khi trang load- Nhấn Send, xem kết quả
Bước 4a — Phần sản phẩm/dịch vụ:
Cải thiện phần sản phẩm/dịch vụ:
- Mỗi sản phẩm hiển thị trong card có đổ bóng nhẹ (box-shadow)
- Khi rê chuột vào card, card nổi lên một chút (hiệu ứng hover lift)
- Giá hiển thị nổi bật, kích thước lớn, màu khác với mô tả
- Nếu có giá gốc, hiển thị gạch ngang giá gốc và giá mới bên cạnh- Nhấn Send, xem kết quả
Bước 5a — Phần đánh giá:
Cải thiện phần đánh giá khách hàng:
- Hiển thị dạng carousel (trượt ngang) hoặc card 3 cột
- Mỗi card có avatar tròn, tên đậm, sao vàng, trích dẫn đánh giá trong dấu ngoặc kép
- Nền card trắng với border nhẹ- Nhấn Send, xem kết quả
Bước 6a — Nút CTA:
Tất cả nút CTA (Call to Action) trên trang:
- Kích thước lớn, padding 16px 32px
- Màu [MÀU NỔI BẬT], chữ trắng đậm
- Bo tròn góc 8px
- Hiệu ứng hover: đổi đậm hơn một chút, thêm shadow
- Thêm 1 nút CTA "sticky" (dính) ở dưới cùng màn hình khi cuộn trang trên mobile- Nhấn Send, xem kết quả
- Dùng khung chat (ghi chú yêu cầu chỉnh sửa bằng prompt) để chỉnh các chi tiết nhỏ cuối cùng: khoanh vùng chỗ nào chưa ưng, ghi chú yêu cầu chỉnh
- Khi hài lòng, kiểm tra tổng thể: kéo từ đầu đến cuối trang, đảm bảo mọi thứ đẹp và nhất quán
✅ Kết Quả Đầu Ra
Bạn sẽ có một landing page bán hàng/dịch vụ hoàn chỉnh, thiết kế chuyên nghiệp, hiển thị đẹp trên khung kết quả chat — sản phẩm đầu tiên đạt chất lượng “dùng thật được.”
💡 Mẹo & Lưu Ý
- Ít hơn là nhiều hơn (Less is more): đừng thêm quá nhiều hiệu ứng, animation, màu sắc. Trang nhìn “sạch”, rõ ràng sẽ chuyên nghiệp hơn trang rối rắm
- Mẹo kiểm tra nhanh: thu nhỏ cửa sổ trình duyệt để giả lập xem trên điện thoại. Nếu trang vẫn đẹp khi cửa sổ nhỏ, nghĩa là responsive tốt
- ⚠️ Lỗi thường gặp: Sau nhiều lần chỉnh sửa, đôi khi trang bị “vỡ” (bố cục xấu đi). Nếu vậy, gõ: “Trang hiện đang có vấn đề về bố cục. Hãy kiểm tra và sửa tất cả các lỗi CSS/layout để trang hiển thị đúng.”
📝 Bài Tập Về Nhà
Hoàn thiện landing page cho đến khi bạn tự tin “có thể gửi link này cho khách hàng xem.” Nhờ 2-3 người (bạn bè, đồng nghiệp, hoặc chính khách hàng) xem và góp ý. Ghi lại góp ý, nhưng chưa cần sửa — sẽ sửa ở Giai đoạn 4 (Biết Kiểm).
🏆 Achievement Bài 10
- [ ] Hoàn thành đọc phần kiến thức
- [ ] Làm xong các bước thực hành
- [ ] Nộp bài tập về nhà
- [ ] Ghi chú những điều học được
Bài tiếp theo: Mini tool hữu ích — Phần 1 🚀