Interior & arsitektur
Kanaya Studio
Landing page studio interior bernuansa gelap-mewah, dengan galeri proyek yang bergerak menyamping saat digulir dan tipografi serif berukuran besar.
Kedua tangkapan layar di atas diambil langsung dari halaman aslinya, bukan gambar mockup.
Tantangannya
Studio interior menjual selera. Kalau situsnya terlihat biasa, calon klien menyimpulkan pekerjaannya juga biasa. Portofolio proyek yang seharusnya jadi kekuatan malah tampil sebagai susunan foto yang membosankan.
Ada tantangan kedua yang lebih halus: proyek ini sudah punya satu demo bernuansa gelap (Ruang Rempah). Kalau tidak dibedakan dengan sengaja, keduanya akan terbaca sebagai satu studio yang sama.
Yang dikerjakan
Gelapnya dibuat netral dan nyaris tanpa warna: hitam pekat dengan satu aksen kuningan. Jauh dari kehangatan merah-hijau milik Ruang Rempah. Judulnya memakai serif besar, sudut elemen dibuat benar-benar tegak lurus tanpa pembulatan, dan tata letaknya menempel ke tepi layar supaya foto proyek terasa seluas mungkin.
Galeri proyek adalah bagian utamanya: saat pengunjung menggulir, halaman berhenti sejenak dan enam proyek melintas menyamping satu per satu, jadi tiap proyek mendapat perhatian penuh alih-alih hanya jadi satu kotak di grid. Di ponsel gerakan itu dimatikan dan diganti geseran horizontal biasa, karena menahan scroll di layar sentuh terasa mengganggu.
Judul-judul besar tersingkap kata demi kata, dan foto proyek bergeser sedikit mengikuti kursor di desktop. Cukup untuk terasa hidup, tapi tidak sampai mengalihkan perhatian.
Hasil terukurnya
Ini demo dengan animasi terberat dari keempatnya, jadi paling menarik untuk diperiksa angkanya. Panel di bawah menampilkan hasil pengukuran aslinya, termasuk bagian yang belum mencapai target. Halaman ini butuh sekitar 2,4 detik untuk menampilkan elemen terbesarnya di simulasi ponsel, di atas standar 1,5 detik yang saya pakai untuk contoh lain. Penyebabnya adalah pustaka animasi yang dipakai untuk galeri menyamping tadi, dan itu memang harga yang disepakati untuk efek tersebut.
Hasil pengukuran halaman ini
Diukur pakai alat penilai yang sudah ada di dalam Google Chrome, jadi Anda bisa mengujinya sendiri di halaman ini (namanya Lighthouse, ada di menu developer tools). Nilainya 0 sampai 100, makin tinggi makin baik. Pengujiannya disetel seperti dibuka dari ponsel dengan sinyal pelan, bukan dari komputer kantor.
- Kecepatan (Performance)
- 97 / 100Seberapa cepat halaman tampil dan bisa dipakai. Ini yang menentukan pengunjung bertahan atau menutup tab sebelum halaman muncul.
- Aksesibilitas (Accessibility)
- 100 / 100Seberapa bisa halaman ini dipakai orang dengan keterbatasan. Misalnya lewat pembaca layar, atau hanya dengan keyboard tanpa tetikus sama sekali.
- Kesiapan mesin pencari (SEO)
- 100 / 100Seberapa siap halaman dibaca dan dipahami mesin pencari. Ini fondasinya; peringkat di Google tetap butuh konten dan waktu.
Angka di atas hasil ukur versi terbaru halaman ini, bukan target yang saya harapkan dan bukan perkiraan. Kalau ada yang belum pernah saya ukur, yang tertulis “belum diukur”.