Tutorial AdobeXD · WeekTopic Topic 1 Human-computer Interaction & Design 9 Project 1 : Usability...
Transcript of Tutorial AdobeXD · WeekTopic Topic 1 Human-computer Interaction & Design 9 Project 1 : Usability...
![Page 1: Tutorial AdobeXD · WeekTopic Topic 1 Human-computer Interaction & Design 9 Project 1 : Usability Testing 2 Human-computer Interaction & Design 10 Project 2: Design Thinking 3 Psychology](https://reader034.fdocuments.us/reader034/viewer/2022042212/5eb5c4590d5ca9625267be68/html5/thumbnails/1.jpg)
Tutorial AdobeXD
ISH4B3 – Sistem Informasi
Rahmat Fauzi, S.T., M.T
![Page 2: Tutorial AdobeXD · WeekTopic Topic 1 Human-computer Interaction & Design 9 Project 1 : Usability Testing 2 Human-computer Interaction & Design 10 Project 2: Design Thinking 3 Psychology](https://reader034.fdocuments.us/reader034/viewer/2022042212/5eb5c4590d5ca9625267be68/html5/thumbnails/2.jpg)
Week Topic Week Topic
1 Human-computer Interaction & Design 9 Project 1 : Usability Testing
2 Human-computer Interaction & Design 10 Project 2: Design Thinking
3 Psychology 101 11 Project 2: Design Thinking
4 Design Principles 12 Project 2: Design Thinking
5 Interaction Styles and Devices 13 UI Design Tutorial
6 Project 1 : Usability Testing 14 Project 2 : Design Thinking
7 Project 1 : Usability Testing 15 Project 2 : Design Thinking
8 Mid Term Exam 16 Project Presentation
AGENDA
![Page 3: Tutorial AdobeXD · WeekTopic Topic 1 Human-computer Interaction & Design 9 Project 1 : Usability Testing 2 Human-computer Interaction & Design 10 Project 2: Design Thinking 3 Psychology](https://reader034.fdocuments.us/reader034/viewer/2022042212/5eb5c4590d5ca9625267be68/html5/thumbnails/3.jpg)
Home
Capaian Bahasan
Kuis / Latihan
Pustaka
Saya Bee.. akan membantu Anda mempelajari
modul ini.
Silahkan pilih materi yang ingin Anda pelajari
Link
Pokok Bahasan
Video Animasi
Kesimpulan
![Page 4: Tutorial AdobeXD · WeekTopic Topic 1 Human-computer Interaction & Design 9 Project 1 : Usability Testing 2 Human-computer Interaction & Design 10 Project 2: Design Thinking 3 Psychology](https://reader034.fdocuments.us/reader034/viewer/2022042212/5eb5c4590d5ca9625267be68/html5/thumbnails/4.jpg)
Pokok Bahasan Panduan Desain UX / UI01
02
03
04
Introduction Adobe XD
Komponen dalam Aplikasi
Evaluasi Desain UX / UI
![Page 5: Tutorial AdobeXD · WeekTopic Topic 1 Human-computer Interaction & Design 9 Project 1 : Usability Testing 2 Human-computer Interaction & Design 10 Project 2: Design Thinking 3 Psychology](https://reader034.fdocuments.us/reader034/viewer/2022042212/5eb5c4590d5ca9625267be68/html5/thumbnails/5.jpg)
Home
Capaian Pembelajaran
Kemampuan menganalisis permasalahan, melakukan
identifikasi dan mendefinisikan kebutuhan komputasi
Yang bersesuaian dengan solusi
Kemampuan untuk merancang, melakukan implementasi
dan mengevaluasi sistem berbasis komputer, proses,
komponen, atau program untuk memenuhi kebutuhan
yang diinginkan.
Kemampuan untuk menganalisis dampak lokal dan
global dari komputasi pada individu, organisasi dan
masyarakat
P02
P03
P07
AdobeXD
![Page 6: Tutorial AdobeXD · WeekTopic Topic 1 Human-computer Interaction & Design 9 Project 1 : Usability Testing 2 Human-computer Interaction & Design 10 Project 2: Design Thinking 3 Psychology](https://reader034.fdocuments.us/reader034/viewer/2022042212/5eb5c4590d5ca9625267be68/html5/thumbnails/6.jpg)
Home
Tujuan UI/UX
P02
P03Design
Principles
Tujuan UI/UX adalah memperm-
udah manusia mengoperasikan
sebuah aplikasi di computer
Atau di smartphone.
Contoh.
Youtube didesain sangat
user-friendly sehingga anak kecil
dengan mudah menggunakan
Aplikasi Youtube
![Page 7: Tutorial AdobeXD · WeekTopic Topic 1 Human-computer Interaction & Design 9 Project 1 : Usability Testing 2 Human-computer Interaction & Design 10 Project 2: Design Thinking 3 Psychology](https://reader034.fdocuments.us/reader034/viewer/2022042212/5eb5c4590d5ca9625267be68/html5/thumbnails/7.jpg)
1. Panduan Desain
![Page 8: Tutorial AdobeXD · WeekTopic Topic 1 Human-computer Interaction & Design 9 Project 1 : Usability Testing 2 Human-computer Interaction & Design 10 Project 2: Design Thinking 3 Psychology](https://reader034.fdocuments.us/reader034/viewer/2022042212/5eb5c4590d5ca9625267be68/html5/thumbnails/8.jpg)
https://dribbble.com/01
02
03
04
05
06
https://pttrns.com/
Situs Inspirasi MencariDesain UI / UX
https://www.uplabs.com
https://onepagelove.com/
https://www.pages.xyz/
https://medium.com/
Inspirasi
![Page 9: Tutorial AdobeXD · WeekTopic Topic 1 Human-computer Interaction & Design 9 Project 1 : Usability Testing 2 Human-computer Interaction & Design 10 Project 2: Design Thinking 3 Psychology](https://reader034.fdocuments.us/reader034/viewer/2022042212/5eb5c4590d5ca9625267be68/html5/thumbnails/9.jpg)
Home
Panduan Desain UX
P02
P03Design
Principles
Berikut ini adalah beberapa Kekurangan UX Design
yang diterapakan dalam sebuah MockUp
![Page 10: Tutorial AdobeXD · WeekTopic Topic 1 Human-computer Interaction & Design 9 Project 1 : Usability Testing 2 Human-computer Interaction & Design 10 Project 2: Design Thinking 3 Psychology](https://reader034.fdocuments.us/reader034/viewer/2022042212/5eb5c4590d5ca9625267be68/html5/thumbnails/10.jpg)
Home
Panduan Desain UX
P02
P03Design
Principles
![Page 11: Tutorial AdobeXD · WeekTopic Topic 1 Human-computer Interaction & Design 9 Project 1 : Usability Testing 2 Human-computer Interaction & Design 10 Project 2: Design Thinking 3 Psychology](https://reader034.fdocuments.us/reader034/viewer/2022042212/5eb5c4590d5ca9625267be68/html5/thumbnails/11.jpg)
Home
Panduan Desain UX
P02
P03Design
Principles
![Page 12: Tutorial AdobeXD · WeekTopic Topic 1 Human-computer Interaction & Design 9 Project 1 : Usability Testing 2 Human-computer Interaction & Design 10 Project 2: Design Thinking 3 Psychology](https://reader034.fdocuments.us/reader034/viewer/2022042212/5eb5c4590d5ca9625267be68/html5/thumbnails/12.jpg)
Home
Panduan Desain UX
P02
P03Design
Principles
![Page 13: Tutorial AdobeXD · WeekTopic Topic 1 Human-computer Interaction & Design 9 Project 1 : Usability Testing 2 Human-computer Interaction & Design 10 Project 2: Design Thinking 3 Psychology](https://reader034.fdocuments.us/reader034/viewer/2022042212/5eb5c4590d5ca9625267be68/html5/thumbnails/13.jpg)
Home
Panduan Desain UX
P02
P03Design
Principles
![Page 14: Tutorial AdobeXD · WeekTopic Topic 1 Human-computer Interaction & Design 9 Project 1 : Usability Testing 2 Human-computer Interaction & Design 10 Project 2: Design Thinking 3 Psychology](https://reader034.fdocuments.us/reader034/viewer/2022042212/5eb5c4590d5ca9625267be68/html5/thumbnails/14.jpg)
Home
Panduan Desain UX
P02
P03Design
Principles
![Page 15: Tutorial AdobeXD · WeekTopic Topic 1 Human-computer Interaction & Design 9 Project 1 : Usability Testing 2 Human-computer Interaction & Design 10 Project 2: Design Thinking 3 Psychology](https://reader034.fdocuments.us/reader034/viewer/2022042212/5eb5c4590d5ca9625267be68/html5/thumbnails/15.jpg)
Home
Panduan Desain UX
P02
P03Design
Principles
![Page 16: Tutorial AdobeXD · WeekTopic Topic 1 Human-computer Interaction & Design 9 Project 1 : Usability Testing 2 Human-computer Interaction & Design 10 Project 2: Design Thinking 3 Psychology](https://reader034.fdocuments.us/reader034/viewer/2022042212/5eb5c4590d5ca9625267be68/html5/thumbnails/16.jpg)
Home
Panduan Desain UX
P02
P03Design
Principles
![Page 17: Tutorial AdobeXD · WeekTopic Topic 1 Human-computer Interaction & Design 9 Project 1 : Usability Testing 2 Human-computer Interaction & Design 10 Project 2: Design Thinking 3 Psychology](https://reader034.fdocuments.us/reader034/viewer/2022042212/5eb5c4590d5ca9625267be68/html5/thumbnails/17.jpg)
Home
Panduan Desain UX
P02
P03Design
Principles
![Page 18: Tutorial AdobeXD · WeekTopic Topic 1 Human-computer Interaction & Design 9 Project 1 : Usability Testing 2 Human-computer Interaction & Design 10 Project 2: Design Thinking 3 Psychology](https://reader034.fdocuments.us/reader034/viewer/2022042212/5eb5c4590d5ca9625267be68/html5/thumbnails/18.jpg)
Home
Panduan Desain UX
P02
P03Design
Principles
![Page 19: Tutorial AdobeXD · WeekTopic Topic 1 Human-computer Interaction & Design 9 Project 1 : Usability Testing 2 Human-computer Interaction & Design 10 Project 2: Design Thinking 3 Psychology](https://reader034.fdocuments.us/reader034/viewer/2022042212/5eb5c4590d5ca9625267be68/html5/thumbnails/19.jpg)
Home
Panduan Desain UX
P02
P03Design
Principles
![Page 20: Tutorial AdobeXD · WeekTopic Topic 1 Human-computer Interaction & Design 9 Project 1 : Usability Testing 2 Human-computer Interaction & Design 10 Project 2: Design Thinking 3 Psychology](https://reader034.fdocuments.us/reader034/viewer/2022042212/5eb5c4590d5ca9625267be68/html5/thumbnails/20.jpg)
Home
Panduan Desain UX
P02
P03Design
Principles
![Page 21: Tutorial AdobeXD · WeekTopic Topic 1 Human-computer Interaction & Design 9 Project 1 : Usability Testing 2 Human-computer Interaction & Design 10 Project 2: Design Thinking 3 Psychology](https://reader034.fdocuments.us/reader034/viewer/2022042212/5eb5c4590d5ca9625267be68/html5/thumbnails/21.jpg)
2. Introduction AdobeXD
![Page 22: Tutorial AdobeXD · WeekTopic Topic 1 Human-computer Interaction & Design 9 Project 1 : Usability Testing 2 Human-computer Interaction & Design 10 Project 2: Design Thinking 3 Psychology](https://reader034.fdocuments.us/reader034/viewer/2022042212/5eb5c4590d5ca9625267be68/html5/thumbnails/22.jpg)
Home P02
P03
P09
Adobe XD
Download Adobe XD
https://www.adobe.com/products/xd.html
![Page 23: Tutorial AdobeXD · WeekTopic Topic 1 Human-computer Interaction & Design 9 Project 1 : Usability Testing 2 Human-computer Interaction & Design 10 Project 2: Design Thinking 3 Psychology](https://reader034.fdocuments.us/reader034/viewer/2022042212/5eb5c4590d5ca9625267be68/html5/thumbnails/23.jpg)
Home
Welcome to Adobe XD
P02
P03Design
Principles
![Page 24: Tutorial AdobeXD · WeekTopic Topic 1 Human-computer Interaction & Design 9 Project 1 : Usability Testing 2 Human-computer Interaction & Design 10 Project 2: Design Thinking 3 Psychology](https://reader034.fdocuments.us/reader034/viewer/2022042212/5eb5c4590d5ca9625267be68/html5/thumbnails/24.jpg)
Home
Welcome to Adobe XD
P02
P03Design
Principles
![Page 25: Tutorial AdobeXD · WeekTopic Topic 1 Human-computer Interaction & Design 9 Project 1 : Usability Testing 2 Human-computer Interaction & Design 10 Project 2: Design Thinking 3 Psychology](https://reader034.fdocuments.us/reader034/viewer/2022042212/5eb5c4590d5ca9625267be68/html5/thumbnails/25.jpg)
Home
Welcome to Adobe XD
P02
P03Design
Principles
![Page 26: Tutorial AdobeXD · WeekTopic Topic 1 Human-computer Interaction & Design 9 Project 1 : Usability Testing 2 Human-computer Interaction & Design 10 Project 2: Design Thinking 3 Psychology](https://reader034.fdocuments.us/reader034/viewer/2022042212/5eb5c4590d5ca9625267be68/html5/thumbnails/26.jpg)
Home
Tampilan Awal Dari Adobe XD
P02
P03Design
Principles
Pilih Tab Prototype
untuk membuat
Page Aplikasi :
• Android
• Iphone
• Website
![Page 27: Tutorial AdobeXD · WeekTopic Topic 1 Human-computer Interaction & Design 9 Project 1 : Usability Testing 2 Human-computer Interaction & Design 10 Project 2: Design Thinking 3 Psychology](https://reader034.fdocuments.us/reader034/viewer/2022042212/5eb5c4590d5ca9625267be68/html5/thumbnails/27.jpg)
Home
Tampilan Awal Dari Adobe XD
P02
P03Design
Principles
Pilih Tab Prototype
untuk membuat
Page Aplikasi :
• Android
• Iphone
• Website
![Page 28: Tutorial AdobeXD · WeekTopic Topic 1 Human-computer Interaction & Design 9 Project 1 : Usability Testing 2 Human-computer Interaction & Design 10 Project 2: Design Thinking 3 Psychology](https://reader034.fdocuments.us/reader034/viewer/2022042212/5eb5c4590d5ca9625267be68/html5/thumbnails/28.jpg)
Home
Tampilan Awal Dari Iphone 6
P02
P03Design
Principles
Pilih Iphone 6
![Page 29: Tutorial AdobeXD · WeekTopic Topic 1 Human-computer Interaction & Design 9 Project 1 : Usability Testing 2 Human-computer Interaction & Design 10 Project 2: Design Thinking 3 Psychology](https://reader034.fdocuments.us/reader034/viewer/2022042212/5eb5c4590d5ca9625267be68/html5/thumbnails/29.jpg)
Home
Tampilan Awal Dari Iphone 6
P02
P03Design
Principles
Pilih
Multiple
Iphone 6
![Page 30: Tutorial AdobeXD · WeekTopic Topic 1 Human-computer Interaction & Design 9 Project 1 : Usability Testing 2 Human-computer Interaction & Design 10 Project 2: Design Thinking 3 Psychology](https://reader034.fdocuments.us/reader034/viewer/2022042212/5eb5c4590d5ca9625267be68/html5/thumbnails/30.jpg)
Home
Desain Page Yang sudah dipilih
P02
P03Design
Principles
Silahkan
Page nya
Diberi warna
(warna bebas)
![Page 31: Tutorial AdobeXD · WeekTopic Topic 1 Human-computer Interaction & Design 9 Project 1 : Usability Testing 2 Human-computer Interaction & Design 10 Project 2: Design Thinking 3 Psychology](https://reader034.fdocuments.us/reader034/viewer/2022042212/5eb5c4590d5ca9625267be68/html5/thumbnails/31.jpg)
Home
Membuat Multipage
P02
P03Design
Principles
Silahkan
Membuat
Beberapa
Page
![Page 32: Tutorial AdobeXD · WeekTopic Topic 1 Human-computer Interaction & Design 9 Project 1 : Usability Testing 2 Human-computer Interaction & Design 10 Project 2: Design Thinking 3 Psychology](https://reader034.fdocuments.us/reader034/viewer/2022042212/5eb5c4590d5ca9625267be68/html5/thumbnails/32.jpg)
Home
Mendesain dengan Linear Gradient Colour
P02
P03Design
Principles
![Page 33: Tutorial AdobeXD · WeekTopic Topic 1 Human-computer Interaction & Design 9 Project 1 : Usability Testing 2 Human-computer Interaction & Design 10 Project 2: Design Thinking 3 Psychology](https://reader034.fdocuments.us/reader034/viewer/2022042212/5eb5c4590d5ca9625267be68/html5/thumbnails/33.jpg)
Home
Menyambungkan Antar Page
P02
P03Design
Principles
Silahkan
Membuat
Link Antar
Page
![Page 34: Tutorial AdobeXD · WeekTopic Topic 1 Human-computer Interaction & Design 9 Project 1 : Usability Testing 2 Human-computer Interaction & Design 10 Project 2: Design Thinking 3 Psychology](https://reader034.fdocuments.us/reader034/viewer/2022042212/5eb5c4590d5ca9625267be68/html5/thumbnails/34.jpg)
Home
Tampilan Awal Dari Iphone 6
P02
P03Design
Principles
Jika Dijalankan / di-Run Akan
Menampilkan Page Seperti Ini
Cukup Mudah bukan ☺
![Page 35: Tutorial AdobeXD · WeekTopic Topic 1 Human-computer Interaction & Design 9 Project 1 : Usability Testing 2 Human-computer Interaction & Design 10 Project 2: Design Thinking 3 Psychology](https://reader034.fdocuments.us/reader034/viewer/2022042212/5eb5c4590d5ca9625267be68/html5/thumbnails/35.jpg)
Home
Adobe XD
P02
P03Design
Principles
Lanjutkan beberapa desain pada beberapa Artboard
Selamat Berkreasi !
![Page 36: Tutorial AdobeXD · WeekTopic Topic 1 Human-computer Interaction & Design 9 Project 1 : Usability Testing 2 Human-computer Interaction & Design 10 Project 2: Design Thinking 3 Psychology](https://reader034.fdocuments.us/reader034/viewer/2022042212/5eb5c4590d5ca9625267be68/html5/thumbnails/36.jpg)
Home
Adobe XD
P02
P03Design
Principles
Beberapa Trik tambahan dalam Adobe XD
![Page 37: Tutorial AdobeXD · WeekTopic Topic 1 Human-computer Interaction & Design 9 Project 1 : Usability Testing 2 Human-computer Interaction & Design 10 Project 2: Design Thinking 3 Psychology](https://reader034.fdocuments.us/reader034/viewer/2022042212/5eb5c4590d5ca9625267be68/html5/thumbnails/37.jpg)
Home
Membuat Auto animated
P02
P03Design
Principles
![Page 38: Tutorial AdobeXD · WeekTopic Topic 1 Human-computer Interaction & Design 9 Project 1 : Usability Testing 2 Human-computer Interaction & Design 10 Project 2: Design Thinking 3 Psychology](https://reader034.fdocuments.us/reader034/viewer/2022042212/5eb5c4590d5ca9625267be68/html5/thumbnails/38.jpg)
Home
Trik Membuat Auto animated
P02
P03Design
Principles
![Page 39: Tutorial AdobeXD · WeekTopic Topic 1 Human-computer Interaction & Design 9 Project 1 : Usability Testing 2 Human-computer Interaction & Design 10 Project 2: Design Thinking 3 Psychology](https://reader034.fdocuments.us/reader034/viewer/2022042212/5eb5c4590d5ca9625267be68/html5/thumbnails/39.jpg)
Home
Membuat Auto animated
P02
P03Design
Principles
![Page 40: Tutorial AdobeXD · WeekTopic Topic 1 Human-computer Interaction & Design 9 Project 1 : Usability Testing 2 Human-computer Interaction & Design 10 Project 2: Design Thinking 3 Psychology](https://reader034.fdocuments.us/reader034/viewer/2022042212/5eb5c4590d5ca9625267be68/html5/thumbnails/40.jpg)
Home
Membuat Auto animated
P02
P03Design
Principles
![Page 41: Tutorial AdobeXD · WeekTopic Topic 1 Human-computer Interaction & Design 9 Project 1 : Usability Testing 2 Human-computer Interaction & Design 10 Project 2: Design Thinking 3 Psychology](https://reader034.fdocuments.us/reader034/viewer/2022042212/5eb5c4590d5ca9625267be68/html5/thumbnails/41.jpg)
Home
Membuat Auto animated
P02
P03Design
Principles
![Page 42: Tutorial AdobeXD · WeekTopic Topic 1 Human-computer Interaction & Design 9 Project 1 : Usability Testing 2 Human-computer Interaction & Design 10 Project 2: Design Thinking 3 Psychology](https://reader034.fdocuments.us/reader034/viewer/2022042212/5eb5c4590d5ca9625267be68/html5/thumbnails/42.jpg)
Membuat
Auto
animated
P02
P03
Design
Principles
![Page 43: Tutorial AdobeXD · WeekTopic Topic 1 Human-computer Interaction & Design 9 Project 1 : Usability Testing 2 Human-computer Interaction & Design 10 Project 2: Design Thinking 3 Psychology](https://reader034.fdocuments.us/reader034/viewer/2022042212/5eb5c4590d5ca9625267be68/html5/thumbnails/43.jpg)
Home
Trik Membuat Auto animated
P02
P03Design
Principles
![Page 44: Tutorial AdobeXD · WeekTopic Topic 1 Human-computer Interaction & Design 9 Project 1 : Usability Testing 2 Human-computer Interaction & Design 10 Project 2: Design Thinking 3 Psychology](https://reader034.fdocuments.us/reader034/viewer/2022042212/5eb5c4590d5ca9625267be68/html5/thumbnails/44.jpg)
Home
Membuat Auto animated
P02
P03Design
Principles
Sambungkan antar
artboard
![Page 45: Tutorial AdobeXD · WeekTopic Topic 1 Human-computer Interaction & Design 9 Project 1 : Usability Testing 2 Human-computer Interaction & Design 10 Project 2: Design Thinking 3 Psychology](https://reader034.fdocuments.us/reader034/viewer/2022042212/5eb5c4590d5ca9625267be68/html5/thumbnails/45.jpg)
Home
Membuat Auto animated
P02
P03Design
Principles
Artboard terakhir
dihubungkan
dengan artboard pertama
![Page 46: Tutorial AdobeXD · WeekTopic Topic 1 Human-computer Interaction & Design 9 Project 1 : Usability Testing 2 Human-computer Interaction & Design 10 Project 2: Design Thinking 3 Psychology](https://reader034.fdocuments.us/reader034/viewer/2022042212/5eb5c4590d5ca9625267be68/html5/thumbnails/46.jpg)
Home
Membuat Auto animated ke 2
P02
P03Design
Principles
![Page 47: Tutorial AdobeXD · WeekTopic Topic 1 Human-computer Interaction & Design 9 Project 1 : Usability Testing 2 Human-computer Interaction & Design 10 Project 2: Design Thinking 3 Psychology](https://reader034.fdocuments.us/reader034/viewer/2022042212/5eb5c4590d5ca9625267be68/html5/thumbnails/47.jpg)
Home
Membuat Auto animated ke 2
P02
P03Design
Principles
Siapkan 3 Artboard
seperti gambar
di samping
![Page 48: Tutorial AdobeXD · WeekTopic Topic 1 Human-computer Interaction & Design 9 Project 1 : Usability Testing 2 Human-computer Interaction & Design 10 Project 2: Design Thinking 3 Psychology](https://reader034.fdocuments.us/reader034/viewer/2022042212/5eb5c4590d5ca9625267be68/html5/thumbnails/48.jpg)
Home
Membuat Auto animated ke 2
P02
P03Design
Principles
Antara artboard 1 dan 2
Gunakan transisi time
Seperti gambar di
samping
![Page 49: Tutorial AdobeXD · WeekTopic Topic 1 Human-computer Interaction & Design 9 Project 1 : Usability Testing 2 Human-computer Interaction & Design 10 Project 2: Design Thinking 3 Psychology](https://reader034.fdocuments.us/reader034/viewer/2022042212/5eb5c4590d5ca9625267be68/html5/thumbnails/49.jpg)
Home
Membuat Auto animated ke 2
P02
P03Design
Principles
Antara artboard 2 dan 3
Gunakan transisi time
Seperti gambar di
Samping.
Selesai
![Page 50: Tutorial AdobeXD · WeekTopic Topic 1 Human-computer Interaction & Design 9 Project 1 : Usability Testing 2 Human-computer Interaction & Design 10 Project 2: Design Thinking 3 Psychology](https://reader034.fdocuments.us/reader034/viewer/2022042212/5eb5c4590d5ca9625267be68/html5/thumbnails/50.jpg)
Membuat
Animasi
Drag
P02
P03
Design
Principles
![Page 51: Tutorial AdobeXD · WeekTopic Topic 1 Human-computer Interaction & Design 9 Project 1 : Usability Testing 2 Human-computer Interaction & Design 10 Project 2: Design Thinking 3 Psychology](https://reader034.fdocuments.us/reader034/viewer/2022042212/5eb5c4590d5ca9625267be68/html5/thumbnails/51.jpg)
Home
Membuat Animasi Drag
P02
P03Design
Principles
Siapkan 4 blok
![Page 52: Tutorial AdobeXD · WeekTopic Topic 1 Human-computer Interaction & Design 9 Project 1 : Usability Testing 2 Human-computer Interaction & Design 10 Project 2: Design Thinking 3 Psychology](https://reader034.fdocuments.us/reader034/viewer/2022042212/5eb5c4590d5ca9625267be68/html5/thumbnails/52.jpg)
Home
Membuat Animasi Drag
P02
P03Design
Principles
![Page 53: Tutorial AdobeXD · WeekTopic Topic 1 Human-computer Interaction & Design 9 Project 1 : Usability Testing 2 Human-computer Interaction & Design 10 Project 2: Design Thinking 3 Psychology](https://reader034.fdocuments.us/reader034/viewer/2022042212/5eb5c4590d5ca9625267be68/html5/thumbnails/53.jpg)
Home
Membuat Animasi Drag
P02
P03Design
Principles
![Page 54: Tutorial AdobeXD · WeekTopic Topic 1 Human-computer Interaction & Design 9 Project 1 : Usability Testing 2 Human-computer Interaction & Design 10 Project 2: Design Thinking 3 Psychology](https://reader034.fdocuments.us/reader034/viewer/2022042212/5eb5c4590d5ca9625267be68/html5/thumbnails/54.jpg)
Home
Membuat Animasi Drag
P02
P03Design
Principles
![Page 55: Tutorial AdobeXD · WeekTopic Topic 1 Human-computer Interaction & Design 9 Project 1 : Usability Testing 2 Human-computer Interaction & Design 10 Project 2: Design Thinking 3 Psychology](https://reader034.fdocuments.us/reader034/viewer/2022042212/5eb5c4590d5ca9625267be68/html5/thumbnails/55.jpg)
Membuat
Animasi
Voice Command
P02
P03
Design
Principles
![Page 56: Tutorial AdobeXD · WeekTopic Topic 1 Human-computer Interaction & Design 9 Project 1 : Usability Testing 2 Human-computer Interaction & Design 10 Project 2: Design Thinking 3 Psychology](https://reader034.fdocuments.us/reader034/viewer/2022042212/5eb5c4590d5ca9625267be68/html5/thumbnails/56.jpg)
Home
Membuat Voice Command
P02
P03Design
Principles
Pastikan
Internet turn on.
![Page 57: Tutorial AdobeXD · WeekTopic Topic 1 Human-computer Interaction & Design 9 Project 1 : Usability Testing 2 Human-computer Interaction & Design 10 Project 2: Design Thinking 3 Psychology](https://reader034.fdocuments.us/reader034/viewer/2022042212/5eb5c4590d5ca9625267be68/html5/thumbnails/57.jpg)
Home
Membuat Voice Command
P02
P03Design
Principles
![Page 58: Tutorial AdobeXD · WeekTopic Topic 1 Human-computer Interaction & Design 9 Project 1 : Usability Testing 2 Human-computer Interaction & Design 10 Project 2: Design Thinking 3 Psychology](https://reader034.fdocuments.us/reader034/viewer/2022042212/5eb5c4590d5ca9625267be68/html5/thumbnails/58.jpg)
Home
Membuat Voice Command
P02
P03Design
Principles
![Page 59: Tutorial AdobeXD · WeekTopic Topic 1 Human-computer Interaction & Design 9 Project 1 : Usability Testing 2 Human-computer Interaction & Design 10 Project 2: Design Thinking 3 Psychology](https://reader034.fdocuments.us/reader034/viewer/2022042212/5eb5c4590d5ca9625267be68/html5/thumbnails/59.jpg)
Home
Latihan
P02
P03Design
Principles
Dengan menggunakan perubahan transisi, silahkan dicoba
1. Loading time : Driver Go-Jek ketika penumpang menunggu transaksi
2. Roda Spin Go-Point.
![Page 60: Tutorial AdobeXD · WeekTopic Topic 1 Human-computer Interaction & Design 9 Project 1 : Usability Testing 2 Human-computer Interaction & Design 10 Project 2: Design Thinking 3 Psychology](https://reader034.fdocuments.us/reader034/viewer/2022042212/5eb5c4590d5ca9625267be68/html5/thumbnails/60.jpg)
3. Kategori dalam Aplikasi
![Page 61: Tutorial AdobeXD · WeekTopic Topic 1 Human-computer Interaction & Design 9 Project 1 : Usability Testing 2 Human-computer Interaction & Design 10 Project 2: Design Thinking 3 Psychology](https://reader034.fdocuments.us/reader034/viewer/2022042212/5eb5c4590d5ca9625267be68/html5/thumbnails/61.jpg)
Pokok Bahasan Welcoming Page / Splash Screen01
02
03
04
05
06
Register Page
Login & Log Out Page
Dashboard Page
Profile Page
About
![Page 62: Tutorial AdobeXD · WeekTopic Topic 1 Human-computer Interaction & Design 9 Project 1 : Usability Testing 2 Human-computer Interaction & Design 10 Project 2: Design Thinking 3 Psychology](https://reader034.fdocuments.us/reader034/viewer/2022042212/5eb5c4590d5ca9625267be68/html5/thumbnails/62.jpg)
Pokok Bahasan Activity Page07
08
09
10
11
12
Notification
Loading Page
Contact Us
Feedback
Searching
![Page 63: Tutorial AdobeXD · WeekTopic Topic 1 Human-computer Interaction & Design 9 Project 1 : Usability Testing 2 Human-computer Interaction & Design 10 Project 2: Design Thinking 3 Psychology](https://reader034.fdocuments.us/reader034/viewer/2022042212/5eb5c4590d5ca9625267be68/html5/thumbnails/63.jpg)
Pokok Bahasan Confirmation13
14
15
16
17
18
News / Blog
History Of Transaction
Sign Of Error / Constraints
Setting
Dan Lain - lain
![Page 64: Tutorial AdobeXD · WeekTopic Topic 1 Human-computer Interaction & Design 9 Project 1 : Usability Testing 2 Human-computer Interaction & Design 10 Project 2: Design Thinking 3 Psychology](https://reader034.fdocuments.us/reader034/viewer/2022042212/5eb5c4590d5ca9625267be68/html5/thumbnails/64.jpg)
Confirmation
News / Blog
History Of Transaction
Sign Of Error / Constraints
Setting
Dan Lain - lain
Bagian lebih detail Item Kategori yang tercantum dalam sebuah
aplikasi ada di link berikut :
1. https://pttrns.com/
2. https://www.gookkis.com/referensi-ui-dan-ux-design-aplikasi-android/
![Page 65: Tutorial AdobeXD · WeekTopic Topic 1 Human-computer Interaction & Design 9 Project 1 : Usability Testing 2 Human-computer Interaction & Design 10 Project 2: Design Thinking 3 Psychology](https://reader034.fdocuments.us/reader034/viewer/2022042212/5eb5c4590d5ca9625267be68/html5/thumbnails/65.jpg)
4. Evaluasi Desain UI / UX
![Page 66: Tutorial AdobeXD · WeekTopic Topic 1 Human-computer Interaction & Design 9 Project 1 : Usability Testing 2 Human-computer Interaction & Design 10 Project 2: Design Thinking 3 Psychology](https://reader034.fdocuments.us/reader034/viewer/2022042212/5eb5c4590d5ca9625267be68/html5/thumbnails/66.jpg)
Pokok Bahasan
1
2
3
Prinsip Desain ( Pembahasan Minggu ke 5)
Heuristic_Evaluation_Checklist ( Dari Xerox Corporation )
https://uxchecklist.github.io/
Banyak kakas yang digunakan untuk mengevaluasi UI/UX, Diantaranya :
![Page 67: Tutorial AdobeXD · WeekTopic Topic 1 Human-computer Interaction & Design 9 Project 1 : Usability Testing 2 Human-computer Interaction & Design 10 Project 2: Design Thinking 3 Psychology](https://reader034.fdocuments.us/reader034/viewer/2022042212/5eb5c4590d5ca9625267be68/html5/thumbnails/67.jpg)
• Membuat Mock up berkelompok Aplikasi berbasis website dan Mobile.
( silahkan membuat mock up lebih kreatif dan inovatif )
• Menguji aplikasi tersebut ke 5 stakeholder yang terlibat di aplikasi ( Seperti Proses Usability Testing).
• Stakeholder yang diwawancarai sebagai partisipan minimal 5 dengan rincian 2 ( mahasiswa telkom ),
3 ( warga setempat )
Membuat laporan di kumpulkan di minggu ke 16 (6-7 mei 2019) perkuliahan format seperti contoh di blog
Susunannya :
1. Pendahuluan,
2. Dasar teori,
3. Hasil Screenshoot Mock Up,
4. Hasil Evaluasi Testing MockUp oleh 5 Stakeholder participant,
5. kesimpulan,
6. lampiran berupa transkrip wawancara dengan stakeholder
Final Projek
![Page 68: Tutorial AdobeXD · WeekTopic Topic 1 Human-computer Interaction & Design 9 Project 1 : Usability Testing 2 Human-computer Interaction & Design 10 Project 2: Design Thinking 3 Psychology](https://reader034.fdocuments.us/reader034/viewer/2022042212/5eb5c4590d5ca9625267be68/html5/thumbnails/68.jpg)
Presentasi final Projek Mock Up Maksimal tanggal 6-7 mei 2019 Membuat PPT beserta bukti Video Rekaman
Testing seperti usability testing. ( Sebelum tanggal tersebut dipersilahkan, lebih cepat lebih baik☺ )
Laporan akhir, PPT presentasi dan video diupload ke youtube kemudian dikirim ke email saya dengan subjek
NAMA KELAS_NAMA ANGGOTA KELOMPOK_TUGASFINALPROJEK
Membawa Hardcopy Laporan Akhir saat Presentasi
Final Projek
![Page 69: Tutorial AdobeXD · WeekTopic Topic 1 Human-computer Interaction & Design 9 Project 1 : Usability Testing 2 Human-computer Interaction & Design 10 Project 2: Design Thinking 3 Psychology](https://reader034.fdocuments.us/reader034/viewer/2022042212/5eb5c4590d5ca9625267be68/html5/thumbnails/69.jpg)
Thank you