Lima Capability Cards untuk Halaman Layanan Portfolio
Grid lima kartu layanan tinggal beberapa baris CSS. Yang berat justru menulis deskripsi pendek yang tidak terpotong dan menjaga shadow tetap konsisten.
Ringkasan
Halaman layanan saya rombak dari daftar nama proyek jadi lima capability cards. Grid-nya gampang berkat resep CSS auto-fill dari MDN; yang makan waktu justru nulis copy pendek tanpa memotong teks, plus hover dan shadow konsisten sebagai penanda klik. Pelajarannya: tulis isinya dulu, layout menyusul.
Halaman Projects and Services di portfolio saya dulu cuma daftar nama proyek. Baris per baris, tanpa penjelasan. Calon klien yang buka cuma bisa menebak: proyek A, proyek B, terus gimana? Saya bisa bantu apa buat kamu? Pertanyaan itu nggak pernah dijawab di halamannya sendiri.
Minggu lalu saya rombak: lima capability cards, masing-masing jelasin satu layanan yang memang saya kerjakan. Kirain bagian yang susah itu layout-nya. Ternyata kebalikannya.
Grid-nya Paling Gampang
Untuk susunan kartu, saya pakai pola dari MDN Layout Cookbook: CSS grid dengan repeat(auto-fill, minmax(230px, 1fr)) [1]. Sekali tulis, kartu langsung berjajar rapi. Layar sempit jadi satu kolom, layar lebar jadi tiga sampai empat kolom, tanpa media query manual. Tinggi kartu dalam satu baris otomatis sama, dan footer kartu bisa dipaksa menempel di dasar [1]. Sisanya cuma soal gap biar napas antar kartu pas.
Resepnya memang sudah matang. Dokumentasi MDN memasukkan pola card ke layout cookbook standar, lengkap dengan contoh yang bisa dibuka langsung. Nggak ada trik aneh, nggak ada hack. Yang penting satu: tiap kartu itu unit kecil yang berdiri sendiri, persis definisi card dari Nielsen Norman Group, kontainer berisi beberapa info pendek yang saling berkaitan [2].
Teks yang Nggak Boleh Dipotong
Bagian yang makan waktu justru isi kartunya. Dave Rupert pernah nulis pitfall Card UI dan persis seperti itu yang saya alami [4]. Begitu semua kartu dipaksa tinggi sama, teks yang kepanjangan jadi masalah. Insting pertama saya: text-overflow: ellipsis. Hasilnya deskripsi cuma muat tiga sampai empat kata. Deskripsi layanan berubah jadi teka-teki.
Rupert menutup bagian itu dengan simpulan yang sekarang saya jadikan pegangan: pilihan terbaik adalah jangan potong teks sama sekali [4]. Jadi satu-satunya jalan menulis ulang deskripsi sampai muat. Satu kalimat pendek per layanan, langsung ke intinya. Ada yang lolos tiga iterasi. Nulis copy kartu ternyata lebih lama daripada bikin grid-nya.
Prosesnya sederhana tapi teliti. Tiap kartu saya mulai dari bukti kerja, bukan janji: layanan yang memang pernah saya kerjakan di proyek nyata. Draf pertama deskripsi saya isi dua sampai tiga kalimat lengkap dengan konteks. Pas masuk kartu, semuanya kepangkas karena tinggi tetap. Draf kedua saya pangkas kata sifatnya. Draf ketiga yang bertahan: subjek jelas, satu verba kerja, hasil yang bisa diharapkan klien. Kartu paling sukar justru layanan yang paling sering saya kerjakan, karena makin paham, makin sulit meringkas.
Shadow Bukan Dekorasi
Satu detail yang saya jaga konsisten: drop shadow. Di artikel NN/g, shadow disebut sebagai signifier, penanda visual bahwa seluruh kartu bisa diklik, bukan cuma link di dalamnya [2]. Kalau dipakai setengah hati, kadang ada kadang nggak, penandanya malah jadi noise.
Awalnya saya suka ngasih hover beda-beda tiap kartu biar kesan playful. Setelah nangkep bagian signifier itu, hover-hoveran semacamnya saya buang. Kelima kartu sekarang perlakuan sama, hover-nya sama. Pembaca cuma perlu belajar satu pola untuk lima kartu, bukan lima pola berbeda.
Soal carousel di halaman Blog, riset ini meninggalkan catatan buat nanti. Dulu saya pernah bikin carousel pakai skrip sendiri: tombol panah, indikator titik-titik, hitung posisi scroll manual. Jalan, tapi gampang desync pas resize. Dokumentasi MDN soal CSS carousel menyebut carousel berbasis JavaScript cenderung rapuh karena butuh skrip buat menyinkronkan tombol dan penanda posisi terus-menerus [3]. Arah solusinya malah sebaliknya: fitur carousel murni CSS seperti ::scroll-button(), browser yang mengurus sinkronisasi [3]. Belum saya pakai sekarang. Tapi waktu giliran Blog dirombak, catatan ini yang akan saya buka lagi.
Lima kartu juga angka yang pas buat saya: cukup buat nunjukin ragam layanan, masih muat dibaca tanpa scroll panjang. Grid-nya sendiri cuma beberapa baris CSS. Yang bikin section ini berguna bukan jumlah kartunya, tapi copy yang muat tanpa dipotong dan penanda klik yang konsisten. Kalau sedang merombak halaman layanan juga: mulai dari tulisannya dulu, layout-nya menyusul. Kebalikan urutan yang dulu saya pakai. Dan soal kejutan UI lain, saya pernah nulis otomasi textarea React yang diam-diam nggak terbaca state, sekadar buat ingetan bahwa yang kecil kadang paling sering ngaret.