CARA MERANCANG TAMPILAN WEB
YANG BAIK DAN BAGUS
Mendesain
web tidak semudah membalik telapak tangan. Karena selain kita yang
menilai, tentunya pengunjung website anda mempunyai andil untuk
menilainya, bahkan 90 persen penilaian diberikan kepengunjung web anda.
Jika anda merasa desain website sudah bagus, belum tentu dimata
pengunjung bagus, begitu juga sebaliknya. Oleh karena itu diperlukan
beberapa pertimbangan yang harus diperhatikan dalam mendesain sebuah web
agar bisa tampil menarik, baik itu dimata pengunjung maupun dimata kita
sendiri sebagai perancangnya.
Yang
harus Anda ingat adalah bahwa semua pilihan ada di tangan Anda, karena
ini adalah situs Anda, dan Anda harus memutuskan apa yang Anda sukai.
Pilihan seperti warna, style, fonts, gambar dan
gaya penulisan yang digunakan, semuanya itu merupakan hal yang bersifat
personal dan bukan hal yang bisa dianggap mudah. Apa yang Anda paparkan
dan kerjakan dalam situs, mencerminkan banyak hal tentang siapa Anda.
Berikut ini merupakan beberapa hal dasar yang perlu Anda perhatikan
ketika merancang situs Anda.
- Grafis/Gambar
Grafis
atau gambar merupakan bagian terpenting dari suatu situs Internet.
Dengan grafis/gambar, kita dapat memberikan unsur warna, kesan dan tema.
Unsur-unsur tersebut sangat dibutuhkan, asalkan tidak terlalu
berlebihan. Terlalu banyak gambar tidak hanya membuat upload situs Anda lambat, tetapi juga kekanak-kanakan.
- Layout
Bagaimana
Anda menginginkan situs Anda terlihat? Apakah Anda ingin semua text
berada di sebelah kanan dan grafis di sebelah kiri, atau sebaliknya.
Apakah Anda ingin menempatkan iklan di bagian atas halaman ataukah semua
iklan akan ditempatkan di bagian samping? Merancang sebuah layout yang
tampak sama untuk semua halaman situs Anda akan lebih memudahkan
pengunjung dalam memahami isi situs Anda, daripada membuat layout yang
berbeda-beda untuk setiap halaman. Tetapi bukan berarti pula Anda tidak
boleh membuat layout halaman yang berbeda-beda untuk setiap penulisan
halaman, namun paling tidak sebaiknya setiap halaman mempunyai dasar
layout yang hampir sama.
- Navigasi
Buatlah website Anda
dapat dengan mudah ditelusuri, menggunakan nama yang familiar dan
logical seperti contact, about, FAQ, dsb. Apabila tidak, akan membuat
user beralih.
Ketika membuat strategi
navigasi webstie Anda, pikirkan bagaimana Anda memanggil sebuah perintah
atau aksi tersebut. Apa yang Anda harapakan pada customer ketika
berkunjung ke website Anda? Order/pesan? Email? Menjadi member? Atau
yang lainnya? Tentukan goal Anda sejelas-jelasnya.
Pikirkan hal untuk
customer potensial, berikan action items untuk memudahkan customer
melakukan apa yang Anda ingin mereka lakukan.Birchbox sangat baik akan
hal ini, mereka mendorong pada user untuk “learn more” dan mengarahkan
mereka untuk mendapatkan sebuah hadiah Birchbox. Hal ini biasanya untuk
pengunjung awal website tersebut.
Navigasi
yang mudah merupakan hal yang penting dalam situs yang baik. Jika
pengunjung tidak mendapat apa pun dari situs Anda, apakah mereka akan
tetap mengunjungi situs itu?
- Iklan
Iklan
yang terlalu banyak merupakan hal yang buruk bagi para pengunjung.
Cobalah untuk menempatkannya sebaik mungkin di tempat yang paling
dihiraukan pengunjung tanpa mengganggu prioritas isi atau content yang
ada.
- Proses Pemeliharaan (maintenance).
Setelah
membuat situs, Anda harus memeliharanya. Jika Anda menghubungkannya
dengan situs yang lain, Anda harus memeriksanya secara rutin untuk
memastikannya masih ada, karena kadang ada situs yang hilang.
- Sesuatu yang ‘Berkedip’.
Sesuatu yang berkedip, entah itu gambar maupun tulisan, dapat menjadi hal yang mengganggu pengunjung.

