Diterbitkan：2026-09-28
Kata kunci：Nano Banana Pro, Nano Banana, situs resmi Nano Banana, landing page SaaS, Hero landing page, nanobanana prompts
Tim yang membangun situs B2B, alat developer, atau SaaS alur AI tahu benar: sebelum pengunjung sampai ke harga, yang memutuskan apakah mereka terus menggulir biasanya adalah apakah Hero layar pertama terlihat profesional dan apakah ilustrasi fitur terasa seperti satu sistem desain. Jika Hero, kartu fitur, dan pelat social proof saling bertentangan di suhu warna atau skala Logo, pengunjung merasa halaman itu ditempel tiga perusahaan. Banyak tim menyerahkan Hero ke desainer, mengambil ikon fitur dari situs ikon, dan memotong benefit strip dari Pitch Deck — menyelaraskan tiga rantai sering butuh berhari-hari, dan layar pertama seluler masih sering terpotong hingga «hanya tersisa setengah produk».
Panduan ini berbeda dari topik slide Pitch Deck, kit visual webinar, header Newsletter, atau tangkapan ASO App Store. Ia menyelesaikan satu pekerjaan saja: bagaimana masuk dari situs resmi Nano Banana ke aplikasi kreasi melalui aplikasi kreasi Nano Banana, lalu memakai Nano Banana / Nano Banana Pro untuk menyelesaikan kit visual landing page SaaS siap tayang dalam setengah hari — mencakup Hero, kartu fitur, dan benefit strip / social proof tanpa tiga rantai desain outsourcing terpisah.
Anda akan mendapatkan: tabel perencanaan kit (8 aset), checklist materi lengkap, alur empat langkah, 3 template prompt bahasa Inggris lengkap (placeholder bisa diganti), panduan rasio layar pertama dan blok, tiga bedah kasus, tabel kesalahan, serta saran memilih Nano Banana versus Nano Banana Pro. Isi prompt tidak dipotong di sini — seed menyisipkan blok Inggris lengkap agar Anda bisa menempel dan menerbitkan Hero, kartu fitur, dan benefit strip.
1. Mengapa memakai Nano Banana / Nano Banana Pro untuk visual landing page SaaS?
Mengalihdayakan Hero, ilustrasi fitur, dan benefit strip ke vendor berbeda merusak sistem desain. Ikon stok berganti gaya, social proof terasa merek lain. Di alur situs resmi Nano Banana, Nano Banana cocok mengeksplorasi komposisi dan volume cepat, sementara Nano Banana Pro mengunci warna merek, identitas produk/UI, dan zona aman judul untuk final. Bandingkan matriks kemampuan sebelum menghabiskan kredit:
| Kemampuan | Campuran outsourcing tradisional | Nano Banana / Nano Banana Pro |
|---|---|---|
| Komposisi Hero layar pertama | Satu revisi menunggu sehari | Bahasa alami untuk mencoba 5 arah; Pro mengunci warna merek dan produk/UI lebih stabil |
| Ruang negatif ilustrasi fitur | Gaya situs ikon meloncat-loncat | Sketsa kartu bersih; Pro memperjelas zona aman judul pendek |
| Kesatuan seri | Hero, fitur, dan benefit strip dikerjakan terpisah | Kerangka prompt yang sama dipakai ulang; alur akun yang sama tetap koheren |
| Potongan seluler | Baru setelah ekspor baru tahu wajah/produk terpotong | Jangkar zona aman tetap; kontras final Pro lebih cocok untuk layar pertama |
| Entri & kurva belajar | Alat terpencar | Situs resmi Nano Banana punya panduan dan kasus; halaman pilar Pro menjelaskan pemilihan |
Satu kalimat: pakai Nano Banana untuk mengeksplorasi komposisi dan volume; pakai Nano Banana Pro untuk mengunci warna merek, identitas produk/antarmuka, dan zona aman judul untuk final. Keputusan dan pintu masuk: mulai dari halaman produk Nano Banana dan Nano Banana Pro; kredit dan paket ada di Harga. Ini bukan «satu gambar cantik» — ini sistem visual produk yang dapat dipakai ulang untuk Hero, fitur, dan social proof.
2. Rencana kit visual landing page SaaS (disarankan 8 aset)
Sebelum memasukkan ilustrasi stok ke Figma, tentukan di tabel «pekerjaan visual setiap blok» — hemat kredit dan mencegah Hero, fitur, serta benefit strip terlihat seperti tiga merek:
| # | Jenis visual | Tujuan | Model yang disarankan |
|---|---|---|---|
| 1 | Pelat Hero | Visual utama di belakang H1 + CTA layar pertama | Nano Banana Pro |
| 2 | Close-up produk/UI | Membuktikan «ini produk nyata» | Nano Banana Pro |
| 3 | Ilustrasi fitur A | Metafora otomasi / efisiensi | Nano Banana / Pro |
| 4 | Ilustrasi fitur B | Metafora kolaborasi / alur kerja | Nano Banana / Pro |
| 5 | Ilustrasi fitur C | Metafora analitik / keamanan | Nano Banana Pro |
| 6 | Benefit strip / social proof | Dasar untuk kutipan atau dinding Logo | Nano Banana Pro |
| 7 | Adegan kontras sebelum/sesudah | Menjelaskan «sebelum vs sesudah» | Nano Banana Pro |
| 8 | Suasana CTA bawah | Menutup konversi tanpa mencuri tombol | Nano Banana Pro |
Tips situs resmi: Di situs resmi Nano Banana, buka Showcase dan panduan prompt dulu — favoritkan kasus «ilustrasi komersial bersih / Hero produk», lalu masuk aplikasi kreasi Nano Banana. Lebih cepat daripada menciptakan tampilan dari nol. Kit ini untuk Hero landing page SaaS, kartu fitur, dan benefit strip / social proof, bukan Pitch Deck, webinar, Newsletter, atau tangkapan ASO.
3. Checklist materi (yang menentukan apakah seluruh situs «terasa satu produk»)
Sebelum membuka aplikasi kreasi, siapkan berikut. Melewatkan langkah ini adalah alasan #1 Hero, kartu fitur, dan benefit strip terlihat seperti tiga perusahaan yang dilem:
- Referensi merek (wajib): siluet Logo jelas; warna primer dan sekunder sebagai nama warna Inggris atau hex
- Referensi produk atau antarmuka (sangat disarankan): tangkapan UI nyata atau foto produk sebagai Gambar 1; tulis «jangan redesain teks antarmuka sampai tidak terbaca»
- Nada kategori: alat produktivitas B2B / alat developer / SaaS alur AI — pilih hanya satu dan tulis ke deskripsi gaya
- Daftar blok: Hero, 3 kartu fitur, benefit strip, CTA bawah — tetapkan jumlah sebelum generate
- Rasio & zona aman: Hero 16:9; kartu fitur 1:1; sisakan ~40% ruang negatif bersih untuk judul
- Batasan negatif: no watermark, no fake pricing, no melted UI text, no random stock faces
Anda tidak perlu menggambar tombol di mockup dulu. Nano Banana Pro bisa menyisakan zona aman judul dan CTA dari deskripsi saja; semakin bersih latar, semakin stabil overlay copy nyata kemudian. Perlakukan checklist ini sebagai brief «satu produk» untuk seluruh kit.
4. Alur empat langkah (dari situs resmi ke landing siap tayang)
Langkah 1: Masuk kreasi dari situs resmi Nano Banana
- Buka aplikasi kreasi Nano Banana dari situs resmi Nano Banana
- Utamakan Nano Banana Pro untuk Hero, close-up produk, dan benefit strip; pakai Nano Banana untuk eksplorasi metafora murni
- Unggah merek atau gambar produk/UI sebagai Gambar 1
Langkah 2: Pilih template sesuai urutan kit
Di bawah ada tiga kerangka prompt bahasa Inggris siap salin (jangan membuat stub pendek — tempel blok lengkap untuk Hero, kartu fitur, dan benefit strip):
- Template A: pelat Hero landing (16:9, zona aman judul besar)
- Template B: kartu fitur persegi (1:1, satu metafora fitur)
- Template C: benefit strip / social proof (16:9, ruang negatif lebar)
Langkah 3: Jalankan «cek go-live» setelah generate
- Setelah potongan layar pertama seluler, apakah produk dan warna merek masih dikenali?
- Apakah zona aman judul dan CTA cukup besar, tidak penuh tekstur rumit?
- Apakah tepi UI/produk utuh dan label tidak meleleh?
- Apakah Hero, kartu fitur, dan benefit strip berbagi suhu warna dan bahasa komposisi?
- Ada harga palsu, Logo klien fiktif, atau watermark?
Langkah 4: Iterasi dengan kalimat pendek + ekspor per blok
Iterasi dengan penyesuaian percakapan singkat, lalu ekspor Hero dan benefit strip 16:9 serta kartu 1:1, lalu overlay copy dan tombol nyata di landing. Tindak lanjut umum:
- “enlarge headline safe zone”
- “keep brand purple”
- “simplify UI chrome”
- “simpler background, larger headline zone”
- “preserve UI label legibility”
Setelah final, ekspor Hero dan benefit strip 16:9 serta kartu fitur 1:1; lalu susun copy dan tombol nyata di halaman — jangan memanggang harga palsu ke pelat. Untuk pola kegagalan dan perbaikan, gunakan halaman Failures dan blog kegagalan umum di situs resmi Nano Banana.
5. Template prompt A: pelat Hero landing
Subject: SaaS landing-page hero background, 16:9. Preserve brand identity from Image 1 100% — logo silhouette, primary colors, and product/UI shape if present. Do not invent a different brand.
Composition: Product, UI frame, or abstract brand motif on the 【left third / right third】. Leave a large clean headline-safe zone on the opposite side (about 40% width) for H1 + subhead + CTA overlay later — no baked-in garbled text, no fake buttons with melted labels.
Style: 【B2B productivity / developer tools / AI workflow SaaS】; premium modern landing-page look; high contrast for above-the-fold readability on desktop and mobile.
Lighting: Soft studio key, gentle rim, subtle screen glow if UI is shown; avoid muddy midtones and neon overload.
Negative constraints: no watermark, no fake pricing numbers, no unreadable micro-UI text, no random stock faces, no cluttered dashboard spam.
Output: 16:9, 4K, Nano Banana Pro SaaS landing hero plate.
Cara memakai
- Unggah Logo atau referensi produk/UI sebagai Gambar 1
- Tempel blok Inggris lengkap, isi nada kategori dan sisi zona aman
- Jika latar terlalu ramai, lanjutkan dengan “simpler background, larger headline zone”
- Sebelum mengunci, pratinjau layar pertama sekali di lebar desktop dan sekali di lebar seluler
6. Template prompt B: kartu fitur persegi
Layout: Square SaaS feature illustration card, 1:1. Preserve brand accent from Image 1 as a quiet motif only. Communicate ONE feature metaphor — 【automation / collaboration / analytics / security】 — without baking long paragraphs.
Composition: One clear visual metaphor centered or left-weighted. Keep 40–50% calm negative space for a short feature title overlay later. Motif stays simple and icon-like, not a full comic scene.
Style: Minimal product-marketing illustration, Nano Banana Pro clean commercial plate, section-grid friendly.
Lighting: Even, low-drama; readable as a small card in a 3-column features row.
Negative constraints: no fake charts with readable numbers, no melted labels, no watermark, no stock photo collage, no unrelated mascot spam.
Output: 1:1, 4K, Nano Banana or Nano Banana Pro SaaS feature illustration.
Poin belajar: kartu fitur membawa satu metafora, bukan seluruh paragraf fitur yang dipanggang ke gambar. Judul nyata dan bullet ada di lapisan copy web. Jika hanya ingin uji arah cepat, mulai dengan Nano Banana, lalu ganti ke Nano Banana Pro untuk final. Kartu yang mencoba mencetak seluruh penjelasan menjadi buram di baris tiga kolom.
7. Template prompt C: benefit strip / social proof
Benefit strip / social proof backdrop for a SaaS landing page, 16:9 wide or 3:1 crop-friendly.
Identity: If a logo is uploaded as Image 1, preserve brand colors and silhouette 100%. Do not invent competitor logos. If a product shot is uploaded, preserve the SKU/UI 100%.
Composition: Soft brand-color gradient or quiet abstract geometry with a wide calm center band for future quote/logo-row overlay. Keep edges quiet so the strip can sit under a testimonials section.
Style: Consistent with the hero palette 【brand primary + charcoal/white】 so hero, feature cards, and benefit strip feel like one design system.
Lighting: Soft even wash, no harsh vignette that hides overlay text later.
Negative constraints: no fake customer logos, no watermark, no dense isometric city, no garbled testimonial text baked in.
Output: 16:9, 4K, Nano Banana Pro SaaS benefit-strip plate.
Poin belajar: zona social proof butuh pelat tenang; Logo klien dan kutipan asli di-overlay dengan materi autentik. Logo palsu merusak kepercayaan dan berisiko kepatuhan. Utamakan Nano Banana Pro ketika palet harus selaras dengan Hero. Kerangka prompt lainnya ada di koleksi prompt di situs resmi Nano Banana.
8. Rasio, layar pertama, dan rekomendasi ekspor
| Penggunaan | Rasio yang disarankan | Catatan |
|---|---|---|
| Hero desktop | 16:9 | Sisakan ~40% ruang negatif untuk judul |
| Potongan Hero seluler | Jaga zona aman | Subjek produk jangan menempel tepi |
| Kartu fitur tiga kolom | 1:1 | Arah cahaya dan palet sama |
| Benefit strip / dinding Logo | 16:9 atau bisa dipotong 3:1 | Pita tengah lebar untuk overlay teks |
| Suasana CTA bawah | 16:9 | Jangan bersaing dengan tombol atau formulir |
Meski sudah diekspor, pratinjau di breakpoint target. Banyak kasus «terlihat premium di desktop, di ponsel hanya blok warna» berasal dari kontras dan packing zona aman — bukan dari 4K itu sendiri. Jaga zona judul tetap bersih agar H1 dan CTA tetap terbaca.
9. Tiga bedah kasus (salin strukturnya)
Kasus 1: landing alat produktivitas B2B
- Tujuan: Hero mengingat ungu merek; tiga kartu fitur bahasa yang sama; benefit strip menyisakan ruang untuk kutipan klien
- Pendekatan: template A (produk kanan, zona judul kiri) → B×3 (otomasi / kolaborasi / laporan) → C (pita lebar gradien arang)
- Hasil: layar pertama dan area fitur terasa satu sistem desain
- Belajar: jangan panggang harga palsu di Hero; harga ada di blok harga
Kasus 2: beranda dokumentasi alat developer
- Tujuan: tangkapan UI terbaca, tanpa teks berantakan; nada «rekayasa yang kredibel»
- Pendekatan: close-up produk dengan Nano Banana Pro untuk mengunci antarmuka; kartu fitur sedikit dekorasi, banyak ruang negatif
- Hasil: pengunjung teknis bilang «tidak seperti SaaS template»
- Belajar: di situs developer kurangi neon berlebihan dan efek fiksi ilmiah
Kasus 3: redesain produk alur kerja AI
- Tujuan: kontinuitas visual antara situs lama dan baru, tapi jelas terasa upgrade
- Pendekatan: kunci warna primer dan rasio zona aman; hanya ganti elemen metafora dan sedikit penyesuaian cahaya
- Hasil: pengguna lama masih mengenali merek; pengunjung baru merasa lebih segar
- Belajar: ubah hanya satu kelas variabel per kali agar seri tetap stabil
10. Kesalahan umum & cara menghindarinya
| Kesalahan | Akibat | Perbaikan |
|---|---|---|
| Memenuhi Hero dengan angka dashboard palsu | Tidak kredibel dan sulit dirawat | Hero = visual utama + zona judul saja |
| Zona aman judul penuh tekstur | Overlay H1/CTA terlihat kotor | “larger clean headline-safe zone” |
| Gaya kartu fitur tidak saling terkait | Seluruh situs seperti kolase | Kunci deskripsi palet dan komposisi |
| Teks UI meleleh | Produk terasa palsu | “preserve UI label legibility” + Nano Banana Pro |
| Generate Logo klien palsu di benefit strip | Risiko kepercayaan dan kepatuhan | Hanya generate pelat; Logo pakai materi asli |
| Finalisasi Hero hanya dengan model standar | Tepi produk menjadi buram | Hero dan close-up produk: pindah ke Nano Banana Pro |
Untuk pencegahan sistematis, silang-cek Failures dan eksperimen parameter Lab di situs resmi Nano Banana. Kepercayaan landing SaaS rusak paling cepat oleh harga palsu, Logo fiktif, atau UI meleleh — perlakukan itu sebagai hard stop sebelum publish.
11. Nano Banana vs Nano Banana Pro: bagaimana memilih untuk landing?
| Tugas | Pilihan lebih baik |
|---|---|
| Cepat coba 5 komposisi Hero | Nano Banana |
| Final Hero + kunci warna merek & UI | Nano Banana Pro |
| Eksplorasi metafora kartu fitur | Nano Banana / Pro |
| Pelat tenang benefit strip | Nano Banana Pro |
| Entri belajar & penjelasan produk | Situs resmi Nano Banana: halaman pilar & blog |
Detail pemilihan juga ada di artikel perbedaan Nano Banana vs Pro dan ulasan situs resmi di {{SITE_LINK}}. Aturan praktis landing: eksplorasi volume di model standar, kunci warna merek, identitas produk/UI, dan zona aman judul di Pro, lalu susun copy nyata di luar gambar — buka {{APP_LINK}} saat siap generate.
12. Tiga langkah mulai hari ini (sketsa layar pertama di hari yang sama)
- Buka situs resmi Nano Banana → masuk aplikasi kreasi Nano Banana → unggah merek atau gambar produk/UI → pilih Nano Banana Pro
- Jalankan berurutan Template A (Hero) → B (kartu fitur) → C (benefit strip); lakukan satu cek go-live per aset
- Ekspor 16:9 dan 1:1, masukkan ke draf landing dan overlay copy nyata; untuk kredit, lihat panduan uji coba gratis dan Harga di situs resmi
Penutup
Landing page SaaS tidak dimenangkan dengan «satu gambar ajaib», melainkan dengan sistem visual produk yang dapat dipakai ulang. Pisahkan Hero, ilustrasi fitur, dan benefit strip; eksplorasi dengan Nano Banana, finalisasi dengan Nano Banana Pro, dan andalkan panduan, kasus, serta penjelasan harga di situs resmi Nano Banana. Anda bisa menstabilkan kualitas visual terkait konversi layar pertama tanpa menambah rantai outsourcing lain.
Langkah berikutnya: tinjau pasangan sebelum/sesudah terverifikasi di Showcase atau unduh paket template Resources untuk menyimpan kerangka prompt, lalu mulai hari ini alur landing ini di aplikasi kreasi Nano Banana.