UI Design Pt.
1
Layout
Tujuan pembelajaran
Peserta dapat mendesain layout (tata letak) tampilan UI dengan menggunakan prinsip visual hierarchy, grid, box model
dan spacing system.
2
Dari abstrak sampai menjadi nyata
Real &
Abstrak
Live
Problem &
Solution Space
Wireframes High Fidelity Prototype
3
4
Amati Tiru Modifikasi
5
Aim secara low, yang penting design tampilan kalian
memiliki visual yang membantu pengguna lebih nyaman
saat memakainya, tidak bingung.
Baru, kemudian ke level attractive.
6
Butuh latihan terus menerus dengan observasi (amati),
nyobain lagi (tiru & modifikasi), observasi (amati) lagi,
tentunya skill secara visual kalian akan meningkat.
Anggap aja kaya olahraga yah, awal2 kalian berat dan
kecapean banget.
7
DTS 8
9
10
DTS 11
12
Visual Hierarchy
Visual Hierarchy
Grid
Box Model
Spacing
13
Definisi
Pengaturan dan pemosisian elemen desain yang
berbeda untuk memberi makna berdasarkan
kepentingan yang lebih besar atau lebih kecil.
14
15
DTS
Mendesain visual tapi bukan semata berdasarkan
taste atau selera pribadi.
Tetapi mendesain punya prinsip dari bagaimana
seorang manusia akan membaca dan mencerna
informasinya.
17
Berdasarkan riset, manusia
diciptakan dengan
keterbatasan working
memory sehingga dalam satu
waktu, kita nggak bisa
mencerna terlalu banyak
informasi.
18
Kalau pengguna merasa
kewalahan yang ada dia
akan merasa cape, bingung,
gagal paham, berujung
pada salah melakukan
sesuatu bahkan
membatalkan/menutup
aplikasi kita.
19
Bahkan ada pakar UX yang
bilang berdasarkan risetnya,
pengguna tidak baca satu
per satu, mereka
scanning/skimming.
Steve Krug
20
Bagaimana membangun visual hierarchy (tingkatan)?
1. Ukuran
2. Warna dan Kontras
3. Font
4. Spasi (white space)
5. Jarak antar elemen / pengelompokkan
6. Bentuk
21
1. Ukuran
22
23
24
25
26
2. Warna dan Kontras
27
Layout: Warna dan Kontras
search
28
29
30
31
32
3. Font
33
DTS
DTS
DTS
DTS
4. Spasi
38
DTS
DTS
DTS
5. Jarak antar elemen / pengelompokkan
Proximity (Gestalt Principles)
Gestalt Principles: Teori bagaimana manusia melihat sebuah
obyek.
42
DTS
Layout: Jarak antar elemen / pengelompokkan
DTS
DTS
DTS
DTS
6. Shapes
50
DTS
Pengaturan dan pemosisian elemen desain yang
berbeda untuk memberi makna berdasarkan
kepentingan yang lebih besar atau lebih kecil.
Tujuannya biar user nyaman, ga cape saat pakai
aplikasi kita.
54
Saat mendesain layout, dengan visual hierarchy
kita jadi punya latar belakang yang kuat yg
berkaitan dengan manusia, pengguna kita.
55
Bukannya kita mendesain sesuka hati, sesuai
dengan selera kita sepenuhnya.
56
Grid
Visual Hierarchy
Grid
Box Model
Spacing
57
Sebuah sistem untuk mengatur layout
konten di dalam tampilan aplikasi, supaya
rapih dan teratur.
58
59
Grid Gutter
Outer margin
DTS 63
DTS 64
DTS 65
Kalau secara vertikal bagaimana?
Apakah ada Gridnya?
66
67
Box Model
Visual Hierarchy
Grid
Box Model
Spacing
68
Box Model akan membantu kita mengerti cara
kerja layout di web.
69
Setiap elemen di dalam tampilan layar
diperlakukan sebagai kotak.
Bayangkan ada batas di sekitar elemen,
tapi tak terlihat.
70
Kotak-kotak tersebut bersebelahan atau
menumpuk di atas satu sama lain, berada
di dalam sebuah kotak lainnya.
71
DTS 72
DTS 73
DTS 74
75
76
Spacing
Visual Hierarchy
Grid
Box Model
Spacing
77
Spacing merupakan jarak (space) antar elemen di
dalam tampilan.
78
79
80
Berapa sih jarak-jaraknya?
Tidak ada aturan baku! Tapi kita bisa pakai
prinsip proximity
81
Elemen-elemen yang berhubungan (ada asosiasi)
diletakan berdekatan.
Berdekatan = spasinya kecil
82
Perlu diatur
supaya ga
berantakan.
Banyak angka
yang digunakan
83
Spacing system
jaraknya pakai kelipatan
Misal kelipatan 4, kelipatan 5
84
Kelipatan 4 yang paling sering dipake
4 8 12 16 20 24 32 48 64
Kenapa gak ada 28? 36,
40?
85
86
87
88
Emang 4px, 8px penting yah?
Penting banget! Small details matter.
Jika hal-hal kecilnya banyak yang kacau,
pasti nanti overall akan kacau
89
DTS 90
Kalau ada terpaksa gak ikutin kelipatan 4 gimana?
Break the rules. Context lebih penting. Tapi,
alasannya apa? Kenapa butuh 17px di sana?
Biasanya diistilahkan adhoc spacing
91
Responsive Layout
92
DTS 93
DTS
Layar lebih lebar = menyusun secara horizontal
Layar lebih sempit = menyusun ke bawah
96
Atur ukuran
image dan teks
97
Manfaatkan area scroll
horizontal pada mobile dan
tablet
98
Memunculkan elemen yang
berbeda pada desktop dan
mobile
99