Akhir 2009 ada ajakan dari temanmacet untuk ngobrol bareng mengenai web desain, pesan tersebut dikirim melalui twitter kepada @zamdesign @icreativelabs dan @madeforyou. Saya dan Richard menyanggupi, sedangkan Anggi Krisna (@icreativelabs) menawarkan saya saja (karena masih sama-sama mewakili iCreativeLabs).

Selanjutnya rencana ngobrol tersebut berlanjut melalui email, sebagai pengantar Ronald mengirimkan beberapa pertanyaan. Berikut pertanyaan sekaligus balasan dari saya melalui email:

Halo Richard dan Zam,

Halo Ronald Widha,

Teman macet ini podcast mingguan tentang programming dan informatika. Alasan kenapa aku nge-approach kalian berdua karena dapet request suruh ngebahas soal web design dari bbrp pendengar teman macet. Dan kalian adalah nama2 yang direkomendasi untuk jadi nara sumber di topik ini.

Terimakasih yah, hehe ternyata ada yang merekomendasikan nama saya :)

Eniwei..tentunya kalian sudha menyadari betawa integralnya posisi diri kalian di sebuah software, terutama web development. Aku ingin mengangkat ke permukaan sudut pandang UX designer dengan harapan developer bisa lebih menghargai perspektif kalian.

Kebetulan Richard spesialisasinya di desain mock up website, desain dari draft sampai contoh preview di PSD (Photoshop) atau PNG (Fireworks). Sedangkan saya spesialisasinya di slicing XHTML/CSS, dari mengkonversi file mock up (PSD/PNG) sampai crossbrowsing, untuk selanjutnya file diserahkan ke bagian programmer / developer. Dan CSS framework, seperti 960.gs selain dipakai di tahap XHTML/CSS (saya) juga dipakai di tahap mockup (Richard)

pembukaan: apa masalah yang kalian biasa hadapi sebagai ux designer dalam bikin web application? misalnya: constrain platform web, interaksi sama programmer, browser compatibility, atau apa?

sejauh ada komunikasi yang baik antaranggota tim saya kira tidak ada masalah soal interaksi dengan programmer /developer, kemudian soal membuat desain website yang crossbrowsing, crossplatform, memperhatikan usability dan aksesibility, semantik markup (standart w3c) saya pikir itu bukan masalah, tetapi sebuah tantangan yang memacu kita untuk terus belajar.

apa konsep grid system ini? apa tujuannya?

konsep grid system sebenarnya tidak hanya berlaku di website, konsep tersebut sudah di pakai dalam desain cetak, contohnya: surat kabar/koran, majalah, brosur, pamflet, dll. grid system merupakan konsep desain struktur layout yang mengatur tata letak text dan gambar secara vertikal (kolom-kolom) maupun secara horizontal. tujuannya: membuat tampilan layout menjadi rapi, teratur, imbang, (fleksibel jika diterapkan di berbagai pola layout) serta memberi kemudahan pandangan mata, sehingga pesan lebih mudah diterima oleh pembaca.

gimana bisa diaplikasikan ke web?

penerapan konsep grid system dalam website diatur melalui kode XHTML dan styling CSS. tetapi sebelum langkah tersebut, terlebih dulu harus dibuatkan draft mockup melalui software grafis (Photoshop atau Fireworks) untuk memudahkan dan mengefektifkan proses desain (pembuatan) website.

pernah denger 960.gs? golden grid? 1kb grid? simple grid system? apakah ini membantu proses design, apa membatasi?

pernah, sekarang sudah banyak. Beberapa contoh yang disebutkan tadi termasuk dalam CSS framework. CSS framework adalah paket kode CSS/XHTML sebagai acuan dasar membuat web, sehingga kita tidak perlu lagi menulis kode web dari NOL. rata-rata CSS framework memakai konsep grid system. Apakah ini membantu atau membatasi? jawabannya relatif karena tergantung masing-masing designer.

pernah pake http://960.gs/ ga? menurut kalian gimana?

pernah pakai 960.gs menurut saya pribadi ini CSS frame work yang paling bagus, karena selain menyediakan paket kode XHTML/CSS juga menyediakan file template PSD/PNG dll sebagai acuan Mockup. Cocok untuk kerja tim

