Tips dan Trik
dalam Mendisain Web
Sering kita
temui website yang tipikal: "Welcome to my homepage," animasi e-mail, background
dengan tulisan miring (diagonal), animasi garis pembatas, tabel dengan border
tiga-dimesi dan lain-lain. Hal ini terjadi akibat dari fasilitas Template yang
disediakan oleh software pembuat web seperti: FrontpageT, Corel WebDesignerT,
dan sebagainya yang ditujukan untuk mempermudah penggunanya dalam membangun
website.
Jika anda
puas dengan hasil kerja anda membangun website dengan fasilitas template,
sudahlah cukup sampai disini. Tetapi jika anda tidak puas dengan apa yang anda
buat, dan anda merasa ingin lebih baik, maka anda perlu mengetahui bagaimana Web
Designer membangun suatu Website, terlepas anda punya bakat seni atau tidak.
- Unik : Dalam
membuat karya apapun seorang designer mempunyai kesadaran untuk tidak meniru
atau menggunakan karya orang lain. Begitu pula seorang Web Designer harus
mempunyai budaya malu untuk menggunakan icon, animasi, button, dll, yang
telah digunakan atau dibuat oleh orang lain.
- Komposisi :
Seorang Web Designer selalu memperhatikan komposisi warna yang akan
digunakan dalam website yang dibuatnya. Pergunakan selalu Palette 216
WebColor, yang dapat diperoleh dari Adobe.com, hal ini untuk mencegah
terjadinya dither pada image yang berformat GIF. Dalam membangun website
suatu perusahaan, Web Designer selalu menyesuaikan warna yang digunakan
dengan Corporate Color perusahaan tersebut. Sebagai contoh: Telkom Corporate
Color-nya adalah biru, Coca-Cola : merah dan putih, Standard-Chartered :
hijau dan biru, dsb. Untuk kemudian warna-warna tadi digunakan sebagai warna
dominan atau sebagai elemen pendukung (garis, background, button, dsb).
- Simple : Web
Designer banyak yang menggunakan prinsip "Keep it Simple", hal ini ditujukan
agar tampilan website tersebut terlihat rapi, bersih dan juga informatif.
- Semiotik :
Semiotika adalah ilmu yang mempelajari tentang tanda-tanda. Dalam hal ini
diharapkan dengan melihat tanda atau gambar, user/ audience dapat dengan
mudah dan cepat mengerti. Sebagai contoh: Jangan membuat gambar/image yang
berkesan tombol, padahal itu bukan tombol/ link.
- Ergonomis :
Web Designer selalu memperhatikan aspek ergonomi. Ergonomi disini adalah
dalam hal kenyamanan user dalam membaca dan kecepatan user dalam menelusuri
website tersebut. Web Designer memilih ukuran Fonts yang tepat sehingga
mudah dibaca, Web Designer menempatkan link sedemikian rupa sehingga mudah
dan cepat untuk di akses dan lebih penting lagi adalah Informatif.
- Fokus :
Tentukan hirarki prioritas dari pesan yang akan disampaikan, misalnya: Judul
harus besar, tetapi jangan sampai akhirnya akan konflik dengan subjudul yang
berukuran hampir sama. Hal ini akan membingungkan user/audience untuk
menentukan pesan mana yang harus lebih dahulu dibaca/ dilihat.
- Konsisten :
Tentukan font apa yang akan digunakan sebagai Body-text, Judul, Sub Judul
dan sebagainya, sehingga website tersebut akan terlihat disiplin dan rapi.
Sesuaikan jenis huruf yang digunakan dengan misi dan visi website tersebut,
misalnya: hindari menggunakan font Comic dalam membangun website suatu
perusahaan resmi.
Demikian
beberapa aspek dan prinsip yang digunakan Web Designer dalam membuat website,
selebihnya merupakan ekspresi dari pembuat website itu sendiri yang terwujud
dalam penggayaan penyusunan website.
Software-software pembuat suatu website
Desain
: Untuk membuat desain suatu homepage biasanya para web designer dimulai dengan
software ini sebagai tampilan sementara atau dalam membuat layout homepage.
- Adobe Photoshop
: Desain berbasis titik ( bitmap )
- Adobe Image Ready
: Memotong gambar-gambar ke dalam format html
- Adobe Illustrator
: Desain berbasis vector
- CorelDraw :
Desain berbasis vector
- Macromedia
Freehand : Desain berbasis vector
Efek
Desain : Hal ini dilakukan untuk menghidupkan desain yang telah kita rancang.
Seperti menambah efek cahaya, textur dan manipulasi teks.
- Macromedia
Firework : Efek teks
- Painter
: Memberikan efek lukisan
- Ulead Photo Impact
: Efek frame dan merancangan icon yang cantik.
- Plugins Photoshop
: Seperti Andromeda, Alien Skin, Eye Candy, Kai's Power Tool dan Xenofex
juga sangat mendukung untuk memberi efek desain sewaktu anda mendesain
layout homepage di Photoshop.
Animasi
: Penambahan animasi perlu untuk membuat homepage agar kelihatan menarik dan
hidup.
- 3D Studio Max
: Untuk membuat objek dan animasi 3D.
- Gif Construction
Set : Membuat animasi file gif
- Macromedia Flash
: Menampilkan animasi berbasis vector yang berukuran kecil.
- Microsoft Gif
Animator : Membuat animasi file gif
- Swift 3D
: Merancang animasi 3D dengan format file FLASH.
- Swish
: Membuat berbagai macam efek text dengan format file FLASH.
- Ulead Cool 3D
: Membuat animasi efek text 3D.
Web Editor
: Menyatukan keseluruhan gambar dan tata letak desain, animasi, mengisi halaman
web dengan teks dan sedikit bahasa script.
- Alaire Homesite
- Cold Fusion
- Microsoft Frontpage
- Macromedia
Dreamweaver
- Net Object Fusion
Programming : Hal ini dilakukan setelah sebagian besar desain homepage telah
rampung. Programming bertugas sebagai akses database, form isian dan membuat web
lebih interaktif. Contoh : Membuat guestbook, Form isian, Forum, Chatting,
Portal, Lelang dan Iklanbaris.
- ASP ( Active Server
Page )
- Borland Delphy
- CGI ( Common Gateway
Interface )
- PHP
- Perl
Upload
: File html kita perlu di letakkan ( upload ) di suatu tempat ( hosting ) agar
orang di seluruh dunia dapat melihat homepage kita.
- Bullet FTP
- Cute FTP
- WS-FTP
- Macromedia
Dreamweaver : dengan fasilitas Site FTP
- Microsoft Frontpage :
dengan fasilitas Publish
Sound
Editor : Homepage kita belum hidup tanpa musik. Untuk mengedit file midi
atau wav, perlu alat khusus untuk itu.
- Sound Forge :
Mengedit dan menambah efek file yang berformat mp3 dan wav.
- Cakewalk :
Mengedit dan menambah efek untuk file yang berformat midi
Banyak sekali
memang software untuk membuat suatu homepage dan kita tidak perlu mempelajari
semua software tersebut di atas. Tapi untuk mempermudah, bagi pemula lebih baik
dimulai terlebih dulu dengan mempelajari software Microsoft Frontpage
atau Macromedia Dreamweaver agar lebih mengenal aturan-aturan membuat
homepage dan mengenal bahasa html. Setelah itu baru Adobe Photoshop yang
dipakai kebanyakan para desainer.
Langkah-langkah Membuat Homepage
Bermacam-macam langkah yang digunakan profesi web kita untuk membuat suatu
homepage. Berikut ini adalah proses secara umum yang dilakukan kebanyakan
profesi web di Indonesia untuk membuat web.
- Membuat Sketsa
Desain : Desainer bisa saja menuangkan ide dalam membuat interface suatu
homepage dalam bentuk sketsa di kertas dahulu. Untuk kebanyakan orang,
biasanya langkah ini dilewatkan dan langsung pada langkah membuat layout
desain dengan menggunakan software.
- Membuat Layout
Desain : Setelah sketsa sudah jadi, kita menggunakan software seperti
Adobe Photoshop, Adobe Illustrator, Macromedia Fireworks dan Macromedia
Freehand untuk memperhalus sketsa desain.
- Membagi gambar
menjadi potongan kecil-kecil : Setelah layout desain homepage sudah jadi.
File gambarb tersebut dipecah menjadi potongan kecil-kecil untuk
mengoptimize waktu download. Untuk melakukan hal tersebut dapat menggunakan
software Adobe Image Ready. Software ini dapat langsung memotong gambar yang
besar tadi dan otomatis juga menjadikannya ke dalam format html. Langkah ini
bisa saja dilewatkan bila ukuran gambar kita tidak terlalu besar.
- Membuat Animasi
: Animasi diperlukan untuk menghidupkan homepage kita agar menarik
pengunjung. Macromedia Flash dan Gif Construction Set dapat dipakai untuk
melakukan hal tersebut.
- Membuat HTML :
Setelah itu kita merapikan layout desain kita seperti menempatkan beberapa
tombol dan gambar, menambah text, mengedit script HTML, membuat layout form
ke dalam format HTML. Untuk itu kita perlu software HTML Editor seperti
Macromedia Dreamweaver, Microsoft Frontpage dan Allaire Homesite.
- Programming dan
Script : Untuk website e-commerce, iklan baris, lelang, database,
membuat guestbook, counter dan forum diskusi. File HTML kita perlu
programming untuk melakukan aktivitas semacam itu. Programming dan script
ini bisa dibuat dengan menggunakan ASP, Borland Delphy, CGI, PHP, Visual
Basic. Dan perlu diperhatikan bahwa programming dan script ini biasanya
dilakukan setelah desain homepage kita telah jadi.
- Upload HTML :
Setelah file kita telah menjadi html beserta gambar dan scriptnya. Kita
perlu meng-upload file kita ke suatu tempat ( hosting ), agar semua orang di
dunia dapat mengakses halaman html kita. Biasanya Macromedia Dreamweaver
dengan fasilitas site FTP dan Microsoft Frontpage dengan Publishnya telah
menyediakan fasilitas upload ini. Atau dapat menggunakan software seperti
WS-FTP, Cute FTP, Bullet FTP.
- Homepage Pribadi
: Untuk homepage pribadi atau yang sekedar ingin coba-coba biasanya setelah
file html sudah jadi dapat hosting di tempat-tempat gratis, memakai
guestbook dan counter gratis dan menambah macam-macam accesories dalam
mempercantik homepage pribadi tersebut.