Untuk mengimbangi kepopuleran bidang desain website pada tahun 2010 ini, maka ada baiknya saya menulis tentang persiapan apa saja yang perlu kita lakukan sebelum mendesain website.
Mungkin banyak teman-teman pembaca setia Jurus Grafis yang belum familiar dengan cara kerja mendesain website, karena terbiasa dengan desain cetak (seperti saya dulu).
Dalam desain website, kita sebagai desainer tidak diharuskan bisa mem-program desain yang telah kita buat. Tapi tentu saja akan lebih baik jika kita bisa sekaligus mem-program desain kita sendiri, tapi kalau di rasa mem-program sebuah website itu merupakan pekerjaan berat, lebih baik kita berfokus pada interface dan konsep desain terlebih dulu.
Yang patut kita tahu adalah cara berpikir programmer, agar desain yang kita buat masuk akal untuk di wujudkan dalam code. Misalnya, salah satu cara programmer bekerja adalah dengan membuat bagian background terlebih dulu, karena itu desain yang kita buat harus tertata rapih di dalam folder (Photoshop) yang spesifik.
Baiklah, mari kita mulai saja langkah persiapan mendesain website.
1. Tujuan / Goal Website
Setiap desain harus mempunyai tujuan yang jelas dan goal apa yang ingin di raih melalui website tersebut. Jika itu website portfolio, tentukan tujuan nya, apakah untuk mendapatkan projek baru? , melakukan personal branding atau untuk menjadi semacam katalog online hasil kerja kita?
Dengan tujuan yang jelas maka kita akan dengan mudah menemukan konsep dan gaya desain yang pas. Hindari tujuan untuk ‘tampil keren’ di awal pemikiran, karena desain yang kita anggap keren itu mungkin hanya bertahan dalam waktu 1 bulan saja, sehingga dalam waktu singkat kita merasa harus mendesain kembali website kita. “Keren” itu hanya “kulit” nya, yang terpenting adalah fungsi dan tujuan website tersebut.
2. Sitemap
Sitemap merupakan bagian yang sangat vital, karena akan menjadi gambaran alur informasi yang jelas mengenai website yang akan kita buat. Tentukan navigasi dan fitur yang di perlukan di tahap ini dan buang fitur yang tidak efektif.
Kalau tujuan website sudah jelas, maka kita bisa berfokus pada tujuan itu dan tidak memasukkan fitur yang kurang penting, seperti chat box atau ruang iklan banner misalnya (sungguh aneh kalau di web portfolio ada banner iklan).
3. Sketsa / Wireframe
Supaya tidak tersesat di kanvas kosong Photoshop, lebih baik kita merancang terlebih dulu di atas kertas. Langkah ini perlu untuk menghindari kerja dua kali di Photoshop. Bisa di bayangkan waktu yang terbuang ketika membuat background atau tombol terlihat bercahaya dan web 2.0 banget!, tapi ternyata letak dan ukurannya kurang tepat.
Tahap ini sangat perlu, terlebih jika kita berurusan dengan website yang mempunyai alur informasi yang kompleks. Dengan sketsa kita dapat menciptakan berbagai kemungkinan layout dengan cepat. Dan kalau kita bekerja dengan klien, mereka lebih senang kalau kita memulai projek dan memperlihatkan hasil sketsa kita sebelum melangkah ke tahap finishing di Photoshop. Ini bisa menjadi jalan untuk melibatkan klien secara aktif di dalam projek tanpa membuat kita kesal (karena untuk merubah hanya perlu menghapus sketsa saja).
4. Resolusi 72 Dpi & Warna RGB
72 Dpi adalah resolusi standar untuk tampilan di monitor (jangan pernah membuat desain website di resolusi 100 dpi sekalipun, karena ukuran asli nya akan menjadi besar juga). Dan gunakan warna RGB yang memang di khususkan untuk monitor.
Well, langkah ini adalah langkah dasar yang tidak boleh di langgar, jadi jangan lupa teman 
5. Lebar Konten Website Maksimal 960 Pixel
Seheboh apapun desain yang kamu buat, jaga area konten (teks, foto dll) agar jangan melebihi lebar 960 Pixel. Ini karena standar monitor orang awam masih berkisar di resolusi 1024 x 768. Untuk bagian background image mungkin perlu untuk melebihi lebar 960 pixel ini dengan tujuan supaya background terlihat rapih dan tidak terpotong jika di buka di monitor yang lebar seperti 1360 x 768 pixel atau lebih.
6. Gunakan Grid System
Grid bukanlah suatu pembatasan kreatifitas terhadap desain. Grid di ciptakan untuk mempermudah kita menjaga konsistensi layout dari halaman satu ke halaman yang lain. Selain itu gird juga membantu programmer yang akan menslicing desain kita di photoshop.
Saya biasa menggunakan 960 Grid System, karena sudah merupakan standar di jaman sekarang ini. Jika kamu tidak mau menggunakan grid yang sudah ada, silakan gunakan grid kamu sendiri. Yang terpenting lebar area konten tidak boleh melebihi 960 pixel.
7. Manajemen Folder & Layer di Photoshop
Biasakan untuk membuat folder di bagian-bagian penting sebuah website, misalnya, folder header, folder body, folder sidebar, folder footer. Sebenarnya nama folder nya bisa terserah kamu, yang penting di namakan dan masing-masing layer yang termasuk ke dalam satu bagian/section di satukan ke dalam satu folder.
Jangan lupa juga untuk menamakan setiap layer, sehingga akan mudah jika kita ingin mengedit desain kita nanti dan tentu saja ini sangat menolong programmer yang bekerjasama dengan kita.
Kesimpulan
7 langkah di atas adalah langkah awal supaya kita terbiasa mendesain dalam keadaan yang terorganisir (khususnya desain website). Karena kita tahu terkadang kita tidak bisa menyelesaikan suatu projek sendirian, dalam hal ini mungkin kita butuh teman programmer, jadi supaya code yang di hasilkan juga rapih, kita sebagai desainer juga harus memberikan “file mentah” yang rapih.
Sudah siap beralih menjadi web desainer? Atau mungkin ada langkah yang tertinggal? Ayo berbagi pendapat di kolom komentar! 
Tautan Terkait
Merancang Desain Website seperti Kartunama
Jangan sampai ketinggalan artikel menarik lainnya, ayo berlangganan dengan Email atau RSS. Ikuti juga Twitter Jurus Grafis dan temui Jurus Grafis di Facebook.
![BLUEPRINT 3D [VIDEO]](http://farm6.staticflickr.com/5072/7085649795_378daa3262_s.jpg)
![SUBWAY [VIDEO]](http://farm7.staticflickr.com/6219/7037439417_9818589c92_s.jpg)
richard, thx banget artikelnya.Jujur nih aku kalo mendesign sebuah web gak pernah di konsep.
jadi tau deh “tatacara” yang baik dalam mendesign web.Thx y
tulisan ini perlu untuk pemula sampai tingkat lanjut
saya suka sekali dengan poin 1 diatas: hal remeh yang sering menjebak adalah: keinginan tampil “keren” tapi lupa “goal”-nya
Mantap bang!
Sangat bermanfaat bagi pemula seperti saya,,,
ditunggu artikel2 lainnya,,,
you r generous,,, GBU
any e/book references ? for me
Selain vertical grid semacam “960 Grid System,” ada juga grid system lain yang cukup berguna bila digunakan demi keteraturan tipografis (baseline) web kita, misalnya http://baselinecss.com dan http://hashgrid.com
[...] This post was mentioned on Twitter by Richard Fang, rully oktario edison, Oka Kuswandi, Dhany Ramdanny , Jurus Grafis and others. Jurus Grafis said: Artikel Terbaru! – 7 Langkah Persiapan Mendesain Website http://ow.ly/10wcG [...]
Great articles, unfortunately I am more software oriented designer. I uses software to match the look, the feel, the functionality and also the simplicity.
But, love to read your articles.
langkah untuk pemilihan design tools sepertinya terlewat… kalau dalam artikel ini Richard cenderung ke Photoshop, tetapi yang lain belum tentu, misal saya selama ini ketika membuat mockup website, tools yang saya pilih adalah Fireworks…
trims jurusnya. simple but sure..
btw ikutan wordcamp?? kliatannya mas richard wp lover nih..
Great great great article! Vote Richard Fang For President
cheers!
hahaha thanks bro!
@ aditya _ wp cuma tau pake nya aja, ga bisa nge-code nya XD
@ Sigit _ ya itu balik lagi ke kebiasaan masing2, yang penting ‘rapih’
@ mk2 _ thanks for da info!
wow, kebetulan sekali semester ini saya ada tugas desain website, hahaa, artikel disaat yang tepat nih om!
euuuh, boleh request? gmn klo dibuat from psd to html/css nya juga dan dibuat dalam adobe dreamweaver? saya udah coba ke http://www.nettuts.com tapi codingnya masih belum paham (maklum sy cuma bagian mockup photoshopnya) ^_^ dan yang lebih spesifik di bagian sitemap, itu bener2 sangat penting sekali om, jadi kayaknya perlu artikel khusus tentang itu, atau setidaknya work proccessnyalaaaah,
makasiiih banget ya jurusgrafis emang mantep, untung subscribe deh.
I Love Point number 1 !!
Less visual more in functionality
Great !
baru ingat, ada satu hal yang terlewat dan belum dibahas diatas
yaitu soal pemilihan font,
untuk desain web diusahakan menggunakan font-font standart (windows/mac)
memang sih pemilihan font jadi “terbatas”
ini untuk alasan aman, mudah terbaca, seo friendly, dan faktor lainnya
pilihan font bisa dilihat disini http://www.typechart.com/
memang sih sekarang dengan CSS3 semua font bisa terbaca di web
contoh: http://www.fontsquirrel.com/fontface
tapi tidak direkomendasikan untuk paragraf, font tidak standart hanya cocok untuk header/ judul konten
karena font bagus belum tentu mudah terbaca
bener banget Zam yang ini kelupaan hehehe
yup untuk body sebaiknya pake font standard, dan untuk headline baru boleh yang ga standard
Tapi kalo ada font custom yang lebih simpel, mudah dibaca n interesting why not ?
mungkin bukan persoalan mudah di baca atau engga, tapi custom font itu available ga di semua komputer (win dan mac)?
again, klo body text, sebaiknya font standard, selebihnya silakan pakai font custom atau yang ga standard, karena ada metode cufon dll
kalo information Architecture, Color, ama Typography masuk itungan gak ??
itu bukan persiapan lagi
itu sudah proses mendesain hehehe
om Richard Fang. itu yang buat sitemapping, gambarnya pake apa? mind mapping ya?
pake microsoft Visio bisa
Woh siap… saatnya menjadi web designer..
Bagus banget nih! Bookmark! ya sebagian besar gw dah terapin, tapi banyak juga yang miss… dan tips2nya sangat berguna… bisa jadi reminder…
Haha.. suka point nomer 7, sebagai pemula harus tau tentang manajemen tersebut agar selanjutnya menjadi kebiasaan dalam mendisain
Poin 5 dan 6 sepertinya opsi saja jadi tidak ada HARUS menggunakan itu.. tapi menggunakan itu sangat terbantu
Om Fang! ini dasyaatttt uyy!
Point no.4 important bgt tuh pas awal2 belajar desain web dpi nya 300! hahahaha. otomatis segede gaban jadinya, bingung pas mu convertnya
Greaatttt Om Fang!
nice jurus!!
bisa diulas secara detil juga mas, cara penggunaan “960grid” system..
salam kenal.
eh manarik banget. dicopy artikelnya boleh kan??..
copy paste tidak di anjurkan yah
pakai fasilitas link balik saja, thanks!
mas, saya penasaran sama judul yang diatas, maksud saya kok bisa judulnya menggunakan gambar? itu gimana caranya kalo di wordpress? judul berupa gambar itu di generate otomatis atau bikin manual ya?
terima kasih
hehehe itu di buat manual bro, itu kan jpeg
nice tips!!
baru mau mulai nigh belajar jd web designer..
satu yang saya masih bingung, sebenernya ukuran pixel brp sih yang bagus dalam buat website?
yang pasti lebar area untuk konten ga lebih dari 960 pixel
Terima kasih sudah mengingatkan kembali. Persoalan saya adalah soal manajemen layer. kadang keasyikan bikin layer sampai lupa untuk mengorganisasikannya
My clients would notice about this one
Nicely written Richard!
Persiapan design yang sedemikian ribet jadi terasa praktis berkat penjelasan mas Richard. Well done! Sangat bermanfaat nih.
thank gan list yang bermanfaat buat ane yang baru belajar
gila bro mantab bgt trick nya jarang2 ada orang yg mau berbagi ilmu seperti anda…
ini yg saya sebut anda sedang melakukan hal yg sangat besar bahkan lebih besar daripada sebuah karir…yaitu berbagi ilmu pengetahuan yg akan terus bermanfaat sampai kapanpun
hahahaha terkesan berlebihan maap saya sedang dibawah pengaruh substance hahahahahahaha
tapi jujur jurus grafis memang mantab
wah,ada info programernya ga ya,gw pengen bikin ni
manteb kang..
aku jg lagi belajar nerapin mind map tuk merancang web.
terimakasih wejangannya kang Fang
Ku masih di Sini…
Jauhhh Sekali…
Thanks dah
bang mau nanya,
gimana cara pemakaian 960 grid pada photoshop cs3 dan ilustrator cs3?
klo untuk desain website lebih baik pake photoshop ya atau fireworks , jangan pake illustrator hehehe
cara pakenya, download aja dari http://www.960.gs nanti di file nya ada grid nya kok, tinggal ngikutin aja
punya plugin adobe illustrator gak bang…buat ngatur free transform titik anchor
wah ga pernah pake plugin2an di illustrator
oiya..gmn caranya biar gambar tidak pecah di web, disavenya pakai apa: GIV, JPEG, PNG, SWF, resolusinya berapa?
untuk format jpeg/gif/png itu tergantung kebutuhan
yang penting kalau desain website, resolusinya harus 72dpi
saya kira *png yang paling optimal. Dari masing2 extensi diatas memiliki kelebihan dan kekurangan.
*png memang tetap mempertahankan kualitas apa adanya, tapi begitu juga dengan size…lumayan berat.
Saya suka karena mendukung transparansi. (selain gif)
*jpg agak buruk, kecuali disimpan dalam optomasi maksimum…meski begitu sizenya juga maksimum. Meski masih dibawah *png, tapi kualitasnya lebih buruk dari *png.
*gif yang memiliki file yang paling ringan. Tapi kualitas yang tidak terlalu baik. Hanya satu, jangan gunakan mode transparant pada *gif.
Cmiiw.
benar sekali
cuma mo nambahin za ne mas,,
lo d css ndri dh ada codenya, kita tinggal download tu code trus kita pake, d cini http://www.spry-soft.com/grids/
Sangat bagus yah artikel2 kamu disini.
Entry yg menarik. info nya tepat.
btw, aku designer dari Kuala Lumpur.
sudah di bookmark website nya. kerenn!
hey salam kenal!
thank you!
wah okke okke…
pantesan kalo buat website (buat utgas) saya ga teratur
Saya tidak begitu mengerti maksudnya harus 72 dpi. Setahu saya resolusi hanya berpengaruh jika dicetak. Untuk di monitor resolusi tidak jadi masalah berapa pun. Jadi, untuk mendesain web yang penting kita menggunakan ukuran pixel tidak cm atau inci.
Ada referensi bagus tentang resolusi dalam desain untuk web/layar.
http://www.webdesignerdepot.com/2010/02/the-myth-of-dpi/
yap ternyata ga efek ya, dpi nya mau berapa juga, tapi karena sudah kebiasaan mending stay di 72 dpi dan pixel hehehe
wah artikel yang sangat berguna..
nice info…
wah jujur ini postingan nih bermanfaat abis.. thanks share.. bagus buat newbie di design seperti saya…
izin bookmark
kalau cara bikin website jurus grafis gmn tuh..saya terkesan sekali dengan website anda ..seperti website luar
.. thx sharingg nya. 
thank you, boleh tutorial blog memang lagi di rencanakan nih
oke dtunggu ..
Mas Fang saya pemula banget neh di dunia web developer… klo photoshopnya sih ya dah lumayan lah… nah jadi kasih tutorial dariiiiii awal sampeeee akhir.. tentang membuat sebuah web dariiii pembuatan sampeeeee web kita OnLine(pengin banget buat web tapi…..ada daya…)
Ditunggu ya mas Fang (eh bener gak sih saya manggilnya?)
From Brebeszzzz Jateng
wah gue juga bukan developer hehehe tapi ke depannya nanti di usahakan ada tutorial web desain dari awal sampe live
Beneran ya.. Aye tunggu neeeh Om Fang tutorialnya !! makasih Om..
standing ovation to mr. fang! tengkiu
hi mas fang. tulisan dan websitenya interesting banget, rapi dan teratur jadi enak ngebacanya. sepertinya konsep website ini mirip sama abduze*do ya mas ?. hehe
saya mau nanya nih mas,
- mendesign website dan blog apakah menggunakan teknik yang sama?
- web developer itu apa sama dengan graphic designer?
maap ya mas banyak nanya. terimakasih
Aku masih baru dalam bidang IT, pingin banget bisa buat desain2 bagus sperti ini. Adakah aplikasi khusus slain photoshop???
ajarin aku dunk..
kirimin aplikasinya diemail ku, makasih ^_^
wah, saya sering lupa langkah nomor 2….tulisan yang menarik. Btw, untuk konversi desain dari photoshop ke html pakai software apa yak..?
kak richardddd,, nyiptain grid gmn yaah? biasa tarik sendiri dr photoshop.. haha..
help yaaaa
[...] Source : jurusgrafis.com [...]
tentang patokan 960 itu…bagaimana jika dibuat lebih pintar lagi dengan patokan persen (%) atau menerapkan fluid-width, mungkin itu terasa lebih nyaman u/ resolusi layar yg terbesar saat ini.
Sayangnya, cara ini sangat banyak kekurangannya, terlebih pada peletakan gambar
wah sangat bermanfaat artikelnya, saya jadi tahu standard2 yang ada, trmksh Richard Fang
Nice article bro… saya seorang programmer web, pengen uji coba design menggunakan grid system… mohon dibantu sedikit tutorial / artikel cara penerapan grid system dan baseline nya ke css dong.. apakah bisa dengan menggunakan framework seperti blueprint atau gimana.. soalnya masih rada2 bingung, baseline yang cocok, font size yang proporsional, lebar grid tiap kolom yang cocok untuk mendesign satu website yang enak dipandang… thanx bro.. Nice sharing
klo css setau saya udah ada code nya langsung kan? jadi tinggal di atur aja besar kolom2 nya