Mockup Website vs Hasil Jadi: Bagian Mana yang Wajar Beda

Kamu setuju dengan mockup yang dikirim vendor. Tanda tangan, bayar termin pertama, lalu tunggu tiga minggu. Begitu link staging dibuka di HP, ada yang terasa aneh. Headline jadi empat baris, foto tim kepotong di dagu, tombol WhatsApp kecil sekali sampai susah dipencet.

Vendor bilang, “Namanya juga beda perangkat.” Sebagian kalimat itu benar. Sebagian lagi cuma alasan supaya kamu berhenti bertanya.

Mockup itu gambar, website itu mesin

File mockup yang kamu setujui lebarnya 1440 piksel. Isinya satu gambar diam, kadang cuma tangkapan layar dari Figma. Website yang jadi nanti adalah kumpulan HTML, CSS, dan JavaScript yang dirender ulang di setiap ukuran layar.

Layar HP yang paling umum sekarang 390 piksel. Di lebar itu, tiga kolom otomatis jadi satu dan jarak antarbagian mengecil. Judul yang tadinya satu baris di desktop bisa jadi tiga baris. Itu normal.

Yang tidak normal: vendor hanya mendesain versi desktop, lalu mengarang versi HP saat coding. Minta mockup versi 390 piksel sebelum pekerjaan dimulai. Kalau tidak ada, kamu sedang membeli kejutan.

Teks contoh dan teks asli tidak pernah sama panjang

Mockup biasanya pakai kalimat pendek. “Solusi Terpercaya untuk Bisnis Anda.” Lima kata, dua baris, rapi.

Teks asli dari kamu bisa 14 kata plus nama PT yang panjang. Headline melar jadi empat baris dan tombol bergeser ke bawah. Satu section jadi lebih tinggi dari rencana. Kalau mockup tidak diuji dengan teks asli, masalahnya baru muncul setelah website jadi.

Minta halaman utama dimockup dengan teks yang benar-benar akan dipakai. Bukan lorem ipsum. Kalau materinya belum lengkap, desainnya juga akan menunggu, dan daftar materi yang biasa diminta sudah pernah kami tulis di panduan materi sebelum bikin website.

Font di mockup belum tentu font yang dipakai

Desainer sering memakai font berbayar di mockup karena enak dilihat. Lisensi web untuk satu keluarga font bisa jutaan rupiah setahun. Banyak vendor lalu menggantinya dengan Google Fonts supaya biaya proyek tidak membengkak.

Penggantinya tidak selalu jelek. Tapi lebar huruf dan ketebalannya berbeda. Jumlah baris berubah, jarak antarbaris bergeser, judul yang tadinya satu baris jadi dua.

Tanyakan satu hal sebelum setuju: font apa yang dipakai di versi jadi, dan siapa yang menanggung lisensinya.

Foto di mockup bukan foto perusahaanmu

Foto stok di mockup biasanya 4000 piksel, tajam, dengan model yang tahu cara berdiri. Foto asli dari WhatsApp sering tinggal 800 piksel. Begitu dipaksa mengisi kotak 16:9, kepalanya terpotong atau tangannya hilang.

Ini bukan salah desainernya. Fotonya memang tidak cukup. Kirim foto asli sebelum desain final, bukan setelah website live. Perbandingan lengkapnya ada di Foto Stok vs Foto Asli di Website Perusahaan.

Yang tidak kelihatan di gambar: hover, dropdown, error

Satu file gambar tidak bisa menunjukkan apa yang terjadi saat kursor menyentuh tombol. Atau saat menu dibuka di HP. Atau saat orang mengirim form dengan alamat email yang salah.

Empat state yang paling sering terlupa: hover tombol, dropdown menu, notifikasi form berhasil, dan pesan error. Kalau mockup cuma satu gambar, minta prototipe kliknya. Figma bisa membuatnya, dan biayanya jauh lebih murah daripada revisi setelah live.

Jumlah produk dan testimoni mengubah tampilan

Di mockup, katalog isinya tiga kartu. Di website asli kamu punya 47 SKU. Kartu jadi lebih kecil, filter jadi wajib, halaman butuh pagination.

Sama untuk testimoni. Satu kutipan di mockup terlihat elegan. Dua belas kutipan butuh slider, dan slider selalu memakan satu baris tambahan di HP.

Kasih tahu jumlah konten asli sebelum desain dimulai. Angka, bukan perkiraan.

Laptop kantor dan Safari ikut menentukan

Layout 1440 piksel terlihat pas di monitor desainer. Di laptop kantor 1366 piksel dengan zoom 125 persen, lebar efektifnya tinggal 1093 piksel. Beberapa elemen pasti turun baris.

Safari di iPhone juga punya kebiasaan sendiri, terutama soal tinggi layar dan pemotongan gambar. Uji empat hal sebelum live: iPhone Safari, Android Chrome, laptop 1366, dan tablet.

Mana yang wajar, mana yang tidak

Wajar: tinggi section bergeser 20 sampai 40 piksel, foto terpotong sedikit, ketebalan huruf berbeda tipis, tombol bergeser beberapa piksel.

Tidak wajar: tombol kontak hilang di HP, form tidak terkirim, teks kepotong tanpa cara membaca sisanya, halaman kosong saat koneksi lambat, atau kecepatan di atas 5 detik.

Kalau yang kamu temukan masuk kategori kedua, itu bukan “beda perangkat”. Itu pekerjaan yang belum selesai.

Enam pertanyaan sebelum kamu setujui mockup

• Ada versi 390 piksel dan tablet, atau cuma desktop?
• Mockup diisi teks asli atau kalimat contoh?
• Font apa yang dipakai di versi jadi, lisensinya siapa?
• Foto mana yang akan dipakai, resolusinya cukup untuk lebar layar?
• Ada prototipe klik untuk menu dan form?
• Siapa yang menguji di HP sebelum website live?

Mockup yang bagus tidak menjamin website yang bagus. Tapi mockup yang diuji di ukuran layar sebenarnya, dengan teks dan foto asli, jauh lebih dekat ke hasil akhir. Revisi setelah live juga jadi lebih murah, karena yang dibongkar cuma detail, bukan layout.

Kalau kamu sedang menyiapkan website perusahaan dan ingin tahu alurnya, lihat halaman jasa desain website perusahaan. Brief singkat lewat halaman kontak juga cukup, nanti kami balas dengan pertanyaan yang lebih spesifik.