Panduan Desain Salespage, Font Warna dan Tipografi

Desain salespage bukan soal mempercantik halaman. Ia menentukan apakah pengunjung betah membaca penawaranmu sampai bawah atau menutup halaman di detik ketiga. Dua elemen paling menentukan adalah tipografi, yaitu font dan ukurannya, serta warna.

Kabar baiknya, desain yang menjual tidak butuh bakat seni. Ia butuh beberapa aturan sederhana yang konsisten diterapkan, font yang mudah dibaca, ukuran yang nyaman di HP, warna yang kontras, dan heading yang rapi. Panduan ini merangkum semuanya dari nol, lalu menunjukkan artikel turunan untuk tiap topik bila kamu mau pendalaman.

Semua contoh di panduan ini bisa langsung kamu coba di page builder Temonjo, yang sudah menyediakan lebih dari 100 font siap pakai dan kontrol warna penuh per elemen, tanpa perlu menulis CSS.

Kita mulai dari alasan kenapa desain berpengaruh langsung ke penjualan, baru masuk ke fondasi teknisnya satu per satu.

Kenapa desain menentukan konversi

Pengunjung menilai kredibilitas halamanmu dalam hitungan detik, jauh sebelum membaca penawaran lengkap. Riset pengalaman pengguna secara konsisten menemukan bahwa kesan pertama sebuah halaman web sebagian besar dibentuk oleh tampilan visual, bukan isi teksnya. Font yang salah membuat produk bagus terlihat murah, dan halaman yang rapi membuat produk sederhana terlihat profesional.

Desain juga mengatur alur baca. Halaman jualan bekerja dengan menggiring pembaca dari headline, ke masalah, ke solusi, ke bukti, lalu ke tombol order. Kalau tipografinya melelahkan atau hierarki visualnya kacau, pembaca tersesat di tengah jalan dan pergi sebelum sampai ke tombol.

Ada satu pola yang selalu berulang di halaman jualan yang sepi order, bukan produknya yang jelek, melainkan halamannya yang sulit dibaca. Teks kecil, warna tipis, heading tidak jelas, tombol tenggelam. Memperbaiki desain sering kali memberi dampak lebih cepat daripada menulis ulang seluruh copy.

Desain salespage yang baik tidak terlihat didesain. Ia hanya terasa mudah dibaca, jelas alurnya, dan tombol belinya tidak terlewat.

Fondasi pertama, font yang mudah dibaca

Font membawa karakter. Serif seperti Playfair Display terasa klasik dan premium. Sans-serif seperti Inter atau Poppins terasa modern dan bersih. Script seperti Dancing Script terasa personal tapi cepat melelahkan bila dipakai di paragraf panjang.

Aturan paling dasar, pilih font untuk keterbacaan dulu, baru untuk gaya. Kalau pembaca harus mengerutkan mata untuk membaca penawaranmu, desain sebagus apa pun tidak akan menyelamatkan penjualan. Untuk isi teks, sans-serif yang dirancang untuk layar adalah pilihan paling aman, misalnya Inter, Open Sans, Lato, atau Roboto.

Ukuran juga tidak kalah penting dari jenis fontnya. Teks isi sebaiknya minimal 16 piksel di HP, heading utama 28 sampai 34 piksel di mobile dan lebih besar di desktop. Pembahasan lengkap soal ukuran ideal untuk mobile dan desktop, statistik font yang paling banyak dipakai di dunia, serta cara menyusun heading dari H1 sampai H6 ada di artikel Cara Memilih Font Website yang Tepat untuk Jualan.

Fondasi kedua, maksimal dua font per halaman

Untuk halaman jualan, kamu hanya butuh dua font. Satu untuk heading, satu untuk isi. Lebih dari itu biasanya justru membuat halaman terlihat berantakan, seperti dikerjakan dua orang berbeda.

Kombinasi yang aman mengikuti satu rumus, pasangkan font yang kontras perannya tapi serasi suaranya. Kombinasi paling mudah adalah serif untuk heading dan sans-serif untuk isi, misalnya Playfair Display dipasangkan dengan Inter. Kalau ragu, satu font saja dengan dua ketebalan sudah cukup, bold untuk heading dan regular untuk isi.

