960 Grid System – Solusi PSD to HTML

Bagi para web developer, mungkin 960 gs bukan menjadi barang asing lagi.
Permintaan terhadap web site interface dengan tampilan yang memukau kian tinggi, terlebih setelah tren web 2.0 dan HTML5. Proses design awal tampilan pun diinginkan sebagus mungkin. Hal tersebut pun masih sulit diwujudkan dengan WYSIWYG software yang biasa digunakan. Di sisi lain, para pengembang grafis yang sudah akrab luar biasa dengan software-software pengolah grafis seperti Photoshop atau Gimp, menginginkan design web nantinya sesuai dengan apa yang telah mereka design dengan detil di media tersebut (Photoshop, Gimp, dll).

Latar belakang tersebut memicu timbulnya layanan-layanan berbayar yang mengkonversi design Photoshop menjadi HTML (bisa di-google “PSD to HTML”). Dengan menggunakan layanan berbayar ini, para business owner dapat mempekerjakan seorang designer grafis untuk mendesign web interface sesuai keinginan, tentunya melalui proses panjang revisi-improvisasi, lalu menggunakan layanan tersebut untuk mewujudkan design PSD menjadi HTML (dan CSS). Pihak ketiga tersebut kemudian mengkonversi design tersebut menjadi accessible web page, tentunya dengan biaya yang telah disepakati dan cenderung tidak murah.

Tantangan muncul bagi pengembang dengan skala menengah kebawah yang tersandung anggaran sedangkan tuntutan untuk mengembangkan interface yang sesuai dengan detil design yang telah di-draft di Photoshop pun kian tinggi. Hal tersebut dapat dilakukan melalui beberapa cara, yang biasa dilakukan adalah dengan manipulasi CSS. Sampai di titik ini, kompetensi penguasaan CSS harus cukup untuk mengakomodasi kebutuhan tersebut.

960 Grid System (960gs) merupakan sebuah framework CSS yang memfasilitasi konversi design web dari PSD menjadi HTML + CSS. Dengan kompetensi dasar dalam CSS, pengembang dapat membuat design web interface yang apple to apple dengan design yang telah dibuat di software pengolah citra ternama (Photoshop, Gimp, dan beberapa perangkat lain sudah didukung oleh framework ini).

Proses penggunaan pun dinilai relatif mudah. pengembang dapat memilih jenis kolom yang diinginkan. Tersedia 12, 16, dan 24 kolom yang dapat disesuaikan dengan detil design photoshop itu sendiri. Setelah menentukan template kolom, pengembang bisa memulai membuat design berdasarkan guide kolom-kolom yang telah disediakan. Setelah selesai, bagian-bagian design tersebut akan disimpan secara terpisah (sliced) yang nantinya akan dipanggil kembali menggunakan metode dasar CSS div tag.

Dengan menggunakan framework ini, pengembang bisa bebas membuat design awal di berbagai perangkat grafis, dan kemudian memindahkannya ke dalam wujud HTML dan CSS dengan mudah. Untuk framework 960gs sendiri dapat diunduh disini. Diharapkan pengembangan antarmuka web, khususnya produksi lokal, dapat bersaing dengan pengembang luar.

Framework 960gs ini sudah cukup terkenal dan banyak digunakan para pengembang professional. Beberapa contoh website yang menggunakan framework ini dapat dilihat di website 960.gs. Tutorial-tutorial lengkap langkah demi langkah pun sudah banyak yang menyediakannya di situs-situs UGC (User-Generated Content) seperti youtube.