Pramita Firnanda 2 D3 Teknik Informatika A 7411030004.

Presentasi berjudul: "Pramita Firnanda 2 D3 Teknik Informatika A 7411030004."— Transcript presentasi:

1 Pramita Firnanda 2 D3 Teknik Informatika A

2 Website Website adalah halaman informasi yang tersedia di internet.
Tujuan kita membuat website adalah menyediakan informasi. Membuat informasi tersebut dapat diakses dengan baik oleh user. Membuat informasi yang bermanfaat bagi user. User yang menentukan apakah website tersebut mau dibaca atau di tutup

3 Design web yang baik DESAIN SECARA UMUM - Loading halaman cepat
- Halaman index atau home pas di 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.

4 Design web yang 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 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

5 Design web yang baik LINK
- Warna link disesuaikan dengan warna halaman - Link selalu bergaris bawah sehingga jelas bagi pengunjung GAMBAR - Tombol-tombol berukuran secukupnya - Setiap gambar ada keterangan - Setiap link gambar memiliki link teks yang sesuai - Gambar dan latar belakang menggunakan warna yang mampu ditampilkan browser (browser-safe colors)

6 Design web yang buruk DESAIN SECARA UMUM Loading makan waktu lama
Frame yang harus discroll menyamping Tak ada fokus tema pada 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 terlalu ramai dan menyakitkan mata (misalnya menggunakan gambar gif animasi) yang membuat tulisan tidak jelas

7 Design web yang buruk TEKS LINK
- 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 - Ada border link 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

8 Design web yang 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 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)

9 Design web yang buruk 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 - Animasi yang tidak pernah berhenti

10 Design web yang buruk - Iklan sampah
SPAM - Iklan sampah - Pengunjung harus melakukan scroll menyamping (kiri-kanan) 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

11 Bad Design VS Good Design

12 Contoh web yang buruk 5 Web dibawah ini adalah contoh web yang buruk : 1. Ada yang buruk dari segi pengambilan warna, 2. Background yang merusak mata, 3. Background yang bisa membuat mata anda pusing, 4. Penempatan posisi yang acak-acakan, 5. Hampir sama dengan yang diatas, masalah penempatan,

13 Contoh web yang baik http://awkward-art.com/ www.detik.com