Nov 23
Proses Disain Blog Yusril Ihza Mahendra
Sudah beberapa minggu ini Pak Yusril Ihza Mahendra ngeblog di domain baru. Blog ini merupakan pengganti blog sebelumnya yang dibuat oleh beliau sendiri dengan menggunakan layanan Blogger. Sekadar mengingatkan kembali, blog Pak Yusril ini menggunakan alat bantu blog WordPress versi 2.3.1 ketika pertama kali dibuat. Kebetulan, saya diminta oleh Vavai, sebagai salah satu blogger yang ikut berdiskusi langsung dengan Pak Yusril bersama dengan beberapa blogger lainnya untuk membantu mempersiapkan blog beliau.
Saya tidak akan mengangkat tentang sisi politik dan hukum, sebuah topik yang sangat dipahami oleh Pak Yusril, tapi saya ingin membahas proses mendisain blog tersebut. Ya, mungkin ada yang tertarik ingin mengetahuinya… :)
Pada awalnya, Vavai menghubungi saya untuk membantu saya dalam mendesain blog tersebut. Dan, dengan pertimbangan kemudahan, Vavai mengusulkan untuk menggunakan WordPress. Kenapa tidak menggunakan Serendipity yang merupakan alat bantu blog favoritnya? Ya, mungkin WordPress lebih sesuai untuk kebutuhan Pak Yusril. Singkat cerita, akhirnya WordPress diusulkan oleh pengguna Serendipity dan akan dikerjakan oleh saya — sebagai pengguna setia Movable Type. :)
Jujur saja, pada awalnya saya sedikit “grogi” karena saya mendisain untuk sosok yang sudah dikenal oleh publik. Ditambah lagi, saya belum pernah bertemu dengan beliau, dan saya tidak tahu banyak informasi yang bisa membantu saya memberi ide dalam disain. Saya mencoba untuk menyusun beberapa poin yang seputar disain:
- Disain dua kolom — Pemilihan ini lebih kepada perkiraan konten. Kalau misal dibuat tiga kolom, mungkin akan terlalu ramai, ditambah lagi dengan minimnya konten (yang mungkin akan muncul pada blog awal ini).
- Pemilihan besar huruf — Tulisan harus mudah dibaca. Hal ini juga terkait dengan kontras yang cukup.
- Disain rapi, tidak terlalu banyak pernak-pernik. Setelah mengikuti beberapa tulisan beliau, dan juga komentar yang disampaikan beliau di blog lain, konten merupakan kekuatan utama dalam blog Pak Yusril.
Disain awal yang saya buat bisa dilihat pada gambar dibawah ini.
Setelah disain ini hampir selesai, saya meminta pendapat dari Vavai yang saat itu sudah sempat ngobrol dengan Pak Yusril. Vavai menyampaikan kepada saya tentang usulan untuk menggunakan warna dengan tema pantai. Ya, karena Pak Yusril dari Belitung yang terkenal juga dengan pemandangan pantainya. Saya juga mendapatkan informasi kalau ada warna biru dan merah marun yang digunakan. Kalau tidak salah ini juga salah warna yang disukai oleh Pak Yusril. Berdasar masukan ini , saya sedikit mengubah disain awal.
Disini digunakan sebuah image header. Karena belum memiliki materi gambar yang bisa digunakan sebagai header, maka saya gunakan gambar sementara yang saya dapatkan di Flickr. Tentu saja, tetap dituliskan alamat sumber asli gambar tersebut. Karena gambar juga ‘belum pas’, saya tempatkan sebuah teks di samping gambar. Teks ini berupa random quote yang mungkin nantinya bisa digunakan untuk menampilkan beberapa kutipan dari Pak Yusril. Tentu saja ini bisa diubah sewaktu-waktu.
Oh ya, dalam tahap ini, Pak Yusril sudah mulai melihat dan masuk ke dalam panel administrasi. Dari sini saya mendapatkan masukan tentang sedikit bug dalam CSS pada bagian header. Pak Yusril menyebutkan tampilan yang kurang pas ketika dilihat di perambah Internet Explorer. Saya melakukan pengubahan sedikit dalam berkas CSS terkait dengan hal tersebut.
Dalam kesempatan berikutnya, Vavai bertemu kembali dengan Pak Yusril. Hasil dari pertemuan tersebut adalah usulan dari Pak Yusril untuk menggunakan koleksi gambar beliau untuk bagian header. Setelah memilah dari beberapa gambar yang didapatkan dari Pak Yusril (dan dikirimkan Vavai ke saya), ada ide untuk membuat gambar tersebut tampil secara acak. Sampai dengan saat ini, ada dua buah gambar yang tersedia dan pas untuk bagian header. Keduanya adalah gambar seputar peran Pak Yusril dalam film Laksamana Cheng Ho. Oh ya, ada beberapa koleksi foto Pak Yusril yang baru pertama kali ini saya lihat. Tapi, mungkin belum dipublikasikan… :)
Saya lanjutkan dengan melakukan pengubahan kode templat untuk menampilkan bagian gambar secara acak.
Disain terakhir ini dipakai sampai dengan saat ini. Tentu saja, ada beberapa pengubahan kecil setelahnya. Beberapa pengubahan, fitur yang ada dalam disain, dan juga informasi lain setelah/setelah blog diluncurkan:
- Penambahan fitur paged comments. Ini dilakukan untuk memudahkan ketika membaca komentar. Jadi komentar dipisahkan dalam beberapa halaman. Saat ini, setiap halaman akan menampilkan 30 komentar. Karena pemasangan fitur ini, maka pada halaman samping, tautan ke komentar tidak berjalan dengan baik. Mungkin nanti akan diperbaiki.
- Widget-friendly theme. Untuk memudahkan pengaturan bagian samping blog, disain theme dibuat untuk mendukung penggunaan widgets.
- Penambahan WordPress plugin tambahan seperti WP-Print, WP-Pagenavi, Subscribe to Comments, dan beberapa plugin lain.
- Menyiapkan CSS yang digunakan untuk mengatur tampilan gambar yang ditempatkan dalam entri.
- Saya siapkan sebuah panduan singkat mengenai cara posting dengan menggunakan WordPress. Memang panduan ini saya buat sesederhana mungkin, semoga dapat memberikan informasi terkait dengan cara penulisan entri menggukan WordPress.
- Oh ya, hampir seluruh proses dikerjakan secara jarak jauh. Saya hanya berkomunikasi melalui telepon, chatting dan pesan pendek dengan Vavai. Nah, saya sendiri belum pernah bertemu dengan Pak Yusril. Hehehe…
Mendapatkan kesempatan semacam ini merupakan sebuah pengalaman tersendiri bagi saya. Yang pasti, saya senang melakukannya. Dan, itulah bagaimana proses saya mendisain sebuah theme untuk blog. Nantinya mungkin ada beberapa pengubahan untuk penyesuaian. Ya, sesuai dengan kebutuhan… :)
Berlangganan RSS
33 komentar untuk artikel ini
Tinggalkan komentar
Colophon
Selamat datang! Blog ini adalah blog milik Thomas Arie Setiawan, seorang narablog yang saat ini berdomisili di kota Jogjakarta. Selengkapnya »
Beberapa tautan yang terkait dengan saya:
Status Twitter
- [Photos] http://post.ly/SHTI Dragon Fruit? I take these picture (almost) everyday - by @lala •
Tulisan terbaru
- Mar 09 Terminal 3, Soekarno Hatta Airport
- Feb 23 Ketoprak for lunch
- Jan 22 Berhadapan dengan Kesempatan
- Jan 22 Masih tentang Layanan Pro-XL yang Membingungkan
- Jan 19 Ring Back Tone (RBT) XL yang tidak menyenangkan
weh, jadi personal ‘personal’ blog nih thom :)
masih ngiri kok paged-comment nya jalan
ditempatku gag jalan sejak upgrade ke 2.3
:((
Wuah, perlu dimasukkan kedalam MURI, “Sejarah penciptaan sebuah blog”.
Thanks berat buat segala bantuannya boss. Bantuan yang tiada terkira. Kalau saya yang diminta desain mungkin hasilnya malah bikin pembaca pada kabur :-D
Saat mendisain sistem presidenri.go.id (atau presidensby.info), pertama kali yang saya lakukan adalah melakukan pemetaan (clustering) pengguna dan pengunjung. Clustering ini bertujuan utk memahami pengharapan (ekspetasi), serta ancaman (threat).
Cluster ini digunakan sebagai langkah awal utk mendisain dan mendiskusikan disain sehingga terlepas dari “ego” developer yang terkadang lebih ingin mengedepankan teknologi atau keinginan developer.
eh, thom, elu ngasih prototype designnya sudah jadi dalam bentuk theme? maksudnya, sudah bisa langsung dilihat gitu di browser?
oh gitu ya Thom, selamat ya atas pengalaman berharga itu, good job buddy!
sip. Lumayan dapet masukan
wp-cache nya pake ga pak?
nanya ajah…
Regards,
http://www.bolanova.com
Mantap mantap.
Dikerjakan oleh masternya desain web 2.0!
komisi nya berapa thom
Wah…
Bgmn kalau saya juga dibuatkan mas…
Berapa ya Rp-nya…..
Paydjo, itu paged comment jalan dengan baik mas. Apakah karena file config, atau pada template tagsnya? Ini juga pake WP terbaru dan paged comments yang sudah cukup lama…
Vavai, wuuuuu… Sama-sama mas… :D
IMW, terima kasih untuk informasinya. Memang langkah awal tentang bagaimana seharusnya dibuat, saya tidak terlibat banyak diskusi… Jadi, sebenarnya lebih ke arah kenyamanan audiens dan Pak YIM sendiri…
Didats, normalnya begitu… saya siapkan mockup dulu, preview baru mulai coding HTML, CSS dan WordPress. Tapi proses ini dilewati, karena ada juga disini “bagaimana bagusnya saja deh…”.
Pak YIM masuk ke panel admin WP setelah themes hampir siap, dengan harapan sudah menjajaki bagaimana halaman administrasinya. Sekaligus menampung masukan dari beliau…
Biho, iya mas… pengalaman yang berharga sekali ini.
jadi, semakin MANTAP dgn WP ya? kapan blog sebelah dikonver? ho ho ho :D
ardy, ya ini sekedar sharing info saja kok mas… :D
tukang ketik, WP-Cache belum dipasang mas. Mungkin belum perlu kali ya? Sekalian WP Super Cache saja?
Jay, ah! Ini Pak YIM nge-blog juga gara-gara mas-nya toh… hayo ngaku. :D
geblek/joko, berapa ya? Intinya disini men-support blogger kok, Mas…
Gede, hayo… semangat. Rp-nya, tergantung ruwet atau nggak mas…
Ben, blog sebelah masih di MT kok Ben… Tapi tetap saya setuju, WP memang mantap. Hehehe…
Jadi Seperti ini to Prosesnya..
*manggut manggut geleng geleng :)
top markotop. nggak ada komen lain.
ngga dikasih shoutbox ya mas? kenapa? maksud saya untuk memudahkan pembaca yang ingin menyampaikan sesuatu pada pakyusril tapi tidak berhubungan dengan tulisan beliau.
Walah saya jadi terharu, ternyata sampeyan pinter desain web to kangmas ?
Jauhari, iya mas, begitulah… :)
Mas Pujiono, Semoga saja bisa nambah-nambah informasi saja ini… Terima kasih!
resti, shoutbox? Sepertinya memang tidak dikasih shoutbox. Kalau misal dikasih shoutbox, akan lebih susah dalam hal pelacakan pesan… Kalau misal tidak terkait dengan tulisan beliau, sudah ada halaman kontak yang bisa digunakan. Walaupun ini semua tetap tergantung kepada Pak Yusril sendiri dalam memberikan respon…
Yu Djoem, masih terus belajar kok Yu…
so ….. kapan undangan makan-makannya?
.::he509x™::.
Mas, blognya pak Yusril pake Bhs Indonesia, tapi locale nya masih Bhs Inggris (contoh: format tanggal).
Pakai locale yg aku buat aja..
http://svn.automattic.com/wordpress-i18n/id_ID/tags/2.3.1/messages/id_ID.mo
Kalo Spam Tool nya,
Pake plugin apa ?
Salam kenal Mas Thomas
Manongan, weleh… hehehe.. ayo makan-makan, situ sing mbayari wae piye… kan malah sedap :D
huda, okey mas, nanti akan saya coba dan konsultasikan dulu tentang hal ini…
M. Ershad, untuk spam filter, saat ini pakai Akismet. Memang belum banyak spam, tapi sepertinya Akismet sementara ini dapat berjalan dengan baik. Ya, satu atau dua pernah salah tangkap juga…
selamat yah bro!
[...] dari postingan Benceh juga ternyata yang buat Thomas Arie, orang yang sama yang mendesain blog Pak [...]
boleh minta cara bwatnya ga..???
q masih belajar coba2 gitu……
pak ari sekalian aja minta ajarin berpolitik, sapa tau kecipratan ilmunya
alhamdulillah,,akhirnya dapat juga masukan,,, :) :)
bagi-bagi ilmunya dong … terus terang masih gaptek nie ama blog….
Saya ingin lebih tau lagi tentang mendesain blog, terutama wordpress.
pak bisa minta panduan membuat tampilan web/blog menggunakn serendipity,..
thx…
Mas Thomas,
anda beruntung ya bisa mendesain blog orang ternama dan bertemu langsung dengan Pak Yusril. Saya sudah lama mengikuti blog beliau, saya sekarang sudah tidak update lagi.
Mau tanya, di blog Pak yusril, di bagian bawah ada tulisan cetak dengan gambar printer untuk mem-print artikel tertentu. Boleh saya tahu kode html-nya untuk saya gunakan di bagian bawah artikel di blog saya. Juga caranya…maklumlah saya awam untuk hal ini
Terima kasih
salam kenal
FS
@Fadhly S,
Itu menggunakan plugins wp-print. Install dan aktivasikan pluginnya melalui wp-admin | plugins, kemudian tambahkan kode wp-printnya (kodenya ada di keterangan plugin)