Membuat Website Yang Bagus

A. MEMBUAT WEBSITE YANG BAGUS

1. Isi
   Yang pertama-tama  dipikirkan adalah apa yang ingin ditampilkan dalam web. Apakah itu company profile, atau  berita, atau koleksi gambar.
2. Struktur menu
   Setelah tahu apa yang akan ditampilkan baru kemudian dirancang menu-menunya. Menu-menu nanti yang akan menjadi navigasi untuk mengarahkan pengunjung supaya mudah menemukan informasi yang perlu ia dapatkan.
3. Disain
   Supaya pengunjung merasa nyaman browsing di website anda, anda harus membuat supaya web anda cantik. Pilihan warna-warna juga perlu dilakukan supaya mata yang melihatnya enak. Flash juga perlu, tapi dijaga supaya tidak terlalu ramai.
4. Mudah diindex oleh mesin pencari /search engine
   Cara pembuatan HTML file juga perlu diperhatikan supaya search engine seperti Google mudah mengindex sehingga calon pelanggan yang sedang melakukan searching di Google mudah menemukan web anda sehingga anda mempunyai peluang mendapat pelanggan baru.
5. Ukuran file
   Ukuran file juga harus diperhatikan supaya pengunjung cepat melihat web anda. Kalau terlalu menunggu, pengunjung akan meninggalkan web anda dan pindah ke tempat lain.
6. Pemasaran
   Harus ada pemasaran yang efisien sehingga web anda dikenal orang. Ini bisa dilakukan secara offline maupun online. Jika dananya terbatas maka lakukan dengan online, jika dananya cukup lakukan gabungan pemasaran offline dan online. Untuk online lakukan dengan SEO (Search Engine Optimization), sehingga website anda mudah ditemukan melalui Google
7. Offline marketing tool
   Website yang dihasilkan harus bisa disimpan dalam versi CD sehingga bisa dipakai sebagai Company Profile CD atau Product Catalog CD. CD ini juga bisa dipakai sebagai presentation tool untuk team sales dan marketing.

B.Tampilan atau Layout desain website   yang bagus

Sebuah desain website secara visual harus menarik. Mengingat desain bisa mencerminkan suatu produk, menggambarkan karakter perusahaan, maupun mevisualisasi pribadi seseorang. Hal pertama yang ditangkap pengunjung ketika tiba pada sebuah website adalah desain website tersebut (layout, image, dan elemen desain lainnnya), pengunjung tidak membaca konten terlebih dahulu, melainkan tanpa sadar memilah secara visual dan kemudian baru memutuskan akan melanjutkan mendalami konten atau meninggalkan website. Terutama apabila pengunjung yang baru pertama kali mendatangi sebuah website, kesan pertama yang dia tangkap akan menjadi penentu, apakah website ini pantas dikunjungi lagi atau tidak.

Pencitraan website bisa dibangun dengan memanfaatkan visual desain, sebuah desain website bisa saja dibangun menjadi berbagai karakter. Penting sekali untuk menentukan karakter yang tepat, yang sesuai dengan misi dan latar belakang website tersebut. Sebagai gambaran mudah, untuk website sebuah perusahaan finansial karakter yang dibangun secara visual harus memberi kesan profesional, aman, formal, dan sekaligus bisa mengambil kepercayaan pengunjung website.

Sedangkan website personal, ataupun blog personal, bisa ditampilkan lebih santai, informal, hangat, tidak terlalu kaku dan menuntut, sehingga pengunjung bisa merasakan kedekatan dengan pribadi pemilik website. Bisa saja website personal menampilkan kesan ceria, aktif, dan dinamis, atau bisa juga misterius, atau lainnya, tergantung personality yang ingin ditampilkan oleh pemilik website kepada pengunjungnya.

Ada beberapa hal yang perlu diperhatikan pada desain website, diantaranya adalah:

1.  Penggunaan warna yang tepat

Warna sangat berpengaruh dalam sebuah desain. Seperti yang telah kita ketahui, masing masing warna memiliki karakter tersendiri, dan mecerminkan suasana tertentu. Skema warna (kombinasi warna) dalam desain harus bisa mewakili karakter yang diinginkan. Tetapi perlu diingat, kombinasi warna yang berlebihan akan mengalihkan pengunjung dari konten website.

2.  Teks yang mudah dibaca

Teks harus mudah dibaca, hal ini bisa dicapai dengan mengatur kontras warna teks dengan background. Selain itu penggunaan font yang tepat juga perlu diperhatikan, jenis font, ukuran font, style dan konsistensinya dalam desain. Selain itu pengaturan paragraf dan jarak antara teks dengan elemen lain juga perlu diperhatikan. Whitespace atau ruang kosong antar elemen harus harmonis. Semua hal tersebut bertujuan supaya Teks mudah dibaca.

3.  Desain visual yang harmonis

