Sebenarnya saya bukan pakar web, tapi saya teringat ketika saya jadi mahasiswa dulu, saya pikir mahasiswa tersebut memang sungguh-sungguh mengerjakan tugasnya dan sangat membutuhkan balasan e-mailnya.

Semoga balasan singkat ini bisa sedikit membantu :)

Balasan Email:

Mbak Hani Azzahra dan Mas Ismedy Prasetya,

Berikut feedback berdasarkan kriteria yang telah Anda buat
serta beberapa kriteria tambahan

Kriteria Fungsional:

1. Tujuan: “Mau buat web untuk apa?” menentukan style desain web yang akan dibuat
2. Target Visitor: “Mau buat web untuk siapa?” menentukan pemilihan warna / huruf / navigasi / icon dst. contoh jika target visitornya adalah anak-anak maka menggunakan warna-warna primer yang mencolok, huruf besar, banyak icon menarik, dst
3. Konten: konten yang padat, tidak bertele-tele membuat pengunjung betah mengakses web tersebut, sebaliknya meskipun desainnya bagus tapi kontennya tidak bagus, membuat pengunjung malas mengakses lebih jauh
4. Sitemap: sitemap dirumuskan dari konten, kemudian menentukan pembagian halaman, navigasi dan tata letak data
5. Akses: mengenai akses, web sekarang sudah tidak seperti web pada tahun 90an, dimana pada jaman dulu: satu gambar di potong-potong (slicing) agar lebih ringan, tapi sekarang gambar dimunculkan secara utuh, asalkan 72 DPI (standart web) bukan 300 DPI (standart kualitas gambar / foto untuk desain cetak)

Kriteria Penampilan:

1. Warna: di internet sudah banyak colormix, pilihan skema warna untuk web: colourlovers – colorschemedesigner
2. Tipografi: dulu font terbatas pada standart font OS (Arial, verdana, tahoma, times new roman, georgia, dll) sekarang sudah bebas menggunakan font apa saja, tapi umumnya font tidak standart lebih banyak dipakai untuk tipografi judul konten
3. Gambar: diperlukan sebagai bagian dari konten, atau bagian dari layout
4. Animasi: web full animasi menggunakan flash sudah ditinggalkan, karena tidak usable dan akesible, juga tidak terbaca google, sebagai gantinya animasi pada web sekarang didominasi dengan pemakaian AJAX (jQuery, Mootols, dll) pemakaiannya pun seperlunya (tidak berlebihan)
5. Icon / Button: icon / button sekarang menjadi kebutuhan penting sebagai aksesoris layout, contoh icon bisi dilihat di: iconfinder
6. Layout: User Interface layout web memiliki karakter khusus yang berbeda dengan layout desain cetak, misalnya menggunakan satuan pixels, lebar dibatasi (disesuaikan) dengan ukuran monitor, pilihan font tertentu, dst
7. Coding: koding adalah integrasi selanjutnya setelah perancangan desain web, coding juga menentukan batasan-batasan dalam proses perancangan desain web

Tambahan:

1. Usability: kemudahan penggunaan web atau kebergunaan web, bagaimana membuat pengunjung mudah mengetahui/memahami semua pesan yang ada di dalam website, contoh: (1) untuk icon play music tombolnya segitiga menghadap ke kanan, bukan ke kiri. (2) tatak letak form login username di kiri/atas. dan password di kanan/bawah kalau dibalik bisa bingung dan salah isi
2. Accessibility: bagaimana membuat website yang bisa dan mudah diakses baik di semua browser (mozilla firefox, google chrome, Apple Safari, Opera, dll), baik di semua Operasi Sistem (Windows, Mac Os, Ubuntu, dll), baik di semua platform (PC, Notebook, Ipad, Smart Phone, etc) dan bisa dibaca device untuk orang-orang yang tuna netra dan tuna rungu (disable/difable)
3. Whitespace: Jarak / Ruang kosong dalam komposisi User Interface Web (layout), misalnya jarak logo dengan menu, jarak konten dan sidebar, jarak antar baris text, jarak text dengan gambar, jarak antar kata, jarak navigasi, dll. Ruang kosong memiliki peran penting dalam membuat desain website yang baik dan mudah dibaca.
4. Grid System (framework): 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. – contoh: http://960.gs (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.)
5. Golden Ratio: pola rasio/perbandingan pada desain makhluk dan semua ciptaaan Tuhan (wajah manusia, bentuk tubuh, jemari, bunga matahari, bekicot / keong, pohon cemara, dll), sejak jaman dulu pola rasio/perbandingan ini digunakan untuk membuat bangunan penting (piramida, gedung,patung, dll) lukisan (monalisa, dll) arsitek, dll. dan ternyata pada perkembangannya pola ini juga diterapkan dalam desain website:
   mashable, tutsplus, harunyahya

