Design #1. Landing ReLand — membuat landing mendarat kembali

Tidak ada desain produk yang abadi — apalagi di era ketika AI bergerak secepat sekarang. Seiring bertambahnya kebutuhan produk dan semakin kompleksnya pola kolaborasi, tim sering ragu: bukankah sekarang saat yang pas untuk mendesain ulang? Tapi itu bukan pekerjaan yang mudah — terutama ketika landing page yang ada masih harus terus dirilis sambil kita menyelesaikan satu set desain baru secara paralel.

Kenapa sekarang?

Landing page Zeabur yang pertama hanya perlu menyampaikan satu hal — kami adalah platform deployment dengan model pay-as-you-go. Kalau pengguna paham soal CI/CD dan pay-as-you-go, itu sudah cukup. Tapi selama setahun terakhir, bentuk produk Zeabur terus meluas: AI Hub, Dedicated Server, Domain, Email, lalu belakangan Skills yang dibangun di atas Claude Code. Kami selalu memasukkannya ke halaman utama dengan cara yang sama — tambah satu kartu, tambah deskripsi pendek, tambah satu tautan. Setiap langkah terasa wajar kalau dilihat sendiri-sendiri, tapi begitu kami benar-benar menggulir halaman sampai bawah, dia tidak lagi terasa seperti home produk, melainkan seperti etalase yang semakin penuh: bisa selesai dibaca, tapi tidak menyampaikan satu cerita yang utuh.

Yang berubah juga adalah niat pengguna saat mendarat di landing page. Dulu, orang membaca dari atas ke bawah — melihat fitur, melihat harga, melihat template. Sekarang, semakin banyak orang yang hanya ingin menyerahkan satu proyek kepada kami dan membiarkan Zeabur memikirkan langkah selanjutnya. Karena itu, landing page butuh pintu masuk AI yang benar-benar berarti.

Bisa diiterasi, bukan sekali pakai

Pada akhirnya, kami tidak memperlakukan kerja ulang ini sebagai "membuat landing versi yang lebih cantik". Yang kami ingin buat adalah landing page yang mampu menampung perubahan di masa depan — artinya, yang penting hari ini bukan seberapa rapi versi ini, tapi apakah teman yang datang enam bulan lagi akan merasa beban psikologis saat harus menambahkan satu section baru.

Ini juga prinsip paling mendasar dari proyek ReLand: akui bahwa landing page itu hidup. Dia akan terus disentuh. Karena itu kami memusatkan tenaga pada tiga hal.

Pertama, kami mengeluarkan hal-hal kecil seperti warna, tipografi, dan border dari dalam komponen dan mengumpulkannya menjadi satu set CSS Variable. Light dan dark masing-masing punya set token sendiri, dan ditukar lewat html.dark. Yang tersisa di dalam komponen hanya referensi semantik — "warna brand", "status aktif", "border". Berganti tema bukan lagi sesuatu yang harus ditangani khusus oleh komponen tertentu, melainkan kemampuan yang dimiliki seluruh halaman secara alami.

LightDark

Kedua, membuat setiap section bisa diganti secara independen. Setiap blok di homepage baru adalah komponen tersendiri, dan antarsection dijahit dengan kosakata visual yang tetap: garis solid di atas dan di bawah, dengan pita transisi berpola garis diagonal di antaranya. Pita diagonalnya mirip police line di area konstruksi — dia memang berada di "sambungan". Kami sengaja tidak membuat semuanya terlihat mulus menjadi satu — sebaliknya, kami sengaja membuat batas antaraplikasinya terlihat, supaya bisa ditukar. Suatu hari kalau kami menambah section Skills atau menghapus section Template, ritme keseluruhannya tidak akan patah.

Ketiga, membuat pintu masuk AI mengalir sepanjang garis pandang pengguna. AIBar bukan tombol fitur tambahan, melainkan titik akhir visual dari seluruh landing page. Pengguna mulai dari Hero, di tengah jalan memahami apa yang bisa kami lakukan, lalu akhirnya mendarat secara alami di AIBar tepat di atas CTA — mereka bisa langsung menyeret kode ke dalamnya dan mulai men-deploy, tanpa harus mendaftar lebih dulu, membaca dokumen lebih dulu, atau pergi ke Dashboard lebih dulu.

Perubahan paling besar di homepage baru ada di Hero.

Karena itu kami menggambarnya ulang dari awal. Background Hero yang baru adalah satu lapisan WebGL shader yang sepenuhnya kami gambar sendiri: mode terang memakai jingga hangat, mode gelap memakai ungu. Saat ganti tema, transisinya perlahan, bukan potongan keras. Dia tampak seperti lautan data yang sedikit beriak — ada cahaya berarah, lapisan titik-titik karakter yang halus, dan distorsi grid yang lembut. Ini bukan soal unjuk teknik — tapi karena, sebagai platform infrastruktur, Zeabur seharusnya bisa menggambar sendiri layar pertamanya. Hero yang sekarang sangat bersih: background membangun suasana, tagline memberi alasan untuk mengambil keputusan, AIBar dan CTA memberi aksi.