Untuk mendengarkan hasil rekaman obrolan ini silahkan menyimak di website temanmacet edisi #28 (diposting 4 januari 2009). Mohon masukan dan koreksi jika ada yang salah atau kurang :) semoga bermanfaat.

Ada juga yang membagi menjadi tiga, yaitu desainer (khusus mockup interface), slicer (khusus XHTML/CSS), programmer (khusus PHP, AJAX, dst). Tujuan dari pembagian ini adalah agar web developer lebih fokus terhadap kemampuan masing-masing. Misalnya seorang programmer tidak lagi memikirkan tampilan web, ia hanya fokus dengan bagaimana script berjalan. Dan XHTML/CSS slicer hanya memikirkan bagaimana hasil mock up di implementasikan sampai tahap cross-browser.

Beberapa waktu yang lalu saya coba menulis pertanyaan melalui update status (twitter, facebook, dan plurk) ternyata banyak teman yang memberikan jawaban. berikut ini pertanyaan dan jawaban-jawabannya:

Pertanyaan buat teman-teman web designer: Kalian lebih telaten mana (1) saat bikin mockup PSD/PNG atau (2) saat coding XHTML/CSS ?

by jeffcouturier @flickr

1. taufikn: @zamdesign coding..
2. playgroundpilot: @zamdesign sama2 aja menurut saya, Pak…tapi saat coding lebih membutuhkan perhatian khusus soal detail :)
3. sirio: @zamdesign kalau rio lebih suka CSSinnya mas :D
4. ayahshiva: @zamdesign Lebih milih XHTML dan CSS
5. armono: @zamdesign Dua2nya harus di-telaten-i. Sama2 penting :) re: design atau coding
6. cizkah: @zamdesign maksudnya telaten gimana ni? Betah gitu? Sama aja si keduanya. Deg2an dan excite stiap mulainya.
7. TheLifeDesign: @zamdesign No 2. Soalnya kalo mockup cuma buat sketch awal aja, kerjaan yang sebenernya ya saat coding :-)
8. unwinged: @zamdesignn saat coding
9. kevinosmond: @zamdesign setuj ama @armono. Tp gw spend lebih lama di design hehe. Dua2nya mempengaruhi satu sama lain
10. andisaleh: @zamdesign Coding, tantangan konversinya di situ apalagi tuk layout yang aneh-aneh. Tetep… IE6 sux
11. alitmahendra: @zamdesign saya lebih telaten yang ke 2 mas, selain karena temen2 saya ndak suka ribet di Xhtml/CSS, biasanya mockup PSDnya masih mentah :)

Jawaban teman-teman di Facebook:

1. Rio Purnomo: *ngacung* saya pak! kalau saya lebih mahir coding HTML+CSS :D
2. Aidil Muladha: Bikin mockup ajah, cssnya males.
3. Hafiz Rahman: Yang pertama :P
4. Hendra Hoedojo: mock up
5. Fikri Rasyid: wah, saya mah bisanya yang kedua saja :P
6. Suwahadi Net: coding coding…
7. Richard Fang: mock up pastinya! :D
8. Endah Caressa: saya males coding mending PSD nya ajah =))
9. Yofie Setiawan: berimbang nih…
10. Deny Sri Supriyono: lebih senang terima transferan, zam :d lebih cepet xhtmlizing.
11. Micko Henry: yang pertama :)
12. Didats Triadi: saya telaten ngirim invoice aja deh. :D
13. Gigih Budi Abadi: psd, soalnya nggak bisa xhtml/css
14. Arief Jfrx: both. klo lagi bosan dengan coding, ya cari job design. vice versa
15. Abi Wildan: pilih yang nomor satu aja

Jawaban teman-teman di Plurk:

1. Aryo: [says] keduanya
2. kai-hansen: sudah lupa mockupnya lbh seru codingnya, soalnya males ngeload PS, kecuali terpaksa :D
3. icha saja: [asks] Mockup tu pa?Q masih pemula,kl css q lom mahir,hax main insting,wkwk…

Yang memilih Mock Up (PSD/PNG): Aidil Muladha, Hafiz Rahman, Hendra Hoedojo, Richard Fang, Abi Wildan, Micko Henry, Endah Caressa (7 orang)