Image atau gambar secara visual merupakan unsur atau elemen utama dalam desain. Image bisa digunakan sebai pemanis, atau penyeimbang atau point of interest. Sebaiknya pemilihan image sesuai dengan keseluruhan tema dan karakter desain website. Komposisi image dengan elemen lain juga harus sesuai, adakalanya sebuah website membutuhkan image yang besar (hampir fullscreen) untuk memberi kesan tertentu, dan dikombinasi dengan teks yang lebih kecil porsinya, ada pula website dengan komposisi teks yang lebih banyak dan image hanya sebagai unsur tambahan. Komposisi antara image dengan teks tergantung dari tema dan karakter yang ingin dibangun.

Yang penting harus bijaksana dalam memilih, menempatkan, dan mengkomposisi image, dan yang tidak kalah penting adalah kualitas image itu sendiri. Hal lain yang harus menjadi pertimbangan adalah besarnya file. Kecepatan load sebuah halaman website sebagian besar ditentukan oleh besarnya ukuran file, terutama image, apalagi bagi kita di Indonesia yang kecepatan akses internetnya sebagian besar dibawah rata-rata.

4.  Layout yang Simpel

Layout atau tataletak desain diusahakan sesederhana mungkin, minimalisir elemen-elemen yang tidak penting, maksimalkan whitespace (jarak antar elemen). Website dengan layout yang baik, mudah untuk dijelajahi, pengunjung mudah untuk menemukan sesuatu, dan dengan cepat menemukan apa yang dicarinya.

Layout yang berantakan membuat pengunjung kesulitan dan membutuhkan waktu lebih lama untuk menemukan sesuatu. Penempatan yang tidak sesuai, point of interest yang menyesatkan, dan urutan tata letak yang acak, sangat tidak menguntungkan.

5.  Alur yang mudah dimengerti

Layout desain website harus bisa menuntun pengunjung dan mengarahkan mereka ke sesuatu yang kita inginkan, jadi kitalah yang menuntun alur perhatian pengunjung dari titik a, ke titik b, ke titik C, dan seterusnya, sehingga tujuan kita dan misi dari website bisa dicerna dengan baik oleh pengunjung. Hal ini tidaklah mudah, berbeda dengan media lain seperti televisi, dan koran, audience dalam kendali pemberi informasi, mereka menerima apa adanya dan pasif, dan tidak melakukan tindakan aktif untuk memilah. Sedangkan pada website, pengunjung memiliki kendali penuh, mereka aktif, dan oleh karena itu alur dari desain website harus jelas dan mudah dipahami agar pengunjung tidak frustasi menemukan apa yang mereka inginkan.

6.  Menu Navigasi yang jelas

Salah satu elemen penting yang juga wajib diperhatikan adalah navigasi atau menu. Menu navigasi adalah satu-satunya cara pengunjung berinteraksi dengan website. Ada banyak cara dan banyak desain menu navigasi, tetapi yang tidak boleh dilupakan adalah fungsi utamanya, sebagai alat interaksi pengunjung dengan website.

Website bisa saja mempunyai beberapa menu/navigasi, bisa diatas pada header, atau pada sidebar, maupun dibawah pada footer. Tidak ada rumus yang mengharuskan dimana kita menempatkan menu, yang penting harus menyatu dengan alur dan layout desain sebuah website.
C.CIRI WEB YANG BAIK DAN BURUK

BAIK :
DESAIN SECARA UMUM
- Loading halaman cepat
- Halaman index atau home pas di ukuran minimal 800 x 600 pixel
- Seluruh halaman lainnya juga harus pas dengan ukuran minimal 800 x 600 pixel
- Gunakan elemen grafis (foto, gambar, dsb.) untuk mengisi jeda antara paragraf dalam sebuah tulisan berukuran sangat panjang
- Buat setiap halaman tampak sebagai bagian dari situs tersebut; tampilkan elemen tertentu secara berulang yang akan mengingatkan pengunjung bahwa ia masih berada dalam situs yang sama.

TEKS
- Warna latar belakang tidak bertabrakan dengan warna teks
- Teks cukup besar untuk dibaca, tetapi jangan terlalu besar
- Hirarki informasi jelas
- Kolom teks lebih kecil dari kolom di buku untuk memudahkan membaca di layar

NAVIGASI
- Tombol dan bar navigasi mudah dipahami penggunaannya
- Navigasi konsisten di seluruh situs
- Tombol dan bar navigasi memberi petunjuk kepada pengunjung dimana mereka berada sekarang, dan halaman apa yang mereka lihat sekarang
- Frame, jika digunakan, tidak menggangu
- Situs berukuran besar memiliki index atau peta situs

LINK
- Warna link disesuaikan dengan warna halaman
- Link selalu bergaris bawah sehingga jelas bagi pengunjung

