mengulas web spada menurut ui/ux

1. 1 0 1 1 0 0 0 1 1 1 1 0 1 0 1 1 1 1 1 1 0 1 1 1 1 0 0
1 0 1 0 1 0 0 1 0 1 1 1 1 0 1 0 1 0 1 1 0 1 1 0 1 0
1 0 1 1 0 1 1 0 0 1 1 0 0 1 0 0 1 1 1 0 1 0 1 0 1 1
0 1 0 0 0 0 0 1 1 0 0 1 0 0 1 0 1 1 1 1 1 1 0 1 1 1
1 0 1 0 1 1 1 0 0 1 0 0 1 1 1 0 1 1 0 1 0 0 0 1 0 0
0 1 0 0 0 0 0 0 0 1 1 1 0 0 1 0 1 1 1 0 1 1 0 0 0
1 1 0 1 0 1 1 1 1 1 1 0 1 1 1 1 0 0 0 0 1 0 1 0 1 0 0
1 1 1 1 0 1 0 1 0 1 1 0 1 1 0 1 0 0 0 1 0 1 1 0 1 1 0
1 0 0 1 0 0 1 1 1 0 1 0 1 0 1 1 1 0 0 1 0 0 0 0 0
0 0 1 0 0 1 0 1 1 1 1 1 1 0 1 1 1 1 1 1 1 0 1 0 1 1 1 0
0 0 1 1 1 0 1 1 0 1 0 0 0 1 0 0 0 0 1 0 0 0 0 0
STUDIO FOTO PIXELAST
UI / UX
Dipaparkan oleh Nur Alif Mustofa, A.Md.Kom

2. Team Google Kami
Orang-orang di balik
presentasi ini
ROZY NUR FATMALA_V3420079
Anggota 1
SHALLOMITA R.R SITORUS_V3420071
Anggota 2
YUSUF BAGUS SUNGGING H_V3420077
Anggota 3

3. UX
Awal mula desain
Proses mendesain suatu produk melalui
pendekatan pengguna.

4. 1 0 1 1 0 0 0 1 1 1 1 0 1 0 1 1 1 1 1 1 0 1 1 1 1 0 0 0 0 1 0 1 0
1 0 0 1 0 1 1 1 1 0 1 0 1 0 1 1 0 1 1 0 1 0 0 0 1 0 1 1 0 1 1 0
0 1 1 0 0 1 0 0 1 1 1 0 1 0 1 0 1 1 1 0 0 1 0 0 0 0 0 1 1 0 0
1 0 0 1 0 1 1 1 1 1 1 0 1 1 1 1 1 1 1 0 1 0 1 1 1 0 0 1 0 0 1 1 1 0
1 1 0 1 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 1 1 1 0 0 1 0 1 1 1
0 1 1 0 0 0 1 1 1 1 0 1 0 1 1 1 1 1 1 0 1 1 1 1 0 0 0 0 1 0 1 0 1
0 0 1 0 1 1 1 1 0 1 0 1 0 1 1 0 1 1 0 1 0 0 0 1 0 1 1 0 1 1 0 0
1 1 0 0 1 0 0 1 1 1 0 1 0 1 0 1 1 1 0 0 1 0 0 0 0 0 1 1 0 0 1
0 0 1 0 1 1 1 1 1 1 0 1 1 1 1 1 1 1 0 1 0 1 1 1 0 0 1 0 0 1 1 1 0 1
1 0 1 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 1 1 1 0 0 1 0 1 1 1 0
1 1 0 0 0 1 1 1 1 0 1 0 1 1 1 1 1 1 0 1 1 1 1 0 0 0 0 1 0 1 0 1 0
0 1 0 1 1 1 1 0 1 0 1 0 1 1
UI
Bagian dari UX yang berupa tampilan
visual design sebuah sistem. Tampilan
tersebut memungkinkan pengguna
terhubung dan berinteraksi dengan
suatu produk.