Yang memilih Coding (XHTML/CSS): taufikn, sirio (Rio Purnomo), ayahshiva, TheLifeDesign, unwinged, andisaleh, alitmahendra, Fikri Rasyid, Suwahadi Net, kai-hansen, Deny Sri Supriyono (11 orang)

Yang memilih keduanya: playgroundpilot, armono, cizkah, kevinosmond, Arief Jfrx, Gigih Budi Abadi, Aryo (7 orang)

Jawaban lain: Didats Triadi, Yofie Setiawan, icha saja (3 orang)

Dari hasil perbandingan perhitungan jawaban diatas, terlihat yang memilih coding XHTML/CSS lebih banyak, sedangkan yang memilih Mockup PSD jumlahnya sama dengan yang memilih dua-duanya. Tentu saja jawaban ini belum mewakili teman-teman web desainer di Indonesia semuanya. Tetapi paling tidak hal ini bisa menjadi contoh kecil saja, atau bisa juga mempermudah kita untuk mencari siapa teman kita yang akan kita bagi projek, sesuai dengan minat mereka masing-masing :)

Terimakasih untuk semua teman yang memberikan jawaban. Bagaimana dengan kalian? ada yang ingin memberi jawaban lain?

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

by trovster @flickr

Berikut rekap pertanyaan 1-10 (sesi 1) beserta jawabannya:

Pertanyaan 1 #zam gmn ya caranya bikin layout yg kolomnya sama tinggi pake css? @rizkysyazuli

• cara1 buat <div> sbg wrap dan <div> dalam <ul><li> sbg col. wrap display:table <ul> display:table-row <li> display:table-cell @rizkysyazuli
• keuntungan cara1 cukup sederhana tapi kekurangannya tidak bisa berjalan di IE7 apalagi IE versi dibawahnya @rizkysyazuli
• cara 2 mengakali tinggi kolom <div> menggunakan background image di wrap background-repeat: repeat-y; (repeat vertical) @rizkysyazuli
• keuntungan cara 2 cukup mudah kekurangan hanya bisa untuk kolom yg dibedakan warna oleh image dan tidak berlaku di fluid width @rizkysyazuli
• cara3 buat container <div> bertumpuk sebanyak jumlah kolom <div> masing2 kolom beda background dan tiap container meneruskan @rizkysyazuli
• cara3 semua <div> baik container maupun kolom float:left untuk container diberi jarak right: sesuai lebar kolom masing2 @rizkysyazuli
• keuntungan cara 3 bisa berjalan di semua browser kekurangannya agak ribet @rizkysyazuli
• cara 4 menggunakan jQuery dimana setiap <div> dalam container dibuat otomatis sama tingginya @rizkysyazuli
• keuntungan cara4 ok di semua browser kekurangan sulit mengatur <div> dlm <div> maupun <div> untuk clear:both ganti dgn <span> @rizkysyazuli

pertanyaan 2 #zam Sebenernya seberapa penting sih kita pake xhtml/css valid itu? @alitmahendra

• 2a) sangat membantu dalam cross-browser dan cross-platform. XHTML/CSS valid mengurangi jumlah error dan bug @alitmahendra
• 2b) bagus untuk SEO. Struktur XHTML/CSS yang valid dan rapi lebih mudah ter-index oleh mesin pencari @alitmahendra
• 2c) mempercepat loading halaman dan menghemat space hosting. XHTML/CSS valid meminimalisasi tag-tag yg tdk perlu @alitmahendra
• 2d) memudahkan dalam maintain dan redesain. Struktur XHTML/CSS valid dan rapi mudah dipelajari perlu terutama dalam kerja tim @alitmahendra
• 2e) lebih profesional dan mampu bersaing. web developer dengan karya web yg valid XHTML/CSS akan memiliki nilai lebih @alitmahendra

Pertanyaan 3 #zam Sebagai web designer, apakah kita harus “strict” dengan web accesibility? @fanari