Berikut e-mail asli dari @haniazzahra

Cerita: Awal mula mengenal web desain?

Kertarikan saya terhadap web desain berawal dari orang tua yang memasang akses Internet dirumah memakai Speedy (yang sebelumnya dial-up) sekitar pertengahan tahun 2008. Saat itu saya tidak langsung menjalani web desain, ada cerita tersendiri didalamnya. Mungkin ini adalah cerita sigkatnya.

Dari pemasangan Speedy itulah saya sering mengakses internet dengan ketertarikan pertama kali dengan hal-hal yang berbau Hacking website, karena sebelum dipasangnya Speedy, saya membeli buku-buku tentang hacking (seperti buku th0r, Yogyfree, dll) dan mencobanya dengan offline dan sangat tertarik sekali. Mulai dari mencoba hack akun Friendster :D, HASH, DDoS, serta XSS saya pelajari. Kemudian saya mencari tempat berkumpulnya hacker-hacker Indonesia lainnya, untuk memperdalam pengetahuan dan pengalaman disana. Pada akhirnya saya menemukan forum bernama Xcode. Setelah sekitar 8 bulanan berdiskusi, menambah teman, pengetahuan, dan pengalaman di forum tersebut, forum X-Code sudah mulai menyusut usernya alias tidak aktif lagi (mungkin karena aktifitas masing-masing yang makin banyak). Selain itu saya juga mencoba-coba membuat akun blogspot dan membuat blog disana, masih sangat awam sekali mengenai kode html beserta isinya, serius. Isi blog saya waktu itu tidak jauh juga dari hacking.

Tahun pun berganti menjadi tahun 2009. Dari Januari hingga Maret, saya sudah tidak aktif lagi di forum tersebut, meninggalkan aktifitas hacking, dan meninggalkan blogspot (walaupun teman-teman saya meminta saya untuk mengajari mereka hack, saat itu, saya bilang saja : “Sekarang keamanan web sudah diperketat bro, jadi susah cari softwarenya dan cara untuk hack” dan itu kenyataan :D). Di bulan-bulan kekosongan tersebut aktifitas saya hanya bermain game online, bermain Facebook :p, dan sedikit mempelajari Adobe After Effects untuk motion graphic.

Lalu pada April 2009 tiba-tiba saya mempunyai ide untuk membuat warnet beserta jasa web di Serang, Banten ini. Dan orang tua saya pun menyetujui ide tersebut. Saya bersemangat sekali membuat sketsa warnet dari Google Sketchup, tata letak, komponen, perhitungan, dan sebagainya hingga saya menamakan warnet tersebut “Hexanet” (saya juga tidak tahu alasannya mengapa saya tiba-tiba menamainya “hexa”). Tetapi pada akhirnya ide warnet tersebut tidak terjadi, karena ada kebutuhan yang lebih penting dari itu. Tetapi untuk ide “jasa web”, saya tetap optimis berhasil, mengingat modalnya hanya internet kencang serta skill :D

Untuk dapat mewujudkan ide tersebut saya mulai dengan melihat-lihat website jasa web di Google (awalnya saya tidak pernah mengetahui apa itu istilah freelancer). Beberapa situs jasa web menjadi rujukan bagi saya. Seperti web k Monika Tanu, web pak Andra Yogi, dan yang pertama kali saya kenal dengan freelancer adalah k Yofie Setiawan :D. Saya banyak bertanya dengan k Yofie mengenai pengetahuan dasar tentang freelancer. Kemudian (kalau tidak salah) saya diberitahu k Yofie untuk visit ke web ruangfreelance.com untuk hal-hal dasar mengenai freelancer. Bukan hanya hal dasar saja, tetapi hal-hal unik serta cerita sukses para freelancer juga banyak disana. Nah, Dari situlah saya mulai mengenal k Anggi Krisna, kak Dian Ara, pak Zam, dan lainnya dari web ruangfreelance dan mulai fokus dan mengerti sekali apa itu freelance. Dari situlah saya me re-branding, merapihkan, dan mengganti logo. Mengganti nama brand dari Hexanet menjadi “Hexacreative”. Setelah itu barulah saya mencari-cari tutorial desain web dan graphic, klien, serta freelancing serta uneg-unegnya.

Sampai kapan berniat menekuni web desain?

