On Sabtu, 13 Oktober 2012
MENDESIGN 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.
1. 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.
2. 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).
3. Simple : Web Designer banyak yang
menggunakan prinsip “Keep it Simple”, hal ini ditujukan agar tampilan website
tersebut terlihat rapi, bersih dan juga informatif.
4. 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.
5. 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.
6. 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.
7. 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.
1. Adobe Photoshop : Desain berbasis
titik ( bitmap )
2. Adobe Image Ready : Memotong
gambar-gambar ke dalam format html
3. Adobe Illustrator : Desain
berbasis vector
4. CorelDraw : Desain berbasis
vector
5. 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.
1. Macromedia Firework : Efek teks
2. Painter : Memberikan efek lukisan
3. Ulead Photo Impact : Efek frame
dan merancangan icon yang cantik.
4. 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.
1. 3D Studio Max : Untuk membuat
objek dan animasi 3D.
2. Gif Construction Set : Membuat
animasi file gif
3. Macromedia Flash : Menampilkan
animasi berbasis vector yang berukuran kecil.
4. Microsoft Gif Animator : Membuat
animasi file gif
5. Swift 3D : Merancang animasi 3D
dengan format file FLASH.
6. Swish : Membuat berbagai macam
efek text dengan format file FLASH.
7. 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.
1. Alaire Homesite
2. Cold Fusion
3. Microsoft Frontpage
4. Macromedia Dreamweaver
5. 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.
1. ASP ( Active Server Page )
2. Borland Delphy
3. CGI ( Common Gateway Interface )
4. PHP
5. Perl
Upload : File html kita perlu di
letakkan ( upload ) di suatu tempat ( hosting ) agar orang di seluruh dunia
dapat melihat homepage kita.
1. Bullet FTP
2. Cute FTP
3. WS-FTP
4. Macromedia Dreamweaver : dengan
fasilitas Site FTP
5. Microsoft Frontpage : dengan
fasilitas Publish
Sound Editor : Homepage kita belum
hidup tanpa musik. Untuk mengedit file midi atau wav, perlu alat khusus untuk
itu.
1. Sound Forge : Mengedit dan
menambah efek file yang berformat mp3 dan wav.
2. 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.
1. 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.
2. Membuat Layout Desain : Setelah sketsa
sudah jadi, kita menggunakan software seperti Adobe Photoshop, Adobe
Illustrator, Macromedia Fireworks dan Macromedia Freehand untuk memperhalus
sketsa desain.
3. 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.
4. Membuat Animasi : Animasi
diperlukan untuk menghidupkan homepage kita agar menarik pengunjung. Macromedia
Flash dan Gif Construction Set dapat dipakai untuk melakukan hal tersebut.
5. 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.
6. 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.
7. 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.
8. 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
