#1: Plentong

Plentong (Dhimas Ronggobramantyo) adalah desainer web lokal yang tinggal di Yogyakarta dan menjadi member ThemeForest sejak April 2009. Sampai saat ini, Plentong telah men-submit 24 item karya di ThemeForest dan membukukan penjualan sejumlah 1783 dengan total nilai penjualan antara $10.000 s.d. $50.000. Dengan hasil penjualan tersebut, Plentong termasuk salah satu top author online marketplace ThemeForest (peringkat 35).  Salah satu portfolio-nya yang membukukan penjualan paling tinggi adalah Clean Blue and Black Mac Style Software Template (price: $17, sales: 158 sales). Porfolio item yang telah di-submit Plentong di ThemeForest dapat dilihat pada gambar-gambar berikut:

#2: Indonez

Indonez (note: saya tidak memperoleh data nama aslinya) adalah desainer web lokal yang menawarkan desain web yang unik dan simple. Indonez menjadi member ThemeForest sejak November 2009 dan sampai saat ini, telah men-submit 13 item karya di ThemeForest dan membukukan penjualan sejumlah 1298 dengan total nilai penjualan antara $10.000 s.d. $50.000.  Dengan hasil penjualan tersebut, Indonez juga termasuk salah satu top author online markeplace ThemeForest (peringkat 36, satu tingkat di bawah Plentong). Salah satu portfolio-nya yang membukukan penjualan paling tinggi adalah Centita: Minimalis BusinessWordPress Theme (price: $27, sales: 399 sales). Porfolio item yang telah di-submit Indonez di ThemeForest dapat dilihat pada gambar-gambar berikut:

#3: Faiq Fardian

Faiq Fardian adalah desainer web lokal yang tinggal di Yogyakarta dan menjadi member ThemeForest sejak Oktober 2009. Sampai saat ini, Faiq Fardian telah men-submit 2 item karya di ThemeForest dan membukukan penjualan sejumlah 149 dengan total nilai penjualan antara $1000 s.d. $5000. Sejauh yang saya ketahui, Faiq Fardian memiliki Web Agency dengan nama Codepth.   Salah satu portfolio-nya yang membukukan penjualan paling tinggi adalah Liquid Gallery (harga: $27, sales: 107 sales). Porfolio item yang telah di-submit Faiq Fardian di ThemeForest dapat dilihat pada gambar-gambar berikut:

#4: IMediaPixel

Tidak banyak informasi yang saya peroleh mengenai identitas IMediaPixel selain menjadi member ThemeForest sejak Juli 2009. Sampai saat ini, IMediaPixel telah men-submit 2 item karya di ThemeForest dan membukukan penjualan sejumlah 133 dengan total nilai penjualan antara $1000 s.d. $5000. Salah satu portfolio-nya yang membukukan penjualan paling tinggi adalah Majalah (harga: $27, sales: 94 sales). Porfolio item yang telah di-submit IMEdiaPixel di ThemeForest dapat dilihat pada gambar-gambar berikut:

Bagaiamana dengan Anda?

Bagaimana dengan Anda? Apakah Anda tertarik untuk bergabung di online marketplace seperti ThemeForest atau lainnya (WooThemes)? Selain sebagai individu, sebenarnya online marketplace ini juga dapat dimanfaatkan oleh perusahaan yang bergerak di bidang desain web untuk menjual karya-karyanya. Kalau melihat daftar di atas, hampir semua desainer lokal yang terdaftar di online marketplace ThemeForest adalah member baru (terdaftar mulai tahun 2009) tetapi nilai penjualannya sudah bisa dikatakan lumayan. Tertarik?

Form

Dalam beberapa website, seringkali ketika pengunjung harus mengisi suatu form (Sign Up, Sign In atau tipe form lainnya), form tersebut akan dimunculkan pada halaman web yang lain atau melalui popup yang dimunculkan dalam jendela browser yang berbeda. Penggunaan modal windows dapat membuat form yang dimunculkan menyatu dengan halaman yang sebelumnya sedang diakses oleh pengguna. Salah satu contoh penggunaan modal windows dalam menampilkan form dapat dilihat pada Contact Form yang ada pada website SprocketHouse.

Gallery Preview

Jika sebuah website memiliki fitur gallery, seringkali galerry tersebut memakan ruang yang ada dalam sebuah halaman web karena beberapa item gallery langsung ditampilkan dalam halaman tersebut. Permasalah ini dapat diatasi dengan menggunakan modal windows untuk menampilkan item pertama yang ada dalam gallery kemudian pengguna dapat mengakses item gallery lainnya dengan menu interaktif yang tersedia. Seringkali modal windows juga digunakan untuk melihat preview dari sebuah item yang ada di gallery, baik yang berupa photo maupun theme seperti pada saat kita melihat preview sebuah theme di WordPress.

Feedback

Dalam sebuah interaksi, feedback menjadi salah satu komponen yang sangat penting. Feedback dapat menjadi sarana untuk memberitahukan pengguna mengenai status atau kondisi yang sedang terjadi (terkait dengan faktor observabilitas). Salah satu contoh penggunaan feedback dalam desain web adalah untuk menampilkan status mengenai proses upload/download yang sedang dilakukan oleh pengguna. Modal windows juga dapat digunakan untuk keperluan ini.

Untuk mengetahui lebih lanjut tentang penggunaan modal windows, dapat membaca artikel berikut ini:

1. Modal Windows In Modern Web Design
2. 33 Examples of Modal Windows in Web Design
3. Inspirational Modal Windows in web design

