The Playbook: Portofolio yang Dibalik, Bukan Di-scroll

Portofolioku kubuat untuk di-share, bukan untuk dipegang. Ia hidup sebagai link: dikirim lewat chat, ditempel di lamaran kerja, dibuka orang yang punya beberapa menit di sela dua urusan lain. Itulah alasan ia berbentuk buku. Buku adalah satu-satunya format yang semua orang sudah tahu cara membacanya, berurutan, satu spread demi satu spread, tanpa perlu diajari.

Biasanya portofolio beredar sebagai PDF. Ia selamat sampai tujuan, tapi reading experience-nya tidak: deretan halaman di PDF viewer yang dibuat untuk invoice, huruf mungil di HP, dan scroll bar yang seolah bilang "ini bakal lama". Jadi versi webnya punya satu ide: jangan membangun ulang portofolio sebagai website, berikan dokumen itu wujud buku yang memang jadi rancangannya, dan jadikan buku itu yang kukirim.

Kenapa playbook

Di basket, playbook adalah buku strategi tim. Setiap play digambar oleh pelatih: siapa berdiri di mana, siapa bergerak duluan, ke mana bola mengalir, dan apa yang harus dibaca dari pertahanan lawan sebelum semuanya terjadi. Pemain mempelajarinya sampai hafal di luar kepala, karena di lapangan tidak ada waktu untuk membuka buku.

Begitu juga caraku melihat pekerjaanku. Setiap proyek dimulai dari sebuah why, dan play hanyalah why yang sudah digambar supaya bisa dijalankan satu tim. Jadi portofolionya disusun seperti playbook. Indeks proyeknya bernama The Plays, setiap proyek punya nomor seperti play yang diteriakkan dari pinggir lapangan, dan halaman About menggambarkanku seperti orang bangku cadangan menggambarkan rekannya: seorang player-coach, yang menentukan arah dan tetap turun tangan. Aku juga main basket sebagai small forward, jadi metafora ini bukan pinjaman. Ia memang sudah ada di lapangan.

Kalimat di sampulnya merangkum semuanya: how the why becomes what resonates. Playbook memang persis itu, why yang diubah jadi sesuatu yang bisa dijalankan tim.

Halamannya tetap persis seperti didesain

Jalan pintasnya adalah mengubah setiap halaman jadi layout web: judul, paragraf, grid kartu proyek. Aku memutuskan tidak. Halaman-halaman itu sudah merupakan desainnya. Membangunnya ulang berarti punya dua versi portofolio yang pelan-pelan tidak lagi sama, dengan versi web sebagai pemain pengganti yang tidak pernah benar-benar hafal play-nya.

Jadi halamannya ditampilkan apa adanya, huruf dan artwork aslinya, dan website hanya menambahkan yang dibutuhkan pembaca di sekelilingnya: namaku dan jam lokal Bandung di atas, indeks di kiri, dan tiga aksi di bawah (All Pages, Zoom Pages, Download PDF). Tidak ada yang bersaing dengan halamannya.

Halamannya juga tidak bisa diblok seperti teks. Itu artwork, bukan dokumen untuk disalin, dan tarikan mouse yang tidak sengaja tidak seharusnya mewarnai layout dengan sorotan biru. Link yang tercetak di halaman, seperti situs proyek atau alamat kontak, tetap bisa diklik.

Ma: ruang kosong di antara

Bahasa Jepang punya kata untuk jeda di antara sesuatu: Ma (間). Ia adalah jeda dalam percakapan, ruang kosong di sebuah kamar, hening di antara dua nada. Ma bukan ketiadaan. Justru ia yang memberi bentuk pada semua yang ada di sekitarnya.

Buku punya Ma dengan sendirinya, dan web biasanya menghapusnya. Scroll tanpa ujung tidak punya jeda; semuanya terus berdatangan. Buku punya page turn: momen singkat saat satu spread sudah pergi dan yang berikutnya belum mendarat, dan mata sempat bernapas. Basket juga punya. Play terbaik selalu punya ketukan, setengah detik saat pemain membaca pertahanan sebelum bola bergerak.

Jadi jeda-jeda itu sengaja kupertahankan:

• Satu spread sekali tampil. Kamu tidak bisa membaca sekilas tiga proyek sekaligus. Masing-masing dapat ruang yang memang dirancang untuknya.

• Kedatangannya menahan napas. Saat situs dimuat, buku naik dari bawah, berhenti sejenak dengan sebagian masih tertahan di tepi layar, baru kemudian mengendap dan terbuka. Jeda itu semacam buku berdeham sebelum bicara.

• Interface-nya tenang. Label kecil di sudut, tanpa banner, tanpa autoplay. Ruang di sekitar buku dibiarkan kosong supaya satu-satunya yang "bersuara" di layar adalah bukunya.

• Ruang kosong di halaman dijaga. Whitespace di layout adalah bagian dari desain, alasan lain kenapa halamannya tidak pernah diubah jadi layout web yang akan mengisinya.

Buku yang memadukan fisika

Kalau ini buku, gerakannya harus seperti buku sungguhan, dan benda sungguhan tunduk pada fisika. Geraknya di sini bukan kumpulan animasi siap pakai. Ia datang dari beberapa aturan fisik sederhana, dan gerakannya muncul dari situ.

• Halaman melengkung. Selembar halaman bukan papan datar yang berayun di engsel. Ia digambar sebagai deretan potongan tipis, dan setiap potongan berputar sedikit lebih jauh dari potongan sebelumnya, jadi tepi bebasnya tertinggal di belakang lipatan. Lengkungnya paling kuat di tengah page turn dan mengendur saat halaman mendarat, persis seperti kertas yang dilepas.