5. 1 1 1 0 1 1 1 1 1 1 1 0 1 0 1 1 1 0 0 1 0 0 1 1 1 0 1 1 0 1 0 0 0 1 0 0 0
1 0 0 0 0 0 0 0 1 1 1 0 0 1 0 1 1 1 0 1 1 0 0 0 1 1 1 1 0 1 0 1 1 1 1 1 1
1 1 1 1 0 0 0 0 1 0 1 0 1 0 0 1 0 1 1 1 1 0 1 0 1 0 1 1 1 0 1 1 0 0 0 1 1
1 0 1 0 1 1 1 1 1 1 0 1 1 1 1 0 0 0 0 1 0 1 0 1 0 0 1 0 1 1 1 1 0 1 0 1 0 1
1 0 1 1 0 1 0 0 0 1 0 1 1 0 1 1 0 0 1 1 0 0 1 0 0 1 1 1 0 1 0 1 0 1 1 1 0
0 1 0 0 0 0 0 1 1 0 0 1 0 0 1 0 1 1 1 1 1 1 0 1 1 1 1 1 1 1 0 1 0 1 1 1 0 0
0 0 1 1 1 0 1 1 0 1 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 1 1 1 0 0 1 0 1 1
0 1 1 0 0 0 1 1 1 1 0 1 0 1 1 1 1 1 1 0 1 1 1 1 0 0 0 0 1 0 1 0 1 0 0 1 0
1 1 1 0 1 0 1 0 1 1 0 1 1 0 1 0 0 0 1 0 1 1 0 1 1 0 0 1 1 0 0 1 0 0 1 1 1
0 1 0 1 0 1 1 1 0 0 1 0 0 0 0 0 1 1 0 0 1 0 0 1 0 1 1 1 1 1 1 0 1 1 1 1 1 1
1 0 1 0 1 1 1 0 0 1 0 0 1 1 1 0 1 1 0 1 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0
1 1 1 0 0 1 0 1 1 1 0 1 1 0 0 0 1 1 1 1 0 1 0 1 1 1 1 1 1 0 1 1 1 1 0 0 0 0
1 0 1 0 1 0 0 1 0 1 1 1 1 0 1 0 1 0 1 1
Bagaimana
cara
mendesign UX?

6. 0 1 0 0 0 0 0 0 0 1 1 1 0 0 1 0 1 1 1 0 1 1 0 0 0 1 1 1 1 0 1 0 1 1 1 1 1 1 0 1 1 1 1 0 0
1 0 1 0 1 0 0 1 0 1 1 1 1 0 1 0 1 0 1 1 0 1 1 0 1 0 0 0 1 0 1 1 0 1 1 0 0 1 1 0 0 1 0 0
0 1 0 1 0 1 1 1 0 0 1 0 0 0 0 0 1 1 0 0 1 0 0 1 0 1 1 1 1 1 1 0 1 1 1 1 1 1 1 0 1 0 1 1 1
0 0 1 1 1 0 1 1 0 1 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 1 1 1 0 0 1 0 1 1 1 0 1 1 0 0 0
1 0 1 0 1 1 1 1 1 1 0 1 1 1 1 0 0 0 0 1 0 1 0 1 0 0 1 0 1 1 1 1 0 1 0 1 0 1 1 1 0 1 1 0 0
1 1 0 1 0 1 1 1 1 1 1 0 1 1 1 1 0 0 0 0 1 0 1 0 1 0 0 1 0 1 1 1 1 0 1 0 1 0 1 1 0 1 1 0 1 0
1 0 1 1 0 1 1 0 0 1 1 0 0 1 0 0 1 1 1 0 1 0 1 0 1 1 1 0 0 1 0 0 0 0 0 1 1 0 0 1 0 0 1
1 1 1 1 0 1 1 1 1 1 1 1 0 1 0 1 1 1 0 0 1 0 0 1 1 1 0 1 1 0 1 0 0 0 1 0 0 0 0 1 0 0 0 0
0 1 1 1 0 0 1 0 1 1 1 0 1 1 0 0 0 1 1 1 1 0 1 0 1 1 1 1 1 1 0 1 1 1 1 0 0 0 0 1 0 1 0 1 0
1 1 1 1 0 1 0 1 0 1 1 0 1 1 0 1 0 0 0 1 0 1 1 0 1 1 0 0 1 1 0 0 1 0 0 1 1 1 0 1 0 1 0 1
0 1 0 0 0 0 0 1 1 0 0 1 0 0 1 0 1 1 1 1 1 1 0 1 1 1 1 1 1 1 0 1 0 1 1 1 0 0 1 0 0 1 1 1 0
1 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 1 1 1 0 0 1 0 1 1 1 0 1 1 0 0 0 1 1 1 1 0 1 0 1 1
0 1 1 1 1 0 0 0 0 1 0 1 0 1 0 0 1 0 1 1 1 1 0 1 0 1
DESAIN MASA KINI
Produk dengan desain UX yang baik akan
menciptakan pengalaman yang menyenangkan
bagi pengguna saat menggunakan produk Anda.
Pengguna jadi mudah dan nyaman saat
menggunakan produk.
P| Desain dan Teknologi