Bagaimana menurut pendapat Anda? Selain ketiga hal tersebut, modal windows tepat digunakan di mana saja ketika Anda mendesain web? Silahkan memberikan jawaban Anda melalui fasilitas komentar.

Apa itu Framework?

Framework dalam dunia software dapat diartikan sebagai sebuah abstraksi dimana di dalamnya terdapat kode-kode program yang menyediakan fungsi generik yang dapat dikustomisasi oleh pengguna framework sesuai dengan kebutuhannya. Penggunaan framework dapat memberikan berbagai keuntungan, misal:

• Dapat dilakukan standarisasi proses pengembangan atau development
• Developer dapat berkonsentrasi pada masalah-masalah bisnis yang spesifik
• Mencegah pekerjaan yang berulang (redundant)
• Meningkatkan produktivitas

Meski dapat memberikan keuntungan, penggunaan framework juga ada sisi negatifnya, yaitu:

• Para programmer mungkin akan menemukan batasan-batasan ketika merancang aplikasi menggunakan framework
• Kemungkinan akan menambah biaya development apabila framework yg digunakan kurang terdokumentasi dan kurang di support
• Performa dan kecepatan eksekusi

Sumber: City of Minnetrista Website

Framework Apa Saja yang Dibutuhkan Desainer Web?

XHTML/CSS Framework

XHTML/CSS Framework dapat digunakan oleh desainer web ketika membuat desain dan kemudian menterjemahkan hasil desain yang telah dibuat ke dalam code XHTML/CSS. Saat ini sudah tersedia berbagai macam XHTML/CSS Framework di antaranya 960 Grid System, Blueprint CSS, Malo, YUI Grids, YAML, Elastic, Emastic, snowdust, CSScaffold, Baseline, EZ-CSS, Unobtrusive CSS, atatonic, xCSS, The Golden Grid, dan lain-lain.

Contoh Website dengan 960 Grid System

Contoh bagaimana menggunakan XHTML/CSS Framework 960 Grid System:

<div class="container_12">
<!-- Header Section -->
<div id="header" class="grid_12">
...
</div>
<!-- End of Header Section -->

<!-- Main Section -->
<div id="delicious" class="grid_3">
...
</div>
<div id="content" class="grid_6">
...
</div>
<div id="gallery" class="grid_3">
...
</div>
<!-- End of Main Section -->

<!-- Footer Section -->
<div id="footer" class="grid_12">
...
</div>
<!-- End of Footer Section -->
</div>

JavaScript Framework

JavaScript Framework dapat digunakan oleh desainer web ketika akan menambahkan sisi interaktivitas dalam web. Beberapa sintaks/perintah JavaScript yang rumit dan panjang, dikemas sedemikian rupa sehingga menjadi lebih sederhana bagi desainer web. Salah satu Javascript Framework yang terkenal adalah jQuery, sedangkan yang lainnya ada MooTools, The Dojo Toolkit, Google Web Toolkit, script. aculo.us, Yahoo! UI Library, dan lain-lain.

Contoh Tutorial dengan jQuery

Contoh bagaimana menggunakan JavaScript Framework jQuery:

 $(document).ready(function(){
   $("a").toggle(function(){
     $(".slide").animate({ height: 'hide', opacity: 'hide' }, 'slow');
   },function(){
     $(".slide").animate({ height: 'show', opacity: 'show' }, 'fast');
   });
 });

 $(document).ready(function(){
   $("a").toggle(function(){
     $(".slide").hide('fast');
   },function(){
     $(".slide").show('slow');

   });
 });

PHP Framework

PHP Framework dapat digunakan oleh desainer web ketika mereka ‘terpaksa’ melakukan coding yang terkait dengan fungsionalitas web seperti akses ke basisdata, pengelolaan session, dan lain-lain. Framework ini juga menyederhanakan code yang harus ditulis oleh desainer web. Contoh PHP Framework adalah CodeIgniter, Zend Framework, Prado, CakePHP, Symfoni dan lain-lain.

Contoh Website dengan CodeIgniter

Contoh bagaimana menggunakan PHP Framework CodeIgniter:

<?php

class Book extends Controller {
    function Book()
    {
        parent::Controller();
    }

    function GetAll()
    {
        $this->load->model('book_model');
        $data['query'] = $this->book_model->book_getall();
        $this->load->view('book_view_new',$data);
    }

    function GetByID($id)
    {
        $this->load->model('book_model');
        $data['query'] = $this->book_model->book_getbyid($id);
        $this->load->view('book_view_new',$data);
    }
}
?>

Terlalu Banyak Pilihan?

Terlalu banyak pilihan ya? Sejauh pengalaman saya, untuk XHTML/CSS Framework saya lebih memilih 960 Grid System, untuk JavaScript Framework saya lebih memilih jQuery, dan untuk PHP Framework saya lebih memilih CodeIgniter. Bagaimana dengan pilihan Anda?

Bali Web Creator aka I Made Suastika

Bali Web Creator :http://www.baliwebcreator.com

Bagaimana awalnya Bli Made sampai memutuskan untuk memilih karir sebagai seorang Web designer?

Awal karir saya di bidang web design sebenarnya dimulai secara tidak sengaja, yaitu pada saat ada seorang teman menawarkan saya perkerjaan untuk bantu2 cropping image di perusahaan web developer nya (sebelumnya saya bekerja sebagai teknisi ATM) kira-kira tahun 2002. Disana awal mula saya mengenal photoshop dan kemudian berlanjut mengenal Dreamweaver. Setelah saya jalani beberapa lama ternyata pekerjaan ini membuat saya enjoy, sehingga saya memutuskan untuk focus di bidang web design.

