(2) @pakzam
since: 11 Desember 2009 | following: 200 | follower: 325 | listed: 42 | tweets: 1,475

keterangan: sekarang, ini adalah akun utama saya, kicauan dari akun ini saya tampilkan di web http://zam.web.id, akun ini untuk kepentingan personal, tema yang dibicarakan lebih bebas, tidak hanya masalah web desain, tapi juga soal pengalaman kecil sehari-hari dan untuk bertegur sapa dengan teman-teman online, terutama dari Indonesia (menggunakan bahasa Indonesia)

(3) @toekangweb
since: 27 Desember 2009 | following: 58 | follower: 89 | listed: 9 | tweets: 66

keterangan: akun ini mewakili weblog http://toekang.web.id, blog yang membahas seputar pekerja web Indonesia, profil mereka dan karya-karyanya. akun ini menggunakan bahasa Indonesia. diusahakan hanya follow akun yang berhubungan dengan pekerja web indonesia, mulai dari freelancer lokal, startup lokal, blog lokal, dan sebagainya

(4) @tookangweb
since: 17 Maret 2010 | following: 66 | follower: 22 | listed: 1 | tweets: 55

keterangan: akun ini saya buat tiga bulan sebelum peluncuran web http://tookangweb.com, akun ini memang sudah dipersiapkan untuk web tersebut, sebagai media publikasi, branding sekaligus komunikasi dari web tookangweb, penyedia wordpress theme gratis. Tema yang dipilih adalah “wordpress”, karena itu tiap post diusahakan berhubungan dengan wordpress, juga diusahakan hanya follow akun yang berhubungan dengan wordpress (berbahasa inggris)

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

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.

branding resmi zamdesign

Branding tersebut dilakukan oleh perusahaan-perusahaan besar untuk memperkenalkan produk  mereka ke masyarakat umum. Karena media brandingnya bermacam-macam maka diperlukan ciri-ciri khusus sebuah produk agar mudah dikenali. Biasanya ciri-ciri tersebut bisa dengan logo yang sederhana, pemakaian warna tertentu berulang-ulang, pemilihan jenis font yang tetap dan berulang-ulang, dan seterusnya.

Ada juga branding produk dengan menggunakan seorang model khusus yang dipakai secara terus-menerus dalam iklan yang berbeda-beda. Ada juga yang menggunakan ikon atau maskot khusus.

Kitapun ternyata juga bisa melakukan branding kecil-kecilan, apabila kita punya produk atau layanan jasa, mengapa kita tidak merancang logo khusus, warna khusus, font khusus, ikon/maskot khusus untuk produk kita?

Kita bisa memulai dengan yang gratis-gratis dulu, kemana lagi media efektif gratis selain di internet? Internet sekarang kaya dengan banyak layanan web 2.0 gratis, mulai dari blog dan jejaring sosial. Berikut contoh branding kecil-kecilan zamdesign di beberapa jejaring sosial:

kartunama zamdesign

tampilan website zamdesign.web.id

tampilan zamdesign.tumblr.com

branding zamdesign di plurk.com/zam

tampilan zamdesign.wordpress.com

tampilan twitter.com/zamdesign

zamdesign di facebook page

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

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.