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)
aroelmind menyukai artikel ini…,
^_^
jurus grafis bikin generasi muda tambah pinter,,hehehehe…
dr yg ga tau apa2 skg jd lbh tau,,,,thx
[...] Apakah desainer web harus bisa coding? Tidak selalu! Tetapi harus ‘mengerti’bagaimana website itu nanti akan di coding. Yang artinya, semua elemen desain yang kita buat di Photoshop harus code-able. Coba intip sedikit tips tentang persiapan mendesain website. [...]
tanks for richard fang.. sudah lama sekali saya tidak mengunjungi website anda ..dan sedikit terkejut melihat perubahan photo di profil anda : ) ..saya doakan semoga selalu sukses di setiap order..
thanks bgt untuk artikelnya
benar2 newbie untuk masalah desain
haha baru tau klo untuk web cukup 72 dpi saja
soalny kemarin itu bikin untuk web semua imageny 300 dpi ><
mantap nih postingan …
numpang share untuk anakku
bagus2.. saya pemula nih.. doain biar sukses ya, sering2 posting tentang web ya.
maaf aku masih bingung buat web design, kug lewat fotoshop?trus untuk code program nya gmn?
Sy juga bingung,,, Untuk Convert PSD to HTML and CSS Gimana ?
ya harus dicoding gan ..
nah om richard gw mau nayan nih, kalo kita design mobile web pake 960 grid, yang misalnya ukuran lebar layarnya 320 px, biar fix di layar hpnya,maksudnya g usah scoll kiri kanan (lebar), designnya pakai semua grid (grid 1 sampe 12 or 16 or 24)? atau cuman grid 1 -8 saja (berhubung grid 1- 8 kalo digabung jadi 320 px)??
mantap gan..buat nambah pengetahuan
wehehehe…slicing biasanya masih sama designernya sendiri (di luar coding), tapi it’s ok, slicing jg teknis koq, udah di luar desain
Thank’s infonya bro…
Gak perlu jauh2 belajarnya,di web ini sudah tersedia semua
yoman.. di tunggu info2 gokil lainnya
Semua Tulisan Yang ada di jurusgrafis.com sangat menginspirasi …khususnya bagi kita yang ingin mendalami tentang mendesain website..terimakasih untuk tulisannya. two thumbs..for You om Richard Fang..teruslah berkarya..
Selalu “nyontek” kesini dulu setiap mau design website ^_^
kalau mendesainnya langsung pakai CSS bagai mana karena kalau pakai photoshop nanti hasilnya image semua jadi webnya akan berat
Matur tengkiyu buat artikel-nya, bagus bgt! jd nambah lg nih pengetahuan tentang desain web interface..
wah makasih mas infonya…
jadi sedikit terinspirasi nih… soalnya saya lagi belajar web desain tapi bingung harus mulai dari mana..
sulit nih. bang,udah berkali kali nyoba tapi gagal melulu
hai , kak.. aku suka banget nihh info info di sini.. tapi aku bingung cara mbuat blog yang bagus itu cara caranya gimana..? >.<
mantab gan, terima kasih sharingnhya.
Wah makasih banget masbro
Sekarang tinggal diperdalam lagi…
Kalau perlu share lagi yah basicnya
Mantap! Terima kasih sharingnya… Pas banget, lagi mau design website.
Jurus grafis luar biasa
sangat bermanfaat gan..
ane ijin subscribe dan fwd ke blog ane…
wew… semangkin daripada mantap.
salams super… kagak salah dah ane subscribe artikel2 di web ini
[...] sumber : http://jurusgrafis.com/artikel/langkah-persiapan-mendesain-website/ [...]
baru nimbrung nih , baru blajar juga sih .. siiip
kalau ndesain web pakai potoshop …. . terus masalah programnya dimasukin di bagian mana
untuk pemrograman nya bisa menggunakan Dreamweaver atau Notepad++ tapi saat ini Jurus Grafis hanya fokus di bagian Interface Design saja
[...] Apakah desainer web harus bisa coding? Tidak selalu! Tetapi harus ‘mengerti’ bagaimana website itu nanti akan di coding. Yang artinya, semua elemen desain yang kita buat di Photoshop harus code-able. Coba intip sedikit tips tentang persiapan mendesain website. [...]
[...] Sumber : jurusgrafis [...]
pengen bisa mendesain website
Mantap gan…. tks jurus ampuhnya. semoga lebih banyak untuk sharing bersama.
terima kasih gan,ini sangat bermamfaat untuk emula seperti saya