Kalau saya perhatikan, banyak Web designer Indonesia maupun manca negara yang memilih bekerja sebagai seorang freelancer dibandingkan bekerja di perusahaan? Bagaimana pandangan Bli terhadap hal tersebut?

Klo menurut saya, seorang freelancer lebih memiliki kebebasan di
didalam berkreasi sehingga karya-karya yang dihasilkan betul-betul ide mereka tanpa ada intervensi dari atasan. Begitu pula dalam management waktu, mereka dapat memanage waktu mereka sesuai dengan keadaan mereka namun tetap mengikuti tenggat waktu yang diberikan oleh client.

Bagaimana proses kreatif Bli selama ini mulai dari membuat konsep sampai akhirnya menjadi sebuah web yang siap untuk dipublish/diserahkan ke klien?

Langkah2nya secara singkat yaitu saya mencari tahu apa keinginan client(baik dair segi design maupun system). Kemudian dilanjutkan dengan membuat draft design untuk dipilih oleh client. Lalu revisi-revisi sedikit di bagian design. Berikutnya adalah mengubah design menjadi file HTML/XHTML untuk dimasukan ke dalam system. Terakhir yaitu membangun system dan upload.

Dalam proses kreatif, inspirasinya biasanya dari mana dan style apa yang menjadi ciri khas Bli dalam mebuat desain web?

Inspirasi saya bisa dari mana saja namun kebanyakan dari web2 gallery seperti cssmania.com, thedesigninspiration.com, cssremix.com dsb. Untuk masalah style, tidak ada yang specific namun khusus untuk web pribadi saya, saya ingin memberikan suatu nuansa hijau (itung2 ikutan kampanye GO GREEN).

Tools apa sajakah yang biasanya Bli gunakan? Apakah ada tips khusus bagi pembaca yang masih bingung dalam memilih tools?

Untuk masalah tools, kayaknya sama dengan web designer kebanyakan yaitu Photoshop, Illustrator, Dreamweaver serta FLASH. Tips dari saya sih nggak ada, yang penting dalam berkreasi kita bisa menggunakan tools tersebut secara maksimal dan sesuai dengan keperluan.

Bagaimana pengalaman Bli dalam mendapatkan klien? Apakah ada tips khusus untuk pembaca VisualMagz?

Sejauh ini client saya mengetahui tentang saya dari search engine dan dari mulut ke mulut. Tips saya untuk mendapatkan client sih biasa aja yaitu maksimalkan hasil kerja kita dan sebarkan informasi tentang diri kita melalui fasilitas2 online yang ada seperti search engine, blogs, ataupun melalui web gallery. Klo ada dana lebih bisa juga dengan pasang iklan. He he he..

Siapa saja yang pernah menjadi klien Bli dan apa tantangan terbesar yang pernah Bli hadapi dalam mengerjakan projek? Bagaimana akhirnya mengatasinya?

Yang pernah menjadi client saya ada villa, travel, diving, café, property magazine, photography dll. Hampir semua adalah tantangan buat saya. Cara mengatasinya yaitu dengan tidak pernah berhenti untuk terus belajar.

Biasanya proses desain web terdiri dari 2 (dua) bagian yaitu membuat mockup dan mengkonversi mockup ke XHTML dan CSS? Kalau menurut Bli bagian mana yang paling menyita waktu dan membutuhkan usaha yang lebih?

Klo menurut saya ada 3 bagian dimana bagian yang terakhir adalah pembuatan systemnya. Dan bagian inilah yang paling banyak menyita waktu terutama untuk website dengan skala yang besar seperti portal dsb. Hal itu dikarenakan kita harus mempelajari terlebih dahulu system yg diinginkan oleh client kita kemudian menuangkannya ke dalam program. Klo bisa saya
ibaratkan seperti membuat alur cerita dalam sebuah film atau novel.

Biasanya desainer identik dengan Mac, kalau menurut Bli bagaimana?

Wah kalau saya sih nggak identik sama sekali dengan Mac…soalnya gak punya, habisnya kemahalan dan juga susah makenya. He he he…. Saya sudah terbiasa dengan PC biasa, yang penting ada photoshop dan dreamweaver nya.

Finally, apa pendapat Bli tentang VisualMagz?

Menurut saya website ini bagus dan informatif. Keep on moving…..

“Terimakasih kepada Bli I Made Suastika aka Bali Web Creator atas kesediaannya untuk di Interview. Semoga dapat memberi inspirasi bagi para web designer Indonesia lainnya. Salam”

Sebelum kita membahas tentang bagaimana penggunaan ilustrasi dalam web desain, Anda bisa membaca artikel-artikel berikut ini untuk mendapatkan gambaran mengenai contoh-contoh penggunaan ilustrasi dalam desain web.

• 30 Creative Examples of Illustrations in Web Design
• 40 Excellent Illustrations In Web Designs
• 50 Inspiring Abstract Illustrations in Web Design
• Illustration in Web Design: 30 Wonderful Examples
• Web Design: Illustration

Dimana Ilustrasi Sebaiknya Digunakan/Ditempatkan?

Poin pertama yang harus diperhatikan ketika akan menambahkan ilustrasi dalam desain web adalah di mana ilustrasi tersebut akan digunakan/ditempatkan. Best practices menunjukkan bahwa ilustrasi lebih banyak digunakan sebagai background, baik untuk background keseluruhan website (elemen body), maupun untuk bagian header maupun footer.  Penggunaan ilustrasi sebagai background dapat memberikan kesan layout website yang dibuat menjadi tidak terlihat kaku. Selain itu, ilustrasi pada background juga dapat memberikan kesan ‘indah/cantik’.

