{"id":1619,"date":"2020-08-29T21:36:35","date_gmt":"2020-08-29T14:36:35","guid":{"rendered":"http:\/\/student-activity.binus.ac.id\/himka\/?p=1619"},"modified":"2020-08-29T21:36:35","modified_gmt":"2020-08-29T14:36:35","slug":"pengertian-dan-perbedaan-ui-ux-designer","status":"publish","type":"post","link":"https:\/\/student-activity.binus.ac.id\/himka\/2020\/08\/29\/pengertian-dan-perbedaan-ui-ux-designer\/","title":{"rendered":"Pengertian dan Perbedaan UI & UX Designer"},"content":{"rendered":"

UI dan UX seringkali disalahartikan sebagai hal yang sama oleh banyak orang atau pengertiannya terbalik satu sama lain. Walaupun begitu, kedua hal ini adalah dua hal yang saling berhubungan erat dan tidak bisa berdiri sendiri-sendiri.<\/p>\n

UI (User Interface<\/em>) adalah bagaimana suatu website<\/em> atau aplikasi yang kamu buat terlihat dan berbentuk seperti apa. Hal tersebut mencakup layout<\/em> (tata letak), visual design<\/em> (desain visual), dan branding<\/em>. Juga berisi kombinasi berbagai macam konten (dokumen, teks, gambar, video, dan lainnya), form<\/em> (tombol, label, text field, check box, drop-down list<\/em>, desain grafis, dll), dan perilaku (apa yang terjadi jika user mengklik\/menyeret\/mengetik).<\/p>\n

UX (User Experience<\/em>) berkonsentrasi pada bagaimana sebuah produk terasa, apakah itu memecahkan masalah bagi user<\/em>, mudah digunakan, dan tidak membingungkan. Produk dengan desain UX yang baik tentunya akan menciptakan pengalaman yang menyenangkan bagi para user<\/em>.<\/p>\n

 <\/p>\n

Perbedaan UI dan UX<\/strong><\/p>\n

    \n
  1. Tujuan desain<\/li>\n<\/ol>\n

    Fokus desain UI adalah keindahan tampilan dan kerapian layout<\/em>. Sementara itu, fokus desain UX adalah kepuasan yang diberi produk kepada para user<\/em>. Desain UI akan mempengaruhi kesan terhadap produk sementara UX mempengaruhi pengalaman saat menggunakan produk.<\/p>\n

      \n
    1. Proses desain<\/li>\n<\/ol>\n

      Proses desain UI dilakukan dengan riset desain yang menarik dan sesuai dengan konsep yang ingin dicapai. Para desainer perlu merancang model desain dengan membuat mock up<\/em>. Kemudian proses desain UX dilakukan dengan riset pengguna sehingga bisa menyesuaikan dan memenuhi kebutuhan para targeted user<\/em>. Proses ini jauh lebih sulit dan memiliki banyak tahapan. Begitu proses riset selesai, para desainer akan ke tahap berikutnya yaitu membuat wireframe<\/em> dan prototype<\/em>.<\/p>\n

        \n
      1. Komponen<\/li>\n<\/ol>\n

        Komponen yang membangun desain UI berfokus pada keindahan tampilan produksi. Komponen UI tersebut di antaranya meliputi warna, gambar dan video animasi, typography<\/em>, buttons<\/em>, dan visual interaksi lainnya. Sementara itu, komponen desain UX meliputi hampir seluruh komponen pada suatu produk seperti fitur-fitur, struktur desain, dan navigasi. Termasuk juga tampilan interface<\/em>, copywriting<\/em>, hingga branding<\/em>, sehingga diperlukan kolaborasi tim untuk menghasilkan desain produk yang baik.<\/p>\n

         <\/p>\n

        Tabel Perbedaan<\/strong><\/p>\n\n\n\n\n\n\n\n\n\n\n
        Perbedaan<\/strong><\/td>\nUser Interface<\/em><\/strong> (UI)\u00a0<\/strong><\/td>\nUser Experience<\/em><\/strong> (UX)\u00a0<\/strong><\/td>\n<\/tr>\n
        Tujuan<\/strong><\/td>\nMembuat tampilan produk lebih menarik\u00a0<\/strong><\/td>\nMemberikan kenyamanan saat memakai produk\u00a0<\/strong><\/td>\n<\/tr>\n
        Fokus<\/strong><\/td>\nBerfokus pada tampilan yang bagus<\/strong><\/td>\nBerfokus pada kenyamanan pengguna<\/strong><\/td>\n<\/tr>\n
        Elemen<\/strong><\/td>\nAnimasi, typography<\/em>, warna, video, buttons<\/em>, dll<\/strong><\/td>\nUsability<\/em>, navigasi, struktur desain, fitur-fitur, interaction design<\/em>, dll\u00a0<\/strong><\/td>\n<\/tr>\n
        Based on<\/em><\/strong><\/td>\nDesain berdasarkan riset desain dan konsep produk<\/strong><\/td>\nDesain berdasarkan riset pengguna<\/strong><\/td>\n<\/tr>\n
        Tools<\/em><\/strong><\/td>\nSpesifikasi utama desain grafis, seperti\u00a0Flinto, Principle, Frames X, Adobe Illustrator<\/strong><\/td>\nSpesifikasi utama prototyping<\/em> seperti\u00a0Sketch, InVision, Figma, Adobe XD, Axure<\/strong><\/td>\n<\/tr>\n
        Pre-building<\/em><\/strong><\/td>\nBerupa mock up<\/em><\/strong><\/td>\nBerupa wireframe<\/em> dan prototype<\/em><\/strong><\/td>\n<\/tr>\n
        Skills<\/em><\/strong> yang dibutuhkan<\/strong><\/td>\nDesain grafis, creative thinking, convergent thinking, desain branding.<\/em>\u00a0<\/strong><\/td>\nRiset, critical thinking, creative thinking, analysis, problem solving,\u00a0wireframing.<\/em><\/strong><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

         <\/p>\n

        Sumber: https:\/\/www.niagahoster.co.id\/blog\/perbedaan-ui-dan-ux\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

        UI dan UX seringkali disalahartikan sebagai hal yang sama oleh banyak orang atau pengertiannya terbalik satu sama lain. Walaupun begitu, kedua hal ini adalah dua hal yang saling berhubungan erat dan tidak bisa berdiri sendiri-sendiri. UI (User Interface) adalah bagaimana suatu website atau aplikasi yang kamu buat terlihat dan berbentuk seperti apa. Hal tersebut mencakup […]<\/p>\n","protected":false},"author":18,"featured_media":1621,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-1619","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-article"],"_links":{"self":[{"href":"https:\/\/student-activity.binus.ac.id\/himka\/wp-json\/wp\/v2\/posts\/1619","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/student-activity.binus.ac.id\/himka\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/student-activity.binus.ac.id\/himka\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/student-activity.binus.ac.id\/himka\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/student-activity.binus.ac.id\/himka\/wp-json\/wp\/v2\/comments?post=1619"}],"version-history":[{"count":1,"href":"https:\/\/student-activity.binus.ac.id\/himka\/wp-json\/wp\/v2\/posts\/1619\/revisions"}],"predecessor-version":[{"id":1620,"href":"https:\/\/student-activity.binus.ac.id\/himka\/wp-json\/wp\/v2\/posts\/1619\/revisions\/1620"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/student-activity.binus.ac.id\/himka\/wp-json\/wp\/v2\/media\/1621"}],"wp:attachment":[{"href":"https:\/\/student-activity.binus.ac.id\/himka\/wp-json\/wp\/v2\/media?parent=1619"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/student-activity.binus.ac.id\/himka\/wp-json\/wp\/v2\/categories?post=1619"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/student-activity.binus.ac.id\/himka\/wp-json\/wp\/v2\/tags?post=1619"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}