• 3a) seharusnya YA karena web designer termasuk dalam bagian proses pembuatan dan penyajian web secara utuh @fanari
• 3b) Tapi kenyataannya aksesibilitas web dalam dunia desain web (lokal) mungkin masih sebatas wacana @fanari
• 3c) masih sulit mencari website di Indonesia yang sudah aksesibel untuk orang-orang dengan keterbatasan pancaindera @fanari
• 3d) salah satu contohnya http://mitranetra.or.id oleh Eko Ramaditya Adikara http://ramaditya.com Blogger tunanetra yg multi talenta @fanari
• 3e) web designer dituntut XHTML/CSS valid juga harus ingat kode aksibilitas (rel, nofollow, title, tag, alt, dll) http://w3.org/WAI @fanari
• 3f) terus terang ini PR untuk web designer (termasuk saya) karena mengakses serta berinteraksi dgn website adalah hak semua manusia @fanari

pertanyaan 4 #zam ada cara lain agar div kontainer ga lepas kalo div didlm pake float selain diberi div clear:both dbwh? @alitmahendra

• 4a) ada 3 cara untuk clearing float. Cara 1 membuat <div> kosong dengan CSS clear: both setelah kolom *cara lama /cara umum* @alitmahendra
• 4b) cara 2 pakai overflow: hidden di container tapi di beberapa browser mengharuskan adanya tag width atau height @alitmahendra
• 4c) cara 3 pakai tag :after CSS pseudo-class misalnya .clearfix:after{ tapi untuk IE7 / IE6 harus menambah tag hasLayout @alitmahendra

pertanyaan 5 #zam web usability. saya sering dengar itu. tapi apa itu sebenarnya dan contoh konkretnya bagaimana? @bocahmiring

• 5a) web usability, definisi istilah secara bahasa: kemudahan penggunaan web atau kebergunaan web @bocahmiring
• 5b) web usability = bagaimana membuat pengunjung mudah mengetahui/memahami semua pesan yang ada di dalam website @bocahmiring
• 5c) contoh: untuk icon play music tombolnya segitiga menghadap ke kanan, bukan ke kiri @bocahmiring
• 5d) contoh: tatak letak form login username di kiri/atas. dan password di kanan/bawah kalau dibalik bisa bingung dan salah isi @bocahmiring
• 5e) contoh: daftar list text mudah dibaca jika dalam format <ol>, <ul>, <li> bukan format <p> dan banyak contoh lainnya @bocahmiring

pertanyaan 6 #zam Gimana cara slicing yang enak dari file PDF? @hfz

• 6a) file mockup PDF memang sangat tidak direkomendasikan, seharusnya PSD (hasil Adobe Photoshop) atau PNG (hasil Macromedia Fireworks) @hfz
• 6b) kemungkinan kita (terpaksa) menerima PDF karena: (1) revisi di tengah jalan (2) klien tidak mau tahu (banyak di GetAFreelancer.com) @hfz
• 6c) Buka pakai Acrobat Reader view 100% – PrintScreenSysRq – copy paste ke Adobe Photoshop (cara tradisional) @hfz
• 6d) @ Photoshop pakai Rectangular Marquee (M) untuk menentukan jarak lebar/tinggi space, margin, padding dll serta untuk cropping image @hfz
• 6e) pakai Type Tool (T) untuk menulis 1 karakter atau 1 kata sekedar sebagai pembanding untuk memastikan ukuran dan jenis font @hfz
• 6f) pakai Eyedropper Tool (I) untuk menggambil komposisi warna RGB dari text, gambar maupun elemen lainnya @hfz
• 6g) tetap buka PDF di Acrobat Reader utk select text dan copypaste agar tidak mengetik ulang (AR 7.0 support *tdk berlaku utk graphic*) @hfz

Pertanyaan 7 #zam enaknya Web usability atau aksesibilitas Web dulu ya? Web yang aksesibel umumnya akan usable atau sebaliknya? @daniiswara