Contoh Penggunaan Ilustrasi sebagai Background untuk Layout

Seberapa Relevan Ilustrasi dengan Tema/Konten Website?

Poin kedua yang harus diperhatikan ketika akan menambahkan ilustrasi dalam desain web adalah seberapa jauh ilustrasi tersebut relevan dengan tema/konten website. Jangan sampai menggunakan ilustrasi yang tidak berkaitan dengan tema/konten website.

Seberapa Besar Pengunaan Ilustrasi Berdampak Pada Waktu Loading Website

Poin ketiga juga tidak kalah penting yaitu seberapa besar pengaruh penggunaan ilustrasi pada waktu loading website. Jangan sampai menggunakan ilustrasi yang sekedar memperindah saja. Bagaimanapun juga tetap harus memperhatikan apakah ilustrasi tersebut mempengaruhi waktu loading konten website atau tidak. Salah satu cara yang dapat digunakan adalah dengan menempatkan ilustrasi sebagai background dari elemen web (konten, header, dll) sehingga konten akan diload terlebih dahulu.

Contoh Penggunaan Ilustrasi untuk Background pada Elemen Header

So, bagaimana menurut Anda? Sebaiknya website Anda menggunakan ilustrasi atau tidak? Jika iya, lalu sebaiknya seperti apa? Mari kita diskusikan.

• Navigation Menus: Trends and Examples
• 50 Beautiful And User-Friendly Navigation Menus

Hasil akhirnya:

Langkah Langkah sebagai berikut:

Langkah #1. Pertama-tama buatlah sebuah bar dengan “Rectangle Tool”

Langkah #2. Kemudian pilih [Gradient] – [Linear] – atur 2 warna gradasinya.

Langkah #3. Buatlah 2 buah garis horisontal, masing-masing height :1pixel. Salah satu berwarna lebih terang dan lainnya berwarna lebih gelap. Letakan kedua garis tersebut di bagian bawah bar. Untuk menghemat waktu, copy-paste 2 garis tadi lalu letakkan pula diatas bar.

Langkah #4. Ketikkan menu item yang diinginkan

Langkah #5. Sekarang kita harus membuat pemisah antara setiap menu item. Langkahnya serupa dengan #3, yaitu membuat 2 garis, salah satu berwarna lebih terang dan lainnya berwarna lebih gelap, hanya saja kali ini dengan posisi vertikal, masing-masing width:1pixel.

Langkah #6. Kita akan mulai membuat efek mouse hover.
Buatlah bar, menyerupai langkah #1 dengan width yang menyesuaikan salah satu menu item.

Langkah #7. Kemudian pilih [Gradient] – [Linear] – atur 2 warna gradasinya. Catatan: warna lebih gelap dari bar langkah #1.

Langkah #8. Membuat efek shadow sebanyak 2 kali, langkahnya sbb: [Filter] – [Shadow & Glow] – [Inner Glow].

Begini hasil sementara:

Langkah #9. Sentuhan akhir adalah dengan memberi efek shadow yang diletakkan di bawah dan diatas menu bar.

Hasil akhirnya:

Sebuah design menu website sudah selesai!

Download file hasil akhir format .PNG Fireworks

ps: artikel selanjutnya akan dijelaskan tutorial mengubah desain menu ini menjadi css & xhtml

Bagi yang berbaik hati ingin mengkoding website kartunama ini silakan, tolong beritahu saya dan kita bisa bagikan gratis kepada para pembaca Jurus Grafis, mau sekalian di buat tutorial koding nya di blog kamu juga boleh. :) …

Mungkin Anda bertanya-tanya mengapa website menggunakan format kartunama? Seperti yang disampaikan oleh Richard di tutorialnya, sekarang ini website dengan format kartu nama sedang tren karena gaya visualnya yang biasanya minimalis dan to the point. Sehingga waktu loading yang di butuhkan lebih cepat di banding website portfolio biasa. So, selamat menikmati dan mencoba tutorial ini.

Langkah 1