GAMBAR
- Tombol-tombol berukuran secukupnya
- Setiap gambar ada keterangan/label alt-nya
- Setiap link gambar memiliki link teks yang sesuai
- Gambar dan latar belakang menggunakan warna yang mampu ditampilkan browser (browser-safe colors)
- Animasi akan berhenti dengan sendirinya setelah beberapa saat

BURUK :
DESAIN SECARA UMUM
- Loading makan waktu lama
- Halaman pertama (index/home) tidak pas dalam browser standar (800 x 600 pixel)
- Frame yang harus discroll menyamping
- Tak ada fokus tema pada halaman itu
- Sebaliknya, terlalu banyak fokus tema dalam halaman itu
- Tombol navigasi menjadi satu-satunya daya tarik
- Peletakan elemen (teks, paragraf, gambar, dsb.) berantakan
- Warna tidak cocok satu sama lain
- Halaman bagus jika dibuka di satu browser, tetapi hancur jika dibuka di browser lain

LATAR BELAKANG
- Warna abu-abu standar
- Kombinasi teks dan latar belakang yang membuat tulisan sulit dibaca
- Latar belakang terlalu ramai dan menyakitkan mata (misalnya menggunakan gambar gif animasi) yang membuat tulisan tidak jelas

TEKS
- Teks terlalu kecil sehingga sulit dibaca
- Teks terlalu panjang dan menembus batas kanan halaman
- Seluruh paragraf ditulis dengan HURUF BESAR
- Seluruh paragraf ditulis dengan huruf cetak tebal
- Seluruh paragraf ditulis dengan huruf miring
- Memberi garis bawah pada teks yang bukan link, akan membingungkan pengunjung

LINK
- Link standar berwarna biru
- Ada border link berwarna biru di seputar gambar
- Link yang tidak jelas akan membawa pengunjung kemana
- Link tanpa tujuan (broken link)
- Teks link yang tidak bergaris bawah atau tidak berubah warna ketika ditunjuk

GAMBAR
- Gambar yang sangat besar sehingga loadingnya lama
- Gambar yang tidak ada hubungannya dengan tema situs
- Gambar thumbnail yang ukurannya sama dengan gambar aslinya
- Gambar tanpa label alt
- Gambarnya hilang (muncul tanda x kecil warna merah)
- Gambar yang terlalu besar dan tidak muat di layar (anggap ukuran resolusi layar 800×600 pixel)

TABEL
- Ada bordernya
- Tabel digunakan sebagai hiasan dengan border yang sangat tebal

OBJEK BLINKING (BERKEDIP) DAN ANIMASI
- Apa saja yang berkedip, khususnya teks
- Garis berwarna pelangi
- Tulisan “Under construction”, apalagi ditambahi gambar pekerja konstruksi jalan raya
- Animasi gambar “under construction”
- Animasi gambar e-mail
- Animasi yang tidak pernah berhenti

SAMPAH
- Counter – siapa yang perduli!?
- Iklan sampah
- Pengunjung harus melakukan scroll menyamping (kiri-kanan) – percayalah, ini menyebalkan!
- Scroll bar frame di tengah-tengah halaman

NAVIGASI
- Menu navigasi yang tidak jelas atau terlalu kompleks
- Terlalu banyak frame
- Frame terlalu kompleks
- Scroll bar yang tidak perlu pada frame
- Halaman yatim-piatu (tak memiliki link untuk kembali ataupun maju, serta tak ada keterangan apapun)
- Title halaman yang tidak ada hubungannya dengan tema atau isi halaman tersebut

D.CONTOH PROGRAM WEB YANG BAGUS

<html>

<head>

<title>Softskill</title>

</head>

<font face=jokerman mt color=white size=18>

<marquee behaviour=alternate scrolldelay=100 bgcolor=yellow>Softskill</marquee>

<body background=atthebeachhdwallpaper12.jpg><font face=arial color=white size=3>

<p align=left><img src=rully.jpg widht="200" height="200">

<p align=center>

<br><pre>

NAMA    : <i>Khairul Fatan</i><br>

KELAS   : <i>2IA03</i><br>

NPM     : <i>53410881</i></pre>

<a href="tugas1.html><b>Tugas 1</b></a><br>

<a><b>Tugas 2</b></a><br>

</body>

</html>

<!-- www.000webhost.com Analytics Code -->

<script type="text/javascript" src="http://analytics.hosting24.com/count.php"></script>

<noscript><a href="http://www.hosting24.com/"><img src="http://analytics.hosting24.com/count.php" alt="web hosting" /></a></noscript>

<!-- End Of Analytics Code -

Jika anda ingin melihat hasilnya anda dapat buka di:

http://www.rullyyy.uk.to

Sumber:

http://www.prowebpro.com/articles/membuat_website_yang_baik.php

Wassalamualaikum Wr. Wb.