Saya sudah bosan dengan tampilan web yang lama, terkesan masih “kurang mengena”, warnanya hitam, kurang rapi, ada satu paragraf text profil sebagai header, ditambah 3 paragraf text masing-masing untuk menjalaskan “service”, rasanya masih terlalu berbelit-belit dan banyak basa-basi. apalagi kemampuan bahasa inggris yang masih “acak-kadul”, memperlihatkan kelemahan diri, dan membuat kesan kurang profesional. Screen portfolio di bagian kiri bawah, juga kurang maksimal apalagi beberapa portfolio yang ditampilkan sudah kadarluasa. dan update twitter di bagian kanan bawah juga terkesan dipaksakan dan kurang cocok.

wajah lama zamdesign.web.id

Sekarang saya coba mendaur-ulang tampilan web yang lama menjadi seperti yang sekarang, warna putih, mengurangi banyak text sebagai paragraf, mencoba membuat yang singkat, padat sehingga “lebih mengena” (kepada sasaran).

logo: ukuran logo saya perkecil dan hanya menggunakan text, berbeda dengan yang lama dengan ukuran cukup besar dan memakai image. Font yang saya gunakan tetap yaitu “Gill Sans MT Regular”. font tersebut sekalian saya gunakan sebagai font utama di web, di header, servis, dan judul tiap modul. font tersebut di pakai menggunakan CSS3 (@font-face)

tagline: “Hallo! i am zam, i work at icreativelabs”, untuk menghindari terjadinya salah pengertian, seringkali klien luar saat melihat portfolio icreativelabs di web lain, mereka menganggap kalau icreativelabs melempar lagi projek yang di terimanya ke perusahaan lain. Nah disini menjelaskan bahwa saya adalah bagian dari tim icreativelabs, dan projek icreativelabs yang saya tampilkan adalah hasil kerja tim.

wajah baru zamdesign.web.id

slideshow: ada dua slideshow sebagai feat-content utama, yaitu iCreativeLabs Projects (4) dan Tokokoo Projects (3). Sebenarnya ada lebih banyak, tapi saya pilih 7 project yang mewakili, agar download tidak berat.

spesialisasi: dibagi dua: spesialisasi utama (PNG to XHTML/CSS) dan beberapa spesialisasi kedua

skrinsut: hanya menampilkan 12 item, karena seringkali pengunjung bingung jika melihat tampilan portfolio yang terlalu banyak, mungkin mereka tidak memiliki banyak waktu untuk membuka satu-persatu, dan 12 item saya rasa cukup.

footer: mulai dari update twitter sampai ke bawah, di dominasi oleh text dan mengurangi gambar, karena konten di atas footer sudah cukup “berat” (banyak gambar), dibutuhkan penyeimbang agar bagian bawah bisa “membuat ringan” (secara visual) dengan memperbanyak text, megikuti kolom di atas nya dan memberi batas garis 1 pixel horizontal agar terkesan “grid”. dan gambar burung origami sekarang jadi kecil (pojok kanan bawah) menyesuaikan dengan space, karena tidak mungkin dihilangkan sebagai “branding”.

Saya kurang percaya diri kalau ini disebut “redesain” karena tampilan nya sangat minimalis dan sederhana, mungkin lebih enak pakai istilah “ganti wajah” itu saja :D

Tapi sebenarnya theme ini bukan buatan saya loh :) kok bisa? Tampilan baru blog ini tidak mengintegrasi WordPress dari nol tapi menggunakan WordPress Frameworks, Nama theme dasarnya Hybird buatan Justin Tadlock. Jadi saya cuma membuat child themes dengan menambahkan kode CSS di file style.css dan modifikasi XHTML / PHP secukupnya di file lainnya. tentu saja semua ini mengacu pada draft Mockup PNG/PSD yang sudah saya siapkan.

theme zam.web.id baru

Konsep dasar theme ini adalah satu sidebar, ukurannya cukup lebar (300px) karena saya ingin menampilkan widget dari facebook page, sayangnya widget ini ternyata tidak valid XHTML di W3C :(. header tanpa grafis hanya text besar (140 karakter) mengambil dari update status twitter. logo standart typo Serifa, menu di kanan atas agar terasa lebih usable, rich footer seperti trend blog masa kini, lebar area konten tidak terlalu lebar (460 px) sebuah trik agar postingan sedikit bisa terlihat banyak :D.

Poin utamanya adalah status twitter dan facebook page yang menempati area utama. sengaja saya buat begitu supaya web ini terkesan update terus meskipun seandainya nanti jarang update blog :)

Mengenai pemakaian background itu hanya karena untuk mengisi space kosong yg cukup banyak karena area blog ini tidak lebih dari 820px (biasanya pakai standart 960px), meski awalnya bingung cari-cari background yang cocok, dan rencananya nanti background itu akan saya ganti-ganti jika sudah bosan, hehe seperti di twitter :D

oh iya mohon masukan, kritik dan saran yah dari teman-teman, thanks

tampilan asli hybird theme

theme zam.web.id lama

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 :)

Beberapa lama kemudian melalui jejaring sosial saya bisa mengenal dia lebih dekat, saya baru tau ternyata usia dia masih muda (lebih muda 3tahun dari saya), sungguh anak muda yang punya talenta istimewa dengan karya-karyanya yang begitu Awesome :D

Salah Satu Karya Richard Fang di DesignbyHumans

Akhir Mei 2009 ada email masuk ke inbox dari Richard Fang dengan pesan sebagai berikut:

mau nanya boleh kan hehehe klo dari PSD to WP bisa ga? mau ganti nih untuk blog gue :P n kira2 biayanya berapa? psd nya dari gue. cheers, – Richard

Saya pikir ini kesempatan baik, saya diberi kepercayaan untuk redesign WordPress meski sejujurnya selama ini saya hanya integrasi PSD ke XHTML/CSS saja tidak pernah sampai integrasi WordPress Theme, permintaan dia nekad saya sanggupi. Karena berdasarkan pengalaman: belajar paling efektif adalah dengan mengerjakan project yang belum pernah kita kerjakan “Learning by Doing”. tentu dengan pengantar ke dia sebelumnya bahwa ini saya masih belajar tapi saya usahakan :D

Akhirnya satu bulan lebih saya baru bisa menyelesaikan ini, karena saya harus mengatur waktu disela-sela pekerjaan utama bersama tim iCreativeLabs. Integrasi dari PSD ke XHTML/CSS lancar, tetapi untuk integrasi ke WordPress Theme saya butuh waktu :D banyak, butuh keberanian, mood, harus download cheat sheet sebanyak2nya, acak-acak codex, browsing kesana-kemari mencari tutorial how to untuk newbie seperti saya. dan lain-lain

Redesain Blog Richard Fang

Blog Richard Fang sekilas terlihat sederhana, tetapi tidak sesederhana pengerjaannya, coba diperhatikan lebih teliti bagaimana style title di sidebar, pemakaian ajax tabs jQuery, pengaturan avatar dan komentar, style “Lanjutkan” di bagian content, pemakain thumb tiap posting, typografi untuk prolog, dan lain-lain. Design blog ini memang minimalis tetapi begitu to the point, unik, dan menantang, banyak plugin2 baru yang harus diinstal (saya masih blank soal PHP).

Saya ucapkan terimakasih untuk Richard Fang atas kepercayaan yang telah diberikan, dan terimasih juga untuk mas Jauhari yang mau menjawab pertanyan saya saat menemukan kesulitan dalam mengerjakan ini. Semoga postingan ini tidak berlebihan :)