Langkah pertama adalah mendownload template 960 Grid System dari situs resminya (http://960.gs/files/960_download.zip). 960 Grid System adalah CSS framework yang dikembangkan oleh Nathan Smith dan menggunakan lebar kolom 960 piksel. CSS framework ini memiliki 2 varian yaitu varian 12 kolom dengan lebar masing-masing kolom 60 piksel dan varian 16 kolom dengan lebar masing-masing kolom 40 piksel, dimana setiap kolomnya memiliki lebar 10 piksel.

Langkah 2

Setelah berhasil didownload, maka langkah berikutnya adalah memanggil 960 Grid System dari dokumen XHTML yang telah dibuat. Proses pemanggilan 960 Grid System dapat dilakukan dengan menambahkan tags berikut ini ke dalam bagian head dari dokumen XHTML*:

<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/text.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/960.css" />

* Catatan:
Nilai atribut href tergantung lokasi file 960 Grid System dan file dokumen XHTML yang telah dibuat.
Pemanggilan 960 Grid System juga dapat dilakukan melalui dokumen CSS dengan menggunakan perintah @import seperti berikut:

@import url(css/reset.css);
@import url(css/text.css);
@import url(css/960.css);

Langkah 3

Layout dapat dibuat dengan terlebih dahulu memanggil class selector CSS container dengan format container_XX di mana XX menyatakan varian yang dipakai. Pada tutorial kali ini, varian yang akan digunakan adalah 12 kolom (mengikuti desain mockup yang telah di buat).  Pada kasus website dengan format kartu nama, kita tidak akan menggunakan ke-12 kolom yang ada. Pada kasus ini, kita hanya akan menggunakan 6 kolom sebagai kontainer dari website.

Karena hanya 6 kolom yang digunakan, maka kita perlu ’menghilangkan’ kolom sisanya, baik di kiri maupun kanan (ingat, container yang kita gunakan adalah 12 kolom). Hal ini dapat dilakukan dengan menambahkan nilai prefix_XX (prefix_3) dan suffix_XX (suffix_3) pada atribut class dari grid_6. Selain itu, kita juga harus menghilangkan margin yang ada di samping kiri dan kanan dari grid_6. Untuk melakukan hal ini, kita tinggal menambahkan nilai alpha dan omega. Berikut ini adalah code XHTML untuk grid system.

<div class="container_12">
    <div class="grid_6 alpha omega prefix_3 suffix_3">
        …
    </div>
</div>

Langkah 4

Setelah selesai menentukan layout dengan menggunakan 960 Grid System, maka langkah selanjutnya adalah mengidentifikasi struktur dari website. Pada contoh kasus ini, struktur website akan saya bagi menjadi 3, yaitu header, main dan footer. Header akan digunakan untuk konten menu. Main digunakan untuk konten utama (about, works, dan contact). Footer digunakan untuk konten footer (copyright).

Berikut ini adalah code XHTML untuk struktur konten website (diletakkan di dalam div grid_6).

<div class="header">
   ...
</div>
<div class="main">>
   ...
</div>
<div class="footer">>
   ...
</div>

Langkah 5

Langkah selanjutnya adalah membuat dokumen XHTML dan CSS rule untuk bagian header yang digunakan untuk konten menu. Untuk membuat konten menu, saya menggunakan unordered list. Unordered list ini akan diletakkan di dalam layer menu (div id=”menu”). Code XHTML-nya adalah sebagai berikut.

<div id="menu">
   <ul>
      <li><a href="index.html">About</a></li>
      <li><a href="works.html">Works</a></li>
      <li><a href="contact.html">Contact</a></li>
   </ul>
</div>

CSS rule yang dibuat untuk mengatur header ada beberapa bagian. Bagian pertama digunakan untuk mengatur area header yang diatur dengan menggunakan class selector header. CSS property yang digunakan adalah untuk mengatur margin, lebar, tinggi dan background dari bagian header. Code CSS rulenya adalah sebagai berkut.

.header {
    margin-top: 145px;
    background: url(../images/header-card.png) no-repeat;
    width: 500px;
    height: 60px;
}

Setelah membuat CSS rule untuk bagian header, maka langkah selanjutnya adalah membuat CSS rule untuk konten menu. Yang pertama adalah membuat CSS rule untuk layer menu.

#menu {
   width: 460px;
   margin-left: 20px;
   padding: 0px;
}

Kemudian dilanjutkan dengan membuat CSS rule untuk mengatur menu yang dibuat dengan unordered list. Agar list item yang ada penyajiannya tidak menurun (inline) seperti list item biasa, maka digunakan CSS property float dengan nilai left. Selain itu juga harus di atur agar list item tidak ditampilkan dengan bullet standar, dengan menambahkan CSS property list-style-type dan dengan nilai none.

ul {
   margin: 0px;
   padding: 0px;
}
ul li  {
   float: left;
   width: 134px;
   height: 31px;
   list-style-type: none;
   margin: 22px 0 0 15px;
   text-align: center;
   font: bold italic 15px Georgia;
   background: url(../images/bg-menu.png) no-repeat;
   padding-top: 4px;
}

Konten menu digunakan sebagai hyperlink, maka perlu diatur juga bagaimana CSS rule untuk menunjukkan menu yang sedang aktif. Code CSS-nya adalah sebagai berikut.

ul li a {
   text-decoration: none;
   color: #fff;
}
ul li.aktif {
   background: url(../images/bg-menu-aktif.png) no-repeat;
}

Hasil langkah ini adalah sebagai berikut

Langkah 6

Setelah bagian header selesai, langkah selanjutnya adalah membuat dokumen XHTML dan CSS rule untuk bagian main. Bagian ini akan digunakan untuk konten utama (about, works, dan contact). Untuk konten about terdiri dari elemen image, heading dan paragraf. Code XHTML untuk konten about adalah sebagai berikut.

<div id="content">
   <img src="images/merapi-at-sunset.jpg" alt="Merapi at Sunset" />
   <h1>Halo Teman!</h1>
   <p>Nama saya <strong>Richard Fang</strong>, sangat menikmati proses rancang website, khusus nya dari sisi tampilan antar muka dan penggunaan.</p>
   <p>Tidak bisa hidup tanpa Gmail, Google Reader dan Twitter. Sering menghabiskan waktu mengarungi samudra informasi.</p>
</div>

Bagian konten works digunakan untuk menampikan portfolio yang berupa gambar dan navigasi. Code XHTML-nya adalah sebagai berikut.

<div id="content">
   <img src="images/merapi-at-sunset.jpg" alt="Merapi at Sunset" />
   <img src="images/merapi-at-sunset.jpg" alt="Merapi at Sunset" />
   <img src="images/merapi-at-sunset.jpg" alt="Merapi at Sunset" />
   <img src="images/merapi-at-sunset.jpg" alt="Merapi at Sunset" />
   <div id="nav">
      <img src="images/btn-prev-off.png" alt="Prev" />
      <img src="images/btn-next.png" alt="Next" />
   </div>
</div>

Bagian konten contact digunakan untuk menampikan formulir bagi pengunjung jika ingin mengirimkan pesan. Code XHTML-nya adalah sebagai berikut.

