Mudah Desain Web dengan 960gs

Penjelasan 960gs

960 grid system (disingkat 960gs) dibuat oleh Nathan Smith untuk memudahkan ia menyusun layout halaman web. 960 gs terdiri atas sekumpulan file css siap pakai. kode css yang di gunakan sudah teruji dan dapat di gunakan lintas browser tanpa masalah

Pentingnya Penggunaan Grid Dalam Desain

Grid memungkinkan desain yang logis, masuk akal, dan mudah dipahami. Penggunaan grid juga mempermudah penyampaian alur informasi dalam desain. Mari kita bandingkan dua layout berikut.

Layout pertama

Layout kedua 

Layout pertama sangat teratur sementara yang kedua membingungkan. Dalam layout pertama, gerakan mata sangat mudah. Kita dapat dengan segera menemukan area mana yang perlu didahulukan dan mana yang bisa ditinggalkan.

Pergerakan mata di layout pertama 

Saat ini penggunaan grid dalam desain web sudah demikian populer sehingga bisa dikatakan sebagai standar umum para desainer professional. Beberapa desain sangat jelas menggunakan format grid semisal dribbble. Desain yang terkesan tanpa grid pun sesungguhnya tidak mungkin lepas dari grid.

Dribbble jelas sekali menggunakan layout grid

Sesungguhnya, konsep desain grid bukanlah hal baru dan sudah umum digunakan dalam berbagai area. Mulai dari koran hingga interface. Mungkin Anda familiar dengan tampilan grid di bawah.

Grid dalam interface Windows. 

Interface software gambar. 

Konsep 960gs

Konsep 960gs adalah dengan membagi area desain selebar 960 px ke dalam beberapa kolom. Angka 960 dipilih karena dapat dibagi dengan mudah sehingga menjadi 2 kolom, 3 kolom, 4 kolom, hingga 24 kolom.

Saat ini, framework 960px dibagi ke dalam 12, 16, dan 24 kolom. Di bawah adalah perbandingan yang diperoleh dalam 12 kolom.

Pembagian 12 kolom di 960gs.

Template Photoshop 960gs

Di dalam file zip yang tersedia, Anda akan menemukan template PSD yang telah terisi oleh kolom-kolom dalam bentuk Guide. Pastikan Anda mengunci guide dengan cara klik View > Lock Guide.

Pengkodean Dengan 960gs

Untuk mempermudah, kita akan mempelajari proses pengkodean dalam bentuk tutorial.

Langkah 1: Menyiapkan file CSS

Ada banyak file di dalam paket zip 960. Untuk bisa menggunakan kolom 960gs, yang Anda butuhkan hanyalah file 960_12_col.css. Simpan file ini ke dalam folder css. Di dalam file html utama, tambahkan link ke file ini.

1	<link rel="stylesheet" href="css/960_12_col.css">

Langkah 2: Menyimpan Area Yang Akan Dibagi

Anda perlu menyimpan area yang ingin dibagi ke dalam class container_12 untuk 12 kolom.

1 2 3

<div id="wrap" class="container_12"> <!-- Kode harus berada di dalam class container_12 --> </div>

Langkah 3: Tinggal Menggunakan Nama

Proses selanjutnya sangat mudah. Anda cukup memberikan nama class yang sesuai dengan lebar kolom. Misalnya, untuk membuat 9 kolom dan 3 kolom Anda cukup menambahkan class grid_9 dan grid_3.

1 2 3 4 5 6 7

<div class="grid_9"> <img src="img/9col.jpg" alt="9 Kolom" /> </div>   <div class="grid_3"> <img src="img/3col.jpg" alt="3 Kolom" /> </div>

Demo

 

Dengan cara yang sama, kita bisa dengan mudah membuat layout tiga kolom seperti yang bisa ditemukan dalam situs portfolio. Jumlah kolom yang digunakan haruslah 12, misalnya grid_3 + grid_3 + grid_3 atau grid_2 + grid_4 + grid_6.

1 2 3 4 5 6 7 8 9 10 11

<div class="grid_4"> <img src="img/4col.jpg" alt="4 Kolom" /> </div>   <div class="grid_4"> <img src="img/4col.jpg" alt="4 Kolom" /> </div>   <div class="grid_4"> <img src="img/4col.jpg" alt="4 Kolom" /> </div>

Demo

Langkah 4: Menggeser Kolom

Anda juga bisa menggeser posisi sejumlah kolom tertentu dengan menambah class push_X dan pull_X. Class push_X akan menggeser ke kanan sejauh X kolom dan sebaliknya untuk pull_X.
Kode pertama akan menggeser kotak dari kolom 1 dan 3 menjadi ada di kolom 2 dan 3. Kode kedua akan menggeser kotak dari kolom 3 dan 4 ke kolom 2 dan 3.

1 2 3 4 5 6 7

