Pramita Firnanda 2 D3 Teknik Informatika A 7411030004.

Slides:



Advertisements
Presentasi serupa
Layout Situs dengan Tabel
Advertisements

PRINSIP DESIGN IMK.
1 Start with Question • Pernahkah Anda menutup sebuah website karena waktu loading yang lama? • Seberapa sering Anda menemukan website yang –tidak (atau.
SEO Search Engine Optimization
Membuat Template Web Website yang baik adalah website yang konsisten. Konsisten di sini berarti memiliki bentuk, layout dan navigasi yang sama antar satu.
Desain Web Nanik Triana, M.Kom
By Heri Siswanto  Menurutku interaksi manusia dan komputer adalah studi tentang hubungan yang terjadi antara manusia dengan komputer untuk.
Pertemuan 2.  Dreamweaver adl salah satu program pembuatan website yang mempunyai banyak sekali menu-menu dan tool-tool yang dapat dipergunakan untuk.
PRESENTASI HASIL DISKUSI KELOMPOK 3
PERANCANGAN ANTARMUKA - 2
Power Point Oleh : Nurun Fauka Nuri.
LAYAR MUSIK ONLINE BERBASIS WEB DENGAN MENGGUNAKAN PHP
Apa itu HTML ? Perangkat lunak yang digunakan untuk membuat atau mengetikkan kode file HTML Perangkat lunak yang digunakan untuk menjalankan atau menampilkan.
Usability.
Chapter 8 Desain Web.
Basic HTML Konsep dan Fungsi HTML
Mengelola isi halaman web
KONSEP WEB.
Membuat Blog Menggunakan Word Press. Contents Mengganti Template Mengisi Content Langkah-langkah Membuat Blog Persyaratan Membuat Blog Pendahuluan.
Desain permodelan grafis
 Tabel sangat penting artinya dalam desain web. Karena dengan menggunakan tag table Anda dapat membuat halaman web "terbagi" pada beberapa kolom atau.
HTML Basic.
Enumerasi, Images & Table
EDITING TEKS PERTEMUAN 2.
LINK.
TABEL , FORM DAN FRAME.
BAB 5 Mengakses Internet.
Usability: Disain Web yang Brilian
HTML (cont.) (Nelly Sofi). Peng. Komp & TI 2C2 Untuk mempelajari HTML saat ini tidaklah sulit karena sudah banyak program yang mampu menghasilkan dokumen.
Formatting Frame.
Desain Web dengan Tag HTML
MENU dan navigasi situs
Interaksi Manusia & Komputer Website
Konsep sistem informasi a
Nisn.data.kemdiknas.go.id 25/10/2017.
KUALITAS APLIKASI WEB Siti asmiatun, m.kom.
Interaksi Manusia dan Komputer
PERTEMUAN 2 HTML (Lanjutan).
Memahami format teks pada halaman web Menyajikan teks dalam format tertentu pada halaman web Create By Widiyono.
Membangun Menu Sistem dan Skema Navigasi
KONSEP DASAR DESAIN WEB
Web-Based User Interface
Perancangan Multimedia Bertalya
Web-Based User Interface
Web-Based User Interface
(MEMBUAT DOKUMEN DENGAN PENGOLAHAN KATA)
PANDUAN PEMBUATAN PRESENTASI
Microsoft Word 2007.
HTML.
Mobile Device User Interface
DESAIN INFORMASI DAN NAVIGASI
Mengelola isi halaman web
Menu Drop Down.
Area Kerja Dreamweaver
Tipografi.
Membangun Web yang baik (lanjutan)
DESAIN GRAFIS IMK 2015 Laseri, S.Kom.
PUTRI ISMA OKTAWIANI ( )
Analisa Website Muhammad Aji Guna D |
Mengelola isi halaman web
Desain web Good vs bad Dimas wahyu utomo
Cara Merancang Halaman Web
Abdu Hari Wijaya Nurul Fajri
MEMBUAT MEDIA PEMBELAJARAN INTERAKTIF DENGAN SLIDE MASTER & HYPERLINK
Desain Grafis Berdasarkan Pembagian Grid
Cara mengustomisasi Microsoft SharePoint Anda Situs web online
MUHAMAD HENRICK CAHYANTO, ST SMAN 11 BANDUNG
MUHAMAD HENRICK CAHYANTO, ST SMAN 11 BANDUNG
INTERAKSI MANUSIA & KOMPUTER
DREAMWEAVER.
Transcript presentasi:

Pramita Firnanda 2 D3 Teknik Informatika A 7411030004

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

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.

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

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)

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

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

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)

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 e-mail - Animasi yang tidak pernah berhenti

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

Bad Design VS Good Design

Contoh web yang buruk 5 Web dibawah ini adalah contoh web yang buruk : 1. Ada yang buruk dari segi pengambilan warna, http://phat.distort.org/ 2. Background yang merusak mata, http://www.dokimos.org/ajff/ 3. Background yang bisa membuat mata anda pusing, http://aferai.multiply.com/journal/item/9 4. Penempatan posisi yang acak-acakan, http://ronoslund.com/ 5. Hampir sama dengan yang diatas, masalah penempatan, http://anselme.homestead.com/AFPHAITI.html

Contoh web yang baik http://awkward-art.com/ www.detik.com http://pramitananda.wordpress.com/ http://www.themesbase.com/ http://www.brusheezy.com/