Visual Design

Prototyping
 Outline

1 2 3 4

How to Create Visual Design and

What is Prototype Hierarchy in Layout
Prototype UX

2
What is
Prototyping
Proses eksperimen untuk menuangkan ide ke bentuk yang lebih nyata dari kertas menuju ke digital.
Dengan Prototype, kita bisa memperbaiki dan memvalidasi design yang kita buat.

Prototype merupakan tahap ke empat dari proses design thinking. Kita bisa menggunakan prototype
untuk membuat model eksperimen dan mencoba kepada user apakah sudah sesuai dengan kebutuhan
user

3
Manfaat
Prototyping
● Pondasi dan alasan kuat untuk menentukan kemana arah pengembangan produk

● Bisa melakukan perubahan lebih cepat

● Mempercepat proses user testing

● Alat untuk melakukan eksperimen dan mencari tahu apa kebutuhan user

● Mempercepat waktu perilisan produk ke market

4
5
Low Fidelity
Prototyping

Contoh: Paper prototypes

Pros: Cepat dan murah, Mudah untuk diubah, bisa dibuat oleh semua orang

Cons: Jauh dari hasil akhir, sulit memberi feedback, terlalu sederhana untuk mewakili interaksi user,
user harus membayangkan cara mereka berinteraksi

6
High Fidelity
Prototyping

Contoh: Digital prototype menggunakan software

Pros: Engaging, testing menjadi lebih akurat, mendekati hasil akhir

Cons: Proses pembuatan cukup lama, cenderung tidak ingin mengganti design, komentar mengenai
hal hal kecil, bias karena user menganggap prototype adalah produk akhir

7
 Outline

1 2 3 4

How to create Visual Design and

What is Prototype Hierarchy in Layout
Prototype UX

8
Sketch your idea Start with mobile screen
Tuangkan ide dan pikiran ke dalam sketsa. Mulailah dengan layar terkecil dan berlanjut
Karena kemudahannya kita bisa menuangkan memindahkannya ke layar yang lebih besar
dan membandingkan banyak ide

Compatible tool Take inspiration

Pilihlah tools yang bisa terhubung dengan tool Salah satu cara terbaik untuk belajar adalah
yang kita gunakan untuk melakukan aktivitas dengan melakukan observasi
design lainnya

9
Remove unnecessary elements Use UI pattern
Less is more. Tampilan yang ramai dan penuh Gunakan aturan-aturan yang sudah dibentuk
bisa mempengaruhi cognitive load user untuk mempermudah kita dalam membuat
design yang konsisten

Free UI elements and icons Use vector

Gunakan library yang sudah tersedia untuk Pastikan asset yang kita buat selalu menarik di
mempersingkat waktu dalam membuat design device dan platform manapun

10
Grid system Web-safe typography
Dengan menggunakan grid kita bisa mengukur Selalu periksa apakah font yang kita gunakan
design yang kita buat dengan lebih akurat mudah terbaca

Color tools Reusable component

Memilih warna akan sangat menghabiskan Membuat reusable component akan sangat
waktu. Gunakan color tool yang tersedia di menghemat waktu untuk menciptakan design
internet untuk membantu memilih kombinasi yang konsisten
warna

11
Auto layout Testing
Berfungsi untuk mempermudah kita saat ingin Ketika kita membuat prototype, jangan lupa untuk
mengubah ukuran layar tanpa harus membuat testing dengan user
design baru

Version control Feedback

Karena banyaknya perubahan yang terjadi, Selain user, coba juga meminta feedback dari
pastikan untuk membuat versioning untuk stakeholders lain
mengetahui perubahan yang terjadi

12
 Outline

1 2 3 4

How to create Visual Design and

What is Prototype Hierarchy in Layout
Prototype UX

13
People
Don’t judge a book by its cover

14
Visual Design
Menggunakan warna, text, dan gambar untuk
meningkatkan keindahan dan interaksi pada sebuah
layar.

Tujuan utamanya adalah untuk membuat sebuah

tampilan berguna dan mengarahkan mata user ke
informasi yang tepat. Untuk bisa melakukan ini,
designer biasanya mengaplikasikan warna, ukuran, dan
negative space.

Source: xd.adobe.com

15
Elemen Visual Design
Unity merupakan salah satu prinsip mendasar karena mampu membuat harmoni dari
semua elemen yang ada pada layar. Tanpa adanya unity, sebuah design bisa menjadi
kalau dan menghasilkan UX yang buruk

Gestalt
Law of similarity, elemen yang punya kemiripan
akan cenderung dipersepsikan sebagai suatu
kesatuan yang saing berhubungan

Source: xd.adobe.com 16
Contrast
Biasa digunakan untuk membuat sebuah elemen menjadi
menonjol. Biasanya contrast paling banyak diandalkan oleh
visual designer untuk membuat call to action button

Source: hillsboroaviation

Hierarchy
Digunakan untuk menunjukkan seberapa penting masing
masing elemen dalam sebuah layar.

Source: Webtoon
17
Usability vs Visual Design
Hal terpenting dalam produk digital
adalah banyaknya waktu yang
digunakan user untuk menyelesaikan
sebuah task

Source: NNGroup

18
 Outline

1 2 3 4

How to create Visual Design and

What is Prototype Hierarchy in Layout
Prototype UX

19
 “Hirarki visual yang baik menuntun mata
manusia ke elemen yang paling penting. Hal ini
bisa dicapai melalui variasi warna, kontras,
ukuran dan pengelompokan”

Source: William sonoma website 20

Color
Contrast
- Menggunakan keduanya untuk membuat hirarki visual
- Kontras yang membuat objek menjadi menonjol

21
Color contrast Best practice
● Consider color saturation
Warna cerah biasanya stand-out
Warna dengan saturasi rendah biasanya digunakan untuk hal yang kurang penting
Warm color yang cerah untuk warning dan error

● Don’t use too many colors

Batasi penggunaan warna menjadi 2 primary dan 2 secondary colors

● Don’t use too many contrast variations

Jangan gunakan lebih dari 3 variasi kontras. Kalau semuanya kontras, tidak
ada yang stand-out

● Don’t rely only on color to communicate

Orang yang buta warna mungkin tidak bisa membedakan warna pada
kombinasi warna tertentu
22
Scale
Elemen visual bisa dibuat menjadi lebih menonjol dengan memperbesar ukurannya

23
Scale Best practice
● Use no more than 3 sizes
Small, medium, large

● Make the most important element biggest

Beri penekanan pada informasi yang penting dengan membuatnya paling besar.

24
Proximity &
Common Regions
- Mengelompokkan konten bisa
membantu user melihat struktur dari
sebuah produk
- Mengarahkan perhatian user ke
halaman yang mereka ingin tuju

25
Proximity Best practice
● Let it breathe
Elemen yang tidak memiliki jarak antar satu sama lain akan dianggap sekelompok
dan menarik banyak perhatian. Coba untuk memberi jarak antar elemen untuk
memberikan penekanan lebih pada elemen tertentu

● Consider using container

Apabila memberi jarak saja tidak cukup, maka gunakan borders atau
background untuk memberikan penekanan lebih

26
Terimakasih

27