prinsip desain website yang ramah pengguna -...
TRANSCRIPT
![Page 1: Prinsip Desain Website yang Ramah Pengguna - dsitd.ipb.ac.iddsitd.ipb.ac.id/wp-content/uploads/2017/08/Prinsip-Desain-Website-yang... · PENGGUNAAN WARNA Pilih palette terbaik yang](https://reader030.vdocuments.net/reader030/viewer/2022040122/5d4a065b88c993eb068bbea9/html5/thumbnails/1.jpg)
PRINSIP DESAIN WEBSITE YANG RAMAH PENGGUNA Auzi Asfarian
P E M U TA K H I R A N W E B U N I T K E R JA I P B, 3 1 AG U S T U S 2 0 1 7
![Page 2: Prinsip Desain Website yang Ramah Pengguna - dsitd.ipb.ac.iddsitd.ipb.ac.id/wp-content/uploads/2017/08/Prinsip-Desain-Website-yang... · PENGGUNAAN WARNA Pilih palette terbaik yang](https://reader030.vdocuments.net/reader030/viewer/2022040122/5d4a065b88c993eb068bbea9/html5/thumbnails/2.jpg)
TOPIK
User Experience untuk Web
Mengenal Karakteristik Pengunjung Web
Penggunaan Elemen Desain yang Tepat
2
![Page 3: Prinsip Desain Website yang Ramah Pengguna - dsitd.ipb.ac.iddsitd.ipb.ac.id/wp-content/uploads/2017/08/Prinsip-Desain-Website-yang... · PENGGUNAAN WARNA Pilih palette terbaik yang](https://reader030.vdocuments.net/reader030/viewer/2022040122/5d4a065b88c993eb068bbea9/html5/thumbnails/3.jpg)
3APA ITU USER EXPERIENCE?
![Page 4: Prinsip Desain Website yang Ramah Pengguna - dsitd.ipb.ac.iddsitd.ipb.ac.id/wp-content/uploads/2017/08/Prinsip-Desain-Website-yang... · PENGGUNAAN WARNA Pilih palette terbaik yang](https://reader030.vdocuments.net/reader030/viewer/2022040122/5d4a065b88c993eb068bbea9/html5/thumbnails/4.jpg)
4
![Page 5: Prinsip Desain Website yang Ramah Pengguna - dsitd.ipb.ac.iddsitd.ipb.ac.id/wp-content/uploads/2017/08/Prinsip-Desain-Website-yang... · PENGGUNAAN WARNA Pilih palette terbaik yang](https://reader030.vdocuments.net/reader030/viewer/2022040122/5d4a065b88c993eb068bbea9/html5/thumbnails/5.jpg)
5
![Page 6: Prinsip Desain Website yang Ramah Pengguna - dsitd.ipb.ac.iddsitd.ipb.ac.id/wp-content/uploads/2017/08/Prinsip-Desain-Website-yang... · PENGGUNAAN WARNA Pilih palette terbaik yang](https://reader030.vdocuments.net/reader030/viewer/2022040122/5d4a065b88c993eb068bbea9/html5/thumbnails/6.jpg)
6
![Page 7: Prinsip Desain Website yang Ramah Pengguna - dsitd.ipb.ac.iddsitd.ipb.ac.id/wp-content/uploads/2017/08/Prinsip-Desain-Website-yang... · PENGGUNAAN WARNA Pilih palette terbaik yang](https://reader030.vdocuments.net/reader030/viewer/2022040122/5d4a065b88c993eb068bbea9/html5/thumbnails/7.jpg)
7
![Page 8: Prinsip Desain Website yang Ramah Pengguna - dsitd.ipb.ac.iddsitd.ipb.ac.id/wp-content/uploads/2017/08/Prinsip-Desain-Website-yang... · PENGGUNAAN WARNA Pilih palette terbaik yang](https://reader030.vdocuments.net/reader030/viewer/2022040122/5d4a065b88c993eb068bbea9/html5/thumbnails/8.jpg)
UX: APA YANG PENGGUNALIHAT, DENGAR, RASAKANSAAT MENGGUNAKAN SUATUPRODUK
8
![Page 9: Prinsip Desain Website yang Ramah Pengguna - dsitd.ipb.ac.iddsitd.ipb.ac.id/wp-content/uploads/2017/08/Prinsip-Desain-Website-yang... · PENGGUNAAN WARNA Pilih palette terbaik yang](https://reader030.vdocuments.net/reader030/viewer/2022040122/5d4a065b88c993eb068bbea9/html5/thumbnails/9.jpg)
UX YANG BAIK:NYAMAN DAN MUDAH DIGUNAKAN PENGGUNA
9
![Page 10: Prinsip Desain Website yang Ramah Pengguna - dsitd.ipb.ac.iddsitd.ipb.ac.id/wp-content/uploads/2017/08/Prinsip-Desain-Website-yang... · PENGGUNAAN WARNA Pilih palette terbaik yang](https://reader030.vdocuments.net/reader030/viewer/2022040122/5d4a065b88c993eb068bbea9/html5/thumbnails/10.jpg)
SUSAH NYARI OJEK?
10
![Page 11: Prinsip Desain Website yang Ramah Pengguna - dsitd.ipb.ac.iddsitd.ipb.ac.id/wp-content/uploads/2017/08/Prinsip-Desain-Website-yang... · PENGGUNAAN WARNA Pilih palette terbaik yang](https://reader030.vdocuments.net/reader030/viewer/2022040122/5d4a065b88c993eb068bbea9/html5/thumbnails/11.jpg)
MALES KELUAR NYARI MAKAN?
11
![Page 12: Prinsip Desain Website yang Ramah Pengguna - dsitd.ipb.ac.iddsitd.ipb.ac.id/wp-content/uploads/2017/08/Prinsip-Desain-Website-yang... · PENGGUNAAN WARNA Pilih palette terbaik yang](https://reader030.vdocuments.net/reader030/viewer/2022040122/5d4a065b88c993eb068bbea9/html5/thumbnails/12.jpg)
SMS MAHAL?
12
![Page 13: Prinsip Desain Website yang Ramah Pengguna - dsitd.ipb.ac.iddsitd.ipb.ac.id/wp-content/uploads/2017/08/Prinsip-Desain-Website-yang... · PENGGUNAAN WARNA Pilih palette terbaik yang](https://reader030.vdocuments.net/reader030/viewer/2022040122/5d4a065b88c993eb068bbea9/html5/thumbnails/13.jpg)
UX YANG BAIK MEMBANTU PENGGUNA MENCAPAI TUJUANNYA
13
![Page 14: Prinsip Desain Website yang Ramah Pengguna - dsitd.ipb.ac.iddsitd.ipb.ac.id/wp-content/uploads/2017/08/Prinsip-Desain-Website-yang... · PENGGUNAAN WARNA Pilih palette terbaik yang](https://reader030.vdocuments.net/reader030/viewer/2022040122/5d4a065b88c993eb068bbea9/html5/thumbnails/14.jpg)
KITA INGIN MENDENGAR ORANG BERKATA, “OH, BUKA AJA DI WEB UNIT X”
14
![Page 15: Prinsip Desain Website yang Ramah Pengguna - dsitd.ipb.ac.iddsitd.ipb.ac.id/wp-content/uploads/2017/08/Prinsip-Desain-Website-yang... · PENGGUNAAN WARNA Pilih palette terbaik yang](https://reader030.vdocuments.net/reader030/viewer/2022040122/5d4a065b88c993eb068bbea9/html5/thumbnails/15.jpg)
BEBERAPA PERTANYAAN TENTANG WEB KITA
Siapa saja pengunjung web unit kita?
Apa saja informasi yang mereka butuhkan?
Sudahkah web kita menyediakan informasi yang mereka butuhkan?
Apakah informasi tersebut mudah diakses?
Apakah informasi tersebut disajikan dalam bentuk yang nyaman untuk dibaca?
15
![Page 16: Prinsip Desain Website yang Ramah Pengguna - dsitd.ipb.ac.iddsitd.ipb.ac.id/wp-content/uploads/2017/08/Prinsip-Desain-Website-yang... · PENGGUNAAN WARNA Pilih palette terbaik yang](https://reader030.vdocuments.net/reader030/viewer/2022040122/5d4a065b88c993eb068bbea9/html5/thumbnails/16.jpg)
KENALI PENGGUNA ANDA
Sebelum masuk ke ‘desain’, pahami dahulu karakteristik dan motivasi pengunjung web Anda.
16
![Page 17: Prinsip Desain Website yang Ramah Pengguna - dsitd.ipb.ac.iddsitd.ipb.ac.id/wp-content/uploads/2017/08/Prinsip-Desain-Website-yang... · PENGGUNAAN WARNA Pilih palette terbaik yang](https://reader030.vdocuments.net/reader030/viewer/2022040122/5d4a065b88c993eb068bbea9/html5/thumbnails/17.jpg)
17
![Page 18: Prinsip Desain Website yang Ramah Pengguna - dsitd.ipb.ac.iddsitd.ipb.ac.id/wp-content/uploads/2017/08/Prinsip-Desain-Website-yang... · PENGGUNAAN WARNA Pilih palette terbaik yang](https://reader030.vdocuments.net/reader030/viewer/2022040122/5d4a065b88c993eb068bbea9/html5/thumbnails/18.jpg)
18
http://www.harvard.edu
![Page 19: Prinsip Desain Website yang Ramah Pengguna - dsitd.ipb.ac.iddsitd.ipb.ac.id/wp-content/uploads/2017/08/Prinsip-Desain-Website-yang... · PENGGUNAAN WARNA Pilih palette terbaik yang](https://reader030.vdocuments.net/reader030/viewer/2022040122/5d4a065b88c993eb068bbea9/html5/thumbnails/19.jpg)
19
![Page 20: Prinsip Desain Website yang Ramah Pengguna - dsitd.ipb.ac.iddsitd.ipb.ac.id/wp-content/uploads/2017/08/Prinsip-Desain-Website-yang... · PENGGUNAAN WARNA Pilih palette terbaik yang](https://reader030.vdocuments.net/reader030/viewer/2022040122/5d4a065b88c993eb068bbea9/html5/thumbnails/20.jpg)
20
![Page 21: Prinsip Desain Website yang Ramah Pengguna - dsitd.ipb.ac.iddsitd.ipb.ac.id/wp-content/uploads/2017/08/Prinsip-Desain-Website-yang... · PENGGUNAAN WARNA Pilih palette terbaik yang](https://reader030.vdocuments.net/reader030/viewer/2022040122/5d4a065b88c993eb068bbea9/html5/thumbnails/21.jpg)
https://college.harvard.edu/admissions/choosing-harvard21
![Page 22: Prinsip Desain Website yang Ramah Pengguna - dsitd.ipb.ac.iddsitd.ipb.ac.id/wp-content/uploads/2017/08/Prinsip-Desain-Website-yang... · PENGGUNAAN WARNA Pilih palette terbaik yang](https://reader030.vdocuments.net/reader030/viewer/2022040122/5d4a065b88c993eb068bbea9/html5/thumbnails/22.jpg)
22
![Page 23: Prinsip Desain Website yang Ramah Pengguna - dsitd.ipb.ac.iddsitd.ipb.ac.id/wp-content/uploads/2017/08/Prinsip-Desain-Website-yang... · PENGGUNAAN WARNA Pilih palette terbaik yang](https://reader030.vdocuments.net/reader030/viewer/2022040122/5d4a065b88c993eb068bbea9/html5/thumbnails/23.jpg)
23
https://www.stanford.edu
![Page 24: Prinsip Desain Website yang Ramah Pengguna - dsitd.ipb.ac.iddsitd.ipb.ac.id/wp-content/uploads/2017/08/Prinsip-Desain-Website-yang... · PENGGUNAAN WARNA Pilih palette terbaik yang](https://reader030.vdocuments.net/reader030/viewer/2022040122/5d4a065b88c993eb068bbea9/html5/thumbnails/24.jpg)
24PENGGUNAAN ELEMEN DESAIN
![Page 25: Prinsip Desain Website yang Ramah Pengguna - dsitd.ipb.ac.iddsitd.ipb.ac.id/wp-content/uploads/2017/08/Prinsip-Desain-Website-yang... · PENGGUNAAN WARNA Pilih palette terbaik yang](https://reader030.vdocuments.net/reader030/viewer/2022040122/5d4a065b88c993eb068bbea9/html5/thumbnails/25.jpg)
25
#1 GUNAKAN CMSMenyederhanakan banyak proses desain dan pengembangan web.
Banyak pilihan tema, namun pilih dengan bijak.
Pastikan update.
![Page 26: Prinsip Desain Website yang Ramah Pengguna - dsitd.ipb.ac.iddsitd.ipb.ac.id/wp-content/uploads/2017/08/Prinsip-Desain-Website-yang... · PENGGUNAAN WARNA Pilih palette terbaik yang](https://reader030.vdocuments.net/reader030/viewer/2022040122/5d4a065b88c993eb068bbea9/html5/thumbnails/26.jpg)
26
PASTIKAN TEMA YANG DIPILIH RESPONSIF
![Page 27: Prinsip Desain Website yang Ramah Pengguna - dsitd.ipb.ac.iddsitd.ipb.ac.id/wp-content/uploads/2017/08/Prinsip-Desain-Website-yang... · PENGGUNAAN WARNA Pilih palette terbaik yang](https://reader030.vdocuments.net/reader030/viewer/2022040122/5d4a065b88c993eb068bbea9/html5/thumbnails/27.jpg)
27
![Page 28: Prinsip Desain Website yang Ramah Pengguna - dsitd.ipb.ac.iddsitd.ipb.ac.id/wp-content/uploads/2017/08/Prinsip-Desain-Website-yang... · PENGGUNAAN WARNA Pilih palette terbaik yang](https://reader030.vdocuments.net/reader030/viewer/2022040122/5d4a065b88c993eb068bbea9/html5/thumbnails/28.jpg)
28
#2 GUNAKAN GAMBAR TERBAIK
![Page 29: Prinsip Desain Website yang Ramah Pengguna - dsitd.ipb.ac.iddsitd.ipb.ac.id/wp-content/uploads/2017/08/Prinsip-Desain-Website-yang... · PENGGUNAAN WARNA Pilih palette terbaik yang](https://reader030.vdocuments.net/reader030/viewer/2022040122/5d4a065b88c993eb068bbea9/html5/thumbnails/29.jpg)
29
![Page 30: Prinsip Desain Website yang Ramah Pengguna - dsitd.ipb.ac.iddsitd.ipb.ac.id/wp-content/uploads/2017/08/Prinsip-Desain-Website-yang... · PENGGUNAAN WARNA Pilih palette terbaik yang](https://reader030.vdocuments.net/reader030/viewer/2022040122/5d4a065b88c993eb068bbea9/html5/thumbnails/30.jpg)
30
![Page 31: Prinsip Desain Website yang Ramah Pengguna - dsitd.ipb.ac.iddsitd.ipb.ac.id/wp-content/uploads/2017/08/Prinsip-Desain-Website-yang... · PENGGUNAAN WARNA Pilih palette terbaik yang](https://reader030.vdocuments.net/reader030/viewer/2022040122/5d4a065b88c993eb068bbea9/html5/thumbnails/31.jpg)
31
https://www.stanford.edu
Hero Image
![Page 32: Prinsip Desain Website yang Ramah Pengguna - dsitd.ipb.ac.iddsitd.ipb.ac.id/wp-content/uploads/2017/08/Prinsip-Desain-Website-yang... · PENGGUNAAN WARNA Pilih palette terbaik yang](https://reader030.vdocuments.net/reader030/viewer/2022040122/5d4a065b88c993eb068bbea9/html5/thumbnails/32.jpg)
32https://mit.edu
Hero Image
![Page 33: Prinsip Desain Website yang Ramah Pengguna - dsitd.ipb.ac.iddsitd.ipb.ac.id/wp-content/uploads/2017/08/Prinsip-Desain-Website-yang... · PENGGUNAAN WARNA Pilih palette terbaik yang](https://reader030.vdocuments.net/reader030/viewer/2022040122/5d4a065b88c993eb068bbea9/html5/thumbnails/33.jpg)
HERO IMAGE
Banner web ukuran besar (hampir satu layar).
Dilihat pertama kali oleh pengunjung web Anda.
Digunakan untuk menyampaikan produk / manfaat utama dari web Anda.
33
![Page 34: Prinsip Desain Website yang Ramah Pengguna - dsitd.ipb.ac.iddsitd.ipb.ac.id/wp-content/uploads/2017/08/Prinsip-Desain-Website-yang... · PENGGUNAAN WARNA Pilih palette terbaik yang](https://reader030.vdocuments.net/reader030/viewer/2022040122/5d4a065b88c993eb068bbea9/html5/thumbnails/34.jpg)
34
CROP, BUKAN STRETCH
![Page 35: Prinsip Desain Website yang Ramah Pengguna - dsitd.ipb.ac.iddsitd.ipb.ac.id/wp-content/uploads/2017/08/Prinsip-Desain-Website-yang... · PENGGUNAAN WARNA Pilih palette terbaik yang](https://reader030.vdocuments.net/reader030/viewer/2022040122/5d4a065b88c993eb068bbea9/html5/thumbnails/35.jpg)
35
JANGAN GUNAKAN FOTO ‘BAJAKAN’
![Page 36: Prinsip Desain Website yang Ramah Pengguna - dsitd.ipb.ac.iddsitd.ipb.ac.id/wp-content/uploads/2017/08/Prinsip-Desain-Website-yang... · PENGGUNAAN WARNA Pilih palette terbaik yang](https://reader030.vdocuments.net/reader030/viewer/2022040122/5d4a065b88c993eb068bbea9/html5/thumbnails/36.jpg)
36
JANGAN GUNAKAN FOTO ‘BAJAKAN’
![Page 37: Prinsip Desain Website yang Ramah Pengguna - dsitd.ipb.ac.iddsitd.ipb.ac.id/wp-content/uploads/2017/08/Prinsip-Desain-Website-yang... · PENGGUNAAN WARNA Pilih palette terbaik yang](https://reader030.vdocuments.net/reader030/viewer/2022040122/5d4a065b88c993eb068bbea9/html5/thumbnails/37.jpg)
37
https://stocksnap.io
![Page 38: Prinsip Desain Website yang Ramah Pengguna - dsitd.ipb.ac.iddsitd.ipb.ac.id/wp-content/uploads/2017/08/Prinsip-Desain-Website-yang... · PENGGUNAAN WARNA Pilih palette terbaik yang](https://reader030.vdocuments.net/reader030/viewer/2022040122/5d4a065b88c993eb068bbea9/html5/thumbnails/38.jpg)
38
http://www.freepik.com/
![Page 39: Prinsip Desain Website yang Ramah Pengguna - dsitd.ipb.ac.iddsitd.ipb.ac.id/wp-content/uploads/2017/08/Prinsip-Desain-Website-yang... · PENGGUNAAN WARNA Pilih palette terbaik yang](https://reader030.vdocuments.net/reader030/viewer/2022040122/5d4a065b88c993eb068bbea9/html5/thumbnails/39.jpg)
39
www.canva.com
![Page 40: Prinsip Desain Website yang Ramah Pengguna - dsitd.ipb.ac.iddsitd.ipb.ac.id/wp-content/uploads/2017/08/Prinsip-Desain-Website-yang... · PENGGUNAAN WARNA Pilih palette terbaik yang](https://reader030.vdocuments.net/reader030/viewer/2022040122/5d4a065b88c993eb068bbea9/html5/thumbnails/40.jpg)
40
AMBIL FOTO SENDIRI
![Page 41: Prinsip Desain Website yang Ramah Pengguna - dsitd.ipb.ac.iddsitd.ipb.ac.id/wp-content/uploads/2017/08/Prinsip-Desain-Website-yang... · PENGGUNAAN WARNA Pilih palette terbaik yang](https://reader030.vdocuments.net/reader030/viewer/2022040122/5d4a065b88c993eb068bbea9/html5/thumbnails/41.jpg)
41
PENGGUNAAN GAMBARGunakan gambar terbaik.
Crop, bukan stretch.
Perhatikan lisensi gambar.
Kompresi gambar Anda!
![Page 42: Prinsip Desain Website yang Ramah Pengguna - dsitd.ipb.ac.iddsitd.ipb.ac.id/wp-content/uploads/2017/08/Prinsip-Desain-Website-yang... · PENGGUNAAN WARNA Pilih palette terbaik yang](https://reader030.vdocuments.net/reader030/viewer/2022040122/5d4a065b88c993eb068bbea9/html5/thumbnails/42.jpg)
42
#3 WARNA
You have a whopping 16.8 million colors
to choose from when designing a website.
And when you start combining them to form
a palette? Your array of choices instantly
becomes practically infinite.
![Page 43: Prinsip Desain Website yang Ramah Pengguna - dsitd.ipb.ac.iddsitd.ipb.ac.id/wp-content/uploads/2017/08/Prinsip-Desain-Website-yang... · PENGGUNAAN WARNA Pilih palette terbaik yang](https://reader030.vdocuments.net/reader030/viewer/2022040122/5d4a065b88c993eb068bbea9/html5/thumbnails/43.jpg)
43
RGB Color Wheels
![Page 44: Prinsip Desain Website yang Ramah Pengguna - dsitd.ipb.ac.iddsitd.ipb.ac.id/wp-content/uploads/2017/08/Prinsip-Desain-Website-yang... · PENGGUNAAN WARNA Pilih palette terbaik yang](https://reader030.vdocuments.net/reader030/viewer/2022040122/5d4a065b88c993eb068bbea9/html5/thumbnails/44.jpg)
44
Colour Palette
![Page 45: Prinsip Desain Website yang Ramah Pengguna - dsitd.ipb.ac.iddsitd.ipb.ac.id/wp-content/uploads/2017/08/Prinsip-Desain-Website-yang... · PENGGUNAAN WARNA Pilih palette terbaik yang](https://reader030.vdocuments.net/reader030/viewer/2022040122/5d4a065b88c993eb068bbea9/html5/thumbnails/45.jpg)
45
![Page 46: Prinsip Desain Website yang Ramah Pengguna - dsitd.ipb.ac.iddsitd.ipb.ac.id/wp-content/uploads/2017/08/Prinsip-Desain-Website-yang... · PENGGUNAAN WARNA Pilih palette terbaik yang](https://reader030.vdocuments.net/reader030/viewer/2022040122/5d4a065b88c993eb068bbea9/html5/thumbnails/46.jpg)
Monochrome Complementary
Analogues Triadic
![Page 47: Prinsip Desain Website yang Ramah Pengguna - dsitd.ipb.ac.iddsitd.ipb.ac.id/wp-content/uploads/2017/08/Prinsip-Desain-Website-yang... · PENGGUNAAN WARNA Pilih palette terbaik yang](https://reader030.vdocuments.net/reader030/viewer/2022040122/5d4a065b88c993eb068bbea9/html5/thumbnails/47.jpg)
47
![Page 48: Prinsip Desain Website yang Ramah Pengguna - dsitd.ipb.ac.iddsitd.ipb.ac.id/wp-content/uploads/2017/08/Prinsip-Desain-Website-yang... · PENGGUNAAN WARNA Pilih palette terbaik yang](https://reader030.vdocuments.net/reader030/viewer/2022040122/5d4a065b88c993eb068bbea9/html5/thumbnails/48.jpg)
48
http://www.colourco.de/
![Page 49: Prinsip Desain Website yang Ramah Pengguna - dsitd.ipb.ac.iddsitd.ipb.ac.id/wp-content/uploads/2017/08/Prinsip-Desain-Website-yang... · PENGGUNAAN WARNA Pilih palette terbaik yang](https://reader030.vdocuments.net/reader030/viewer/2022040122/5d4a065b88c993eb068bbea9/html5/thumbnails/49.jpg)
49
http://www.colourlovers.com/
![Page 50: Prinsip Desain Website yang Ramah Pengguna - dsitd.ipb.ac.iddsitd.ipb.ac.id/wp-content/uploads/2017/08/Prinsip-Desain-Website-yang... · PENGGUNAAN WARNA Pilih palette terbaik yang](https://reader030.vdocuments.net/reader030/viewer/2022040122/5d4a065b88c993eb068bbea9/html5/thumbnails/50.jpg)
50
![Page 51: Prinsip Desain Website yang Ramah Pengguna - dsitd.ipb.ac.iddsitd.ipb.ac.id/wp-content/uploads/2017/08/Prinsip-Desain-Website-yang... · PENGGUNAAN WARNA Pilih palette terbaik yang](https://reader030.vdocuments.net/reader030/viewer/2022040122/5d4a065b88c993eb068bbea9/html5/thumbnails/51.jpg)
51
PENGGUNAAN WARNAPilih palette terbaik yang sesuai dengan karakter unit Anda.
Jangan lebih dari 5 warna.
![Page 52: Prinsip Desain Website yang Ramah Pengguna - dsitd.ipb.ac.iddsitd.ipb.ac.id/wp-content/uploads/2017/08/Prinsip-Desain-Website-yang... · PENGGUNAAN WARNA Pilih palette terbaik yang](https://reader030.vdocuments.net/reader030/viewer/2022040122/5d4a065b88c993eb068bbea9/html5/thumbnails/52.jpg)
52
#4 TIPOGRAFI
![Page 53: Prinsip Desain Website yang Ramah Pengguna - dsitd.ipb.ac.iddsitd.ipb.ac.id/wp-content/uploads/2017/08/Prinsip-Desain-Website-yang... · PENGGUNAAN WARNA Pilih palette terbaik yang](https://reader030.vdocuments.net/reader030/viewer/2022040122/5d4a065b88c993eb068bbea9/html5/thumbnails/53.jpg)
53
SERIF VS SANS SERIF
Pilih Sans Serif untuk
kenyamanan, namun Serif
tetap bisa digunakan.
![Page 54: Prinsip Desain Website yang Ramah Pengguna - dsitd.ipb.ac.iddsitd.ipb.ac.id/wp-content/uploads/2017/08/Prinsip-Desain-Website-yang... · PENGGUNAAN WARNA Pilih palette terbaik yang](https://reader030.vdocuments.net/reader030/viewer/2022040122/5d4a065b88c993eb068bbea9/html5/thumbnails/54.jpg)
PERHATIKAN KONTRAS UNTUK KENYAMANAN PEMBACA
54
![Page 55: Prinsip Desain Website yang Ramah Pengguna - dsitd.ipb.ac.iddsitd.ipb.ac.id/wp-content/uploads/2017/08/Prinsip-Desain-Website-yang... · PENGGUNAAN WARNA Pilih palette terbaik yang](https://reader030.vdocuments.net/reader030/viewer/2022040122/5d4a065b88c993eb068bbea9/html5/thumbnails/55.jpg)
TEKS DI ATAS GAMBAR
55
Berikan layer
hitam transparan
agar
teks menjadi lebih
jelas dibaca
![Page 56: Prinsip Desain Website yang Ramah Pengguna - dsitd.ipb.ac.iddsitd.ipb.ac.id/wp-content/uploads/2017/08/Prinsip-Desain-Website-yang... · PENGGUNAAN WARNA Pilih palette terbaik yang](https://reader030.vdocuments.net/reader030/viewer/2022040122/5d4a065b88c993eb068bbea9/html5/thumbnails/56.jpg)
BARIS JANGAN TERLALU PANJANG
56
![Page 57: Prinsip Desain Website yang Ramah Pengguna - dsitd.ipb.ac.iddsitd.ipb.ac.id/wp-content/uploads/2017/08/Prinsip-Desain-Website-yang... · PENGGUNAAN WARNA Pilih palette terbaik yang](https://reader030.vdocuments.net/reader030/viewer/2022040122/5d4a065b88c993eb068bbea9/html5/thumbnails/57.jpg)
BARIS JANGAN TERLALU PANJANG
57
![Page 58: Prinsip Desain Website yang Ramah Pengguna - dsitd.ipb.ac.iddsitd.ipb.ac.id/wp-content/uploads/2017/08/Prinsip-Desain-Website-yang... · PENGGUNAAN WARNA Pilih palette terbaik yang](https://reader030.vdocuments.net/reader030/viewer/2022040122/5d4a065b88c993eb068bbea9/html5/thumbnails/58.jpg)
58
Big, Bold, All-Caps
Capture Attention
![Page 59: Prinsip Desain Website yang Ramah Pengguna - dsitd.ipb.ac.iddsitd.ipb.ac.id/wp-content/uploads/2017/08/Prinsip-Desain-Website-yang... · PENGGUNAAN WARNA Pilih palette terbaik yang](https://reader030.vdocuments.net/reader030/viewer/2022040122/5d4a065b88c993eb068bbea9/html5/thumbnails/59.jpg)
59
Small, Thin, Proper
Case
Readability
![Page 60: Prinsip Desain Website yang Ramah Pengguna - dsitd.ipb.ac.iddsitd.ipb.ac.id/wp-content/uploads/2017/08/Prinsip-Desain-Website-yang... · PENGGUNAAN WARNA Pilih palette terbaik yang](https://reader030.vdocuments.net/reader030/viewer/2022040122/5d4a065b88c993eb068bbea9/html5/thumbnails/60.jpg)
60
PENGGUNAAN TIPOGRAFIAnda dapat gunakan Serif dan Sans Serif, sesuaikan dengan karakter (brand) unit Anda.
Fokus pada keterbacaan.
![Page 61: Prinsip Desain Website yang Ramah Pengguna - dsitd.ipb.ac.iddsitd.ipb.ac.id/wp-content/uploads/2017/08/Prinsip-Desain-Website-yang... · PENGGUNAAN WARNA Pilih palette terbaik yang](https://reader030.vdocuments.net/reader030/viewer/2022040122/5d4a065b88c993eb068bbea9/html5/thumbnails/61.jpg)
TERIMA KASIH
61