Kriteria Good dan Bad Design Website Beserta Contohnya

Ketika seseorang mengakses website kita, mereka harus disambut dengan tampilan yang menarik dan nyaman. Tampilan yang baik dapat meningkatkan presentase kunjungan pada web/blog. Tampilan web/blog yang nyaman meliputi beberapa aspek sepeti pemilihan font, perpaduan warna, serta tata letak yang nyaman untuk dibaca.

Berikut ini adalah beberapa hal penting yang harus diperhatikan ketika mendesain halaman web/blog.

• Typography

1. Gunakanlah klasifikasi tipe font yang sesuai dengan isi konten
2. Pilih ukuran font yang tepat. Standar ukuran font untuk body halaman website/blog adalah 16px sampai 26px.
3. Hindari penggunaan font Comic Sans sebagai isi atau konten. Font Comic Sans adalah font dengan klasifikasi Script yang biasa digunakan untuk quote atau kata-kata mutiara, tidak untuk isi konten atau informasi.
4. Hindari 2 atau lebih font dalam satu konten atau informasi. Penggunaan lebih dari 1 font menunjukkan inkonsistensi dari suatu halaman web/blog.
5. Gunakan Line-Height 1,5 atau 120% - 150% dari ukuran font untuk jarak antar baris.
6. Manfaatkan kustomisasi ketebalan huruf guna mempertegas suatu informasi.
7. Sebaiknya dalam satu baris aplikasi web maksimal terdapat 50-70 karakter termasuk spasi dan untuk aplikasi mobile maksimal terdapat 40-45 karakter termasuk spasi.
8. Hindari ‘Widows’ yaitu kalimat yang tersisa pada halaman tertentu dan ‘Orphan’ yaitu sisa kata dalam suatu paragraph.

• Color

1. Pilihlah dasar warna RGB (Additive color) yang seluruh kombinasi warnanya dipadukan dengan warna putih untuk desain grafis digital, sedangkan untuk percetakan pilihlah dasar warna CMYK (Subtractive color) yang seluruh kombinasi warnanya dipadukan dengan warna hitam.
2. Gunakan tone warna pada halaman website/blog sesuai dengan kesan yang ingin disampaikan kepada pengunjung.
3. Perhatikan pemilihan warna pada background dan foreground website/blog. Gunakan kombinasi HSL (Hue untuk kombinasi warna, Saturation untuk kepekaan warna, dan Luminosity untuk keterangan warna) pada halaman website/blog

• Layout

1. Pada umumnya logo web/blog diletakkan di kiri atas karena pengguna mengidentifikasi halaman web dari posisi kiri atas.
2. Navigasi sebaiknya diletakkan horizontal atau vertical mengikuti posisi logo.
3. Apabila terdapat gambar pada logo, header, ataupun konten web, maka pastikan arahnya condong pada informasi terkait.
4. Apabila memiliki layout dengan lebih dari satu kolom, posisikan sejajar (horizontal atau vertikal).
5. Hal lain yang tidak kalah penting adalah pastikan halaman web Anda memiliki wide space. Hal ini membantu pengguna untuk mengistirahatkan pandangannya saat menyisir informasi pada web Anda.

Setelah mengulas hal penting yang harus diperhatikan dalam mendesain suatu halaman website/blog, mari kita lihat beberapa website dengan desain baik dan buruk sesuai ketentuan diatas.

• Desain Halaman Website yang Baik

             1. http://www.gudegbulies.com/

k

         Website dikatakan baik karena memenuhi kaidah berikut :
         a. Tampilan website sangat informatif.
         b. Terdapat konsistensi tone warna pada halaman website.
         c. Pemilihan tone warna utama dan warna font yang tepat sangat memudahkan pandangan pengunjung.
         d. Halaman website tidak mengandung konten yang berlebihan sehingga tergolong ringan.

           2. http://bro.do/en/

          Website dikatakan baik karena memenuhi kaidah berikut :
          a. Pengaturan letak/layouting website yang sangat baik.
          b. Pemilihan latar belakang foto dengan teknik non-fokus tersebut membuat tampilan lebih menarik namun tetap memperhatikan komunikasi halaman web ke pengunjung.

          c. Terdapat konsistensi pemilihan jenis font dan warna tulisan dengan kontras warna yang baik (hitam dan putih).

          d. Halaman website sangat komunikatif dan mudah dipahami.

       3. https://ruangguru.com/

           Website dikatakan baik karena memenuhi kaidah berikut :
           a. Terdapat konsistensi dalam penggunaan font dan pemilihan tone warna pada halaman website.

           b. Tujuan dan menu yang terdapat pada halaman website mudah dipahami oleh pengunjung.

           d. Website disertai gambar yang sesuai dan tidak berlebih sehingga menunjang halaman web menjadi lebih menarik dan komunikatif.

• Desain Halaman Website yang Buruk

        1. http://lk21.li/

           Website dikatakan buruk karena beberapa alasan berikut :
           a. Halaman website terlalu padat

           b. Tampilan website tidak komunikatif dan informatif

           c. Terlalu banyak iklan dan animasi

           d. Navigasi tidak jelas

      2. http://www.arngren.net/

           Website dikatakan buruk karena beberapa alasan berikut :
           a. Halaman website terlalu padat, tidak terdapat ruang kosong untuk istirahat pengunjung.

           b. Terdapat inkonsistensi dalam penggunaan jenis dan warna font pada halaman website.

           c. Tujuan dan maksud website tidak tersampaikan

           3. https://www.theworldsworstwebsiteever.com/

           Website dikatakan buruk karena beberapa alasan berikut :
           a. Pengaturan letak/layouting halaman website yang buruk.

           b. Terdapat inkonsistensi dalam penggunaan jenis dan warna font pada halaman website.

           c. Halaman web tidak komunikatif.