<div id="content">
   <h1>Kirim Pesan</h1>
   <form>
      <p><label for="name">Name</label>
         <input type="text" size="46" /></p>
      <p><label for="email">Email</label>
         <input type="text" size="46" /></p>
      <p><label for="message">Message</label>
         <textarea rows="5" cols="35"></textarea></p>
      <input type="submit" value="Send!" />
   </form>
</div>

CSS rule yang dibuat untuk mengatur bagian main ada beberapa bagian. Bagian pertama digunakan untuk mengatur area main yang diatur dengan menggunakan class selector main. CSS property yang digunakan adalah untuk mengatur padding, lebar, tinggi dan background dari bagian main. Code CSS rulenya adalah sebagai berikut.

.main {
   background: url(../images/bg_content.png) no-repeat;
   height: 330px;
   width: 500px;
   padding-top: 10px;
}

Bagian selanjutnya adalah CSS rule untuk mengatur bagian layer content. Code CSS rulenya adalah sebagai berikut.

#content {
   background: url(../images/bg-content.png) no-repeat;
   width: 426px;
   margin-left: 35px;
   padding: 10px 20px 20px 20px;
}

Selanjutnya adalah CSS rule yang digunakan untuk mengatur elemen dari dokumen XHTML yang ada dimasing-masing dokumen. Untuk dokumen about terdiri dari image, heading dan paragraf. Code CSS rulenya adalah sebagai berikut.

img {
   width: 150px;
   height: 200px;
   border: 4px solid #fff;
   float: left;
   margin-right : 10px;
   margin-bottom: 4px;
   margin-top: 4px;
}

h1 {
   font: bold 36px Geogia;
   color: #c13a3a;
}

p{
   font: normal 14px Geogia;
   color: #989898;
   padding-right: 20px;
   margin: 14px;
}

strong {
   color: #000;
}

Untuk dokumen works terdiri dari image (thumbnail) dan navigasi. Code CSS rulenya adalah sebagai berikut.

.thumb {
   border: none;
   margin: 0px;
   padding: 4px;
   float: left;
   width: 90px;
   height: 222px;
}

#nav {
   clear: both;
   width: 426px;
   padding-top: 10px;
}

.left {
   width: 15px;
   height: 25px;
   float: left;
   border: none;
}

.right {
   width: 15px;
   height: 25px;
   float: right;
   border: none;
   margin-right: 35px;
}

Untuk dokumen contact terdiri dari elemen label, input, dan text area. Code CSS rulenya adalah sebagai berikut.

label {
   float: left;
   width: 70px;
}

input, textarea {
   padding: 3px;
   border: 1px solid #989898;
}

.button {
   border: none;
   float: right;
   margin-right: 40px;
   font: bold 16px Geogia;
   color: #fff;
   width: 75px;
   height: 32px;
   background: url(../images/bg-button.png) no-repeat;
}

Hasil dari langkah ini adalah sebagai berikut.

Langkah 7

Langkah terakhir adalah membuat dokumen XHTML dan CSS rule untuk bagian footer. Code XHTML untuk konten footer adalah sebagai berikut.

<div>
   <p>&copy; 2009 Jurus Grafis. All Rights Reserved.</p>
</div>

CSS rulesnya adalah sebagai berikut.

.footer p {
   margin-top: 10px;
   text-align: center;
   font: 14px Geogia;
   color: #989898;
}

Hasil akhirnya adalah sebagai berikut

Preview hasil tutorial dapat Anda lihat dengan mengklik di sini, dan untuk mendownload filenya silahkan klik di sini.

Tulisan ini akan mencoba menyajikan daftar beberapa website di Indonesia yang sudah menggunakan 960 Grid System. Ide tulisan ini muncul ketika saya iseng-iseng melihat source HTML situs NavinoT yang baru saja berganti tampilan dari menu View Page Source-nya Firefox. Ketika saya tau bahwa situs NavinoT menggunakan CSS framework 960 Grid System, maka terbersit ide untuk membuat daftar website Indonesia yang sudah mengunakan CSS framework ini.

Proses membuat daftar ini ternyata tidak mudah. Selain dibantu oleh Google, saya mengunjungi website dari beberapa teman yang saya follow di Twitter lalu saya View Page Source-nya. Jika memang ternyata menggunakan 960 Grid System, maka saya capture menggunakan Addons Firefox ScreenGrab. Setelah melakukan hunting selama beberapa jam, hanya website ini yang bisa saya temukan (selain NavinoT dan Universitas Atma Jaya Yogyakarta, karena saya sudah mengetahui kalau kedua website ini menggunakan 960 Grid System).  Hal ini membuat saya bertanya-tanya apakah CSS Framework baik 960 Grid System, maupun yang lainnya seperti Blueprint CSS belum banyak digunakan oleh para web designer Indonesia. Mungkin ada pembaca yang bisa berbagi informasi untuk menjawab pertanyaan ini.

Universitas Atma Jaya Yogyakarta

NavinoT

DagDigDug

Muhammad Zamroni (+ Jengjeng Matriphe!)

Dari daftar di atas, kebanyakan memilih menggunakan format 960 Grid System yang 12 kolom. Yang menggunakan format 16 kolom hanya NavinoT .

Seperti yang sudah saya sampaikan di atas, saya mengalami kesulitan untuk membuat daftar ini. So mungkin jika ada pembaca yang bisa menambahkan daftar ini silahkan memberikan informasinya melalui fasilitas komentar.

