Tutorial ini akan menjelaskan langkah-langkah dasar menggunakan Adobe Fireworks CS3 untuk membuat mockup suatu website dengan memanfaatkan 960 Grid System.

Hasil Akhir
Hasil akhir dari tutorial ini dapat dilihat pada gambar berikut:

Step 1
Langkah pertama adalah mendownload template 960 Grid System dari situs resminya (Download). 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. Pada tutorial ini akan menggunakan template Fireworks yang varian 12 kolom.

Step 2
Langkah berikutnya adalah membuka file 960_grid_12_col.png yang ada di folder templates – fireworks dengan menggunakan Adobe Fireworks CS3. Sebelum kita menambahkan objek desain yang akan digunakan dalam tutorial ini, kita simpan terlebih dahulu melalui File – Save As kemudian isikan tut-mockup-960gs-basic.png pada bagian File Name dan tekan Save.

Step 3
Langkah selanjutnya adalah membuat bagian header dari mockup website. Bagian header pada tutorial ini hanya terdiri dari objek logo saja. Langkah untuk menambahkan logo adalah dengan menggunakan menu File – Import dan pilih file visualmagz-logo.png kemudian pilih Open.

Setelah itu, kita harus menempatkan objek logo tersebut dengan melakukan drag sesuai dengan posisi dan ukuran yang diinginkan. Pada tutorial ini, ukurannya adalah 220×63 piksel dan ditempatkan pada koordinat X:40,Y:30. Setelah logo kita tempatkan, langkah berikutnya adalah menambahkan rectangle berukuran 940×4 piksel dengan warna #B39A79 menggunakan Rectangle tool dan ditempatkan pada koordinat X:40,Y:94. Untuk mengatur properti dari objek dapat dilakukan dengan mengisikan nilai-nilai tersebut pada Properties Windows.

Hasil dari langkah ini adalah sebagai berikut.

Step 4
Langkah selanjutnya adalah membuat bagian sidebar sebelah kiri dari mockup website. Bagian sidebar ini akan digunakan untuk Sidenotes dan terdiri dari objek teks untuk heading dan item sidenotes serta rectangle untuk border dan background. Untuk membuat teks Sidenotes dan item sidenotes digunakan Text tool, sedangkan untuk membuat border dan background digunakan Rectangle tool. Property untuk teks Sidenotes menggunakan font Trebuchet MS, size 20, warna #6B000A, dan koordinat X:40, Y:112. Item sidenotes menggunakan font Arial Bold, size 12, dan koordinat X:50, Y:158 untuk judul item dan Arial, size 11, dan koordinat X:50, Y:179 untuk deskripsi item yang pertama (NB: untuk item sidenotes lainnya, penempatannya menyesuaikan).

Untuk background kita buat rectangle berukuran 220×600 piksel dengan warna #F0F0F0 dan kita posisikan pada koordinat X:40, Y:139. Objek border heading Sidenotes menggunakan rectangle berukuran 220×3 piksel dengan warna #CCCCCC, sedangkan untuk border separator item sidenotes menggunakan rectangle berukuran 200×1 dengan warna #FFFFFF.

Agar tidak perlu membuat satu per satu item sidenotes, langkah yang dapat dilakukan adalah memilih item judul, deskripsi, dan border separator yang telah dibuat dengan kombinasi klik mouse dan tombol Shift kemudian klik kanan dan pilih menu Group. Setelah proses grouping selesai dilakukan, maka kita tinggal mengcopy sebanyak yang kita inginkan.

Step 5
Bagian Header dan Sidenotes telah selesai dibuat, langkah selanjutnya adalah membuat bagian utama yang akan digunakan untuk konten berita atau post dari websites. Konten berita atau post terdiri dari objek Judul, meta data (dipublikasikan kapan dan dikategori apa), gambar thumbnail, dan teks isi konten berita atau post. Langkah untuk menambahkan objek teks seperti pada langkah sebelumnya yaitu menggunakan Text tool, sedangkan untuk menambahkan gambar thumbnail menggunakan menu File – Import seperti pada saat menambahkan objek logo. Background dan border bagian meta data ditambahkan dengan menggunakan Rectangle tool.
Property masing-masing objek dapat diatur melalui Properties Windows. Property objek judul sama dengan property untuk objek teks Sidenotes, sedangkan objek teks meta data menggunakan Arial, size 11 dan objek teks isi konten Arial , size 12. Objek gambar thumbnail berukuran 120×120 piksel dan bordernya menggunakan objek rectangle berukuran 130×130 piksel. Property koordinat menyesuaikan dengan area yang ada dan jangan lupa memperhatikan grid dalam penempatan setiap objek. Proses pembuatan item berita atau post berikutnya dapat menggunakan konsep grouping seperti langkah sebelumnya. Hasil akhir dari langkah ini adalah sebagai berikut.

Step 6
Langkah berikutnya adalah menambahkan bagian Galleries pada sidebar kanan. Prosesnya sama dengan pada saat menambahkan objek teks pada langkah sebelumnya. Hal yang sama juga berlaku untuk proses menambahkan objek gambar atau photo (termasuk menambahkan objek image color pallete) yaitu dengan menggunakan File – Import. Yang berbeda hanya property ukuran gambar atau photonya yaitu 190×155 piksel dengan rectangle untuk border berukuran 200×165 piksel.

Step 7
Langkah terakhir adalah menambahkan bagian Footer yang terdiri dari objek teks dan rectangle. Prosesnya juga sama dengan pada saat menambahkan objek teks maupun rectangle pada langkah sebelumnya. Warna yang digunakan untuk objek rectangle adalah #B39A79.