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.
Horacio Bella 2:16 am on 11/20/2008 Permalink
The original theme (http://granimpetu.com/fontella/) don’t have any malware.
From where you donwload it?
Horacio Bellas last blog post..WordPress 2.6 bajado 3 millones de veces
Akhmad Fathonih 5:22 pm on 11/20/2008 Permalink
I’m sorry if I had generated such a bad image on Fontella. I cannot clearly recall where I download Fontella. I must have download it somewhere else. I need to check my Download Archive at home.
I love this simple theme.
webart 1:26 am on 12/5/2008 Permalink
same problem
please post a download link
Tracy Rosen 4:33 am on 11/14/2009 Permalink
I had the same issue, noticed for the first time today. I had originally downloaded it from granimpetu.
Thanks for letting me know how to get rid of it!
Ed B 12:05 am on 12/16/2009 Permalink
Well, I downloaded directly from granimpetu and have the iframe (warnings in FFox and Chrome).
The MD5 checksum of the file I downloaded is as follows:
946d01af21507d0eff8fd23aeb40bd0f fontella_en_23.zip
Can anyone point me to a link containing a “clean” theme?
Ed B 12:13 am on 12/16/2009 Permalink
Update:
I just re-downloaded the (English) theme from Horacio’s start page.
THIS file does NOT contain the alleged malware:
http://granimpetu.com/archivos/otros/fontella_en.zip
MD5 checksum: 97fefb173e9324281e57d18ae28ed362 fontella_en.zip
This file DOES contain the alleged malware (specifically, in header.php):
http://granimpetu.com/archivos/otros/fontella_en_23.zip
MD5 checksum: 946d01af21507d0eff8fd23aeb40bd0f fontella_en_23.zip
Hope this helps!
Otherwise: great theme :=)