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?

icon tkoz personal branding zam jaman dulu

Tidak cukup itu, saya juga join di forum DesignFaculty.com (selanjutnya berubah menjadi forum godote.com dan kini berubah lagi menjadi forum massivelab.com) lewat forum itu banyak ilmu dan pengetahuan desain saya dapatkan dari desainer grafis dan desainer web lokal yang sudah senior.

Saya banyak belajar desain diantaranya dari: godote, ntonk, ade, gig, djakadwiandi, mono_xp, e13, yul karel, aram, thalia, achmadbiz, bow, Harry, avianto, darbotz, booi, OsMoNd, ing, godo, machda, Thomas, aalego, donkei, sevenova, pitung, iyay, dan lain-lain. Tidak bisa saya sebutkan satu-persatu dan jumlah anggota forum sekarang saya lihat sudah mencapai 4.267 anggota.

Saya menggunakan nickname tkoz dengan ikon seekor tikus, kebetulan saat itu suka dengan desain bergaya kotor /dirty style (grunge style). Beberapa hasil belajar saya coba dengan membuat beberapa artwork dan website. Beberapa diantaranya saya arsipkan di DeviantArt, Behance, carbonmade, flickr, WordPress. berikut beberapa arsipnya:

web tkoz versi 1

web tkoz versi 2

wajah wajah

ikut kontes design horror

arsip goresan harian

submit majalah desain lokal

submit majalah desain lokal

Apresiasi dari teman-teman forum
Ini adalah arsip karya teman-teman berupa artwork dari stock foto saya *narsis :D* dan beberapa diantaranya splash screen web tkoz.tk

by gig

by mono

by achmadbiz

by ing / proyekimagi / wadezig

by Harry JH

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

dari Flickr

Saya ingin mencontoh metode tanya jawab tersebut, tetapi saya menghindari istilah “konsultasi” karena saya bukan pakar, dan saya yakin sebenarnya di Indonesia ini banyak yang ahli dalam bidang yang akan saya bahas ini. Bahkan mereka (saking banyaknya sulit saya sebutkan satu-persatu) jauh lebih berpengalaman dan lebih luas wawasan XHTML/CSS nya daripada saya yang masih belajar ini. Tapi apa salahnya membuka tanya jawab ini? setelah saya posting ide ini di twitter & facebook ternyata dapat dukungan dari teman-teman.

berikut beberapa catatan:

1. Dalam rangka apa?

Dalam rangka ingin berbagi pengalaman dan belajar bersama

2. Mengapa lewat twitter?

Lewat twitter siapa saja bisa membaca postingan, tanpa harus login lebih dulu, tidak seperti di jejaring sosial lain (contoh: facebook). Postingan di twitter mudah diikuti menggunakan # (hastags) dan RSS Feed. Rencana jangka panjangnya ingin meneruskan budaya berbagi melalui ‘kicauan’

3. Batas waktu sampai kapan?

Sementara tidak ditentukan batasnya berdasarkan waktu (1 hari, 1 minggu, 1 bulan atau lebih) mungkin saya batasi berdasarkan jumlah pertanyaan yang masuk atau jumlah pertanyaan yang dibahas.

4. Batas jumlah pertanyaan?

Tanya jawab ini saya coba batasi sampai 55 pertanyaan/pembahasan. Tapi tiap orang boleh bertanya lebih dari satu.

5. Perlu hastags?

Hastags sebaiknya diperlukan untuk mempermudah follow tanya jawab ini, saya pilih hastags #zam agar singkat dan personal, tapi jika merasa tertanggu dengan hastags ini, tidak pakai pun tidak apa-apa, yang pasti harus ketik @zamdesign supaya pertanyaan masuk dalam timeline replies saya :)

6. Topiknya apa?

XHTML/CSS dan permasalahannya. Mulai tahap slicing Web Mockup PSD / PNG ke XHTML/CSS sampai integrasi dalam aplikasi web maupun CMS. Tidak melayani pembahasan coding yang lebih jauh. misalnya modifikasi Ajax atau PHP karena saya bukan programmer :)

7. Ada topik lain?

Atas saran @turboduck (NavinoT) maka saya juga menerima permintaan review web design dan usability. tidak menutup kemungkinan jawabannya bersifat subjektif karena penilaian soal “desain yang bagus” itu relatif, bagus menurut saya belum tentu bagus menurut orang lain :) (c0ntoh review)

8. Ada hadiahnya nggak?

Mohon maaf tidak ada, karena ini bukan kontes, ini hanyalah sharing tanya jawab saja, saya tidak memilih mana pertanyaan yang paling bagus, silahkan bertanya sesuai kebutuhan :) gratis

9. Ini meniru @nukman yah?

Iyah terus terang saya meniru Pak Nukman Luthfie, seperti tulisan Kementrian Desain Republik Indonesia:

saya ingin mentransfer budaya dan metode desain yang positif dari Inggris untuk diaplikasikan demi kemajuan Indonesia.
Seperti budaya para desainer pada umumnya yaitu ATM, Amati, Tiru, Modifikasi!

tapi setidaknya ide untuk membuka tanya jawab ini sudah mendapat restu dari beberapa teman di twitter termasuk Pak Nukman

respon dari rekan-rekan di twitter

Silahkan jika ada masukan atau saran itu sangat membantu dan saya butuhkan. Terimakasih :)

by Daniel F. Pigatto

Pada saat postingan ini ditulis setidaknya ada ribuan add-ons yang terbagi dalam beberapa kategori, misalnya: Download Management (349), Feeds, News & Blogging (696), Photos, Music & Videos (566), Social & Communication (877), Web Development (837) dan beberapa kategori lainnya. Melihat banyaknya add-ons pasti membuat kita semua bingung mau milih yang mana?

Supaya tidak bingung :) maka saya akan mencoba berbagi untuk merekomendasikan plugin apa saja yang saya gunakan sehari-hari khususnya dalam dunia pengembangan website (web development). Berikut 7 + 1 Plugin pilihan:

1. Firebug


firebug

Firebug adalah add-ons no satu dan wajib hukumnya diinstall khusunya untuk para praktisi web development baik itu designer maupun programmer. Firebug ini bentuk jenius dari fasilitas “view source” dimana data coding dibalik halaman website bisa terlihat secara struktural berdasarakan fungsi-fungsi tag HTML/CSS juga script khusus, sehingga sangat membantu dalam proses development.

2. MeasureIt


measureit


Selayaknya fungsi “Rectangular Mrque Tool” di Photoshop, melalui MeasureIt kita bisa mengukur seberapa lebar (width) atau tinggi (height) sebuah objek di halaman website, misalnya gambar, text, area, space kosong, header, sidebar, footer, wrapper dan-lain-lain. cukup klik secara diagonal. Saat add-ons ini di aktifkan juga otomatis muncul layer dengan kira-kira transparasi warna putih 50%, cukup berguna untuk melihat objek gelap tanpa perlu merubah setting brightness/contrast monitor kita.

3. ColorZilla


colorzilla

Dengan colorzilla kita bisa melihat semua warna yang ada pada halaman website (baik image, text, maupun background-color) secara instan dengan sebuah color picker, selayaknya “eyedropper Tool” di Photoshop. tinggal kita klik dengan cursor di titik yang kita inginkan maka akan muncul rumusan warna RGB misalnya #FF9900.

4. GridFox


gridfox

Jika teman-teman sudah akrab dengan grid system keluaran 960.gs maka saya sangat merekomendasikan add-ons ini. Saat kita mengaktifkan gridfox akan muncul layer transparan baru di firefox kita (dengan warna dan kapasitas transparant yang bisa kita atur) bergaris vertikal maupun horizontal, sangat perlu untuk melihat apakah web yang sudah kita buat sudah rapi secara grid system.

5. Image Zoom


image zoom

Fasilitas untuk memperbesar / memperkecil gambar saja, sebenarnya Mozilla Firefox versi terbaru sudah bisa zoom in dan zoom out semua objek baik text dan gambar sekaligus, namun kadang kita hanya perlu zoom in / zoom out gambar saja tanpa perlu merubah ukuran text

6. Screengrab


screengrab

Add-ons ini dipakai untuk “print screen” halaman website, bisa langsung tersimpan dalam bentuk file (.png / .jpg) juga bisa sekedar “copy” saja yang hasilnya bisa di-”paste” ke Photoshop. Yang paling menarik dari plugin ini adalah selain bisa capture apa yang terlihat di “jendela” saja juga bisa capture keseluruhan halaman dari atas sampai bawah sekaligus, sayangnya tidak bisa capture file flash.

7. Window Resizer


Resize Window

Ukuran resolusi monitor yang dipakai user ada berbagai macam, saat membuat website tentu kita ingin tahu bagaimana website tersebut jika dilihat di berbagai resolusi monitor. Dengan add-ons ini kita tidak perlu merubah setting screen monitor, cukup merubah lewat firefox saja misalnya untuk melihat resolusi 640×480, 800×600, 1024×768, dan seterusnya.

8. Web Developer


web developer

List terakhir ini yang saya sebut “+ 1″. Sengaja saya sendirikan plugin ini dari daftar diatas karena secara garis besar banyak fasilitas dari poin 1 sampai 7 ada di add-ons ini, saking banyaknya tools sampai buka Firefox serasa buka Software web editor seperti Macromedia Dreamweaver :) tetapi karena saking lengkapnya justru saya malas menggunakan. Saya lebih suka yang simple dan hanya saya perlukan sesuai kebutuhan saja (1-7).

Tentunya teman-teman sudah ada yang menggunakan beberapa add-ons diatas, atau mungkin ada add-ons lain yang lebih kalian sukai dan bagus untuk direkomendasikan silahkan …

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.