<div class="grid_2 push_1"> <img src="img/2col.jpg" alt="2 Kolom" /> </div>   <div class="grid_2"> <img src="img/2col.jpg" alt="2 Kolom" /> </div>

Demo Push, Demo Pull

Langkah 5: Mengosongkan Kolom

Sejauh ini, kita telah mengisi kedua belas kolom yang tersedia. Bagaimana jika kita ingin mengosongkan kolom tertentu? Anda bisa menggunakan class prefix_X dan suffix_X. Class prefix_X untuk bagian belakang sementara suffix_X untuk bagian depan.
Kode pertama akan menggeser kotak 3 kolom, menyisakan 2 kolom kosong di belakang dan 7 kolom kosong di depan. Kode kedua akan menggeser kotak 4 kolom, menyisakan 2 kolom di belakangnya dan menggeser kotak 4 kolom dengan 2 kolom kosong di depan dan 1 di belakang.
Perhatikan bahwa jumlah kolom kosong dan terisi adalah 12, prefix_2 + grid_3 + suffix_7.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<div class="baris"> <div class="prefix_2 grid_3 suffik_7"> <img src="img/3col.jpg" alt="3 Kolom" /> </div> </div>   <div class="clear"></div>   <div class="baris"> <div class="prefix_2 grid_3"> <img src="img/3col.jpg" alt="3 Kolom" /> </div> <div class="prefix_2 grid_4 suffix_1"> <img src="img/4col.jpg" alt="4 Kolom" /> </div> </div>

Demo

Langkah 6: Membuat Child Kolom

Framework ini ternyata cukup canggih untuk membuat child kolom. Dalam kolom child, kita harus menandai kolom awal dengan alpha dan kolom akhir dengan omega.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

<div class="grid_6"> <img src="img/6cola.jpg" alt="6 Kolom Tinggi" /> </div>   <div class="grid_6"> <div class="grid_3 alpha"> <img src="img/3col.jpg" alt="3 Kolom" /> </div>   <div class="grid_3 omega"> <img src="img/3col.jpg" alt="3 Kolom" /> </div>   <div class="clear"></div>   <div class="grid_2 alpha"> <img src="img/2col.jpg" alt="2 Kolom" /> </div>   <div class="grid_1"> <img src="img/1col.jpg" alt="1 Kolom" /> </div>   <div class="grid_3 omega"> <img src="img/3col.jpg" alt="3 Kolom" /> </div> </div>

Demo

Menggeser Elemen Untuk Perbaikan Tampilan

Di bagian pertama, kita telah melihat keberadaan class dengan nama push_X dan pull_X. Dalam prakteknya, kedua class ini berguna dalam mengubah tampilan elemen tanpa mengubah posisi markup.

Demo

Lihat contoh di atas. Misalnya Anda ingin menyimpan logo situs di tengah dan sebelumnya menambahkan beberapa paragraf. Dalam markup html, mungkin alurnya adalah menempatkan paragraf baru kemudian logo. Cara ini tidak tepat bagi search engine atau pengunjung dengan browser terbatas karena dengan begitu paragraf ditempatkan lebih penting daripada logo. Dengan class push_X dan pull_X, kita bisa mengubah posisi elemen tanpa perlu menggeser alur markup.

Penggunaan Class clear

960gs membuat kolom-kolom dengan cara mengubah element menjadi float (melayang). Dalam kondisi float, kita menarik elemen itu dari alur dokumen dan menarik semua elemen lain ke atas.

Demo

Perhatikan layout di atas. Artikel 4 otomatis berada di sebelah artikel 1 karena menyesuaikan dengan sisa area kosong yang diperolehnya. Bagaimana jika Anda ingin menyimpannya di baris baru, tepat di bawah artikel 1?
Anda dapat menambahkan div kosong dengan class clear untuk mengosongkan div yang sebelumnya dalam kondisi float.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

<div class="grid_4"> <h3>1. Judul Artikel</h3> <p>Lorem ipsum dolor sit amet.</p> </div>   <div class="grid_4"> <h3>2. Judul Artikel</h3> <p>Quisque accumsan tristique tristique.</p> </div>   <div class="grid_4"> <h3>3. Judul Artikel</h3> <p>Maecenas consequat pellentesque sem.</p> </div>   <div class="clear"></div>   <div class="grid_4"> <h3>4. Judul Artikel</h3> <p>Donec at orci nisi.</p> </div>   <div class="grid_4"> <h3>5. Judul Artikel</h3> <p>Donec at orci nisi.</p> </div>   <div class="grid_4"> <h3>6. Judul Artikel</h3> <p>Donec at orci nisi.</p> </div>

Demo

Kesimpulan

Sistem grid 960.gs memberi kita cara mudah dalam mendesain web secara terstruktur dan rapi. Cukup saja dengan teori. Di artikel berikutnya, saya akan memperlihatkan cara mendesain sebuah situs portfolio menggunakan sistem grid 960.


Sumber : http://desaindigital.com