Top Menu

Dapatkan buku The Power of Photoshop. Disertai bonus video tutorial. Harga: Rp 78.800 Rp 54.500

Panduan Mudah Desain Web dengan 960gs –Bag 1

Beberapa hari ini, saya mulai mencoba belajar pemrograman web HTML dan CSS. Saya juga mulai belajar menggunakan framework populer 960gs. Ternyata framework ini sangat mudah digunakan. Artikel ini akan membahas konsep dan cara penggunaan 960gs secara praktis.

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.

Panduan Mudah Desain Web dengan 960gs --Bag 1
Layout pertama
Panduan Mudah Desain Web dengan 960gs --Bag 1
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.

Panduan Mudah Desain Web dengan 960gs --Bag 1
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.

Panduan Mudah Desain Web dengan 960gs --Bag 1
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.

Panduan Mudah Desain Web dengan 960gs --Bag 1
Grid dalam interface Windows.
Panduan Mudah Desain Web dengan 960gs --Bag 1
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.

Panduan Mudah Desain Web dengan 960gs --Bag 1
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.

Panduan Mudah Desain Web dengan 960gs --Bag 1

Selanjutnya, Anda tinggal mengisi elemen desain dalam tempat yang sesuai. Desaindigital sendiri pernah menulis beberapa tutorial mendesain web dengan framework 960gs.

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>

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>

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>

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>

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 HTML/CSS

Referensi

,

6 Responses to Panduan Mudah Desain Web dengan 960gs –Bag 1

  1. Agung Wiseso 23 May 2012 at 11:21 pm #

    nunggu bagian ke 2 dan seterusnya.. :D
    ini hanya digunakan untuk penempatan kolom2 saja ya mas frameworknya?

    • Jeprie 25 May 2012 at 8:58 am #

      Framework digunakan untuk penempatan kolom. Baris diatur dengan properti line-height.

  2. hvlind 8 June 2012 at 3:33 pm #

    wihh mantap tutorialnya bang
    jadi makin gampang dan cepet bikin layout web nya :)

  3. Jaka 11 June 2012 at 1:18 pm #

    Sudah mulai mendalami koding mas jeprie? Sering cari tutorial/buku dimana?

    • Jeprie 12 June 2012 at 11:14 pm #

      net.tutsplus.com, webdesign.tutsplus.com, dan lynda.com

  4. Bimakuru 20 November 2013 at 1:15 pm #

    klo mengatur posisi align top didalam grid gimana ya mas ?

    thx :)

Tinggalkan komentar Anda.