Upload
dothien
View
231
Download
0
Embed Size (px)
Citation preview
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