Kesalahan umum pemula adalah memasangkan dua font yang mirip tapi tidak sama, seperti dua sans-serif yang hampir identik. Hasilnya terlihat seperti salah pilih, bukan disengaja. Daftar pasangan font yang sudah terbukti cocok ada di Kombinasi Font yang Bagus untuk Website dan Salespage.

Fondasi ketiga, warna yang mengarahkan mata

Warna mengatur emosi dan menunjukkan ke mana mata harus pergi. Rumus paling aman untuk salespage adalah aturan 60-30-10, yaitu 60 persen warna netral sebagai latar, 30 persen warna sekunder untuk section dan aksen, dan 10 persen warna utama yang khusus dipakai untuk tombol aksi.

Yang paling sering salah adalah kontras. Teks abu-abu muda di atas putih terlihat elegan di mockup desainer, tapi di layar HP di bawah sinar matahari ia tidak terbaca. Untuk halaman jualan, keterbacaan mengalahkan estetika.

Hal lain yang sering dilupakan, warna tombol tidak harus mengikuti warna brand. Kalau halamanmu dominan biru, tombol oranye justru bekerja lebih baik karena kontras. Panduan menyusun palet dan contoh kombinasi per niche ada di Kombinasi Warna Website yang Enak Dilihat dan Menjual.

Fondasi keempat, hierarki dan struktur heading

Heading bukan sekadar teks besar. Ia adalah rangka halaman yang dibaca pembaca yang skimming, dan dibaca Google untuk memahami isi halamanmu. H1 hanya satu per halaman dan berisi penawaran utama, H2 untuk section besar, H3 untuk sub bagian di dalamnya.

Hierarki visual juga dibangun lewat tiga hal selain ukuran, yaitu ketebalan font, jarak, dan warna. Heading yang tebal dengan ruang kosong di atasnya terasa lebih menonjol daripada heading besar yang menempel ke paragraf sebelumnya. Beri napas di setiap pergantian section supaya mata pembaca tahu ada topik baru dimulai.

Jangan memilih level heading berdasarkan ukuran teks yang kamu mau. Kalau butuh teks besar tapi bukan heading, pakai pengaturan ukuran font biasa. Detail fungsi tiap level dan kapan memakai blockquote dibahas di artikel pemilihan font.

Fondasi kelima, rancang dari HP dulu

Mayoritas pengunjung salespage di Indonesia datang dari ponsel. Artinya desainmu dinilai di layar 360 piksel, bukan di monitor 27 inci. Konsekuensinya sederhana, semua keputusan diuji di HP dulu.

Teks harus terbaca tanpa zoom, tombol cukup besar untuk disentuh ibu jari, dan gambar tidak mendorong konten keluar layar. Tabel lebar dan kolom banyak adalah musuh utama di mobile, susun ulang jadi daftar vertikal atau blok bertingkat. Semua template di library Temonjo sudah dirancang mobile-first, jadi kamu mulai dari kondisi yang aman.

Font harus cocok dengan karakter produk

Font untuk produk skincare wanita berbeda dengan font untuk toko perkakas. Produk feminin cocok dengan serif elegan atau sentuhan script, produk teknologi cocok dengan sans-serif tegas dan geometric, sedangkan produk anak cocok dengan font rounded yang playful.

Kesalahan memilih karakter font menimbulkan disonansi, halaman terasa tidak sesuai dengan produknya walau pengunjung tidak bisa menjelaskan kenapa. Panduan lengkap per niche, dari tone Cina, Barat, serius, sampai umum, ada di Pilih Font Sesuai Karakter Produk dan Target Pasar.

Kesalahan desain yang paling sering terjadi

Dari banyak halaman jualan, pola kesalahannya hampir selalu sama. Mengenali pola ini membantumu menghindarinya sejak awal.

• Terlalu banyak font dan warna. Tiga font dan lima warna membuat halaman terasa pasar malam, bukan toko.
• Teks kecil dan warna tipis demi kesan elegan, padahal pembaca HP-nya tidak sanggup membaca.
• Semua elemen dibuat menonjol. Kalau semua tebal, besar, dan berwarna, tidak ada yang benar-benar menonjol.
• Section gelap dan terang bergantian tanpa pola, sehingga halaman terasa tambal sulam.
• Tombol aksi memakai warna yang sama dengan elemen lain, sehingga tidak terlihat sebagai tempat untuk klik.
• Desain hanya dicek di laptop, padahal pembeli membuka dari HP.