Konsep skinning dalam desain web dapat diartikan sebagai cara untuk membuat sebuah web memiliki berbagai macam skin/dekorasi/theme yang dapat dipilih oleh webmaster/pengunjung sesuai dengan preferensinya masing-masing. Hal ini dapat dianalogikan dengan telepon genggam yang memiliki mesin yang sama tetapi dapat diganti-ganti casing/cover-nya sesuai dengan preferensi pengguna/pemilik. Konsep skinning dalam desain web dapat dilakukan dengan memisahkan antara konten (dokumen XHTML) dengan penyajiannya atau dekorasinya (dokumen CSS) (lihat Gambar di bawah). Pendekatan ini berbeda dengan konsep desain web sebelumnya yang menyertakan cara untuk mengatur suatu elemen HTML/XHTML disajikan secara langsung melalui atribut elemen tersebut. Pendekatan lama ini tentu saja tidak fleksibel dan merepotkan karena setiap kali kita ingin mengubah style dalam dokumen web, kita harus mengubahnya satu per satu.

CSS Zen Garden

Salah satu Website yang seringkali dijadikan contoh atau referensi ketika membahas konsep skinning dalam desain web adalah CSS Zen Garden.  Pada website ini, pengunjung dapat memilih sendiri skin/dekorasi/theme yang diinginkan sesuai preferensinya. Web designer juga dapat berpartisipasi dengan mengirimkan skin/dekorasi/theme hasil karya mereka. Pilihan skin/dekorasi/theme yang tersedia saat ini  sudah ada ratusan yang beberapa contohnya dapat dilihat pada gambar-gambar di bawah ini.

Manfaat Penggunaan Skinning

Konsep skinning dalam desain web memberikan berbagai manfaat, baik bagi web designer maupun pengunjung website. Bagi seorang web designer, skinning dapat meningkatkan produktifitas karena mereka dapat menggunakan dokumen CSS yang dijadikan skin sebagai template/framework untuk mengerjakan berbagai projek yang berbeda. Hal ini tentu saja akan mengurangi waktu pengembangan sebuah website, dan ujung-ujungnya projek yang dapat dikerjakan dapat menjadi lebih banyak.

Bagi pengunjung website, konsep skinning dapat membantu pengunjung merasa nyaman ketika mengunjungi suatu website karena mereka dapat memilih skin/dekorasi/theme yang sesuai dengan preferensi mereka. Jika pengunjung lebih suka website yang dikunjungi bernuansa alam, maka pengunjung dapat memilih skin/dekorasi/theme yang sesuai seperti gambar di bawah misalnya.

Manfaat ini tentu saja memiliki trade-off yaitu pihak pengelola website harus menyajikan banyak pilihan. Bagaimana dengan website Anda? Apakah sudah menyediakan fitur skinning bagi pengguna? Atau hanya masih sekedar fitur bagi Anda sebagai pengelola web? Jika belum, kira-kira menurut Anda worth it atau tidak menambahkan fitur ini bagi pengunjung?

VisualMagz Mockup dengan Grid System

Step 1
Langkah pertama adalah mendownload template 960 Grid System dari situs resminya (http://960.gs/files/960_download.zip). 960 Grid System adalah CSS framework yang dikembangkan oleh Nathan Smith dan menggunakan lebar kolom 960 piksel. CSS framework ini memiliki 2 varian yaitu varian 12 kolom dengan lebar masing-masing kolom 60 piksel dan varian 16 kolom dengan lebar masing-masing kolom 40 piksel, dimana setiap kolomnya memiliki lebar 10 piksel.

Step 2
Stelah berhasil didownload, maka langkah berikutnya adalah memanggil 960 Grid System dari dokumen XHTML yang telah dibuat. Proses pemanggilan 960 Grid System dapat dilakukan dengan menambahkan tags berikut ini ke dalam bagian head dari dokumen XHTML*:

<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/text.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/960.css" />

* Catatan:
Nilai atribut href tergantung lokasi file 960 Grid System dan file dokumen XHTML yang telah dibuat.

Pemanggilan 960 Grid System juga dapat dilakukan melalui dokumen CSS dengan menggunakan perintah @import seperti berikut:

@import url(css/reset.css);
@import url(css/text.css);
@import url(css/960.css);

Step 3
Layout dapat dibuat dengan terlebih dahulu memanggil class selector CSS container dengan format container_XX di mana XX menyatakan varian yang dipakai (container_12). Setelah itu kita tinggal memanggil class selector CSS grid dengan format grid_XX untuk membuat kolom-kolomnya. Jika ingin menghilangkan margin kiri dari suatu kolom, dapat dilakukan dengan menambahkan alpha (grid_XX alpha). Sedangkan untuk menghilangkan margin kanan dapat dilakukan dengan menambahkan omega (grid_XX omega). Untuk membuat layout sesuai dengan desain yang telah dihasilkan pada tutorial sebelumnya, maka kode/tags XHTML-nya adalah sebagai berikut:

<div class="container_12">
<!-- Header Section -->
<div id="header" class="grid_12">
...
</div>
<!-- End of Header Section -->

<!-- Main Section -->
<div id="delicious" class="grid_3">
...
</div>
<div id="content" class="grid_6">
...
</div>
<div id="gallery" class="grid_3">
...
</div>
<!-- End of Main Section -->

<!-- Footer Section -->
<div id="footer" class="grid_12">
...
</div>
<!-- End of Footer Section -->
</div>

Kode/tags di atas sudah menyertakan atribut id untuk setiap bagian layout yang nantinya akan diatur style-nya melalui kode CSS.

Step 4
Setelah layout terbentuk, maka langkah selanjutnya adalah menambahkan elemen yang dibutuhkan ke dalam bagian dokumen XHTML dan mengatur style-nya melalui CSS. Untuk bagian header, elemen yang ditambahkan adalah image logo Visualmagz. Berikut ini adalah kode XHTML dan CSS untuk bagian header:

XHTML

<img src="images/visualmagz-logo.png" alt="VISUALmagz: Your Creative Booster" />

CSS

#header {
margin-top: 20px;
margin-bottom: 20px;
border-bottom: 5px solid #cc9966;
}