Cara "terus mengupas satu lapis lagi" seperti ini adalah hal yang kami lakukan berulang kali di proyek ini. Insting desainer biasanya "akan lebih baik kalau ditambah sedikit lagi". Keputusan yang lebih sulit adalah "akan lebih baik kalau lapisan ini dibuang?".

Rasa dapat dipercaya

Di rediseño ini ada satu keputusan yang hampir menulis ulang karakter seluruh situs — kami meninggalkan sudut membulat yang besar.

Di landing page lama, kartu, tombol, dan container umumnya memakai radius 16px atau lebih besar. Beberapa tahun terakhir, sudut membulat besar nyaris menjadi bahasa default untuk SaaS dan produk konsumer: terasa ramah, lembut, akrab, menurunkan agresivitas antarmuka, dan pada pandangan pertama membuat orang berpikir "produk ini tidak sulit dipakai". Untuk produk tahap awal yang butuh cepat memenangkan simpati pengguna baru, sudut besar adalah strategi yang sangat efektif.

Tapi seiring pengguna Zeabur bergeser dari "developer yang ingin coba-coba" menjadi "tim yang menaruh trafik produksi di atasnya", sudut besar mulai terasa sebagai beban.

Sudut besar meninggalkan kesan pertama berupa rasa "mainan" secara psikologis. Semakin besar radius, antarmuka semakin mirip kerikil yang sudah dipoles — cantik, tidak berbahaya, bisa dipegang di telapak tangan. Tapi infrastruktur bukan mainan. Saat pengguna mau menitipkan production environment perusahaan mereka kepada kami, yang ingin mereka lihat adalah dinding penahan beban, bukan balok busa. Ada satu observasi sederhana dari psikologi desain: semakin dekat kurvanya ke lingkaran, semakin dekat ke kesan "imut"; semakin dekat ke garis lurus, semakin dekat ke kesan "serius". Zeabur sekarang butuh yang kedua.

Hilangnya "rasa bisa menampung". Sudut membulat besar, pada dasarnya, sedang "memotong" keempat sudut persegi. Semakin banyak yang dipotong, makin sedikit kesan muatan yang bisa ditampung container itu — secara visual dia sedang berbisik, "ini barang kecil". Padahal yang ingin kami tampilkan adalah cluster, proyek, server — semuanya konsep berat. Meletakkan sesuatu yang berat di container yang terlihat ringan akan selalu terasa tidak sinkron.

Terminal, IDE, panel monitoring, dan console cloud yang dibuka developer setiap hari — hampir tidak ada yang mengandalkan sudut membulat besar. Mereka memakai radius yang terkendali (4–8px), garis tegas, dan informasi yang padat. Ketika landing page Zeabur memakai radius ala produk konsumer untuk menceritakan infrastruktur, otak pengguna bawah sadar memasukkan kami ke kategori "hosting proyek mainan", bukan "platform cloud yang bisa dipakai produksi".

Ketika seluruh SaaS memakai radius 16px+ dan gradien yang lembut, radius besar itu sendiri sudah tidak menyampaikan informasi apa-apa — dia hanya jadi noise. Justru brand yang berani mengetatkan radius dan membiarkan garis-garisnya bertemu langsung (Linear, Vercel, Stripe Dashboard) secara visual terasa lebih "dewasa".

Tentu, membuang radius sepenuhnya juga bukan jawabannya. Sudut siku membawa emosi ekstrem yang lain: dingin, menjaga jarak, birokratis. Kami tidak menginginkan sikap "aku tidak peduli kamu paham atau tidak" seperti situs bank, melainkan sikap "aku tahu kamu sedang mengerjakan hal yang serius, dan aku ikut menyeriuskannya bersamamu".

Karena itu di versi baru kami menyempitkan sistem radius seluruh situs ke skala yang lebih terkendali. Garis-garisnya lebih jelas, pemisahnya lebih langsung, dan tepi tajam dari pita transisi diagonal juga bagian dari pemikiran yang sama — kami ingin setiap titik jatuhnya pandangan ketika pengguna men-scroll berbisik: ini platform yang serius, layak kamu taruh workload sungguhan di atasnya.

Radius hanyalah satu simbol, tapi di baliknya ada pembalikan seluruh strategi komunikasi: dari "silakan coba-coba" menjadi "kami siap menampungmu".

Terakhir

ReLand dirilis sekali jalan, tapi bagi kami dia bukan titik akhir, melainkan titik awal. Bagi pengunjung, yang penting bukan seberapa spektakular halamannya, tapi seberapa mudah untuk mulai. Bagi kami sendiri, yang penting adalah saat berikutnya kami harus menambah blok baru, mengganti tema, atau merespons pola interaksi baru — kami tidak perlu lagi membongkar semuanya.

Ini juga membuat kami memikirkan ulang landing page itu sendiri. Untuk sebuah platform deployment, metrik terpenting landing page tidak pernah "seberapa mewah tampilannya", melainkan "ada berapa langkah dari melihat produk sampai deployment pertama". Sticky dock AIBar memampatkan jarak itu sampai hampir nol: lirik sebentar backgroundnya, baca satu tagline, scroll tiga layar, seret proyek ke AIBar.

Itulah yang kami maksud dengan "membuat landing mendarat kembali" — dia bukan sekadar etalase, dia sendiri adalah langkah pertama dari deployment.