Mendesain Website

BAB I
Mendesain Website
Untuk mendesain sebuah website diperlukan beberapa aplikasi pendukung,
diantaranya adalah aplikasi image editor, aplikasi web authoring, dan aplikasi web
server. Aplikasi image editor yakni adalah sebuah aplikasi yang digunakan untuk
membuat gambar atau tampilan antarmuka web contohnya Macromedia Firework,
Adobe Photoshop danl lain-lain. Aplikasi web authoring adalah aplikasi yang
digunakan untuk mengolah gambar yang telah kita buat di aplikasi image editor tadi
menjadi elemen-elemen web, contoh dari aplikasi ini adalah Macromedia
Dreamweaver, Microsoft Frontpage dan lain-lain.
Sebelum anda membuat sebuah website portal, sebaiknya anda mempersiapkan
kelengkapan apa saja yang akan dimuat dalam website anda berupa coretan di
kertas atau papan tulis sebelum mengerjakannya dengan computer. Hal ini akan
sangat membantu kerja anda agar lebih sistematis, terorganisir dengan baik, dan
tentu saja menghemat waktu yang diperlukan dalam membuat sebuah website.
Setidaknya ada tiga langkah persiapan yang anda buat di atas kertas kerja sebelum
menuangkan ide desain website dengan computer, yakni : diagram pohon isi website
portal, sketsa tampilan website, dan storyboard website portal anda.
1. Membuat Diagram Pohon Isi Website
Diagram pohon atau tree chart diperlukan unutk menggambarkan hirarki isi
website. Yang menjadi halaman utama adalah index atau home. Sesuai
dengan namanya, index, maka halaman ini harus memuat link-link menuju ke
halaman isi. Halaman-halaman selanjutnya yang merupakan is website
berada bawah halaman index. Sebaiknya semua halaman isi dapat diklik dari
halaman index, atau setidaknya halaman-halaman utama dari setiap halaman
isi dapat diakses melalui halaman index dengan hyperlink. Kondisi seperti ini
sangat diperlukan agar website anda memiliki system navigasi yang baik dan
memudahkan pengunjung menemukan informasi yang diperlukan di setiap
halaman website.
Home
Menu 1
Menu 2
Menu 3
Menu 4
Menu 5
Jika halaman isi website anda sangat banyak dan bervariasi, usahakan
mengklasifikasikannya menjadi beberapa halaman induk. Pada halaman
index, anda dapat menampilkan hyperlink ke tiap-tiap halaman induk
klasifikasi.
2. Membuat Sketsa Tampilan Website
Setelah selesai membuat rancangan organisasi halaman website dalam
bentuk diagram pohon, kini anda dapat membuat sketsa tampilan website
yang anda inginkan. Biasanya tampilan setiap halaman website memiliki
kemiripan. Khususnya pada website berita, sebaiknya setiap halaman
memiliki keseragaman sebab perubahan tampilan yang mencolok dari setiap
halaman website yang menyajikan informasi utnuk pengunjung, akan
memberatkan pekerjaan desainer dan juga membingungkan pengunjung.
Sketsa web
Anda bisa saja langsung berkreasi dengan computer untuk membuat tampilan
website tanpa bantuan sketsa diatas kertas sebelumnya tetapi dengan
bantuan sketsa, pekerjaan mendesain website akan lebih terarah. Sketsa
yang dimaksud tidak perlu mendtail, cukup dengan membuat tampilan kasar
dari sebuah website. Tampilan tersebut harus mencakup tata letak, jenis font,
kolom-kolom, navigasi dan warna dasar dari tampilan website. Untuk
pekerjaan detilnya baru dimulai ketika anda mendesain di computer.
Satu hal yang penting untuk anda ingat. Website yang menyajikan informasi
harus memiliki kemudahan navigasi, tidak terlalu ramai dengan permainan
grafis dan warna, tetapi bukan berarti mengabaikan aspek keindahan dan
estetika.
3. Membuat Storyboard Website
Setelah sketsa tampilan portal anda selesaikan, kini anda dapat membuat
gambaran bagaimana perubahan tampilan website pada setiap halamannya.
Storyboard sebenarnya adalah penggabungan diagram pohon dan sketsa
tampilan website. Storyboard menjadi penting jika dalam pembuatan website
melibatkan desainer lain dalam satu tim, tetapi jika website hanya dikerjakan
seorang diri, maka pembuatan story board dapat diabaikan.
Jika sebuah proyek pembuatan website dibatasi tenggat atau deadline yang
ketat, maka biasanya pembuatan web melibatkan beberapa desainer
sekaligus. Pada kondisi ini, bantuan storyboard sangat diperlukan guna
memperjelas pekerjaan masing-maisng desainer yang tergabung dalam tim.
Selanjutnya tetap harus dilakukan sinkronisasi oleh satu desainer web agar
hasil desain iap halaman website tetap seragam.
Bab II
Memulai kerja di Firework
Macromedia Fireworks 8 adalah sebuah aplikasi computer yang ditujukan untuk
mendesain grafis yang digunakan di lingkungan web. Anda bisa membuat dan
memodifikasi image bitmap dan vector sekaligus, membuat efek web seperti rollover
dan pop-up menu, crop dan optimisasi gambar untuk mengurangi ukuran file.
Aplikasi ini merupakan sebuah inovasi dalam menghadapi berbagai permasalahan
yang menyangkut design grafis dan web.
Ketika anda membuka sebuah dokumen di Firework, akan terlihat lingkungan kerja
yang terdiri dari panel Tools, Property Inspector, Menu dan panel-panel lainnya.
Panel Tool, berada disisi kiri, meliputi beberapa kategori, bitmap, vector, dan web
tool. Property inspector tampil dibawah dokumen dan memunculkan property dari
dokumen yang aktif, ketika anda membuat atau menyorot bagian lain, property ini
akan menampilkan property dari dokumen yang dimaksud. Panel-panel lainnya
muncul dalam kategori – kategori yang tersusun di sisi kanan layar.
Menggunakan Panel Tool
Panel tool dibagi dalam enam kategori :
Select, Bitmap, Vector, Web, Colors, dan View.
Panel Tool
Tentang format bitmap dan vector
Komputer dapat menampilkan suatu objek dalam vector atau bitmap.
Bitmap terdiri dari kumpulan titik yang disebut dengan pixel, tersusun
dalam suatu grid. Ketika anda mengedit gambar bitmap, anda
memodifikasi pixel. Bitmap sangat bergantung pada resolusi gambar,
artinya gambar tersebut harus menyatu pada grid atau ukuran tertentu.
Membesarkan suatu gambar bitmap berarti memecah gambar tersebut
dalam satuan resolusi yang lebih besar, hal ini seringkali membuat
gambar menjadi terlihat pecah.
Vektor terdiri dari garis dan kurva, yang terdiri dari informasi warna dan
posisi. Ketika anda mengedit suatu gambar vector, berarti anda
memodifikasi informasi dari kurva dan garis dari gambar itu. Gambar
vector tidak bergantung pada resolusi, yang berarti anda dapat
memindahkan, memperkecil, memperbesar, atau mengubah warna,
seperti yang terlihat pada layar anda. Tanpa harus mengorbankan kualitas
dari gambar tersebut.
Anda dapat membandingkan format keduanya dalam Firework untuk
melihat perbedaannya.
Mengenal lingkungan kerja di Firework
Sebuah segitiga kecil di bagian bawah panel Tool menandakan bagian itu terdapat
grup. Sebagai contoh Tool Rectangle adalah bagian dari grup basic shape, yang
terdiri dari Rounded Rectangle, Ellipse, dan Polygon.
Untuk memilih tool alternative dari sebuah grup :
Klik ikon tool dan tahan, sebuah pop-up menu akan
tampil beserta penjelasan, dan shortcut key-nya.
Tool yang sedang dipakai akan diberi tanda check
mark.
Geser pointer pada tool yang anda inginkan lalu
lepaskan, maka akan terpilih tool yang anda inginkan
tadi.
Menggunakan Property inspector
Property inspector mengijinkan anda untuk mengedit properti dari tool, dokumen
atau seleksi dari objek yang sedang terpilih/aktif. Secara default, window property
akan muncul pada bagian bawah dari layar kerja.
Menggunakan Panel
Panel membantu anda untuk mengedit aspek-aspek dari objek atau elemen suatu
dokumen. Panel juga bisa membuat layer, symbol dan lain-lain. Setiap panel bisa
dipindahkan / draggable, sehingga anda dapat membuat grup dari panel dalam
susunan yang anda inginkan. Beberapa panel secara default tidak ditampilkan, tapi
dapat ditampilkan jika anda inginkan. Beberapa panel juga tidak dikelompokan, tapi
anda juga bisa membuat kelompok sesuai yang diinginkan. Ketika anda membuat
dari suatu panel menjadi satu, nama grup tersebut akan tampil dalam title bar.
Bahkan anda dapat memberi nama dari grup panel yang baru saja anda buat.
•
•
Panel Optimize memberikan control terhadap ukuran file, jenis file, bekerja
dengan color palette dari suatu file atau potongan / slice yang akan dieksport.
Panel Layers menghimpun sebuah struktur dokumen dan berisi pilihan
untuk membuat, menghapus dan manipulasi suatu layer
• Panel Frames berisi pilihan untuk membuat
animasi
• Panel History berisi daftar perintah yang terakhir
anda kerjakan, sehingga anda dapat dengan
mudah untuk undo dan redo.
• Panel Shapes berisi Auto Shapes yang tidak
ditampilkan dalam panel Tools.
• Panel Styles berisi kombinasi dari suatu perintah
sehingga objek yang sedang aktif dapat mengikuti
styles yang dipilih
• Panel Library berisi symbol graphic, symbol
tombol / button, symbol animasi. Anda dapat
dengan mudah men-drag instances dari symbolsimbol ini kedalam dokumen anda. Anda dapat
membuat perubahan yang mendasar dari simbolsimbol, hanya dengan memodifikasinya
• Panel URL berisi kumpulan URL yang berasal dari
dokumen yang sedang anda kerjakan.
• Panel Color Mixer (Window > Color Mixer)
mengijinkan anda untuk membuat kombinasi
warna baru dalam palette atau untuk diterapkan
dalam dokumen anda.
• Panel Swatches (Window > Swatches)
mengatur warna palette dari dokumen aktif
• Panel Info (Window > Info) menyediakan
informasi tentang dimensi dari objek terpilih dan
•
•
•
•
•
•
juga koordinat dari pointer mouse yang sedang anda gerakan diatas kanvas.
Panel Behaviors (Window > Behaviors) mengatur behavior, dimana
dapat menentukan hotspot dan potongan tertentu
Panel Find (Window > Find) mengijinkan anda untuk mencari dan
mengganti dari suatu elemen dokumen seperti teks, URL, Font dan juga
warna dalam suatu atau kumpulan dari dokumen.
Panel Align (Window > Align) berisi perintah untuk pengaturan aligning
dan distributing objek dalam kanvas.
Panel
Auto
Shape
Properties
(Window
>
Auto
Shape
Properties)berisikan perintah unutk mengubah / mengeset property dari
Auto Shapes.
Panel Image Editing (Window > Image Editing) menyatukan fungsifungsi yang sering digunakan dalam photo editing
Panel Special Characters (Window > Special Character) digunakan
untuk memasukan special karakter langsung dari dalam firework, daripada
harus copy dan paste dari sumber lain.
Secara default, panel akan terletak disisi kanan dari lingkungan kerja anda.
Beberapa panel akan terbuka namun beberapa panel lainnya akan dalam kondisi
tertutup, untuk membukanya anda cukup mengklik bagian nama dari panel yang
anda tuju.
Tentang tombol Quick Export
Tombol ini dapat memudahkan adna mengeksport
dokumen yang anda kerjakan dalam Firework
kedalam format lainnya seperti Dreamweaver, Flash,
Director dan Freehand. Namun tak hanya itu, anda
juga dapat mengekpor ke aplikasi Adobe Photoshop,
Golive,
atau
hanya
sekedar
melihat
hasil
tampilannya pada browser favorit anda.
menekan tombol ini
Tombol navigasi
Anda dapat mengatur
pembesaran
dan
pengecilan dari suatu
dokumen hanya dengan
Ketika dokumen anda di maximized, anda dapat dengan
mudah berpindah dari satu dokumen ke dokumen
lainnya dalam rangkaian tab diatas dokumen yang
sedang aktif.
Tentang format file gambar
Anda dapat mengerjakan suatu dokumen dalam beberapa format sekaligus, sebagai
contoh mulailah dengan PNG, lalu simpan sebagai JPG atau GIF. Anda juga dapat
membuat file HTML yang terdiri dari kode-kode Javascript. Anda juga dapat
menyimpan untuk dibuka dalam aplikasi lainnya seperti Flash, Photoshop atau
program lainnya.
Format-format gambar yang umum digunakan dalam Firework:
• PNG, Portable Network Graphic, adalah format file yang digunakan dalam
Firework, mendukung format warna 32 bit, dapat berisi transparansi, atau
channel alpha.
• GIF, Graphic
Interchange Format, adalah format file yang umum
digunakan dalam web, bisa memiliki area transparent dan bisa memuat
animasi. Format GIF hanya memiliki 256 warna.
• JPEG, Joint Photographic Expert Group, adalah format gambar yang
diperuntukan untuk fotografi atau gambar beresolusi tinggi. Format ini baik
untuk digunakan untuk kamera digital, scanner, gradasi atau gambar lain
yang membutuhkan lebih dari 256 warna.