• Kertas punya bayangan. Saat halaman terangkat, ia menjatuhkan bayangan ke halaman di bawahnya. Bayangannya paling gelap selagi lembarnya masih dekat dan memudar saat ia naik, jadi mata membaca ketinggian halaman tanpa perlu berpikir.

• Bagian yang belum dibaca punya bobot. Di awal buku, halaman lebih banyak menumpuk di kanan, jadi buku sedikit miring ke kanan. Menjelang akhir, ia miring ke kiri. Baca sampai habis dan kamu bisa merasakan bobotnya pindah melewati punggung buku.

• Setiap balikan punya momentum. Setiap balikan memberi buku sentakan kecil, dan sebuah damped spring membawanya: ia bergoyang balik kurang dari dua kali per detik lalu diam tanpa berguncang. Singkatnya, kelakuannya seperti hardcover yang sopan, bukan trampolin.

• Balikan beruntun menumpuk. Pegas saja terlalu cepat lupa untuk menunjukkan sejauh apa kamu membalik, jadi ada kemiringan lain yang lebih lambat, menumpuk selama balikan beruntun lalu meluruh. Balik lima halaman dan buku condong sekitar dua setengah kali lipat dibanding satu halaman.

• Sudut yang kamu raih memimpin. Balikan dimulai dari sudut yang paling dekat dengan pointer. Memiringkan halamannya sendiri akan membuatnya sobek dari punggung buku, jadi yang dimiringkan adalah vanishing point kamera. Sudut terdekat terlihat maju duluan, dan punggung buku tidak bergeser satu piksel pun.

• Bukunya memperhatikanmu. Ia condong beberapa derajat ke arah pointer, seperti benda di meja yang kamu lihat dari sudut yang sedikit berbeda. Pointer-nya berupa titik dengan cincin yang mengikutinya, dan cincin itu terikat pada titiknya: boleh tertinggal, tapi tidak pernah bisa disalip.

Memilih proyek dari indeks membalik setiap halaman di antaranya dengan tempo tetap, bukan memotong langsung, jadi lompatan jauh dan maju satu langkah adalah gerakan yang sama. Dan untuk yang pengaturan sistemnya meminta reduced motion, semua ini mati dan halamannya cukup berganti.

Saat ingin melihat lebih dekat, atau melompat

Buku di layar punya dua kelemahan: kamu tidak bisa melihat semuanya sekaligus, dan huruf kecil tetap kecil. Dua tampilan menjawabnya.

All Pages menjajarkan semua spread dalam grid beserta nama proyeknya, jadi pembaca bisa melihat bentuk playbook secara utuh dan langsung melompat ke satu play. Zoom Pages membuka continuous reader, halaman demi halaman dalam satu scroll, selebar atau setinggi layar. Sampai di bawah satu halaman, kamu langsung lanjut ke halaman berikutnya.

Dan untuk yang tetap ingin filenya, PDF aslinya cuma sejauh satu klik, tersimpan dengan namaku, bukan "final_v7_BENERAN.pdf".

Di HP, satu halaman sekali tampil

Spread tidak muat di HP. Mengecilkannya sampai muat akan membuat setiap halaman tidak terbaca, jadi di HP tampil satu halaman sekali, memenuhi lebar layar.

Ia tetap dibalik. Swipe mengangkat halaman pergi, dan mundur membawa halaman sebelumnya turun menutupinya. Panah pindah ke bawah, di samping penanda halaman, tempat jempol menjangkaunya. Mengetuk halaman membuka continuous reader. Indeks berubah jadi laci Contents yang masuk dari kanan.

Karena intinya memang untuk di-share, di sinilah banyak kunjungan pertama terjadi: seseorang mengetuk link di chat. Jadi di HP ia harus bekerja sebaik di layar besar.

Setiap halaman punya alamatnya sendiri

Buku yang dibuat untuk di-share harus bisa di-share per halaman. Setiap spread punya link sendiri, dinamai sesuai halamannya, jadi aku bisa mengirim orang langsung ke satu play tanpa menyuruhnya mencari. Membuka link itu membuka buku tepat di spread tersebut.

Saat link utamanya dibagikan, preview-nya dipotong dari cover asli, jadi portofolio sudah tampil seperti dirinya sendiri di chat sebelum ada yang mengetuknya.

Karena halamannya berupa gambar, search engine atau screen reader tidak akan menemukan apa pun untuk dibaca. Jadi di balik buku, halaman ini juga membawa seluruh teks portofolio sebagai outline biasa dengan heading yang benar. Ia tidak terlihat di layar, tapi berkat itu kata-kata di halaman tetap bisa ditemukan dan dibacakan.

Sisa dari sebuah tim

Playbook hanyalah satu bagian dari cara sebuah tim bekerja. Di sekitarnya ada film session untuk membedah yang sudah terjadi, press conference untuk menyampaikan pendapat, locker room tempat pekerjaan dikerjakan, dan kadang overtime. Itulah arah situs ini ke depan: bukunya tetap di tengah sebagai kumpulan play, dan semua yang kubangun di sekitarnya mengambil nama, dan tugasnya, dari sebuah tim.

Yang aku pelajari

Keputusan terbesarnya justru keputusan yang tidak kuambil: aku tidak mendesain ulang portofolio untuk web. Playbook-nya sudah mengatakan apa yang ingin kukatakan. Tugasku adalah memberinya reading experience yang tepat, dan ruang yang cukup untuk membacanya.

Hampir semua hal lain datang dari memperlakukannya sebagai benda fisik dan bertanya apa yang akan dilakukan benda itu. Di mana buku terbuka? Seberat apa bagian yang belum kamu baca? Apa yang terjadi di halaman terakhir? Setiap jawaban adalah keputusan kecil, dan bersama-sama mereka membuat portofolio yang dibalik, bukan di-scroll.

The Playbook adalah halaman depan situs ini.