Wireframe/sketsa pada saat mendesain website sangat di perlukan supaya kita tidak bekerja 2 kali di komputer. Dan juga penting untuk menentukan gambaran awal desain website yang akan kita buat nantinya. Dengan dokumen gratisan ini, kamu bisa mulai mendesain menggunakan 960 Grid System pada kertas!
Permasalahan
Beberapa waktu lalu saya masih menggunakan kertas kosong untuk mulai mensketsa, tapi lama kelamaan karena di Photoshop saya bekerja dengan 960 Grid System, terkadang desain yang saya buat di sketsa tidak cocok (kelebihan/kekurangan ukurannya) jika di implementasikan kedalam sistem grid tersebut.
Solusi
Jadi saya berpikiran kenapa tidak di buat saja 960 Grid System pada kertas? Caranya yaitu dengan memindahkan grid di Photoshop lalu tinggal mencetaknya dengan printer! (kenapa tidak terpikir dari dulu!).
Ide ini muncul ketika saya melihat buku sketsa khusus developer/desainer IPhone. Pada buku sketsa tersebut ada gambar rangka IPhone. Ini tentu sangat memudahkan dalam mendesain, kita jadi tahu kira-kira akan terlihat seperti apa desain yang kita buat pada IPhone nanti.
Yes! Berhasil!
Saya sudah mencoba membuat sketsa menggunakan cara tersebut, dan hasilnya sungguh cepat, dan yang pasti ukuran perbandingan nya sudah pasti sama jika nanti saya memindahkan sketsa tersebut ke Photoshop.
Jadi, kalau kamu sering mendesain website atau ingin belajar mendesain website, silakan gunakan sketsa grid ini. 
Bisa di unduh pada tombol di akhir posting, tersedia dalam grid 12 kolom dan 16 kolom (55Kb). Tinggal buka dokumen ini di Photoshop, print di kertas A4 dan mulailah berimajinasi!
Info: Ternyata sudah ada yang membuat buku sketsa khusus desain web, hanya tidak ada gridnya.
Jangan sampai ketinggalan gratisan berguna seperti ini, ayo berlangganan dengan Email dan RSS. Temui juga Jurus Grafis di Facebook dan ikuti Twitter Jurus Grafis.
oh bgitu toh..langsung donlod ah..
hheehee..siapa tw berguna nanti..lagi belajar2 bikin web soalnya=)
kelupaan..hhe
mw tanya..apa bedanya website menggunakan grid yg 12 sama yang 16 kolom??selain dari jumlah kolomnya tentunya,, terus atas dasar apa si kita memilih grid yg 12 / 16 kalo mw membuat website, apa dari isi konten websitenya atau gmna?? mav banyak nanya..hhee..thanx
yup yang pasti kolom 16 lebih banyak, hasilnya?
lebih banyak kemungkinan layout di banding 12 kolom
tapi 12 kolom juga bisa juga sih 
yang paling ngebedain itu fungsi dasar nya..
klo mau ngedesain web dengan layout dasar 3 kolom, baiknya pake yang 12 kolom (biasanya blog / web corporate yang simple)
klo mau ngedesain web dengan layout dasar 4 kolom/lebih, baiknya pake yg 16 kolom (biasanya magazine / news style)
gue pribadi pake grid untuk ngebatesin konten (teks, graphic penting) yang ga boleh lewatin grid
selebih nya silakan menggila
coba ke website http://www.960.gs deh disitu ada contohnya, jadi lebih jelas
mohon ijin donlot bang. Soale baru belajar. terima kasih
Haha chard, this is insanely useful. kenapa gue juga baru kepikiran sekarang ya?
jika di aplikasikan ke CSS/XHTML tampilan dasarnya seperti ini
http://960.gs/demo.html
teman2 designer ada yang sering kelewatan, space antar kolom masing2 berjarak 20px adalah space yang wajib kosong, batas area grid (text/image, etc) tidak boleh menabrak itu
[...] This post was mentioned on Twitter by Nafi' Putrawan, Jurus Grafis. Jurus Grafis said: Panduan 960 gs pada kertas – Gratis! http://ow.ly/U6nT [...]
wih keren2,..
thanks inponya,..
kebetulan lagi mau buat KP
Mangtab !…hehe
aq download y…
Cerdas……
Thanks bang…. bkal berguna buat bkin tugas kuliah, he….
Waw…nice idea
,
knapa gak kepikiran di print dulu yah?
waw… mantaf nie.. abis dbahas di teman macet, dibahas disini juga. Mkasih..
maaf nge-replay sendiri. Mas zam bakal ngbahas juga nga’ nie?? Gue masih bingung implementasi coding Grid 960.
Skali lagi, maap. Thanks
Wah mau posting keduluan wkwkwk ga jadi
btw inovatif juga make 960 gs oplen, patut dicoba
wooohooo, a fresh start for web designing!! thanks om!
Nice bro
Thx to Share
Abis belajar buat desainnya cek this out (tadi baru nemu hehhehe) : 20+ Best Tutorials to Convert Psd to Html/CSS
http://dzineblog.com/2009/04/tutorials-psd-to-html.html
hmm, saya taunya cuma desain doank, mungkin dengan cara ginian, bisa lebih baik tampilannya kayanya, thanks sudah share ilmunya ya..
kalau ada yang membutuhkan tutorial tentang penggunaan 960 Grid System silahkan mengunjungi link-link berikut:
Tutorial Dasar Desain Website dengan Grid System
Tutorial Membangun Layout Website dengan Grid System
Tutorial Desain Website Format Kartunama dengan 960 Grid System
sedangkan kalau ingin mengetahui beberapa website Indonesia yang dibuat dengan 960 Grid System silahkan cek di sini:
Indonesian Web Design Showcase: 960 Grid System
Wah mantap chard pasti dibutuhkan nih apalagi kalo terdesak mendisain tapi lagi ga di depan desktop
Langsung sedot aja deh.
thank’s info nya bang…
Hwe3x… gue baru tau fang ada project baru
great, all the tuts!!….. ada niatan untuk bikin envato indonesia
??
ijin download juga yah, selama ini juga pake wireframe digital trus…
bdw yg 24column nya ga ada?
numpang sedot + dipelajari
sedoott..buat bkin mockup klo ikutan kontes..hehe