7. CARA MEMBUAT
DESAIN UX
UTILITY
Kita harus memberhatikan penggunaan UX berguna
atau membantu masyarakat untuk menjangkau
produk.
USABILITY
Memudahkan pengguna atau masyarakat dalam
menggunakan desain kita.
DESIRABILITY
Memberikan tambahan kreasi untuk mendisain
yang lebih baik dari produk lain.
Memberikan bentuk model yang berguna dan
mengandung hal-hal positif bagi masyarakat seperti
memberi desain yang lebih mudah digunakan.
BRAND EXPERIENCE

8. 1 0 1 1 0 0 0 1 1
1 0 1 1 0 1 0 0 0
0 0 1 0 0 1 0 1
0 1 0 0 0 0 0 0
1 0 1 0 1 0 0 1 0
0 1 0 1 0 1 1 1 0
0 0 1 1 1 0 1 1 0
1 0 1 0 1 1 1 1 1 1
User Contered
Design (Digital
Product)
Metode desain dimana kita harus memperhatikan
produk.
P| Desain dan Teknologi

9. 0 0 0 1 1 1 1 0 1 0 1 1 1 1 1 1 0 1 1 1 1 0 0 0 0 1 0 1 0 1 0 0 1 0 1 1 1 1 0 1 0 1 0 1
0 1 0 0 0 1 0 1 1 0 1 1 0 0 1 1 0 0 1 0 0 1 1 1 0 1 0 1 0 1 1 1 0 0 1 0 0 0 0 0 1 1
0 0 1 0 1 1 1 1 1 1 0 1 1 1 1 1 1 1 0 1 0 1 1 1 0 0 1 0 0 1 1 1 0 1 1 0 1 0 0 0 1 0 0 0
0 0 0 0 0 0 1 1 1 0 0 1 0 1 1 1 0 1 1 0 0 0 1 1 1 1 0 1 0 1 1 1 1 1 1 0 1 1 1 1 0 0 0 0
0 1 0 0 1 0 1 1 1 1 0 1 0 1 0 1 1 0 1 1 0 1 0 0 0 1 0 1 1 0 1 1 0 0 1 1 0 0 1 0 0 1 1 1
0 1 1 1 0 0 1 0 0 0 0 0 1 1 0 0 1 0 0 1 0 1 1 1 1 1 1 0 1 1 1 1 1 1 1 0 1 0 1 1 1 0 0 1
1 1 0 1 1 0 1 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 1 1 1 0 0 1 0 1 1 1 0 1 1 0 0 0 1 1 1
0 1 1 1 1 1 1 0 1 1 1 1 0 0 0 0 1 0 1 0 1 0 0 1 0 1 1 1 1 0 1 0 1 0 1 1 1 0 1 1 0 0 0 1 1
User Centered Design
(Digital Product)
Discover1.
4. Validate
2. Define
3. Design
5. Develope

10. DISCOVER
Dimana kita harus mencari tahu
keperluan orang pada produk
DEFINE
Mencari solusi yang kita pecahkan.
Melakukan mapping the journey dan
menemukan idea
DESIGN
Mulai membuat sitemap, phototyping dan
UI/Sketsa. Disini kalian tidak boleh
memasukkan visual design terleboh dahulu.
E-Commerence
Contoh dari e-commerence
VALIDATE
Pembenaran produk yang telah dibuat.
Mengetest kelayakan produk.
DEVELOPE
Memuat visual design dan code sebagai
finalisasi sebuah produk.

11. Arti Penting Desain
SITEMAP
Gambaran terhadap produk
PROTOTYPE
Mengetest kepada masyarakat atas kelayakan sebuah produk.
VISUAL DESIGN
Membuat visual atau warna dihalaman awal/ beranda.
1 0 1 1 0 0 0 1 1 1 1 0 1 0 1 1 1 1 1 1 0 1 1 1
1 0 1 1 0 1 0 0 0 1 0 1 1 0 1 1 0 0 1 1 0 0
0 0 1 0 0 1 0 1 1 1 1 1 1 0 1 1 1 1 1 1 1 0 1 0
0 1 0 0 0 0 0 0 0 1 1 1 0 0 1 0 1 1 1 0 1 1
1 0 1 0 1 0 0 1 0 1 1 1 1 0 1 0 1 0 1 1 0 1 1
0 1 0 1 0 1 1 1 0 0 1 0 0 0 0 0 1 1 0 0 1 0
0 0 1 1 1 0 1 1 0 1 0 0 0 1 0 0 0 0 1 0 0
1 0 1 0 1 1 1 1 1 1 0 1 1 1 1 0 0 0 0 1 0 1 0

