Baru kali ini aku mau menuliskan proses desainku dalam membuat sebuah template atau theme untuk website-website klien maupun pribadi.
Yang akan aku ceritakan disini adalah proses kreatif seorang amrinz saat mendesain website.
Kebetulan, aku sedang mendesain sebuah website untuk komunitas berbasis joomla.
Website ini nantinya akan menjadi portal, tempat membaca artikel berita atau tutorial atau sekedar bermain game online. Tentu saja, memiliki sisi komersial seperti advertising dan toko online (saya menggunakan virtuemart).
Nah, inilah prosesnya:
Tahap 1. Sketch!
Anda pasti sudah tahu ini, melamunkan dulu seperti apa website ini nanti. Harapan perkembangan maksimalnya seperti apa, siapa audiensnya dan yang terpenting, fokusnya nanti soal apa?
Lalu aku mulai menggambar di atas kertas. Blok-blok dasar seperti header, sidebar, content dan footer, pastilah wajib ada. Blok-blok penting lain seperti blok menu, navigasi, logo, dan banner iklan juga dibuat.
Masalah bagaimana teknisnya, nanti aja dipikirin. Yang penting ngelamun dulu!
Tahap 2. Coding!
Kok coding? Kenapa ndak membuat template grafisnya dulu pakai the gimp?
Wah, saya ni emang paling lemah soal grafis. Makanya, desain saya selalu minimal menggunakan image. Makanya langsung ke coding.
Buka gedit, copykan blok DTD xhtml 1.0 transitional, tambahkan komponen <head> … </head>, buat struktur dasar wrapper, header, content, sidebar, dan footer.
All code must be CSS based. Uh, aku paling mencemooh desainer yang “hari gini masih pake tabel?”
Lalu tambahkan isi dummy seperti “lo rek ingsun pake kolor si amat. au baunya minta ampun …”, sekedar keliatan ajah blok-bloknya.
Kembali ke gedit, buat file css yang diisi (tentunya) menggunakan css. Favorit saya adalah menggunakan float berimbang, alias float: left; – float: right; – clear: both;.
Sambil dipatut-patut di Mozilla Firefox. Ndak di IE? ya nanti, belakangan ajah!
Oya, ini masih html biasa, jadi coding untuk joomlanya belum dimasukin.
Tahap 3. Porting ke joomla
Sebelumnya, mesti install joomla dulu dengan instalasi default, pakai data samplenya.
Lalu buat templateDetails.xml nya, rubah ektensi index.html ke .php, terus masukin (copy dong dari beez, atau rhuk theme!) code-code khusus joomlanya.
Patut-patutin lagi, view sourcenya, lihat css propertinya. Copy ke template.css, tambahkan attributnya, sampe sesuai dengan lamunan dan selera.
kalau nanti hasilnya lebih bagus dari lamunan, alhamdulillah! Tapi kalau lebih buruk? Weleh!
Ya udah, dengan tambahan dari gimp jadi dah template baru untuk usermode.web.id!
Komentar Terakhir