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

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

TOPIK

User Experience untuk Web

Mengenal Karakteristik Pengunjung Web

Penggunaan Elemen Desain yang Tepat

2

3APA ITU USER EXPERIENCE?

4

5

6

7

UX: APA YANG PENGGUNALIHAT, DENGAR, RASAKANSAAT MENGGUNAKAN SUATUPRODUK

8

UX YANG BAIK:NYAMAN DAN MUDAH DIGUNAKAN PENGGUNA

9

SUSAH NYARI OJEK?

10

MALES KELUAR NYARI MAKAN?

11

SMS MAHAL?

12

UX YANG BAIK MEMBANTU PENGGUNA MENCAPAI TUJUANNYA

13

KITA INGIN MENDENGAR ORANG BERKATA, “OH, BUKA AJA DI WEB UNIT X”

14

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

KENALI PENGGUNA ANDA

Sebelum masuk ke ‘desain’, pahami dahulu karakteristik dan motivasi pengunjung web Anda.

16

17

18

http://www.harvard.edu

19

20

https://college.harvard.edu/admissions/choosing-harvard21

22

23

https://www.stanford.edu

24PENGGUNAAN ELEMEN DESAIN

25

#1 GUNAKAN CMSMenyederhanakan banyak proses desain dan pengembangan web.

Banyak pilihan tema, namun pilih dengan bijak.

Pastikan update.

26

PASTIKAN TEMA YANG DIPILIH RESPONSIF

27

28

#2 GUNAKAN GAMBAR TERBAIK

29

30

31

https://www.stanford.edu

Hero Image

32https://mit.edu

Hero Image

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

34

CROP, BUKAN STRETCH

35

JANGAN GUNAKAN FOTO ‘BAJAKAN’

36

JANGAN GUNAKAN FOTO ‘BAJAKAN’

37

https://stocksnap.io

38

http://www.freepik.com/

39

www.canva.com

40

AMBIL FOTO SENDIRI

41

PENGGUNAAN GAMBARGunakan gambar terbaik.

Crop, bukan stretch.

Perhatikan lisensi gambar.

Kompresi gambar Anda!

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.

43

RGB Color Wheels

44

Colour Palette

45

Monochrome Complementary

Analogues Triadic

47

48

http://www.colourco.de/

49

http://www.colourlovers.com/

50

51

PENGGUNAAN WARNAPilih palette terbaik yang sesuai dengan karakter unit Anda.

Jangan lebih dari 5 warna.

52

#4 TIPOGRAFI

53

SERIF VS SANS SERIF

Pilih Sans Serif untuk

kenyamanan, namun Serif

tetap bisa digunakan.

PERHATIKAN KONTRAS UNTUK KENYAMANAN PEMBACA

54

TEKS DI ATAS GAMBAR

55

Berikan layer

hitam transparan

agar

teks menjadi lebih

jelas dibaca

BARIS JANGAN TERLALU PANJANG

56

BARIS JANGAN TERLALU PANJANG

57

58

Big, Bold, All-Caps

Capture Attention

59

Small, Thin, Proper

Case

Readability

60

PENGGUNAAN TIPOGRAFIAnda dapat gunakan Serif dan Sans Serif, sesuaikan dengan karakter (brand) unit Anda.

Fokus pada keterbacaan.

TERIMA KASIH

61