MUHAMAD HENRICK CAHYANTO, ST SMAN 11 BANDUNG

Presentasi berjudul: "MUHAMAD HENRICK CAHYANTO, ST SMAN 11 BANDUNG"— Transcript presentasi:

1 MUHAMAD HENRICK CAHYANTO, ST SMAN 11 BANDUNG
WEB BURUK VS BAIK MUHAMAD HENRICK CAHYANTO, ST SMAN 11 BANDUNG

2 WEB 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

3 WEB BURUK 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

4 WEB BURUK 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

5 WEB BURUK 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

6 WEB BURUK 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 yang terlalu besar dan tidak muat di layar (anggap ukuran resolusi layar 800×600 pixel)

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

8 WEB BURUK 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

9 WEB BURUK SAMPAH - Counter - Iklan sampah - Pengunjung harus melakukan scroll menyamping (kiri-kanan) – percayalah, ini menyebalkan! - Scroll bar frame di tengah-tengah halaman

10 WEB BURUK 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

11 WEB BURUK 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

12 WEB 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.

13 WEB BAIK 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

14 WEB BAIK 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

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

16 WEB BAIK GAMBAR - Tombol-tombol berukuran secukupnya - 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

17 TERIMAKASIH SUMBER :