• 7a) Itu tergantung orientasi pembuatan web sejak awal untuk apa Penentuan prioritas masing2 menentukan proses design selanjutnya @daniiswara
• 7b)contoh: web yg dibuat untuk tunatera lebih prioritas accessible daripada usable sedangkan web pada umumnya mungkin sebaliknya @daniiswara
• 7c) Idealnya semua website harus usable, navigasi yg mudah dan sederhana, text yg mudah dibaca, tata letak tidak membingungkan @daniiswara
• 7d) Idealnya semua web harus accessible, baik di semua browser, semua platform, dan bisa dibaca device untuk yg disable/difable @daniiswara
• 7e) nyatanya jgn jauh2 bahas soal cross platform dan cross device soal cross browser saja web designer banyak terjebak soal IE6 @daniiswara
• 7f) web accessible belum tentu usable dan web usable belum tentu accessible karena alat ukurnya berbeda. atau perlu riset dulu? @daniiswara
• 7g) contoh web yg bagus design layoutnya (secara visual dan usable) belum tentu bisa diakses (accessible) baik di semua device @daniiswara
• 7h) tapi scr markup mgkn web accessible umumnya akan usable krn standart coding web accessible lebih strict daripada web usable @daniiswara

pertanyaan 8 #zam Pernah pake css framework? Sebaiknya pilih yg mana? Kasih rujukan dong. standarisasi yang pas untuk kerja tim :) @armono

• 8a) Pernah. dan masih pakai CSS framework 960 Grid System http://960.gs @armono
• 8b) rekomendasi 960.gs krn selain XHTML/CSS juga menyediakan file template PSD/PNG dll sebagai acuan Mockup. Cocok untuk kerja tim @armono
• 8c) dan setahu saya teman2 juga pakai 960.gs seperti @madeforyou, @didats, @halomomo, @jauhari, @icreativelabs dan lain-lain @armono
• 8d) di web http://960.gs kita lihat banyak contoh web popular dengan design bagus-bagus pakai 960.gs misalnya http://woothemes.com @armono
• 8e) didukung oleh GridFox http://is.gd/4exxN Addons Firefox yang bisa kita jadikan view-tester di browser sesuai acuan kolom2 960.gs @armono
• 8f) Selain itu sebenarnya ada banyak: Blueprint, YUI Grids, YAML dll tapi maaf belum bisa review karena belum mencoba satu-satu :) @armono

pertanyaan 9 #zam hows your opinion about css framework? @kakilangit

• 9a) CSS framework dibuat untuk mempermudah dan mempercepat proses pembuatan web (konversi PSD/PNG ke XHTML/CSS) @kakilangit
• 9b) lebih cepat karena CSS framework menyediakan paket kode standart, jadi tidak perlu mengetik kode yg sama berulang-ulang @kakilangit
• 9c) Ada cukup banyak CSS framework yang bisa kita download gratis, kita tinggal pilih mana yang sesuai dengan selera/cara kita @kakilangit
• 9d) Hati-hati salah memilih CSS framework bisa membuat pekerjaan slicing jadi lebih lama Tidak semua cocok dengan kebutuhan kita @kakilangit

pertanyaan 10 #zam kalo saya mau buat desain 1 kolom. kira2 butuh grid kayak gitu gak? @kusaeni

• 10a) Grid system (CSS framework) memang lebih dibutuhkan untuk pembuatan website multi kolom (misal: blog magazine style) @kusaeni
• 10b) namun Grid system tidak hanya menyediakan pengaturan kolom, juga mengatur Typography, Form, CSS Reset dan lain-lain @kusaeni
• 10c) karena itu Grid system dlm web 1 kolom bisa dimanfaatkan utk pengaturan tata letak banner, blockquote, list dalam kolom, dll @kusaeni
• 10d) Pada prakteknya, paket kode dalam Grid System / CSS Framework boleh kita kostumasi sesuai project yang sedang kita tangani @kusaeni
• 10e) Tapi keputusan terakhirnya ada di tangan webdesigner sendiri apakah lebih mudah menggunakan Gid system atau tidak :) @kusaeni

Terimakasih untuk semua teman-teman yang bersedia mengajukan pertanyaan serta beberapa teman yang ikut membantu sharing. Saya masih membuka sesi kedua tanya jawab ini dengan tema yang sama. pertanyaan sesi kedua ini dibatasi 10 pertanyaan, dan mungkin berlaku untuk sesi-sesi selanjutnya. silahkan untuk teman-teman yang sudah berniat mengajukan pertanyaan tapi belum sempat bertanya :) saya tunggu

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.