12. SINGKATNYA
UX
Memberikan pengalaman
menggunakan produk.
PERMISALAN
Membuat UX tanpa UI akan
terjadi kehampaan
UI
Mempercantik tampilan produk
CONTOH
pengujian UX yang diterima Tugas
Akhir adalah bagaimana kita
menguji ke user/pengguna

13. 1 1 0 0 1 1 0 0 1 0 0 1 1 1 0 1 0 1 0 1 1 1 0 0 1 0 0 0
0 1 1 0 0 1 0 0 1 0 1 1 1 1 1 1 0 1 1 1 1 1 1 1 0 1 0 1 1 1 0
1 0 0 1 1 1 0 1 1 0 1 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0
1 1 1 0 0 1 0 1 1 1 0 1 1 0 0 0 1 1 1 1 0 1 0 1 1 1 1 1 1 0 1
1 0 0 0 0 1 0 1 0 1 0 0 1 0 1 1 1 1 0 1 0 1 0 1 1 0 1 1
1 0 0 0 1 0 1 1 0 1 1 0 0 1 1 0 0 1 0 0 1 1 1 0 1 0 1 0
1 0 0 1 0 0 0 0 0 1 1 0 0 1 0 0 1 0 1 1 1 1 1 1 0 1 1 1
1 1 0 1 0 1 1 1 0 0 1 0 0 1 1 1 0 1 1 0 1 0 0 0 1 0 0 0
1 0 0 0 0 0 0 0 1 1 1 0 0 1 0 1 1 1 0 1 1 0 0 0 1 1 1 1
1 0 1 1 1 1 1 1 0 1 1 1 1 0 0 0 0 1 0 1 0 1 0 0 1 0 1 1 1 1
1 0 1 0 1 1 1 0 1 1 0 0 0 1 1 1 1 0 1 0 1 1 1 1 1 1 0 1 1 1 1
0 0 0 1 0 1 0 1 0 0 1 0 1 1 1 1 0 1 0
Formula
Desain
Bagaimana desain
tercipta?
Konsep
Produksi
Pengujian

14. 0 1 0 0 1 0 1 1 1 1 0 1 0 1 0 1 1 0 1 1 0 1
1 0 0 1 1 0 0 1 0 0 1 1 1 0 1 0 1 0 1 1 1 0
1 0 0 1 0 0 1 0 1 1 1 1 1 1 0 1 1 1 1 1 1 1 0
0 1 1 1 0 1 1 0 1 0 0 0 1 0 0 0 0 1 0 0 0
0 1 0 1 1 1 0 1 1 0 0 0 1 1 1 1 0 1 0 1 1 1 1
0 0 1 0 1 0 1 0 0 1 0 1 1 1 1 0 1 0 1 0 1 1
0 1 1 0 1 1 0 0 1 1 0 0 1 0 0 1 1 1 0 1 0 1
0 0 0 1 1 0 0 1 0 0 1 0 1 1 1 1 1 1 0 1 1 1
0 0 1 0 0 1 1 1 0 1 1 0 1 0 0 0 1 0 0 0 0
0 1 1 1 0 0 1 0 1 1 1 0 1 1 0 0 0 1 1 1 1 0
1 1 0 0 0 0 1 0 1 0 1 0 0 1 0 1 1 1 1 0 1 0
0 0 1 1 1 1 0 1 0 1 1 1 1 1 1 0 1 1 1 1 0 0 0
0 1 1 1 1 0 1 0
ULASAN SPADA DARI SEGI UI
DARI SEGI UI
WEBSITE SPADA TIDAK TERLALU
MENONJOL DENGAN DESAIN WEB
YANG SEDERHANA KARENA MUNGKIN
YANG DIBUTUHKAN DARI WEBSITE INI
ADALAH UNTUK KEGIATAN BERLAJAR
– MENGAJAR, SEPERTI PENYAMPAIAN
MATERI DAN PENGUMPULAN TUGAS

