Pengenalan dasar esain UI/UX untuk siswa SMK

Pengenalan dasar esain UI/UX untuk siswa SMK

• 1.
  Lets go!
• 2.
  APA ITU UI DESIGN? ●UI atau User Interface adalah proses dimana menampilkan sebuah hasil dalam bentuk tampilan yang dapat dilihat oleh pengguna (user) ● Tujuan dari User Interface sendiri adalah untuk meningkatkan fungsionalitas serta user experience dari pengguna. ● Komponen UI yang sering digunakan seperti tombol, ikon tipografi, tema, animasi yang ditampilkan, juga visual interaktif lainnya.
• 3.
  APA ITU UX DESIGN? ●UX atau User Experience adalah proses dimana pengguna dapat berinteraksi dengan interface secara baik dan nyaman ● tujuan dari UX adalah untuk meningkatkan kepuasan pengguna saat mengakses sebuah tampilan, baik dari sisi website, mobile, maupun desktop. ● Komponen UX yang sering digunakan antara lain fitur produk, navigasi penggunaan produk, struktur desain, aspek visual desain, dan semua aspek interaksi dengan user.
• 4.
  PERBEDAAN UI VSUX DESIGN UI UX UI berkaitan dengan tampilan visual dan interaksi antara pengguna dan sistem. UX berkaitan dengan pengalaman pengguna saat menggunakan produk atau layanan. Fokus utama UI adalah pada desain elemen-elemen yang terlihat oleh pengguna, seperti tata letak, warna, ikon, tombol, dan elemen grafis lainnya. Fokus utama UX adalah memahami kebutuhan, preferensi, dan perilaku pengguna untuk menciptakan pengalaman yang memuaskan dan efektif. Tujuan UI adalah menciptakan antarmuka yang menarik secara visual, konsisten, dan mudah digunakan. Tujuan UX adalah menciptakan pengalaman yang mudah bagi user saat menggunakan produk tanpa hambatan apapun. Desainer UI bertanggung jawab untuk membuat antarmuka yang estetis dan menarik, mempertimbangkan prinsip desain visual dan penggunaan elemen-elemen grafis yang efektif. Desainer UX bertanggung jawab untuk melakukan riset pengguna, menganalisis kebutuhan pengguna, merancang alur kerja, mengatur tata letak, dan memastikan bahwa keseluruhan pengalaman pengguna berjalan dengan baik.
• 5.
  TUGAS UI/UX DESIGNER ● Setiapperusahaan tentunya berusaha untuk meningkatkan kualitas dari produk yang dihasilkan, baik dari segi fungsionalitas maupun dari kualitas tampilannya. ● Dalam dunia IT, orang yang ahli dalam bidang UI UX disebut dengan UI UX designer. ● Tugas dari posisi tersebut tentunya tidak hanya sekedar ahli dalam membuat sebuah desain maupun tampilan kasar dari aplikasi. UI UX Designer juga harus memperhatikan mengenai fungsionalitas dan tampilan dari desain awal yang akan dibuat untuk perangkat lunak.
• 6.
  SKILL YANG DIBUTUHKANUI UX DESIGNER Desain visual Analisa dan menarik kesimpulan dari data Wireframing dan prototyping Melakukan riset UX Berkomunikasi dengan baik Menguasai tools dan software design Bekerja dalam tim dan berkolaborasi Kemampuan memecahkan masalah
• 7.
  KOMPONEN DALAM UIUX Design Visual 5 Prototype 4 Informasi Arsitektur 1 Interaksi design 2 Fungsionalitas 3
• 8.
  1. Informasi Arsitektur Informasiarsitektur adalah struktur dari segala bentuk informasi yang ditampilkan kepada pengguna. Berikut metode yang dibutuhkan dalam mengorganisir Informasi Arsitektur: ● Hierarki: Menggunakan konsep teori psikologi. Contoh: pembuatan navigasi yang dibuat di paling atas dan berfungsi sebagai penunjuk. ● Sekuensial: Lebih menekankan pada proses break-down setiap informasi menjadi beberapa tahapan yang nantinya akan digunakan oleh user. Contoh: menu pada e–commerce yang memiliki produk informasi. ● Matriks: Melimpahkan tanggung jawab kepada sisi pengguna. Contoh: sorting
• 9.
  2. Interaksi Design ●Interaksi pada desain dapat berupa cara mengklik, menggeser, menekan fitur maupun tombol dalam aplikasi. Interaksi desain sangatlah penting untuk mengetahui kebiasaan (behavior) dari pengguna.
• 10.
  3. Fungsionalitas ● Ukurandari fungsionalitas (Usability) ini dinilai dari seberapa mudah penggunaan dari aplikasi tersebut. ● Selain itu, ketepatan dan fitur yang mendukung bagi pengguna merupakan hal yang penting bagi tampilan website maupun mobile.
• 11.
  4. Prototype ● Setelahmenyusun ketiga komponen tadi, selanjutnya yang perlu dilakukan adalah membuat sebuah prototype kasar berupa Wireframe. ● Output dari prototype tersebut akan dijadikan layout. Yang mana, nantinya akan diserahkan kepada tim pengembang untuk proses pembuatan software.
• 12.
  5. Design Visual ●Setelah hasil wireframe telah dibuat, barulah bagi seorang visual designer untuk membuat tampilan visual dari rancangan tersebut. ● Penambahan dan perubahan pada warna, style, font, dll. Fungsinya supaya memberikan gambaran yang lebih jelas mengenai desain awal dari aplikasi yang akan dibuat. ● Tools yang digunakan dalam pembuatan desain visual ini adalah Adobe XD, Figma, dll.
• 13.
  TOOLS YANG BIASADIGUNAKAN WHIMSICAL ADOBE XD SKETCH FIGMA
• 14.
  KESIMPULAN ● UI (UserInterface) adalah proses dimana menampilkan sebuah hasil dalam bentuk tampilan yang dapat dilihat oleh pengguna (user). Sedangkan, UX (User Experience) adalah proses dimana menampilkan sebuah hasil dalam bentuk tampilan yang dapat dilihat oleh pengguna (user). ● Orang yang bekerja untuk membuat UI UX design disebut dengan UI UX Designer. Posisi tersebut berperan penting dalam pembuatan desain awal dari aplikasi baik dari tampilan website, desktop, maupun mobile. ● Terdapat lima macam komponen dalam UI UX, yaitu informasi arsitektur, interaksi desain, fungsionalitas, prototype, dan desain visual. ● Di dalam pengembangan aplikasi, sangat diperlukan desain dari UI UX untuk meningkatkan kualitas serta memudahkan pengguna dalam berinteraksi dengan aplikasi.