R

I )
NMP T
E

S G
K SI K O
U

A
R DE A N
T E
IN IO U S IN A
D

G N CT A N
S I A M
E E RK S I
D T RA
(INN T E
I
WEB DESIGN
Halaman Web (web page) didefinisikan sebagai dokumen HTML tunggal.
Situs Web (website) adalah kumpulan dari laman web yang saling berkaitan
(terkait).
Merancang situs web yang baik membutuhkan lebih dari sekedar menyusun
halaman.
LAYOUT WEB
Tata letak (layout) halaman web sangat penting.
Tata letak yang buruk, dapat membuat:
1. Navigasi sulit dilakukan.
2. Sulit menemukan informasi di halaman.
3. Tidak menarik secara visual (visually unappealing).
TABEL
Gunakan tabel untuk meletakkan halaman Anda!
Buat batas tabel tidak terlihat.
Tabel 2x2 berfungsi dengan baik.
AREA WEB

Logo Header

Menu Content
LAYOUT A 2 X 2
TABEL DALAM TABEL
BAGIAN LUAR TABEL
BAGIAN DALAM TABEL
BAGIAN DALAM TABEL (2)
DITENGAH DENGAN TIGA KOLOM
DESAIN YANG KOMPLEK
INFORMASI WEB
Putuskan info apa yang ada di setiap halaman:
a. Halaman teman
b. Halaman keluarga
c. Halaman pribadi
d. Halaman hobi
KOMUNIKASI WEB YANG BAGUS
Komunikasi web yang bagus, memuat beberapa karakteristik:
 Singkat (be concise).
 Batasi pilihan-gunakan struktur hirarki.
 Hirarki adalah organisasi terstruktur di mana beberapa halaman berada pada
level yang lebih tinggi dari pada yang lain.
KONSISTENSI DESAIN
Kata kunci dalam mendesain web terdiri 3 hal:
Gunakan font yang sama di seluruh halaman web.
Gunakan grafik yang konsisten di situs web (antar halaman).
Gunakan skema warna yang konsisten.
CONTOH
RUJUKAN DESAIN WEB
Halaman Web Bagus
https://medicine.yale.edu/
Gambar

http://clipart-library.com/
Huruf
https://www.1001freefonts.com/
KESIMPULAN
1. Dalam desain website tentunya membutuhkan
proses jika ingin hasilnya lebih baik.
2. Proses ini sangat penting diketahui oleh seorang
desainer web, karena desain website tidak hanya
fokus pada informasi apa yang ditulis (baca:isi)
tetapi jauh lebih penting bagaimana informasi
dapat ‘dinikmati’ dengan baik oleh pembaca.
3. Supaya bisa dinikmati, harmonisasi (layout,
gambar, huruf, warna) perlu dilakukan.
APA YANG DISEBUT DESAIN INTERAKSI?
 “designing interactive products to support people in
their everyday and working lives ...“
(Beyond Human-Computer iIteraction,
Gayner Redver Mutton, dkk, 2002)

 Desain interaksi adalah merancang produk interaktif untuk mendukung

orang-orang dalam kehidupan sehari-hari dan pekerjaan mereka
 Desain ini berhubungan dengan orang menggunakan sistem (bekerja),
berkomunikasi dan berinteraksi.
4 AKTIVITAS PROSES DESAIN INTERAKSI
1. Mengidentifikasi kebutuhan dan menetapkan
persyaratan.
2. Mengembangkan desain.
3. Membangun versi interaktif dari desain shg dapat
dikomunikasikan dan dinilai(Visual/GUI).
4. Mengevaluasi apa yang sedang dibangun (desain)
sepanjang proses.
TUJUAN DESAIN INTERAKSI
1. Dengan desain yang baik, dapat memuaskan kebutuhan dan
keinginan para pengguna produk/layanan (it must be easy to use).
“Cooper introduces the concept of cognitive friction, which is when the
interface of a design is complex and difficult to use, and behaves
inconsistently and unexpectedly, possessing different modes. Alternatively,
interfaces can be designed to serve the needs of the service/product provider.
User needs may be poorly served by this approach”.
(Cooper, dkk,2004)
2. Membuat program lebih menarik (estetik program)
“Facebook dengan warna birunya, whatsapp dengan warna hijau,
instagram dengan icon (khas), twiterr dengan biru langit”.
TUJUAN & ORIENTASI DESAIN ITERAKSI (2)
3. Memudahkan user untuk input data (must be easy learned).
4. Melihat tampilan hasil proses data (output program).
5. Memudahkan pembacaan data dari sebuah program.
6. Efisiensi kerja oleh user (ex.graphic, chart, diagram, dsb).
7. Memberikan respon untuk setiap aksi (feed back).
8. Menghilangkan ambiguitas dari printah program (ex.save/delete
button)
DESAIN DIKATAKAN BURUK
1. Halaman Webiste (tampilan) utama membingungkan karena semua tombol
ditampilkan tidak beraturan.
2. Huruf tulisan sangat kecil, sehingga susah untuk dilihat (dipilih).
3. Tidak ada peta alur website, sehingga memungkinkan visitor web
kebingungan mencari sesuatu di website ini.
4. Desain website tidak beraturan ( not user friendly).
5. Warna sesuai tetapi warna hanya pada header dan link, sehingga tidak
menarik.
CONTOH DESAIN YANG BURUK (BAD DESIGN)
SOCIAL MEDIA ICONS ON PRINT ADS

“ Why are social media icons in print ads? A magazine is not a

computer— no one can click icons!”

Sumber:https://www.sitebuilderreport.com/blog/examples-of-bad-design-in-the-
real-world
CONTOH DESAIN WEB BURUK

Gambar 3. Contoh desain interface yang buruk

BATHROOM DOORS THAT DON’T CLEARLY INDICATE GENDER

Sometimes restaurants make bathroom gender labels playful.

That’s okay, so long as the sign does the one job it’s supposed to do:
indicate the gender
ATM’S THAT SPIT OUT YOUR CARD AFTER THE CASH

“...ATM’s that spit out your card after the cash”

DOORS THAT DON’T INDICATE WHICH SIDE TO PUSH,
YOU HAVE A 50% CHANCE OF GETTING THIS DOOR RIGHT:
DESAIN DIKATAKAN BAIK (SUCCESSFUL USER INTERFACE)

1. Loading halaman cepat (responsive)

2. 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 (familiar).
3. Warna latar belakang tidak bertabrakan dengan warna teks (consistent)
4. Tombol dan bar navigasi memberi petunjuk kepada pengunjung dimana
mereka berada sekarang, dan halaman apa yang mereka lihat sekarang
(attractive)
5. Setiap link gambar memiliki link teks yang sesuai (communicating meaning
and function)
COMMUNICATING MEANING AND FUNCTION

Gambar 1. Communicating meaning and function

 User to enable people to interact with your system

by communicating meaning and function (gambar 1).

 Clarity is the most important element of user interface design.

 Clarity in a user interface is great, however,
you should be careful not to fall into the trap of over-clarifying (gambar 2)

Gambar 2. Keeping things clear and concise

CONSISTENT !
“...beradaptasi
dengan konteks
apapun
adalah baik,
namun tingkat
konsistensi
juga harus
diperhatikan.” !
FORGIVING!
“...Nobody is perfect, and people are bound to make
mistakes when using your software or website”
&
“... Don’t punish the user – build a forgiving interface to
remedy issues that come up”.
KESIMPULAN
1. Desain interface yang baik adalah desain yang bisa digunakan
pengguna dengan mudah (included: user friendy, responsive,
attractive, communication meaning).
2. Untuk membuat mudah interface, dibutuhkan keterampilan dan
waktu, dan setiap solusi akan bergantung kasus per kasus. Dan
3. Tidak harus banyak deskripsi dan penjelasan, yang semuanya
akan menjadi besar dan tidak tepat (clarity & concise).
SOAL
1. Buatlah kelompok (maksimal 2 mahasiswa), kemudian tulis identitas anda (NIM, Nama dan kelas)
2. Buatlah program dengan bahasa pemrograman yang anda kuasai (boleh web, mobile atau dekstop base)
3. Unsur program yang dibuat harus memuat beberapa karakteristik dari user interface yang baik,
seperti : responsive, familiar, attractive, communicating meaning and function.
4. Tema pilihan program (pilih salah satu):
• Sistem informasi bimbingan online
• Sistem laporan Sosial Masyarakat (Pengrusakan/Kenakalan Remaja,dst)
• Sistem pengajuan surat menyurat (tingkat Desa/Keluarahan)
• Sistem informasi pembayaran SPP Sekolah
• Sistem penanganan bencana banjir
• Sistem penanganan/ pencegahan Virus Corona (Covid-19)
5. Tentukan beberapa functional sistem menurut kebutuhan data dilapangan dan contoh kasus.