Guest Blogger: Mockup vs Masterpages

Setelah sekian lama saya berharap, akhirnya Herman Saksono berkenan mengisi blog yang kembali sepi ini. Sebagai seorang pemerhati dan praktisi topik design, usability, etc, kali ini Herman Saksono menuliskan topik tentang Mockup versus Masterpage. Mana yang lebih utama, mana yang efektif? Mari kita simak bersama-sama.

Mas-mas di 37signals pernah bilang betapa tidak efektifnya mendesain UI dengan Photoshop. Maksudnya: tidak efektif kalau dibandingkan dengan mendesain langsung di HTML dan CSS. Saya tergolong orang yang fifty-fifty setuju dan tidak setuju dengan opini tersebut.

Saya, dan teman-teman saya, punya kebiasaan memisahkan proses desain web menjadi dua bagian: bagian mendesain dengan aplikasi raster (biasanya Photoshop), dan mendesain HTML-nya (sekaligus CSS dan JS). Yang pertama disebut mockup; yang kedua disebut masterpage.

Sebuah mockup berupa gambar tampilan aplikasi, sementara masterpage sudah berbentuk HTML lengkap dengan CSS-nya. Dalam kondisi ideal, kami selalu membuat mockup terlebih dahulu. Baru setelah disetujui klien, kami mulai membikin master-page-nya.

Tahap pembuatan mockup sangat cocok untuk merancang palet warna dan bereksperimen tata-letak. Pemilihan tipografi juga terasa lebih kreatif pada tahap ini. Aplikasi semacam Photoshop memang sangat fleksibel. Tidak ada div yang mengkotak-kotakkan ataupun pilihan fonta yang terbatas. Lagipula, memilih warna dengan bilangan heksadesimal semacam #42a070 jelas-jelas tidak asyik.

Permasalahannya, mendesain di Photoshop itu memang terasa bertele-tele bagi orang-orang yang sudah khatam HTML dan CSS. Membuat kotak dengan border 1 piksel jauh lebih cepat kalau dibikin di HTML, daripada di Photoshop. Selain itu, desainer bisa kesusahan kalau disuruh merancang interaction di Photoshop.

Disinilah peran masterpage beraksi. Masterpage yang dibangun atas HTML + CSS + JS memang sangat ringkas untuk diulik. Membuat tata letak yang sederhana jelas lebih cepat kalau dirancang di tahap ini. Apalagi kalau klien minta dibuatin user experience pakai animasi, fade-in, fade-out.

Sayangnya, sekali lagi, model layout ala HTML yang kaku agak membatasi kreativitas desainer untuk menciptakan peletakan yang ‘mendobrak’.

Oleh karena itu, saya rasa tahap mockup dan masterpage memang tidak bisa eksklusif. Keduanya harus dikerjakan berurutan. Perkara mana yang lebih lama, semestinya lebih lama pada tahap masterpage, karena pada tahap inilah user experience mulai disusun.

Selain itu, ada baiknya kedua tahap itu dikerjakan oleh orang yang paham desain dan koding, supaya tidak ada gagasan UX yang terputus ketika mockup masuk ke tahap masterpage.

Herman Saksono is a user-experience lobbyist wannabe who love his cats.