Contoh nyata, perubahan kecil dampak besar

Skenario yang sering terjadi. Seorang penjual punya halaman dengan tiga font berbeda, teks isi 14 piksel berwarna abu-abu, dan tombol beli berwarna navy yang menyatu dengan header. Ordernya sepi dan ia mengira produknya kurang menarik.

Perbaikannya sederhana dan tidak menyentuh copy sama sekali. Font dirampingkan jadi dua, teks isi dinaikkan ke 16 piksel dengan warna hampir hitam, dan tombol beli diganti oranye kontras. Halaman yang sama dengan penawaran yang sama mendadak terasa jauh lebih meyakinkan, karena kini manusia bisa membacanya dengan nyaman.

Pelajarannya bukan bahwa desain menggantikan copy yang bagus, melainkan desain yang salah bisa membunuh copy yang bagus.

Dari mana font berasal dan soal lisensi

Font adalah karya berlisensi. Google Fonts aman dipakai gratis untuk keperluan komersial karena berlisensi terbuka, sementara situs seperti DaFont mencampur font gratis dan font yang hanya gratis untuk pemakaian pribadi. Menggunakan font berlisensi personal untuk halaman jualan komersial berisiko melanggar hak cipta.

Di Temonjo, semua font di dalam builder sudah dikurasi dan siap pakai, jadi kamu tidak perlu mengunduh file font atau mengurus lisensinya sendiri. Penjelasan lengkap jenis lisensi font dan daftar situs cari inspirasi ada di Lisensi Font untuk Website dan Situs Cari Inspirasi Font.

Alur kerja desain yang cepat

Untuk penjual yang bukan desainer, urutan kerja paling efisien begini. Mulai dari template di library yang strukturnya sudah benar, jangan mulai dari kanvas kosong. Lalu tetapkan tiga keputusan saja, font heading, font isi, dan warna tombol, berdasarkan karakter produkmu.

Setelah itu isi konten, dan baru di akhir poles visualnya. Kebanyakan orang melakukan sebaliknya, menghabiskan berjam-jam memilih warna sebelum ada satu kalimat pun di halaman. Desain itu bingkai, isinya tetap penawaran.

Desain terbaik untuk pemula adalah desain yang selesai. Sempurnakan nanti, terbitkan sekarang.

Checklist desain sebelum terbit

Sebelum halamanmu diterbitkan, periksa daftar singkat ini dari HPmu sendiri.

• Font isi terbaca nyaman tanpa perlu zoom, minimal 16 piksel di HP.
• Hanya ada maksimal dua jenis font di seluruh halaman.
• Warna tombol aksi kontras dan konsisten sama dari atas sampai bawah.
• Hanya ada satu H1, dan setiap section punya heading yang menjelaskan isinya.
• Tidak ada teks penting yang warnanya tipis di atas latar terang.
• Setiap pergantian topik terasa jelas lewat jarak dan heading, bukan hanya lewat kalimat.

Kalau semua poin ini terpenuhi, desain halamanmu sudah lebih baik dari kebanyakan salespage yang ada. Sisanya tinggal memperkuat copy dan penawaran, yang bisa kamu pelajari di panduan salespage lengkap.

Pertanyaan yang sering ditanyakan

Berapa jumlah font ideal dalam satu halaman jualan?

Maksimal dua font, satu untuk heading dan satu untuk isi teks. Lebih dari itu halaman cenderung terlihat tidak konsisten. Kalau ragu, satu font dengan dua ketebalan berbeda sudah cukup.

Ukuran font berapa yang ideal untuk salespage?

Untuk teks isi, minimal 16 piksel di mobile dan 16 sampai 18 piksel di desktop. Heading utama bisa 28 sampai 40 piksel tergantung panjangnya. Yang penting, pembaca tidak perlu zoom untuk membaca.

Apakah font dari DaFont boleh dipakai untuk salespage?

Tergantung lisensinya. Banyak font di DaFont hanya gratis untuk pemakaian pribadi dan butuh beli lisensi untuk komersial. Selalu cek lisensi tiap font, atau pakai font yang sudah disediakan builder seperti Temonjo.