10/05/2022
Kuliah Online Desain
UI/UX
Tema sebelumnya :
01 - Pengantar
Kuliah 02 -
Pengantar IMK
03 - Aspek Kognisi
Desain
04 - Aspek
Manusia 05 -
Materi 08 : Interaksi Sosial
06 – Interface
Model 07
Design
– Proses
Design
Yudha Yudhanto, [Link]
UX vs
UI
UI atau Antar muka Pengguna.
UX atau Pengalaman Penguna. Bagaimana Tampilan produk yang kita lihat
pengguna merasakan/interaksi dengan produk. secara langsung.
Proses dibalik kenyamana produk. Tujuan Terdiri dari elemen : layout-color-
utamanya adalah mudah, nyaman dan puas typography- iconography. Dan UI
ketika digunakan pengguna. adalah bagian dari UX
Proses dasar UX adalah seperti bagan diatas
Yudha Yudhanto, [Link]
1
10/05/2022
Model Desain
UI/UX
+ Model
Design
+ Tips
Tools
Design
Yudha Yudhanto, [Link]
Konsep
Perancangan
2
4
3
Yudha Yudhanto, [Link]
2
10/05/2022
Proses Design
UI/UX
Wireframing Protoyping
Sketching Mockup Development
Yudha Yudhanto, [Link]
Konsep
Perancangan
Sketch
Brainstorming dengan
menggambar sketsa cepat dan
kasar di atas kertas.
Yudha Yudhanto, [Link]
3
10/05/2022
Konsep
Perancangan
Wireframe
Gambar rangka situs web,
juga dikenal sebagai skema
halaman atau cetak biru
layar, adalah panduan visual
yang mewakili kerangka
kerangka situs web atau
sebuah aplikasi.
Didominasi dengan kotak dan
garis beseta keterangan
pendukung
Yudha Yudhanto, [Link]
Konsep
Perancangan
Mockup
Membuatkan detail ke gambar seperti warna,
tipografi, foto dan elemen desain visual lainnya.
Yudha Yudhanto, [Link]
4
10/05/2022
Konsep
Perancangan
Prototype
Menambahkan interaktivitas ke mockup
dengan membuat link tiap layar pada
prototipe dasar atau menambahkan
animasi atau interaksi untuk prototipe
tingkat lanjut.
Yudha Yudhanto, [Link]
Proses Desain
IMK
Gbr Menunjukkan bahwa dalam pembuatan
Sketsa (Sketchs) dibutuhkan waktu yang lebih
singkat dibandingkan pembuatan Wireframes,
Mockups dan Prototypes.
Namun, Sketchs memiliki fidelity yang rendah
(low fidelity), bentuknya masih kasar dan belum
menyerupai produk sebenarnya.
Semakin tinggi fidelity obyek yang
dirancang, maka semakin banyak waktu
yang diperlukan untuk membuatnya.
Yudha Yudhanto, [Link]
10
5
10/05/2022
Model
Design
Yudha Yudhanto, [Link]
11
Model
Design
Yudha Yudhanto, [Link]
12
6
10/05/2022
Tools Model
Design
1. Mockflow
Mockflow merupakan software atau tool cloud based
yang memiliki fitur template library dan drag-and- 2. Balsamiq
drop editor, jadi, sangat mudah digunakan bahkan 3. Miro
untuk pemula. 4. Figma
Justru, tool ini adalah salah satu yang paling cocok
untuk yang 5. FluidUI
baru belajar wireframing. 6. Cacoo
Tools wireframe ini tidak hanya gratis tapi sangat 7. Pencil
lengkap untuk pengembangan aplikasi smartphone
maupun web. Project
Dengan Mockflow, kamu bisa mendesain wireframe 8. NinjaMock
dengan cepat menggunakan preset-nya.
Tidak hanya untuk desain wireframe, Mockflow juga
bisa digunakan untuk membuat website dan
mendesain banner.
Selain itu, Mockflow juga menyediakan collaboration tool
dan timeline manager yang membuat pekerjaan
wireframing menjadi lebih mudah dan efektif.
Yudha Yudhanto, MKom
13
Tools Model
Design
1.
Tools wireframe Balsamiq yang juga gratis
Mockflow
2. Balsamiq
ini mendukung desain wireframe yang
3. Miro
cepat dengan koleksi elemen UI dan
4. Figma
template-nya yang banyak.
5. FluidUI
Bahkan, dengan Balsamiq kamu pun bisa
6. Cacoo
melakukan user testing dan membagikan
7. Pencil
desain mockup secara cepat dengan tim
Project
desain.
8. NinjaMock
Para desainer pemula dan profesional
menyukai Balsamiq karena fitur-fiturnya
yang mudah digunakan dengan elemen-
elemen desain yang lengkap.
Berbeda dengan yang lain, tool
wireframing ini mempunyai fitur presentasi
yang sangat berguna ketika harus
memaparkan ide dan hasil desain
wireframe pada klien.
Yudha Yudhanto, [Link]
14
7
10/05/2022
Tools Model
Design
1. Mockflo
Pada dasarnya, Miro adalah sistem
kolaborasi untuk mempermudah w
para pekerja remote untuk 2. Miro
3. Balsami
berkomunikasi dan menyelesaikan q
4. Figma
pekerjaan. 5. FluidUI
Namun, Miro pun memiliki toolkit 6. Cacoo
untuk wireframing yang cukup 7. Pencil
bagus.
Project
Yang utama dari Miro adalah
integrasinya dengan 20 aplikasi 8. NinjaMock
bermacam-macam, seperti Slack,
Jira, Google Drive, dan Sketch
yang membuat pekerjaanmu
lebih cepat dan ringkas tanpa
harus pindah-pindah platform
atau aplikasi.
Tentu saja, tools untuk wireframe
yang tersedia untuk MacOS, iOS,
dan Windows ini gratis.
Yudha Yudhanto, [Link]
15
Tools Model
Design
1. Mockflo
Tools wireframe Figma, ada paket
starter yang bisa didapatkan gratis w
untuk dua editor dan tiga proyek. 2. Balsami
q
4. Figma
Sementara untuk fitur premium, Figma 3. FluidUI
5. Miro
dapat digunakan oleh pelajar tanpa 6. Cacoo
pungutan biaya pula. Namun, untuk 7. Pencil
editor profesional yang butuh akses
Project
penuh, ada biaya 12 dolar AS per
bulannya atau sekitar Rp176 ribu. 8. NinjaMock
Untuk tool desain wireframe lengkap
yang mendukung wireframe low
fidelity hingga high fidelity ini, harga
yang ditawarkan bisa dibilang cukup
murah. Figma memberimu kebebasan
untuk membuat desain sekreatif
mungkin menggunakan tool berdesain
antarmuka sederhana ini.
Yudha Yudhanto, [Link]
16
8
10/05/2022
Tools Model
Design
1. Mockflo
FluidUI adalah salah satu tools
lainnya yang dapat digunakan w
untuk membuat wireframe 2. Balsami
aplikasi Android maupun iOS q
secara gratis. 3. Miro
5. FluidUI
Tool ini mempermudah 4. Cacoo
6. Figma
perancangan wireframe high 7. Pencil
fidelity. Versi gratisnya
Project
memperbolehkan pengguna
untuk membuat 10 wireframe. 8. NinjaMock
Tool untuk membuat software ini
cukup unik dibanding yang lain,
karena menawarkan beberapa
elemen interaksi dan animasi yang
dapat membuat desain wireframe
lebih menarik.
Selain itu, pengembang juga bebas
memilih dari 2.000 ikon, widget, dan
elemen desain lainnya yang bisa
bebas diatur sesuai kebutuhan.
Yudha Yudhanto, [Link]
17
Tools Model
Design
1. Mockflo
Cacoo adalah tool yang cocok untuk w
desain 2. Balsami
wireframe low fidelity dan mid fidelity. q
Seperti Miro, Cacoo pun telah 3. Miro
terintegrasi dengan team 4. Figma
6. Cacoo
collaboration tool dan 5. Pencil
7. FluidUI
menggunakan sistem cloud based.
Transfer data antara rekan kerja
Project
dengan ini menjadi lebih mudah. 8. NinjaMock
Cacoo juga menyediakan banyak
template yang bisa bebas dipilih
sesukamu.
Yudha Yudhanto, [Link]
18
9
10/05/2022
Tools Model
Design
Tools untuk desain wireframe ini open source. 1. Mockflo
Selain bisa digunakan untuk wireframing, Pencil
Project juga menyediakan fitur-fitur yang
w
mendukung desain mockup dan prototyping. 2. Balsami
q
Seperti tool wireframing pada umumnya, Pencil
Project pun menyediakan banyak template
3. Miro
yang bagus untuk low fidelity wireframe. 4. Figma
5. FluidUI
7. Pencil Project
Terlebih lagi, tool ini juga memiliki banyak koleksi
elemen interaktif untuk UX beserta tool untuk
6.
8. Cacoo
membuat bermacam-macam bentuk, wire flow, NinjaMock
dan flowchart.
Pencil Project adalah salah satu alat bantu
pembuatan wireframe yang paling sesuai
untuk pemula karena lengkap dan gratis.
Hanya saja, jika ingin membuat wireframe mid
fidelity atau high fidelity, para pengguna
disarankan untuk mencari tool lain yang lebih
sesuai.
Yudha Yudhanto, [Link]
19
Tools Model
Design
1. Mockflow
Jika suka bekerja dengan
smartphone, kamu bisa 2. Balsamiq
mencoba NinjaMock. 3. Miro
Tools wireframe ini tersedia untuk 4. Figma
platform iOS, Android, Windows, dan 5. FluidUI
web tanpa dipungut biaya alias 6. Cacoo
gratis. 7. Pencil
Salah satu keunggulan NinjaMock
8. Project
NinjaMock
lainnya adalah kecepatan dan
kemudahan navigasinya.
Dibandingkan tool lainnya,
NinjaMock membutuhkan waktu
yang lebih singkat untuk
dimengerti.
Yudha Yudhanto, [Link]
20
10
10/05/2022
Referen
si
https://
[Link]/wirefra
mes/top-wireframing-tools-
11121302
[Link]
blog/ux
-design/free-wireframing-tools/
Yudha Yudhanto, [Link]
21
Kuliah Online INTERAKSI MANUSIA & KOMPUTER
(IMK)
Tema sebelumnya :
01 - Pengantar
Kuliah 02 -
Pengantar IMK
03 - Aspek Kognisi
Desain 04 - Aspek
Materi 09 : Manusia
05 - Interaksi
BALSAMI Sosial 06 –
Interface
07 – Proses
Q
Design 08 –
Model Design 09
– Balsamiq Tools
Tools Wireframe
Yudha Yudhanto, [Link]
22
11
10/05/2022
Balsamiq
Balsamiq adalah salah satu tool yang digunakan para UI designer maupun
UX designer ntuk merancang wireframe low fidelity. Balsamiq merupakan tool
yang berfokus pada struktur dan konten wireframe.
Tool ini dianggap cukup ramah pemula karena tidak membutuhkan
kode untuk bisa mengoperasikannya. Cukup melakukan men-drag dan
drop elemen-elemen desain yang diperlukan. Dengan begitu, proses
desain pun bisa menjadi lebih cepat.
Tak hanya wireframe, Balsamiq juga bisa digunakan untuk membuat prototype
interaktif untuk situs atau aplikasi yang sedang kamu rancang. Fitur ini
membuat desainer bisa mengetahui usability rancangannya sehingga revisi
bisa dikurangi pada tahap-tahap selanjutnya.
sa digunakan siapa saja, mulai dari pemilik bisnis, product
Balsamiq bi manag er,
business an alyst, developer, dan masih banyak lagi. Bahkan, tim ebuah
situs perancang s bisa bekerjasama langsung dengan
atau aplikasimenggunakan tool ini.
23 Yudha Yudhanto, [Link]
Yudha Yudhanto, [Link]
24
12
10/05/2022
Balsami
q
Balsamiq adalah salah satu tool yang digunakan para UI designer maupun UX
designer
ntuk merancang wireframe low fidelity. Balsamiq merupakan tool yang
berfokus pada struktur dan konten wireframe.
Tool ini dianggap cukup ramah pemula karena tidak membutuhkan
kode untuk bisa mengoperasikannya. Cukup melakukan men-drag dan
drop elemen-elemen desain yang diperlukan. Dengan begitu, proses
desain pun bisa menjadi lebih cepat.
Tak hanya wireframe, Balsamiq juga bisa digunakan untuk membuat prototype
interaktif untuk situs atau aplikasi yang sedang kamu rancang. Fitur ini
membuat desainer bisa mengetahui usability rancangannya sehingga revisi
bisa dikurangi pada tahap-tahap selanjutnya.
Balsamiq bisa digunakan siapa saja, mulai dari pemilik bisnis, product
manager, business analyst, developer, dan masih banyak lagi. Bahkan, tim
perancang sebuah situs atau aplikasi bisa bekerjasama langsung dengan
menggunakan tool ini. Yudha Yudhanto, [Link]
25
Balsami
q
Balsamiq adalah salah satu tool yang digunakan para UI designer maupun
UX designer ntuk merancang wireframe low fidelity. Balsamiq merupakan tool
yang berfokus pada struktur dan konten wireframe.
Tool ini dianggap cukup ramah pemula karena tidak membutuhkan
kode untuk bisa
mengoperasikannya. Cukup melakukan men-drag dan drop elemen-
elemen desain
diperlukan. yang begitu, proses desain pun bisa
Dengan
menjadi lebih cepat.
Tak hanya wireframe, Balsamiq juga bisa digunakan untuk membuat prototype
interaktif untuk situs atau aplikasi yang sedang kamu rancang. Fitur ini
membuat desainer bisa mengetahui usability rancangannya sehingga revisi
bisa dikurangi pada tahap-tahap selanjutnya.
Balsamiq bisa digunakan siapa saja, mulai dari pemilik bisnis, product
manager, business analyst, developer, dan masih banyak lagi. Bahkan, tim
perancang sebuah situs atau aplikasi bisa bekerjasama langsung dengan
menggunakan tool ini.
Yudha Yudhanto, [Link]
26
13
10/05/2022
Install
Balsamiq
Yudha Yudhanto, [Link]
27
Balsami
q
Yudha Yudhanto, [Link]
28
14
10/05/2022
Balsami
q
Yudha Yudhanto, [Link]
29
Balsami
q
Yudha Yudhanto, [Link]
30
15
10/05/2022
Link Video
1. BALSAMIQ (Wireframe)
[Link]
2. FIGMA (Mockup + Prototype)
[Link]
4
-- Terimakasih ---
31
32
16