Untuk bagian delicious (sidenotes), elemen yang ditambahkan adalah heading dan list untuk menampilkan item sidenotes. Berikut ini adalah kode XHTML dan CSS untuk bagian delicious:

XHTML

h2>Delicious</h2>
<ul>
<li><a href="#">Lorem Ipsum</a><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque dictum. Fuscerisus massa, posuere at</p></li>
<li><a href="#">Lorem Ipsum</a><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque dictum. Fuscerisus massa, posuere at</p></li>
<li><a href="#">Lorem Ipsum</a><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque dictum. Fuscerisus massa, posuere at</p></li>
<li><a href="#">Lorem Ipsum</a><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque dictum. Fuscerisus massa, posuere at</p></li>
<li><a href="#">Lorem Ipsum</a><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque dictum. Fuscerisus massa, posuere at</p></li>
</ul>

CSS

#delicious {
float: left;
}
#delicious h2 {
color: #6b000a;
margin: 0px;
padding: 0px;
font: normal 20px "Trebuchet MS", Arial, Helvetica, sans-serif;
border-bottom: 3px solid #cccccc;
}
#delicious ul {
margin:0px;
padding:0px;
background-color: #f0f0f0;
border-bottom: 3px solid #cccccc;
}
#delicious ul li {
margin: 0px;
padding: 5px 5px 0 10px;
font: bold 12px Arial, Helvetica, sans-serif;
text-align:left;
list-style:none;
display:block;
color: #000;
}
#delicious ul li a {
text-decoration:none;
color:#000000;
}
#delicious ul li p {
padding: 0 0 5px 0;
font: normal 11px Arial, Helvetica, sans-serif;
border-bottom: 1px solid #ffffff;
}

Untuk bagian content, elemen yang ditambahkan adalah heading untuk judul artikel, keterangan tentang publikasi artikel (meta data), thumbnail image yang mewakili artikel, dan paragraph yang berisi artikel. Berikut ini adalah kode XHTML dan CSS untuk bagian content:

XHTML

<h2>Lorem Ipsum Dolor Sit Amet</h2>
<div class="meta">Published: 26 March 2008 - Category: Music</div>
<div class="thumb">
<img src="images/thumbnail.png" />
</div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur ac elit cursus eros blandit cursus. Mauris non justo. Etiam interdum euismod nisi. Mauris nec turpis. Nunc eleifend diam sed nisl. Vestibulum convallis sagittis erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla at ipsum. Nullam odio sem, pellentesque vitae, fermentum eu, feugiat eget, felis. Pellentesque habitant morbi</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur ac elit cursus eros blandit cursus. Mauris non justo. Etiam interdum euismod nisi. Mauris nec turpis. Nunc eleifend diam sed nisl. Vestibulum convallis sagittis erat.</p>

CSS

#content {
float: left;
}
#content h2 {
margin: 0px;
padding: 0px;
font: normal 20px "Trebuchet MS", Arial, Helvetica, sans-serif;
border-bottom: 3px solid #cccccc;
width: auto;
color: #6b000a;
display:block;
}
#content .meta {
font: normal 11px Arial, Helvetica, sans-serif;
color: #999999;
border-bottom: 1px solid #cccccc;
padding: 5px 0 5px 10px;
background-color: #f0f0f0;
}
#content p {
font: normal 12px Arial, Helvetica, sans-serif;
line-height: 150%;
}
#content .thumb {
margin: 10px 0 5px 0;
padding: 0px;
}
#content .thumb img {
width: 120px;
float: left;
margin-right: 10px;
padding: 4px;
border: 1px solid #cccccc;
}

Untuk bagian gallery, elemen yang ditambahkan adalah heading dan gambar. Berikut ini adalah kode XHTML dan CSS untuk bagian gallery:

XHTML

<h2>Galleries</h2>
<div class="separator"></div>
<div class="gallery_thumb">
<img src="images/thumbnail.png" />
<img src="images/thumbnail.png" />
<img src="images/thumbnail.png" />
</div>

CSS

#gallery {
float: left;
}
#gallery h2 {
margin: 0px;
padding: 0px;
font: normal 20px "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #6b000a;
display:block;
}
#gallery .separator {
height: 32px;
background: transparent url('../images/separator.png') no-repeat top left;
}
#gallery .gallery_thumb {
margin: 10px 0 5px 0;
padding: 0px;
}
#gallery .gallery_thumb img {
width: 190px;
float: left;
margin: 4px 10px 0 0;
padding: 4px;
border: 1px solid #cccccc;
}

Untuk bagian footer, elemen yang ditambahkan adalah paragraph. Berikut ini adalah kode XHTML dan CSS untuk bagian footer:

XHTML

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur ac elit cursus eros blandit cursus.<br />
&copy; 2009 VISUALmagz.com</p>

CSS

#footer {
margin: 10px 0 0 10px;
height: 88px;
background-color: #cc9966;
}

#footer p {
padding: 25px;
font: normal 12px Arial, Helvetica, sans-serif;
line-height: 150%;
}

Hasil Akhir
Hasil akhir dari tutorial ini dapat dilihat di sini.