15. 1 0 1 1 0 0 0 1 1 1 1 0 1 0 1 1 1 1 1 1 0 1 1 1 1 0 0 0 0 1 0 1
0 1 1 1 1 0 1 0 1 0 1 1 0 1 1 0 1 0 0 0 1 0 1 1 0 1 1 0 0 1 1 0
1 1 1 0 1 0 1 0 1 1 1 0 0 1 0 0 0 0 0 1 1 0 0 1 0 0 1 0 1 1 1
1 1 1 1 1 1 0 1 0 1 1 1 0 0 1 0 0 1 1 1 0 1 1 0 1 0 0 0 1 0 0 0
0 0 0 0 0 1 1 1 0 0 1 0 1 1 1 0 1 1 0 0 0 1 1 1 1 0 1 0 1 1 1
KOMBINASI WARNA
HIJAU DAN PUTIH
PADA WEBSITE
MESKIPUN
SEDERHANA TETAPI
SUDAH CUKUP
MENARI KARENA
MEMANG TUJUAN
DIBUATNYA WEB INI
BUKAN UNTUK
DILIHAT KEINDAHAN
ATAU ESTETIKANYA
KARENA DESAIN
UI/UX YANG
KURANG MENARIK
JUGA MEMBUAT
SPADA TERLIHAT
FLAT

16. Ulasan dari segi UX
Berdasatkan tampilan,website tersebut
mudah digunakan dan tidak sulit untuk
dipelajari karena memang website
tersebut ditujukan oleh mahasiswa.
Item 1 Item 2 Item 3 Item 4 Item 5
40
30
20
10
0
Fitur – fitur yang tersedia di website tersebut sudah sesuai
fungsinya seperti fitur tempat untuk mendownload materi,
tempat untuk melakukan diskusi, tempat memberikan
tugas, dan tempat untuk mengumpulkan tugas.

17. 1 0 1 1 0 0 0 1 1 1 1 0 1 0 1 1 1 1 1 1 0 1 1 1 1 0 0 0 0 1 0 1
0 1 1 1 1 0 1 0 1 0 1 1 0 1 1 0 1 0 0 0 1 0 1 1 0 1 1 0 0 1 1 0
1 1 1 0 1 0 1 0 1 1 1 0 0 1 0 0 0 0 0 1 1 0 0 1 0 0 1 0 1 1 1
1 1 1 1 1 1 0 1 0 1 1 1 0 0 1 0 0 1 1 1 0 1 1 0 1 0 0 0 1 0 0 0
0 0 0 0 0 1 1 1 0 0 1 0 1 1 1 0 1 1 0 0 0 1 1 1 1 0 1 0 1 1 1
ULASAN SPADA
DARI SEGI UXMungkin perlu pembenahan
sedikit pada fitur pembagian
matkul supaya matkul antara
kelas yang
satu dengan matkul kelas lainnya
tidak bercampur.
Untuk tampilan bagian depannya
juga sangat membantu mahasiswa
karena terdapat tampilan untuk
daftar membuka matkul yang sudah
di enrool dan juga membuka matkul
yang terakhir diakses, sehingga tidak
perlu mengulangi langkah dari awal
untuk mengakses matkul tersebut

18. Pertanyaan?
Komentar?
Beri tahu kami!
ALAMAT E-MAIL
shallomsitorus@student.uns.ac.id
bagus.herlambang@student.uns.ac.id
rozyfatmala12@student.uns.ac.id

19. SAMPAI JUMPA DI
MEDIA SOSIAL
TERIMA KASIH
SEKIAN DARI KAMI

20. 0 1 1 1 1 0 1 0 1 1 1 1 1 1 0 1 1 1 1 0 0 0 0 1 0 1
0 1 1 1 1 0 1 0 1 0 1 1 0 1 1 0 1 0 0 0 1 0 1 1 0 1
0 1 0 0 1 1 1 0 1 0 1 0 1 1 1 0 0 1 0 0 0 0 0 1
0 1 0 1 1 1 1 1 1 0 1 1 1 1 1 1 1 0 1 0 1 1 1 0 0 1 0
0 1 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 1 1 1 0
0 1 1 0 0 0 1 1 1 1 0 1 0 1 1 1 1 1 1 0 1 1 1 1 0 0
1 0 0 1 0 1 1 1 1 0 1 0 1 0 1 1 0 1 1 0 1 0 0 0 1
0 0 1 1 0 0 1 0 0 1 1 1 0 1 0 1 0 1 1 1 0 0 1 0 0
0 0 1 0 0 1 0 1 1 1 1 1 1 0 1 1 1 1 1 1 1 0 1 0 1 1 1
1 1 1 0 1 1 0 1 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0
1 0 1 1 1 0 1 1 0 0 0 1 1 1 1 0 1 0 1 1 1 1 1 1 0 1 1
DESAIN ADALAH DUTA YANG
SENYAP DI BALIK MEREK
ANDA.
Ingatlah Selalu
PAUL RAND