- Ramai/Berisik
Banyak
orang sering menambahkan musik pada situs mereka. Semua itu baik,
tetapi jika lagu terlalu keras hingga pengunjung melompat dari tempat
duduk mereka ketika membuka situs Anda, maka mereka akan cepat-cepat
meninggalkan situs Anda dan tidak akan kembali lagi.
- Pop-Ups
Tidak
hanya iklan pop-up namun juga pop up boxes. Anda tahu, ketika Anda
membuka sebuah situs dan kemudian nama Anda ditanyakan, mungkin itu
masih bisa dimaklumi. Namun jika kemudian muncul 5 (lima) baris
pertanyaan berbeda atau harus menjawab sebuah pertanyaan di setiap
halaman situs tersebut, maka pengunjung akan segera menutup dan
meninggalkan situs tersebut, karena merasa terganggu.
- Warna
Kita
semua tahu bahwa membaca halaman hitam putih akan sangat membosankan.
Itulah mengapa kita harus menambahkan unsur warna ke dalam situs yang
kita buat. Dengan memberikan warna yang tepat, maka akan menambah
kesempurnaan situs, sehingga halaman-halamannya akan mudah dibaca. Anda
harus yakin bahwa warna yang Anda berikan akan sesuai dengan warna text.
Jika Anda mempergunakan warna yang terlalu ‘berani’ ataupun perpaduan
warna yang tidak sedap dipandang mata, maka pengunjung akan akan malas
untuk membaca halaman tersebut dan mencari situs lain yang lebih
menarik.

- Fonts
Anda
tidak harus memakai standart fonts yang sama terus menerus dalam sebuah
situs agar tidak membosankan. Ada banyak sekali jenis font yang lain,
yang akan membuat tulisan Anda terlihat lebih menarik dan lebih baik.
Namun pemakaian font yang terlalu beraneka ragam dalam suatu halaman
juga tidak baik. Batasilah pemakaian font dalam suatu situs menurut
jenis pemakaiannya.
- Gaya Penulisan
Setiap
orang mempunyai cara penulisan sendiri-sendiri. Anda dapat menjadi
seseorang yang lucu, serius, atau apa adanya. Bagaimana Anda menulis
dalam situs Anda adalah hak Anda sepenuhnya, dan Anda perlu memilih
dengan gaya penulisan yang bagaimana Anda akan mengisi situs Anda.
- Isi/Content
Situs
tentang apakah nanti yang Anda rencanakan? Ada berapakah macam hal yang
Anda tulis? Tentu saja semua itu terserah Anda. Hal apapun yang Anda
tulis, Anda harus yakin bahwa ejaan dan tata bahasa
yang dipergunakan sudah benar, dan jika Anda mempunyai cukup waktu,
bacalah ulang untuk meyakinkan bahwa sudah tidak ada lagi kesalahan
bahasa.
v Langkah-Langkah Membuat Desain Website
Berikut ini adalah proses secara umum yang dilakukan kebanyakan profesi web di Indonesia untuk membuat web.
- Membuat Sketsa DesignDesainer
bisa saja menuangkan ide dalam membuat interface suatu homepage dalam
bentuk sketsa di kertas terlebih dahulu. Untuk kebanyakan orang biasanya
langkah ini dilewatkan dan langsung pada langkah membuat layout desain
dengan menggunakan software.
- Membuat Layout DesignSetelah
sketsa jadi, untuk memperhalus sketsa design menggunakan software
seperti Adobe Photoshop, Adobe Illustrator, Macromedia Fireworks,
Macromedia Flash atau Macromedia Freehand.
- Membagi Gambar Menjadi potongan Kecil-KecilSetelah
layout desain jadi, File gambar tersebut dipecah menjadi potongan
kecil-kecil untuk meng-optimize waktu download Untuk melakukan hal
tersebut bisa menggunakan software seperti Adobe Image Ready atau
Macromedia Fireworks. Langkah ini bisa dilewatkan apabila ukuran gambar
tidak terlalu besar.
- Membuat AnimasiAnimasi
diperlukan untuk menghidupkan homepage agar menarik pengunjung.
Macromedia Flash dan Gif Construction Set dapat digunakan untuk
melakukan hal tersebut.
- Membuat HTMLUntuk
merapikan layout desain seperti menempatkan tombol dan gambar, menambah
text, meng-edit script HTML, membuat layout form ke dalam format HTML.
Untuk itu bisa menggunakan software HTML Editor seperti Macromedia
Dreamweaver, Microsoft Front Page dan Allaire Homesite.
- Programming dan ScriptUntuk
website e-commerce, iklan baris, lelang, database, membuat buku tamu,
counter dan forum diskusi, file HTML perlu programming untuk aktivitas
semacam itu. Programming dan script ini bisa dibuat dengan menggunakan
ASP, PHP, Borland Delphi, CGI, dan Visual Basic.
- Evaluasi atau TestSetelah
situs selesai dibuat, sangatlah perlu untuk melakukan test atau
evaluasi apakah link-link yang ada sudah berjalan dengan benar dan bukan
broken link (link yang salah target atau tidak target)
- Upload HTMLSetelah
file telah menjadi HTML beserta gambar dan scriptnya, maka perlu
mengupload file-file tersebut ke hosting agar semua orang didunia dapat
mengakses halaman HTML kita. 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 dan Bullet FTP.
- Promosi HomepageSetelah
file-file di-upload, langkah terakhir adalah mempromosikan situs di
search engine yanng ada seperti www.yahoo.com, www.google.com,
www.altavista.com dan sebagainya, agar suatu ketika user mencari alamat
situs kita akan ditemukan pada database server search engine yang
bersangkutan.
v Tutorial Design Website
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.
v 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.