RuangFreelance 1.0 (lama)

Layout RF versi pertama digarap oleh Ben Haryoyuda (Designer Mockup icreativelabs) dan Nurudin Jauhari (Freelancer – XHTML/CSS dan WordPress Developer). RF versi dua digarap oleh iCreativelabs team: Monika Halim (Mockup PSD), Moch. Zamroni (XHTML/CSS), dan Suleman (Programmer – WordPress). Meskipun ada yang bilang desain RF ini biasa saja dan mirip dengan yang sudah-sudah, tetapi bagi saya adalah suatu tantangan dan pengalaman tersendiri, silicing XHTML / CSS style User Interface yang Grid System, penuh kolom tetapi harus tableless, dan jarang-jarang dapat project seperti ini.

RuangFreelance 2.0 (baru)

Berikut beberapa poin yang baru ini RF versi 2:

1. Favicon baru, hal kecil gini (16 x 16px) biasanya dilupakan :), dari desain yang kaku  kini jadi lebih luwes 
2. Featured article di bagian utama (konten utama atas di bawah header) ada 6 item dengan thumbnail tiap postingan, icon jumlah komentar di pojok kanan bawah thumbnail dan judul dibawahnya. membuat RF jadi lebih fresh dan dinamis karena item tersebut akan terus berubah. hal ini juga memudahkan pengunjung untuk melihat postingan populer.
3. Thumbnail di setiap postingan, di RF 1.0 tidak ada thumbnail semua image dengan ukuran apa adanya , selain membuat agak lama loading juga agak membosankan serta kurang fleksibel.
4. Banner lebih banyak dan bervariasi, ada di header kanan (468 x 60 px), di sidebar (260 x 125 px) dan (125 x 125 px) serta di bawah konten (300 x 250 px) dan (468 x 60 px) meski jadi lebih rame tapi kami sudah berusaha menata serapi mungkin :)
5. “Best Articles” di bagian sidebar tengah, menggunakan gaya tabs dengan AJAX dan box warana biru muda, membuat kesan lebih dinamis, praktis tidak monoton, dan tentu bisa menjadi shortcut yang memudahkan pengunjung.
6. Pemberian kolom khusus “komik” di sidebar membuat postingan kategori komik buatan kapachan lebih bermakna dan menyegarkan.
7. pembuatan recent article dan recent comments dengan thumbnail / avatar semakin memperkuat style UI gridsystem
8. icon/banner twitter, facebook, dll di sidebar mengingatkan dengan icon/banner di gantibaju.com, karena kebetulan designernya sama (halomomo) :)
9. icon-icon share (berbagi) di setiap postingan (sebelum komentar) dengan ukuran cukup gede, mungkin agak aneh tetapi konsep seperti ini juga banyak ditemui blog-blog popular lainnya.
10. komentar sekarang sudah bisa di-reply membuat pengunjung lebih bebas mengeluarkan pendapatnya dan lebih mudah merespon tentunya, design kotak komentarnya juga cukup unik.
11. pemisahan pingback/linkback dengan komentar dan membuatkan kolom sendiri di sampingnya, agar tidak banyak space kosong di bawah (jika postingan panjang) dan agar imbang dengan kolom diatasnya.

RF desain baru telah diluncurkan sejak Sabtu 29 Agustus 2009 dan kemarin (3/8/2009) baru benerin beberapa bug, yah paling tidak sudah ok di FireFox dan Safari (entah di IE) kalau masih ada bug tolong laporkan yah :)

Website AntiQue Batik Sekarang

Langkah pertama adalah pembuatan mockup menggunakan macromedia fireworks dengan kaidah ukuran lebar  960 px. Karena tidak ada referensi maka yang terbentuklah draft layout apa adanya yang agak kaku dengan motif siku-siku dan warna coklat lebih mendekati merah – belum pintar memilih color switcher :). Paling tidak saya sudah dapat struktur elemen-elemennya, seperti header, logo menu utama, slide foto, prolog (sidebar), footer, dll.

mockup pertama AntiQue Batik sebelum direvisi

setelah mockup pertama dikonfirmasi, saya dapat beberapa feedback, pertama adalah soal warna yang terlalu nge-”jreng” (maklum monitor di rumah agak gelap :D), dan kedua soal pemakaian motif siku-siku yang dirasa cukup mengganggu

Satu lagi, lbh baik jgn ringgik2, mgkn biar luwes,
pake kyk dibrosur , yang sliuuuuuut itu lo.. kayak
melengkung , meliuk2,, seperti di brosur

nah supaya tidak bingung, saya tampilkan berikut salah satu halaman utama brosur (dari sekitar 8 halaman lainnya)

cover brosur AntiQue Batik sebagai acuan

Dengan bantuan feedback dan acuan brosur, saya merubah warna dari merah agak kecoklatan menjadi benar-benar coklat, warna konten agak terang masih gradasi, meski warna gradasi di revisi pertama ini nantinya saya ganti warna solid. Dan perubahan utama adalah menghilangkan unsur siku-siku untuk diganti dengan ilustrasi melengkung.

mockup AntiQue batik setelah revisi

Dari revisi ini ke XHTML/CSS juga ada beberapa perubahan lain, seperti: lebar media dibatasi 940 px – 960 px, terpaksa dilakukan karena saya kesulitan membuat motif lengkung menjadi background repeat horizontal, sudah beberapa kali mencoba belum bisa pas, selalu terlihat batas (belum sambung). Supaya tidak kosong dan terkesan batiknya, saya gunakan background yang diambil dari unsur motif logo “Parama Iswari” secara repeat vertikal dan horizontal, motif ini pula saya gunakan untuk background di sidebar bawah konten dan bagian kiri atas konten, mengacu pada desain brosur untuk menghindari space kosong.

Akhirnya saya ucapkan terimakasih untuk mbak Ferrial dan mbak Nila atas kepercayaan yang diberikan dan kerjasamanya dengan zamdesign.