Mengenai hal ini, saya pernah berpikiran seperti itu “Apakah saya akan tetap menjalani bisnis web ini hingga nanti?”.
Menurut pendapat saya, sekarang zaman sudah berubah mengenai kebutuhan Internet dan website. Jika dahulu akses internet masih terbatas, nah sekarang wifi sudah ada dimana-mana dan Internet begitu mudah didapatkan. Ada Internet, pasti mayoritas membuka website. kan?

Dan bagusnya, sekarang perkembangan teknologi web semakin hari semakin “harus” dibuat untuk memudahkan masyarakat umum/user. Berbagai kalangan, media, dan pemerintahan pun mendukung fitur seperti itu untuk konsumennya atau masyarakat (kita). Ini berita bagus untuk para pendevelop dan pendesain website kedepannya, karena semakin kedepan juga, seluruh perusahaan dan bisnis hampir harus membuat web untuk promosi, social media, dan layanan untuk memudahkan konsumen mereka. Jadi jangan takut kalah saingan, karena banyak di sekitar anda perusahaan/organisasi/lainnya yang masih membutuhkan website. Dan juga hampir semua gadget serta infrastruktur sekarang sudah mendukung untuk keperluan Internet dan website.

“Jadi, apakah kamu masih berminat di bidang ini Naf?” Jawabannya : Ya :D

Inspirasi dari mana/siapa?

Ada banyak orang-orang yang menginspirasi saya dalam hal website, graphic, serta freelancer. Banyak diantaranya yang dari Indonesia juga. Seperti : pak Anggi Krisna (CEO Icreativelabs), k Dian Ara (penulis), k Yofie Setiawan (YopDesign), k Richard Fang (JurusGrafis), pak Zam (ZamDesign), k Febyy Iriani Tan (Visualgroove), pak Collis Taeed (Envato), k Fabio Sasso (Abduzeedo), pak Steve Jobs (Apple), dan masih sangat banyak lagi yang tidak saya sebutkan satu persatu disini :D

Cita-cita setelah sekolah atau lulus kuliah?

Cita-cita setelah saya sekolah atau lulus kuliah adalah, membuat suatu perusahaan IT/website/startup yang besar, dan bisa menggaji orang dengan upah yang besar dan dari hasil yang halal :)

Mengapa memilih CMS Concrete5 dan WordPress?

Saya menggunakan Concrete5 dan WordPress untuk web development dan desain di Hexacreative karena kedua CMS tersebut memiliki fitur yang menurut saya tidak ada pada CMS lain. WordPress bagus dalam hal komunitas, support, serta add-onnya yang banyak serta bisa di develop untuk blogging dan ecommerce dengan mudah. Concrete5 biasanya saya gunakan untuk web portal/statis, karena fiturnya yang flexibel untuk membuat tata letak serta UI website, mudah dalam perawatan enginenya dan memiliki security yang bagus juga.

Menerima Desain Web dan Desain Cetak?

Sebenarnya Hexacreative tidak menyediakan jasa percetakan, kami hanya mendesain barang yang akan dicetak :D Untuk percetakan diserahkan kepada perusahaan percetakan :)

Hexacreative tetap menjalani bisnis desain percetakan juga. Ini dikarenakan kebutuhan desain offline harus mendapatkan perhatian, dan menurut saya kualitas desain offline/percetakan juga akan mempengaruhi kualitas suatu merk/brand

Bagaimana mengatur waktu kerja dan sekolah?

Dalam hal mengatur waktu project/usaha dengan sekolah, saya memenagement kedua waktu tersebut seperti ini. Waktu untuk mengerjakan project serta hal yang diluar sekolah, saya menggunakan hari libur atau waktu luang yang kiranya tidak saling berdekatan dan bentrok antara sekolah dan pekerjaan. Jika ada bentrok antara kedua waktu tersebut, saya harus berpikir berkali-kali untuk mendapatkan yang mana yang lebih prirotas?.

Ikut Freelancer Market?

Sudah pernah, tetapi sampai saat ini belum mendapatkan project dari freelance market *kurang mencoba dan belum beruntung* :D

Pilih bekerja sendiri atau tim?

Sekarang ini saya memilih untuk bekerja sendiri dahulu. Belum berani untuk bekerja secara tim, karena mengatur bagi hasilnya masih bingung. hehe.

Darimana mendapatkan klien?

Untuk mendapatkan klien, saya menggunakan metode social media atau internet. Metode ini sangat efektif untuk mendapatkan klien. Saya yang mencari klien, ataupun klien yang mencari saya. Dan mendapatkan klien offline biasanya juga dari social media ataupun internet.

(foto + gambar diambil dari facebook dan web hexacreative)

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.