{"id":19305,"date":"2021-10-25T10:19:12","date_gmt":"2021-10-25T03:19:12","guid":{"rendered":"https:\/\/www.gramedia.com\/best-seller\/?p=19305"},"modified":"2023-06-30T10:25:55","modified_gmt":"2023-06-30T03:25:55","slug":"perbedaan-ui-dan-ux-design","status":"publish","type":"post","link":"https:\/\/www.gramedia.com\/best-seller\/perbedaan-ui-dan-ux-design\/","title":{"rendered":"Perbedaan UI dan UX Design"},"content":{"rendered":"<p><strong>Perbedaan UI dan UX Design<\/strong> &#8211; Pernah melihat lowongan kerja yang membutuhkan posisi sebagai seorang UI atau UX <i>designer<\/i>? Lalu apa itu UI dan UX?<\/p>\n<p>Beberapa tahun terakhir tampaknya memang ada begitu banyak terobosan baru di dunia kerja baik dari segi perkembangan teknologi dan dari segi variasi jobdesk. Pandemi mendorong begitu banyak aspek menjadi <i>going online<\/i>, yang mana segalanya dititik beratkan pada aktifitas online.<\/p>\n<p>Begitu juga dari dunia pekerjaan, ada banyak perusahaan yang tengah gencar melakukan <i>branding<\/i> serta berbondong-bondong meng<i>upgrade<\/i> kualitas mereka supaya semakin menonjol di kancah online.<\/p>\n<p>Salah satu strateginya yakni mengoptimalkan <i>visual branding<\/i> mereka melalui pengembangan media sosial, website dan kanal online lain. Oleh karena itu, banyak perusahaan saat ini yang membuka posisi sebagai UI atau UX <i>designer<\/i>, lantas apa sebenarnya UI dan UX itu?<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_17 counter-hierarchy counter-decimal ez-toc-grey\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" style=\"display: none;\"><i class=\"ez-toc-glyphicon ez-toc-icon-toggle\"><\/i><\/a><\/span><\/div>\n<nav><ul class=\"ez-toc-list ez-toc-list-level-1\"><li class=\"ez-toc-page-1 ez-toc-heading-level-2\"><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.gramedia.com\/best-seller\/perbedaan-ui-dan-ux-design\/#Apa_Itu_UI_dan_UX_Design\" title=\"Apa Itu UI dan UX Design?\">Apa Itu UI dan UX Design?<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-2\"><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.gramedia.com\/best-seller\/perbedaan-ui-dan-ux-design\/#Apa_Perbedaan_UI_dan_UX\" title=\"Apa Perbedaan UI dan UX?\">Apa Perbedaan UI dan UX?<\/a><ul class=\"ez-toc-list-level-3\"><li class=\"ez-toc-heading-level-3\"><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.gramedia.com\/best-seller\/perbedaan-ui-dan-ux-design\/#1_Perbedaan_dari_Segi_Tujuan_Desain\" title=\"1. Perbedaan dari Segi Tujuan Desain\">1. Perbedaan dari Segi Tujuan Desain<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-3\"><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.gramedia.com\/best-seller\/perbedaan-ui-dan-ux-design\/#2_Perbedaan_dari_Segi_Proses_Desain\" title=\"2. Perbedaan dari Segi Proses Desain\">2. Perbedaan dari Segi Proses Desain<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-3\"><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.gramedia.com\/best-seller\/perbedaan-ui-dan-ux-design\/#3_Komponen_Desain\" title=\"3. Komponen Desain\">3. Komponen Desain<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-3\"><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.gramedia.com\/best-seller\/perbedaan-ui-dan-ux-design\/#4_Skill_yang_Diperlukan_Untuk_Membuat_UI_dan_UX\" title=\"4. Skill yang Diperlukan Untuk Membuat UI dan UX\">4. Skill yang Diperlukan Untuk Membuat UI dan UX<\/a><\/li><\/ul><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-2\"><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.gramedia.com\/best-seller\/perbedaan-ui-dan-ux-design\/#Workflow_UX_dan_UI_designer\" title=\"Workflow UX dan UI designer\">Workflow UX dan UI designer<\/a><ul class=\"ez-toc-list-level-3\"><li class=\"ez-toc-heading-level-3\"><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.gramedia.com\/best-seller\/perbedaan-ui-dan-ux-design\/#1_Melakukan_Penelitian\" title=\"1. Melakukan Penelitian\">1. Melakukan Penelitian<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-3\"><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.gramedia.com\/best-seller\/perbedaan-ui-dan-ux-design\/#2_Membangun_Information_Architecture\" title=\"2. Membangun Information Architecture\">2. Membangun Information Architecture<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-3\"><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/www.gramedia.com\/best-seller\/perbedaan-ui-dan-ux-design\/#3_Membuat_Wireframe\" title=\"3. Membuat Wireframe\">3. Membuat Wireframe<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-3\"><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/www.gramedia.com\/best-seller\/perbedaan-ui-dan-ux-design\/#4_Menyusun_UX_Flows\" title=\"4. Menyusun UX Flows\">4. Menyusun UX Flows<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-3\"><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/www.gramedia.com\/best-seller\/perbedaan-ui-dan-ux-design\/#5_Membuat_Prototype_Design\" title=\"5. Membuat Prototype Design\">5. Membuat Prototype Design<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-3\"><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/www.gramedia.com\/best-seller\/perbedaan-ui-dan-ux-design\/#6_Merancang_Desain_Sistem\" title=\"6. Merancang Desain Sistem\">6. Merancang Desain Sistem<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-3\"><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/www.gramedia.com\/best-seller\/perbedaan-ui-dan-ux-design\/#7_Membuat_User_Interface\" title=\"7. Membuat User Interface\">7. Membuat User Interface<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-3\"><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/www.gramedia.com\/best-seller\/perbedaan-ui-dan-ux-design\/#8_Pengembangan_Produk\" title=\"8. Pengembangan Produk\">8. Pengembangan Produk<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-3\"><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/www.gramedia.com\/best-seller\/perbedaan-ui-dan-ux-design\/#9_Design_Usability_Test\" title=\"9. Design Usability Test\">9. Design Usability Test<\/a><\/li><\/ul><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-2\"><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/www.gramedia.com\/best-seller\/perbedaan-ui-dan-ux-design\/#Contoh_Design_UI_dan_UX_Pada_Start_Up\" title=\"Contoh Design UI dan UX Pada Start Up\">Contoh Design UI dan UX Pada Start Up<\/a><ul class=\"ez-toc-list-level-3\"><li class=\"ez-toc-heading-level-3\"><a class=\"ez-toc-link ez-toc-heading-18\" href=\"https:\/\/www.gramedia.com\/best-seller\/perbedaan-ui-dan-ux-design\/#1_Gojek\" title=\"1. Gojek\">1. Gojek<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-3\"><a class=\"ez-toc-link ez-toc-heading-19\" href=\"https:\/\/www.gramedia.com\/best-seller\/perbedaan-ui-dan-ux-design\/#2_Tokopedia\" title=\"2. Tokopedia\">2. Tokopedia<\/a><\/li><\/ul><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-2\"><a class=\"ez-toc-link ez-toc-heading-20\" href=\"https:\/\/www.gramedia.com\/best-seller\/perbedaan-ui-dan-ux-design\/#Tertarik_Menjadi_Desainer_UI_dan_UX\" title=\"Tertarik Menjadi Desainer UI dan UX?\">Tertarik Menjadi Desainer UI dan UX?<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Apa_Itu_UI_dan_UX_Design\"><\/span>Apa Itu UI dan UX Design?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><img loading=\"lazy\" class=\"aligncenter size-medium wp-image-19310\" src=\"https:\/\/sellers.gramedia.com\/wp-content\/uploads\/2021\/10\/Apa-Itu-UI-dan-UX-Design-300x188.png\" alt=\"Apa Itu UI dan UX Design\" width=\"300\" height=\"188\" srcset=\"https:\/\/cdnwpseller.gramedia.net\/wp-content\/uploads\/2021\/10\/22125221\/Apa-Itu-UI-dan-UX-Design-300x188.png 300w, https:\/\/cdnwpseller.gramedia.net\/wp-content\/uploads\/2021\/10\/22125221\/Apa-Itu-UI-dan-UX-Design-1024x640.png 1024w, https:\/\/cdnwpseller.gramedia.net\/wp-content\/uploads\/2021\/10\/22125221\/Apa-Itu-UI-dan-UX-Design-768x480.png 768w, https:\/\/cdnwpseller.gramedia.net\/wp-content\/uploads\/2021\/10\/22125221\/Apa-Itu-UI-dan-UX-Design-561x351.png 561w, https:\/\/cdnwpseller.gramedia.net\/wp-content\/uploads\/2021\/10\/22125221\/Apa-Itu-UI-dan-UX-Design-1122x701.png 1122w, https:\/\/cdnwpseller.gramedia.net\/wp-content\/uploads\/2021\/10\/22125221\/Apa-Itu-UI-dan-UX-Design-364x228.png 364w, https:\/\/cdnwpseller.gramedia.net\/wp-content\/uploads\/2021\/10\/22125221\/Apa-Itu-UI-dan-UX-Design-728x455.png 728w, https:\/\/cdnwpseller.gramedia.net\/wp-content\/uploads\/2021\/10\/22125221\/Apa-Itu-UI-dan-UX-Design-608x380.png 608w, https:\/\/cdnwpseller.gramedia.net\/wp-content\/uploads\/2021\/10\/22125221\/Apa-Itu-UI-dan-UX-Design-758x474.png 758w, https:\/\/cdnwpseller.gramedia.net\/wp-content\/uploads\/2021\/10\/22125221\/Apa-Itu-UI-dan-UX-Design-1152x720.png 1152w, https:\/\/cdnwpseller.gramedia.net\/wp-content\/uploads\/2021\/10\/22125221\/Apa-Itu-UI-dan-UX-Design.png 1280w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/>UX <i>design<\/i> adalah singkatan dari User Experience sedangkan UI merupakan kependekan dari User Interface. Keduanya memiliki kaitan yang kuat dan tidak dapat dipisahkan. Lantas seperti apa gambaran dari keduanya?<\/p>\n<p>Sebelum memasuki pengertian UI dan UX, kamu perlu memahami hal mendasar tentang Human Computer Interaction (HCI) terlebih dahulu. HCI merupakan interaksi antara <i>user<\/i> atau pengguna dengan sistem yang ada pada komputer. Interaksi inilah nantinya yang akan memengaruhi UI dan UX tersebut.<\/p>\n<p>UI <i>design<\/i> merupakan sebuah desain tampilan untuk sebuah produk bisnis, dalam konteks ini adalah perangkat lunak yang ada pada website. Singkatnya, UI <i>design<\/i> adalah tampilan pada website supaya menarik pengguna.<\/p>\n<p>Sedangkan UX (User Experience), lebih menekankan pada tingkat kepuasan pelanggan terhadap produk atau jasa dalam konteks ini yaitu website atau perangkat lunak. Tujuan UX <i>design<\/i> ini untuk memudahkan <i>user<\/i> berinteraksi pada website.<\/p>\n<p>Sehingga jobdesk seorang UX <i>designer<\/i> harus membuat sebuah perangkat lunak atau website tersebut mudah dipahami dan diaplikasikan oleh pengguna manapun. Dengan tampilan menarik dari UI dan kemudahan dari UX, maka akan tercipta sebuah website maupun aplikasi yang bermanfaat bagi setiap penggunanya.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Apa_Perbedaan_UI_dan_UX\"><\/span>Apa Perbedaan UI dan UX?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Baik UI maupun UX sekilas tampak mirip tetapi sebenarnya keduanya sangatlah berbeda. Hanya karena penyebutannya sering bersamaan dan juga memiliki fungsi yang berkaitan, bukan berarti kedua pekerjaan ini adalah hal serupa yang dapat dilakukan salah satunya saja. Berikut ini perbedaan UI dan UX <i>design<\/i> dari segala aspeknya.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"1_Perbedaan_dari_Segi_Tujuan_Desain\"><\/span>1. Perbedaan dari Segi Tujuan Desain<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Setelah memahami pengertiannya, kamu mungkin sedikit paham bahwa UI dan UX memiliki tujuan yang jelas tidak sama. Desain UI ini bertujuan untuk memberikan tampilan dan <i>interface<\/i> yang indah serta menarik minat pada sebuah produk bisnis. Sehingga fokusnya berada pada impresi pertama pengguna ketika melihat tampilan website atau aplikasi tersebut.<\/p>\n<p>Berbeda dengan UI, UX <i>design<\/i> memiliki tujuan untuk menciptakan pengalaman yang menarik oleh pelanggan terhadap produk bisnis. Harapannya setelah menggunakan website atau aplikasi tersebut, pengguna akan merasakan kepuasan dan kenyamanan sehingga produk tersebut dapat meninggalkan kesan yang baik.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"2_Perbedaan_dari_Segi_Proses_Desain\"><\/span>2. Perbedaan dari Segi Proses Desain<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Selama prosesnya, UI dan UX memiliki proses pengerjaan dengan langkah-langkah yang berbeda. Proses pengerjaan desain pada UI, membutuhkan riset berupa riset desain dan mencari konsep yang sesuai dengan tema produk.<\/p>\n<p>Sedangkan UX membutuhkan riset yang jauh lebih panjang sebab perlu melakukan observasi mengenai kepuasan pelanggan supaya dapat sesuai dengan target. Selama pengerjaannya pun, UX <i>design<\/i> membutuhkan banyak bantuan dari pihak-pihak seperti UX <i>researcher<\/i>.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"3_Komponen_Desain\"><\/span>3. Komponen Desain<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Untuk membangun sebuah desain UI, kamu akan membutuhkan komponen desain untuk menciptakan tampilan yang cantik. Beberapa contoh komponen tersebut seperti pemilihan warna, gambar, font, penulisan, animasi hingga buttons yang nantinya akan kamu hadirkan untuk membuat desain web yang menarik.<\/p>\n<p>Sedangkan pada UX design kamu akan membutuhkan beberapa komponen seperti fitur yang akan dihadirkan, navigasi, struktur tampilan hingga copywriting untuk membangun UX yang berkesan dan mudah dipahami.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"4_Skill_yang_Diperlukan_Untuk_Membuat_UI_dan_UX\"><\/span>4. Skill yang Diperlukan Untuk Membuat UI dan UX<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Jika kamu tertarik dengan dunia design maka kamu mungkin dapat mengembangkan skill untuk mempelajari UI <i>design.<\/i> Seorang UI <i>designer<\/i> perlu memiliki beragam kemampuan desain grafis, <i>creative thinking<\/i>, dan <i>design branding<\/i>. Dengan begitu desainer akan mampu menentukan konsep serta menciptakan tampilan yang <i>eye catching<\/i> pada user.<\/p>\n<p>Sesuai namanya UI lebih menekankan pada <i>design<\/i>, kamu dapat mempelajari beberapa aplikasi yang berhubungan dengan desain. Jika kamu tertarik belajar UI maka ada banyak software atau aplikasi yang bisa kamu gunakan. Beberapa aplikasi seperti Flinto, Adobe Illustrator, Frames X, coreldraw dan masih banyak lainnya.<\/p>\n<p>Untuk belajar desain UX, penting untuk memiliki <i>skill analytical thinking, critical thinking<\/i> dan melakukan riset. Jika kamu tertarik untuk mendalami UX <i>design<\/i>, kamu dapat belajar menggunakan aplikasi seperti invision, Sketch, Figma, Axure dan juga Adobe XD.<\/p>\n<p>Setelah membaca ulasan diatas, kamu mungkin telah sedikit memiliki gambaran seperti apa jobdesk UI serta UX <i>design<\/i> tersebut. Akan tetapi kamu mungkin masih ragu seperti apa detail gambaran pekerjaan seorang UI dan UX <i>designer<\/i>, berikut ini penjelasan workflow\u00a0 UI dan UX <i>designer<\/i>.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Workflow_UX_dan_UI_designer\"><\/span>Workflow UX dan UI designer<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><img loading=\"lazy\" class=\"aligncenter size-medium wp-image-19320\" src=\"https:\/\/sellers.gramedia.com\/wp-content\/uploads\/2021\/10\/Workflow-UX-dan-UI-designer-300x200.jpg\" alt=\"Workflow UX dan UI designer\" width=\"300\" height=\"200\" srcset=\"https:\/\/cdnwpseller.gramedia.net\/wp-content\/uploads\/2021\/10\/22125617\/Workflow-UX-dan-UI-designer-300x200.jpg 300w, https:\/\/cdnwpseller.gramedia.net\/wp-content\/uploads\/2021\/10\/22125617\/Workflow-UX-dan-UI-designer-1024x683.jpg 1024w, https:\/\/cdnwpseller.gramedia.net\/wp-content\/uploads\/2021\/10\/22125617\/Workflow-UX-dan-UI-designer-768x512.jpg 768w, https:\/\/cdnwpseller.gramedia.net\/wp-content\/uploads\/2021\/10\/22125617\/Workflow-UX-dan-UI-designer-1536x1025.jpg 1536w, https:\/\/cdnwpseller.gramedia.net\/wp-content\/uploads\/2021\/10\/22125617\/Workflow-UX-dan-UI-designer-561x374.jpg 561w, https:\/\/cdnwpseller.gramedia.net\/wp-content\/uploads\/2021\/10\/22125617\/Workflow-UX-dan-UI-designer-1122x748.jpg 1122w, https:\/\/cdnwpseller.gramedia.net\/wp-content\/uploads\/2021\/10\/22125617\/Workflow-UX-dan-UI-designer-364x243.jpg 364w, https:\/\/cdnwpseller.gramedia.net\/wp-content\/uploads\/2021\/10\/22125617\/Workflow-UX-dan-UI-designer-728x486.jpg 728w, https:\/\/cdnwpseller.gramedia.net\/wp-content\/uploads\/2021\/10\/22125617\/Workflow-UX-dan-UI-designer-608x406.jpg 608w, https:\/\/cdnwpseller.gramedia.net\/wp-content\/uploads\/2021\/10\/22125617\/Workflow-UX-dan-UI-designer-758x506.jpg 758w, https:\/\/cdnwpseller.gramedia.net\/wp-content\/uploads\/2021\/10\/22125617\/Workflow-UX-dan-UI-designer-1152x768.jpg 1152w, https:\/\/cdnwpseller.gramedia.net\/wp-content\/uploads\/2021\/10\/22125617\/Workflow-UX-dan-UI-designer.jpg 2048w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/p>\n<h3><span class=\"ez-toc-section\" id=\"1_Melakukan_Penelitian\"><\/span>1. Melakukan Penelitian<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Langkah pertama yang mendasar dan perlu dipahami sebelum mendesain UX yaitu melakukan penelitian terlebih dahulu dan mencari wawasan terhadap target pasar. Proses ini memerlukan kolaborasi antara desainer dan <i>researcher<\/i>.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"2_Membangun_Information_Architecture\"><\/span>2. Membangun Information Architecture<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Setelah bekerjasama dengan UX <i>researcher<\/i>, kamu perlu menyusun Information Architecture (IA) yang berupa bagan-bagan yang akan dihadirkan pada setiap halaman website atau aplikasi nantinya. Proses ini berguna untuk mempermudah kamu atau orang lain yang berada pada tim UX untuk membaca dan memahami konsep yang akan kamu buat.<\/p>\n<p>Dengan begitu kamu sendiri akan mudah melihat secara runtut, struktur informasi apa saja yang ada pada produk bisnis. Sesuai hasil penelitian atau riset, kamu dapat menyusun IA dengan melakukan metode <i>card sorting<\/i> untuk memilih <i>buyers persona<\/i> sesuai sudut pandang pengguna. Pada umumnya <i>designer<\/i> menggunakan beberapa media seperti Trello untuk mengatur dan menyusun informasi.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"3_Membuat_Wireframe\"><\/span>3. Membuat Wireframe<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Dengan memiliki Information Architecture kamu telah memiliki rancangan yang pasti untuk membangun sebuah website atau aplikasi. Kemudian langkah selanjutnya adalah membuat wireframe yang mana merupakan rancangan IA yang dihasilkan atau di sketsakan oleh UX <i>designer<\/i>.<\/p>\n<p>Dalam proses ini dibutuhkan kerjasama tim desainer, content dan juga <i>developer <\/i>untuk memvisualisasikan aplikasi atau website, dalam konteks ini visual atau sketsa lebih ditekankan pada gambaran secara garis besarnya untuk menampilkan alur penggunaan website atau aplikasi.<\/p>\n<p>Maka ketika prosesnya ada dua tahapan rancangan wireframe yang biasanya dibuat oleh UX <i>designer<\/i>. Pertama <i>designer<\/i> akan membuat Low Fidelity Wireframe.\u00a0 Kemudian baru kemudian High Fidelity Wireframe untuk desain yang sudah <i>fix<\/i>. Pembuatan sketsa ini bisa menggunakan software seperti Adobe XD dan Figma.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"4_Menyusun_UX_Flows\"><\/span>4. Menyusun UX Flows<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Kita semuanya telah ter sketsa dengan baik, maka langkah selanjutnya adalah mengatur flows yang akan ditampilkan pada website atau aplikasi tersebut. Tujuannya supaya <i>user<\/i> merasakan kenyamanan ketika berinteraksi pada website tersebut.<\/p>\n<p>Navigasi yang cepat dan mudah dipahami, akan membuat pengguna nantinya merasakan kenyamanan ketika berinteraksi pada produk bisnis tersebut. Alur inilah yang nantinya perlu didokumentasikan oleh desainer supaya tim <i>developer<\/i> dapat paham dan mudah ketika melakukan pengembangan produk.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"5_Membuat_Prototype_Design\"><\/span>5. Membuat Prototype Design<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Selesai membuat <i>flows<\/i>, maka tahap selanjutnya adalah membuat <i>prototype design.<\/i> Untuk membuat desain ini UX <i>designer<\/i> bisa menggunakan Adobe XD, MockUp Plus ataupun Invision. Pada umumnya <i>prototype design<\/i> ini akan diuji cobakan terlebih dahulu, oleh beberapa orang atau dengan tim yang bersangkutan. Sebab ada kemungkinan selama pembuatannya masih memerlukan banyak perbaikan, jika ternyata desain dianggap masih kurang dapat segera dilakukan revisi.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"6_Merancang_Desain_Sistem\"><\/span>6. Merancang Desain Sistem<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Dalam proses ini, designer UX juga membutuhkan banyak kerjasama dari <i>designer <\/i>UI dan <i>developer<\/i> sebab proses ini merupakan perancangan sistem untuk menyimpan desain UI nantinya. Desain sistem berfungsi untuk menyimpan komponen yang diperlukan oleh designer UI seperti font, tombol, colour palette, icon dan komponen lain pada sebuah <i>library<\/i>.<\/p>\n<p>Dengan begitu, setelah desain sistem terbentuk, designer UI dapat dengan mudah membuat dan menyimpan desain tampilan untuk website maupun aplikasi tersebut. Pada proses ini memerlukan campur tangan designer UI untuk membuat sistem dengan menggunakan CSS, Javascript, HTML dan lainnya.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"7_Membuat_User_Interface\"><\/span>7. Membuat User Interface<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Pada tahap ini designer UI akan mulai membuat tampilan dan mempercantik sebuah website atau aplikasi sesuai apa yang telah disosialisasikan pada <i>wireframe<\/i>. Tugas desainer UI adalah membuat desain yang semenarik mungkin.<\/p>\n<p>Dengan mempercantik<i> wireframe<\/i> yang telah ada, memaksimalkan penggunaan <i>tools <\/i>yang telah tersedia dari <i>design system<\/i>, <i>designer<\/i> UI dapat juga menggunakan beberapa software untuk mendukung proses pembuatan tampilan. Beberapa <i>software<\/i> yang biasa digunakan yakni Adobe Illustrator, Sketch App dan Adobe Photoshop.<\/p>\n<p>Untuk membuat desain interface yang menarik kamu, juga bisa belajar dari buku yang membahas mengenai desain web seperti dibawah ini.<\/p>\n<p>Membuat Website Cantik dan Menarik dengan JQuery<\/p>\n<figure class=\"wp-caption aligncenter\"><a href=\"https:\/\/www.gramedia.com\/products\/membuat-website-cantik-dan-menarik-dengan-jquery?utm_source=bestseller&amp;utm_medium=bestsellerbuku&amp;utm_campaign=seo&amp;utm_content=BestSellerRekomendasi\"><img loading=\"lazy\" class=\"\" src=\"https:\/\/cdn.gramedia.com\/uploads\/items\/9786230011504_Cov_Membuat_Website_Cantik_dan_Menarik_dengan_JQuery.jpg\" alt=\"Membuat Website Cantik dan Menarik dengan JQuery\" width=\"300\" height=\"487\" \/><\/a><figcaption class=\"wp-caption-text\">Membuat Website Cantik dan Menarik dengan JQuery<\/figcaption><\/figure>\n<p><a href=\"https:\/\/www.gramedia.com\/products\/membuat-website-cantik-dan-menarik-dengan-jquery?utm_source=bestseller&amp;utm_medium=bestsellerbuku&amp;utm_campaign=seo&amp;utm_content=BestSellerRekomendasi\"><img loading=\"lazy\" class=\"aligncenter wp-image-10480\" src=\"https:\/\/sellers.gramedia.com\/wp-content\/uploads\/2021\/03\/button.png\" alt=\"tombol beli buku\" width=\"126\" height=\"46\" srcset=\"https:\/\/cdnwpseller.gramedia.net\/wp-content\/uploads\/2021\/03\/08122753\/button.png 140w, https:\/\/cdnwpseller.gramedia.net\/wp-content\/uploads\/2021\/03\/08122753\/button-132x48.png 132w\" sizes=\"(max-width: 126px) 100vw, 126px\" \/><\/a><\/p>\n<h3><span class=\"ez-toc-section\" id=\"8_Pengembangan_Produk\"><\/span>8. Pengembangan Produk<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Pada proses pengembangan produk kali ini dilakukan oleh developer. Kendati pengerjaannya memang dilakukan oleh para developer, namun desainer UI dan UX kerap kali tetap ikut bekerjasama untuk berdiskusi seputar produk bisnis tersebut.<\/p>\n<p>Desain yang telah lulus uji coba, akan dikembangan oleh <i>developer.<\/i> Namun untuk menjaga konsistensi konsep dan supaya tidak <i>misunderstanding <\/i>ketika melakukan pengembangan tidak jarang para developer juga masih membutuhkan bantuan desainer UI dan UX.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"9_Design_Usability_Test\"><\/span>9. Design Usability Test<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Produk bisnis yang telah selesai uji coba, maka dapat diluncurkan namun peluncurannya disini masih merupakan tahap test. Apabila ada beberapa hal yang masih perlu direvisi, maka produk tersebut dapat segera diperbaiki. Sehingga ketika waktu peluncuran produk yang sebenarnya sebuah produk bisnis sudah benar-benar baik.<\/p>\n<p>Ada banyak perusahaan masa kini yang mulai memperhatikan betapa pentingnya pengembangan UI dan UX ini pada masa depan perusahaan mereka. Pengembangan UI dan UX <i>design<\/i> ini akan sangat berguna untuk menarik minat pelanggan bisnis, terlebih lagi jika perusahaan tersebut merupakan perusahaan startup yang bergerak di bidang teknologi.<\/p>\n<p>Maka dengan menggunakan UI dan UX, sebuah bisnis mampu meningkatkan kepuasan pelanggan, menciptakan pengalaman yang menarik, menghasilkan produk sesuai kebutuhan pengguna dan meningkatkan pendapatan bisnis.<\/p>\n<p><strong>Baca Juga:<\/strong> <a href=\"https:\/\/www.gramedia.com\/best-seller\/cara-menjadi-arsitek\/\">12 Cara Menjadi Arsitek Yang Profesional<\/a><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Contoh_Design_UI_dan_UX_Pada_Start_Up\"><\/span>Contoh Design UI dan UX Pada Start Up<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Saat ini ada banyak contoh perusahaan yang telah berhasil mengembangan UI dan UX mereka, dan berhasil meningkatkan penghasilan. Beberapa perusahaan bahkan dapat dikatakan menjadi pelopor perusahaan lain untuk mengembangkan UI dan UX <i>design<\/i> mereka.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"1_Gojek\"><\/span>1. Gojek<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><img loading=\"lazy\" class=\"aligncenter size-medium wp-image-19316\" src=\"https:\/\/sellers.gramedia.com\/wp-content\/uploads\/2021\/10\/UI-UX-Gojek-1-142x300.jpg\" alt=\"UI UX Gojek \" width=\"142\" height=\"300\" srcset=\"https:\/\/cdnwpseller.gramedia.net\/wp-content\/uploads\/2021\/10\/22125509\/UI-UX-Gojek-1-142x300.jpg 142w, https:\/\/cdnwpseller.gramedia.net\/wp-content\/uploads\/2021\/10\/22125509\/UI-UX-Gojek-1-485x1024.jpg 485w, https:\/\/cdnwpseller.gramedia.net\/wp-content\/uploads\/2021\/10\/22125509\/UI-UX-Gojek-1-561x1185.jpg 561w, https:\/\/cdnwpseller.gramedia.net\/wp-content\/uploads\/2021\/10\/22125509\/UI-UX-Gojek-1-364x769.jpg 364w, https:\/\/cdnwpseller.gramedia.net\/wp-content\/uploads\/2021\/10\/22125509\/UI-UX-Gojek-1.jpg 606w\" sizes=\"(max-width: 142px) 100vw, 142px\" \/><img loading=\"lazy\" class=\"aligncenter size-medium wp-image-19317\" src=\"https:\/\/sellers.gramedia.com\/wp-content\/uploads\/2021\/10\/UI-UX-Gojek-2-142x300.jpg\" alt=\"UI UX Gojek \" width=\"142\" height=\"300\" srcset=\"https:\/\/cdnwpseller.gramedia.net\/wp-content\/uploads\/2021\/10\/22125517\/UI-UX-Gojek-2-142x300.jpg 142w, https:\/\/cdnwpseller.gramedia.net\/wp-content\/uploads\/2021\/10\/22125517\/UI-UX-Gojek-2-485x1024.jpg 485w, https:\/\/cdnwpseller.gramedia.net\/wp-content\/uploads\/2021\/10\/22125517\/UI-UX-Gojek-2-561x1185.jpg 561w, https:\/\/cdnwpseller.gramedia.net\/wp-content\/uploads\/2021\/10\/22125517\/UI-UX-Gojek-2-364x769.jpg 364w, https:\/\/cdnwpseller.gramedia.net\/wp-content\/uploads\/2021\/10\/22125517\/UI-UX-Gojek-2.jpg 606w\" sizes=\"(max-width: 142px) 100vw, 142px\" \/><img loading=\"lazy\" class=\"aligncenter size-medium wp-image-19318\" src=\"https:\/\/sellers.gramedia.com\/wp-content\/uploads\/2021\/10\/UI-UX-Gojek-3-142x300.jpg\" alt=\"UI UX Gojek \" width=\"142\" height=\"300\" srcset=\"https:\/\/cdnwpseller.gramedia.net\/wp-content\/uploads\/2021\/10\/22125529\/UI-UX-Gojek-3-142x300.jpg 142w, https:\/\/cdnwpseller.gramedia.net\/wp-content\/uploads\/2021\/10\/22125529\/UI-UX-Gojek-3-485x1024.jpg 485w, https:\/\/cdnwpseller.gramedia.net\/wp-content\/uploads\/2021\/10\/22125529\/UI-UX-Gojek-3-561x1185.jpg 561w, https:\/\/cdnwpseller.gramedia.net\/wp-content\/uploads\/2021\/10\/22125529\/UI-UX-Gojek-3-364x769.jpg 364w, https:\/\/cdnwpseller.gramedia.net\/wp-content\/uploads\/2021\/10\/22125529\/UI-UX-Gojek-3.jpg 606w\" sizes=\"(max-width: 142px) 100vw, 142px\" \/><\/p>\n<p>Sebagai sebuah Startup asli Indonesia, Gojek merupakan perusahaan layanan jasa logistik, pesan antar, transportasi dan juga dompet digital. Perusahaan ini juga telah sukses menjadi pelopor hadirnya perusahaan jasa layanan antar dan transportasi di Indonesia. Menariknya aplikasi Gojek telah diunduh lebih dari 50 juta pengguna.<\/p>\n<p>Melihat dari segi <i>user interface<\/i>nya, Gojek menghadirkan kesan lokal yang sangat relevan dengan masyarakat. Hal ini juga sangat sesuai dengan latar belakang Gojek yang mana di awal kemunculannya lebih menekankan kemudahan mencari transportasi utamanya ojek melalui aplikasi mereka.<\/p>\n<p>Aplikasi Gojek juga menggunakan banyak <i>icon <\/i>sederhana namun sangat mudah dipahami para <i>user<\/i>nya, sehingga menghasilkan kenyamanan user dalam berinteraksi pada produk bisnis tersebut.<\/p>\n<p>Selain itu dari segi user experience nya, Gojek terbukti memiliki banyak fitur penting yang berguna bagi setiap usernya. Mulai dari GoRide, GoFood, GoShop dan masih banyak lagi fitur lain, membuat Gojek semakin berkesan bagi setiap penggunanya.<\/p>\n<p>Selain itu Gojek juga berhasil menciptakan aplikasi yang sangat mudah dipahami meski hanya sekali melihatnya. Aplikasinya juga memberikan banyak pengalaman yang menyenangkan kepada para pengguna dan juga drivernya.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"2_Tokopedia\"><\/span>2. Tokopedia<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><img loading=\"lazy\" class=\"aligncenter size-medium wp-image-19314\" src=\"https:\/\/sellers.gramedia.com\/wp-content\/uploads\/2021\/10\/Tokopedia-300x188.png\" alt=\"Tokopedia\" width=\"300\" height=\"188\" srcset=\"https:\/\/cdnwpseller.gramedia.net\/wp-content\/uploads\/2021\/10\/22125400\/Tokopedia-300x188.png 300w, https:\/\/cdnwpseller.gramedia.net\/wp-content\/uploads\/2021\/10\/22125400\/Tokopedia-1024x640.png 1024w, https:\/\/cdnwpseller.gramedia.net\/wp-content\/uploads\/2021\/10\/22125400\/Tokopedia-768x480.png 768w, https:\/\/cdnwpseller.gramedia.net\/wp-content\/uploads\/2021\/10\/22125400\/Tokopedia-561x351.png 561w, https:\/\/cdnwpseller.gramedia.net\/wp-content\/uploads\/2021\/10\/22125400\/Tokopedia-1122x701.png 1122w, https:\/\/cdnwpseller.gramedia.net\/wp-content\/uploads\/2021\/10\/22125400\/Tokopedia-364x228.png 364w, https:\/\/cdnwpseller.gramedia.net\/wp-content\/uploads\/2021\/10\/22125400\/Tokopedia-728x455.png 728w, https:\/\/cdnwpseller.gramedia.net\/wp-content\/uploads\/2021\/10\/22125400\/Tokopedia-608x380.png 608w, https:\/\/cdnwpseller.gramedia.net\/wp-content\/uploads\/2021\/10\/22125400\/Tokopedia-758x474.png 758w, https:\/\/cdnwpseller.gramedia.net\/wp-content\/uploads\/2021\/10\/22125400\/Tokopedia-1152x720.png 1152w, https:\/\/cdnwpseller.gramedia.net\/wp-content\/uploads\/2021\/10\/22125400\/Tokopedia.png 1280w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/>Tokopedia menjadi salah satu e-commerce yang sangat besar buatan anak negeri, yang terbukti telah mengembangkan UI dan UX mereka dengan baik. Tokopedia sebagai platform besar, memiliki UI yang baik dengan desain yang menarik dan fleksibel.<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter size-medium wp-image-19315\" src=\"https:\/\/sellers.gramedia.com\/wp-content\/uploads\/2021\/10\/Tokopediaa-300x188.png\" alt=\"Tokopedia\" width=\"300\" height=\"188\" srcset=\"https:\/\/cdnwpseller.gramedia.net\/wp-content\/uploads\/2021\/10\/22125432\/Tokopediaa-300x188.png 300w, https:\/\/cdnwpseller.gramedia.net\/wp-content\/uploads\/2021\/10\/22125432\/Tokopediaa-1024x640.png 1024w, https:\/\/cdnwpseller.gramedia.net\/wp-content\/uploads\/2021\/10\/22125432\/Tokopediaa-768x480.png 768w, https:\/\/cdnwpseller.gramedia.net\/wp-content\/uploads\/2021\/10\/22125432\/Tokopediaa-561x351.png 561w, https:\/\/cdnwpseller.gramedia.net\/wp-content\/uploads\/2021\/10\/22125432\/Tokopediaa-1122x701.png 1122w, https:\/\/cdnwpseller.gramedia.net\/wp-content\/uploads\/2021\/10\/22125432\/Tokopediaa-364x228.png 364w, https:\/\/cdnwpseller.gramedia.net\/wp-content\/uploads\/2021\/10\/22125432\/Tokopediaa-728x455.png 728w, https:\/\/cdnwpseller.gramedia.net\/wp-content\/uploads\/2021\/10\/22125432\/Tokopediaa-608x380.png 608w, https:\/\/cdnwpseller.gramedia.net\/wp-content\/uploads\/2021\/10\/22125432\/Tokopediaa-758x474.png 758w, https:\/\/cdnwpseller.gramedia.net\/wp-content\/uploads\/2021\/10\/22125432\/Tokopediaa-1152x720.png 1152w, https:\/\/cdnwpseller.gramedia.net\/wp-content\/uploads\/2021\/10\/22125432\/Tokopediaa.png 1280w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/p>\n<p>Cukup penting memperhatikan fleksibilitas sebuah produk, misalnya seperti Tokopedia yang dapat di akses melalui web dan juga ponsel dengan aplikasinya. Mengusung konsep yang merakyat, Tokopedia juga memberikan <i>interface<\/i> yang menarik dan mudah dipahami.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Tertarik_Menjadi_Desainer_UI_dan_UX\"><\/span>Tertarik Menjadi Desainer UI dan UX?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Setelah membaca ulasan diatas, kamu mungkin sudah tahu bagaimana jobdesk seorang desainer UI dan UX. Jika kamu tertarik untuk mendalami bidang desain, baik itu UI maupun UX atau bahkan ingin menjadi seorang developer software atau aplikasi, maka ada banyak jalan untuk kamu mulai mempelajari desain grafis dan pengembangan website.<\/p>\n<p>Kamu dapat membaca buku referensi seputar desain dan pengembangan website dari buku-buku berikut. Jangan lupa untuk mencoba mengaplikasikannya selagi mempelajarinya dalam buku-buku ini.<\/p>\n<p>Jago Membuat Website dan SEO<\/p>\n<figure class=\"wp-caption aligncenter\"><a href=\"https:\/\/www.gramedia.com\/products\/jago-membuat-website-dan-seo?utm_source=bestseller&amp;utm_medium=bestsellerbuku&amp;utm_campaign=seo&amp;utm_content=BestSellerRekomendasi\"><img loading=\"lazy\" class=\"\" src=\"https:\/\/cdn.gramedia.com\/uploads\/items\/9786230015670_Cov_Jago_Membuat_Website.jpg\" alt=\"Jago Membuat Website dan SEO\" width=\"301\" height=\"442\" \/><\/a><figcaption class=\"wp-caption-text\">Jago Membuat Website dan SEO<\/figcaption><\/figure>\n<p><a href=\"https:\/\/www.gramedia.com\/products\/jago-membuat-website-dan-seo?utm_source=bestseller&amp;utm_medium=bestsellerbuku&amp;utm_campaign=seo&amp;utm_content=BestSellerRekomendasi\"><img loading=\"lazy\" class=\"aligncenter wp-image-10480\" src=\"https:\/\/sellers.gramedia.com\/wp-content\/uploads\/2021\/03\/button.png\" alt=\"tombol beli buku\" width=\"129\" height=\"47\" srcset=\"https:\/\/cdnwpseller.gramedia.net\/wp-content\/uploads\/2021\/03\/08122753\/button.png 140w, https:\/\/cdnwpseller.gramedia.net\/wp-content\/uploads\/2021\/03\/08122753\/button-132x48.png 132w\" sizes=\"(max-width: 129px) 100vw, 129px\" \/><\/a><\/p>\n<p>Jika kamu ingin membuat website, maka hal utama yang tidak boleh ketinggalan yakni mempelajari SEO terlebih dahulu. Website dengan SEO yang optimal akan mampu muncul di pencarian teratas. Dengan begitu website kamu akan semakin mudah dikenal.<\/p>\n<p>Aplikasi-Aplikasi Praktis Visual Basic<\/p>\n<figure class=\"wp-caption aligncenter\"><a href=\"https:\/\/ebooks.gramedia.com\/books\/aplikasi-aplikasi-praktis-visual-basic?utm_source=bestseller&amp;utm_medium=bestsellerbuku&amp;utm_campaign=seo&amp;utm_content=BestSellerRekomendasi\"><img loading=\"lazy\" class=\"\" src=\"https:\/\/ebooks.gramedia.com\/ebook-covers\/10682\/big_covers\/ID_EMK2014MTH04APVB_B.jpg\" alt=\"Aplikasi-Aplikasi Praktis Visual Basic\" width=\"300\" height=\"449\" \/><\/a><figcaption class=\"wp-caption-text\">Aplikasi-Aplikasi Praktis Visual Basic<\/figcaption><\/figure>\n<p><a href=\"https:\/\/ebooks.gramedia.com\/books\/aplikasi-aplikasi-praktis-visual-basic?utm_source=bestseller&amp;utm_medium=bestsellerbuku&amp;utm_campaign=seo&amp;utm_content=BestSellerRekomendasi\"><img loading=\"lazy\" class=\"aligncenter wp-image-10480\" src=\"https:\/\/sellers.gramedia.com\/wp-content\/uploads\/2021\/03\/button.png\" alt=\"tombol beli buku\" width=\"129\" height=\"47\" srcset=\"https:\/\/cdnwpseller.gramedia.net\/wp-content\/uploads\/2021\/03\/08122753\/button.png 140w, https:\/\/cdnwpseller.gramedia.net\/wp-content\/uploads\/2021\/03\/08122753\/button-132x48.png 132w\" sizes=\"(max-width: 129px) 100vw, 129px\" \/><\/a><\/p>\n<p>Tertarik menjadi UX <i>designer<\/i>? maka kamu perlu mempelajari dasar-dasar desain UX dan juga cara mengembangkan. Maka buku ini dapat kamu gunakan untuk mempelajari lebih lanjut mengenai visual basic dan tips praktisnya.<\/p>\n<p><strong>Baca Juga:<\/strong><\/p>\n<div class=\"g1-row-inner\">\n<div class=\"g1-column g1-column-2of3 g1-dark\">\n<header class=\"entry-header\">\n<ul>\n<li class=\"g1-mega g1-mega-1st entry-title\"><a href=\"https:\/\/www.gramedia.com\/best-seller\/macam-warna-putih-hexcode\/\">Mengenal Macam-Macam Warna Putih &amp; Hexcodenya<\/a><\/li>\n<li class=\"g1-mega g1-mega-1st entry-title\"><a href=\"https:\/\/www.gramedia.com\/best-seller\/kelebihan-dan-kekurangan-macbook\/\">Kelebihan dan Kekurangan Macbook, Baca Ini Sebelum Beli!<\/a><\/li>\n<li class=\"g1-mega g1-mega-1st entry-title\"><a href=\"https:\/\/www.gramedia.com\/best-seller\/cara-membuat-cv-yang-menarik-dan-benar\/\">Cara Membuat CV Yang Menarik dan Benar<\/a><\/li>\n<li class=\"g1-mega g1-mega-1st entry-title\"><a href=\"https:\/\/www.gramedia.com\/literasi\/dampak-positif-modernisasi\/\">Ciri-ciri dan Dampak Positif Modernisasi di Berbagai Bidang<\/a><\/li>\n<li class=\"g1-mega g1-mega-1st entry-title\"><a href=\"https:\/\/www.gramedia.com\/literasi\/sejarah-dan-karakteristik-magnet\/\">Mengenal Sejarah dan Karakteristik Magnet<\/a><\/li>\n<\/ul>\n<div class=\"g1-row-inner\">\n<div class=\"g1-column g1-column-2of3 g1-dark\">\n<header class=\"entry-header\">\n<div class=\"g1-row-inner\">\n<header class=\"entry-header\"><\/header>\n<div class=\"g1-column g1-column-1of3 g1-dark\"><\/div>\n<\/div>\n<\/header>\n<\/div>\n<\/div>\n<\/header>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Perbedaan UI dan UX Design &#8211; Pernah melihat lowongan kerja yang membutuhkan posisi sebagai seorang UI atau UX designer? Lalu apa itu UI dan UX? Beberapa tahun terakhir tampaknya memang ada begitu banyak terobosan baru di dunia kerja baik dari segi perkembangan teknologi dan dari segi variasi jobdesk. Pandemi mendorong begitu banyak aspek menjadi going [&hellip;] <a class=\"g1-link g1-link-more\" href=\"https:\/\/www.gramedia.com\/best-seller\/perbedaan-ui-dan-ux-design\/\">More<\/a><\/p>\n","protected":false},"author":185533073,"featured_media":19312,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[1736],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v17.0 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Perbedaan UI dan UX Design - Best Seller Gramedia<\/title>\n<meta name=\"description\" content=\"Perbedaan UI dan UX Design - Berikut ini adalah perbedaan antara UI dan UX Design yang dapat dilihat dari beberapa hal.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.gramedia.com\/best-seller\/perbedaan-ui-dan-ux-design\/\" \/>\n<meta property=\"og:locale\" content=\"id_ID\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Perbedaan UI dan UX Design - Best Seller Gramedia\" \/>\n<meta property=\"og:description\" content=\"Perbedaan UI dan UX Design - Berikut ini adalah perbedaan antara UI dan UX Design yang dapat dilihat dari beberapa hal.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.gramedia.com\/best-seller\/perbedaan-ui-dan-ux-design\/\" \/>\n<meta property=\"og:site_name\" content=\"Best Seller Gramedia\" \/>\n<meta property=\"article:published_time\" content=\"2021-10-25T03:19:12+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-06-30T03:25:55+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdnwpseller.gramedia.net\/wp-content\/uploads\/2021\/10\/22125259\/Pernah-Dengar-UI-dan-UX-Design-Apa-sih-Bedanya.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"2048\" \/>\n\t<meta property=\"og:image:height\" content=\"1365\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Ditulis oleh\" \/>\n\t<meta name=\"twitter:data1\" content=\"Arum Rifda\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimasi waktu membaca\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 menit\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.gramedia.com\/best-seller\/#organization\",\"name\":\"Gramedia\",\"url\":\"https:\/\/www.gramedia.com\/best-seller\/\",\"sameAs\":[],\"logo\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.gramedia.com\/best-seller\/#logo\",\"inLanguage\":\"id-ID\",\"url\":\"https:\/\/cdnwpseller.gramedia.net\/wp-content\/uploads\/2021\/02\/18170603\/cropped-icon-Gramedia.com-logo-color.png\",\"contentUrl\":\"https:\/\/cdnwpseller.gramedia.net\/wp-content\/uploads\/2021\/02\/18170603\/cropped-icon-Gramedia.com-logo-color.png\",\"width\":512,\"height\":512,\"caption\":\"Gramedia\"},\"image\":{\"@id\":\"https:\/\/www.gramedia.com\/best-seller\/#logo\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.gramedia.com\/best-seller\/#website\",\"url\":\"https:\/\/www.gramedia.com\/best-seller\/\",\"name\":\"Best Seller Gramedia\",\"description\":\"Inspiration Transformed\",\"publisher\":{\"@id\":\"https:\/\/www.gramedia.com\/best-seller\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.gramedia.com\/best-seller\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"id-ID\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.gramedia.com\/best-seller\/perbedaan-ui-dan-ux-design\/#primaryimage\",\"inLanguage\":\"id-ID\",\"url\":\"https:\/\/cdnwpseller.gramedia.net\/wp-content\/uploads\/2021\/10\/22125259\/Pernah-Dengar-UI-dan-UX-Design-Apa-sih-Bedanya.jpg\",\"contentUrl\":\"https:\/\/cdnwpseller.gramedia.net\/wp-content\/uploads\/2021\/10\/22125259\/Pernah-Dengar-UI-dan-UX-Design-Apa-sih-Bedanya.jpg\",\"width\":2048,\"height\":1365,\"caption\":\"Perbedaan UI dan UX Design\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.gramedia.com\/best-seller\/perbedaan-ui-dan-ux-design\/#webpage\",\"url\":\"https:\/\/www.gramedia.com\/best-seller\/perbedaan-ui-dan-ux-design\/\",\"name\":\"Perbedaan UI dan UX Design - Best Seller Gramedia\",\"isPartOf\":{\"@id\":\"https:\/\/www.gramedia.com\/best-seller\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.gramedia.com\/best-seller\/perbedaan-ui-dan-ux-design\/#primaryimage\"},\"datePublished\":\"2021-10-25T03:19:12+00:00\",\"dateModified\":\"2023-06-30T03:25:55+00:00\",\"description\":\"Perbedaan UI dan UX Design - Berikut ini adalah perbedaan antara UI dan UX Design yang dapat dilihat dari beberapa hal.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.gramedia.com\/best-seller\/perbedaan-ui-dan-ux-design\/#breadcrumb\"},\"inLanguage\":\"id-ID\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.gramedia.com\/best-seller\/perbedaan-ui-dan-ux-design\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.gramedia.com\/best-seller\/perbedaan-ui-dan-ux-design\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.gramedia.com\/best-seller\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Perbedaan UI dan UX Design\"}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/www.gramedia.com\/best-seller\/perbedaan-ui-dan-ux-design\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.gramedia.com\/best-seller\/perbedaan-ui-dan-ux-design\/#webpage\"},\"author\":{\"@id\":\"https:\/\/www.gramedia.com\/best-seller\/#\/schema\/person\/02e2e8caa2762cb6709dea6bec617e17\"},\"headline\":\"Perbedaan UI dan UX Design\",\"datePublished\":\"2021-10-25T03:19:12+00:00\",\"dateModified\":\"2023-06-30T03:25:55+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.gramedia.com\/best-seller\/perbedaan-ui-dan-ux-design\/#webpage\"},\"wordCount\":2045,\"publisher\":{\"@id\":\"https:\/\/www.gramedia.com\/best-seller\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.gramedia.com\/best-seller\/perbedaan-ui-dan-ux-design\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/cdnwpseller.gramedia.net\/wp-content\/uploads\/2021\/10\/22125259\/Pernah-Dengar-UI-dan-UX-Design-Apa-sih-Bedanya.jpg\",\"articleSection\":[\"Trivia\"],\"inLanguage\":\"id-ID\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.gramedia.com\/best-seller\/#\/schema\/person\/02e2e8caa2762cb6709dea6bec617e17\",\"name\":\"Arum Rifda\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.gramedia.com\/best-seller\/#personlogo\",\"inLanguage\":\"id-ID\",\"url\":\"https:\/\/cdnwpseller.gramedia.net\/wp-content\/uploads\/2023\/06\/rifda-96x96.jpg\",\"contentUrl\":\"https:\/\/cdnwpseller.gramedia.net\/wp-content\/uploads\/2023\/06\/rifda-96x96.jpg\",\"caption\":\"Arum Rifda\"},\"description\":\"Menulis adalah cara terbaik untuk menyampaikan isi pemikiran, sekalipun dalam bentuk tulisan, bukan verbal. Ada banyak hal yang bisa disampaikan kepada pembaca, terutama hal-hal yang saya sukai, seperti K-Pop, rekomendasi film, rekomendasi musik sedih mendayu-dayu, dan lain sebagainya.\",\"url\":\"https:\/\/www.gramedia.com\/best-seller\/author\/arum-rifda\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Perbedaan UI dan UX Design - Best Seller Gramedia","description":"Perbedaan UI dan UX Design - Berikut ini adalah perbedaan antara UI dan UX Design yang dapat dilihat dari beberapa hal.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.gramedia.com\/best-seller\/perbedaan-ui-dan-ux-design\/","og_locale":"id_ID","og_type":"article","og_title":"Perbedaan UI dan UX Design - Best Seller Gramedia","og_description":"Perbedaan UI dan UX Design - Berikut ini adalah perbedaan antara UI dan UX Design yang dapat dilihat dari beberapa hal.","og_url":"https:\/\/www.gramedia.com\/best-seller\/perbedaan-ui-dan-ux-design\/","og_site_name":"Best Seller Gramedia","article_published_time":"2021-10-25T03:19:12+00:00","article_modified_time":"2023-06-30T03:25:55+00:00","og_image":[{"width":2048,"height":1365,"url":"https:\/\/cdnwpseller.gramedia.net\/wp-content\/uploads\/2021\/10\/22125259\/Pernah-Dengar-UI-dan-UX-Design-Apa-sih-Bedanya.jpg","path":"s3apsoutheast1:\/\/wp-best-seller\/wp-content\/uploads\/2021\/10\/22125259\/Pernah-Dengar-UI-dan-UX-Design-Apa-sih-Bedanya.jpg","size":"full","id":19312,"alt":"Perbedaan UI dan UX Design","pixels":2795520,"type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_misc":{"Ditulis oleh":"Arum Rifda","Estimasi waktu membaca":"12 menit"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Organization","@id":"https:\/\/www.gramedia.com\/best-seller\/#organization","name":"Gramedia","url":"https:\/\/www.gramedia.com\/best-seller\/","sameAs":[],"logo":{"@type":"ImageObject","@id":"https:\/\/www.gramedia.com\/best-seller\/#logo","inLanguage":"id-ID","url":"https:\/\/cdnwpseller.gramedia.net\/wp-content\/uploads\/2021\/02\/18170603\/cropped-icon-Gramedia.com-logo-color.png","contentUrl":"https:\/\/cdnwpseller.gramedia.net\/wp-content\/uploads\/2021\/02\/18170603\/cropped-icon-Gramedia.com-logo-color.png","width":512,"height":512,"caption":"Gramedia"},"image":{"@id":"https:\/\/www.gramedia.com\/best-seller\/#logo"}},{"@type":"WebSite","@id":"https:\/\/www.gramedia.com\/best-seller\/#website","url":"https:\/\/www.gramedia.com\/best-seller\/","name":"Best Seller Gramedia","description":"Inspiration Transformed","publisher":{"@id":"https:\/\/www.gramedia.com\/best-seller\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.gramedia.com\/best-seller\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"id-ID"},{"@type":"ImageObject","@id":"https:\/\/www.gramedia.com\/best-seller\/perbedaan-ui-dan-ux-design\/#primaryimage","inLanguage":"id-ID","url":"https:\/\/cdnwpseller.gramedia.net\/wp-content\/uploads\/2021\/10\/22125259\/Pernah-Dengar-UI-dan-UX-Design-Apa-sih-Bedanya.jpg","contentUrl":"https:\/\/cdnwpseller.gramedia.net\/wp-content\/uploads\/2021\/10\/22125259\/Pernah-Dengar-UI-dan-UX-Design-Apa-sih-Bedanya.jpg","width":2048,"height":1365,"caption":"Perbedaan UI dan UX Design"},{"@type":"WebPage","@id":"https:\/\/www.gramedia.com\/best-seller\/perbedaan-ui-dan-ux-design\/#webpage","url":"https:\/\/www.gramedia.com\/best-seller\/perbedaan-ui-dan-ux-design\/","name":"Perbedaan UI dan UX Design - Best Seller Gramedia","isPartOf":{"@id":"https:\/\/www.gramedia.com\/best-seller\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.gramedia.com\/best-seller\/perbedaan-ui-dan-ux-design\/#primaryimage"},"datePublished":"2021-10-25T03:19:12+00:00","dateModified":"2023-06-30T03:25:55+00:00","description":"Perbedaan UI dan UX Design - Berikut ini adalah perbedaan antara UI dan UX Design yang dapat dilihat dari beberapa hal.","breadcrumb":{"@id":"https:\/\/www.gramedia.com\/best-seller\/perbedaan-ui-dan-ux-design\/#breadcrumb"},"inLanguage":"id-ID","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.gramedia.com\/best-seller\/perbedaan-ui-dan-ux-design\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.gramedia.com\/best-seller\/perbedaan-ui-dan-ux-design\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.gramedia.com\/best-seller\/"},{"@type":"ListItem","position":2,"name":"Perbedaan UI dan UX Design"}]},{"@type":"Article","@id":"https:\/\/www.gramedia.com\/best-seller\/perbedaan-ui-dan-ux-design\/#article","isPartOf":{"@id":"https:\/\/www.gramedia.com\/best-seller\/perbedaan-ui-dan-ux-design\/#webpage"},"author":{"@id":"https:\/\/www.gramedia.com\/best-seller\/#\/schema\/person\/02e2e8caa2762cb6709dea6bec617e17"},"headline":"Perbedaan UI dan UX Design","datePublished":"2021-10-25T03:19:12+00:00","dateModified":"2023-06-30T03:25:55+00:00","mainEntityOfPage":{"@id":"https:\/\/www.gramedia.com\/best-seller\/perbedaan-ui-dan-ux-design\/#webpage"},"wordCount":2045,"publisher":{"@id":"https:\/\/www.gramedia.com\/best-seller\/#organization"},"image":{"@id":"https:\/\/www.gramedia.com\/best-seller\/perbedaan-ui-dan-ux-design\/#primaryimage"},"thumbnailUrl":"https:\/\/cdnwpseller.gramedia.net\/wp-content\/uploads\/2021\/10\/22125259\/Pernah-Dengar-UI-dan-UX-Design-Apa-sih-Bedanya.jpg","articleSection":["Trivia"],"inLanguage":"id-ID"},{"@type":"Person","@id":"https:\/\/www.gramedia.com\/best-seller\/#\/schema\/person\/02e2e8caa2762cb6709dea6bec617e17","name":"Arum Rifda","image":{"@type":"ImageObject","@id":"https:\/\/www.gramedia.com\/best-seller\/#personlogo","inLanguage":"id-ID","url":"https:\/\/cdnwpseller.gramedia.net\/wp-content\/uploads\/2023\/06\/rifda-96x96.jpg","contentUrl":"https:\/\/cdnwpseller.gramedia.net\/wp-content\/uploads\/2023\/06\/rifda-96x96.jpg","caption":"Arum Rifda"},"description":"Menulis adalah cara terbaik untuk menyampaikan isi pemikiran, sekalipun dalam bentuk tulisan, bukan verbal. Ada banyak hal yang bisa disampaikan kepada pembaca, terutama hal-hal yang saya sukai, seperti K-Pop, rekomendasi film, rekomendasi musik sedih mendayu-dayu, dan lain sebagainya.","url":"https:\/\/www.gramedia.com\/best-seller\/author\/arum-rifda\/"}]}},"_links":{"self":[{"href":"https:\/\/www.gramedia.com\/best-seller\/wp-json\/wp\/v2\/posts\/19305"}],"collection":[{"href":"https:\/\/www.gramedia.com\/best-seller\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.gramedia.com\/best-seller\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.gramedia.com\/best-seller\/wp-json\/wp\/v2\/users\/185533073"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gramedia.com\/best-seller\/wp-json\/wp\/v2\/comments?post=19305"}],"version-history":[{"count":3,"href":"https:\/\/www.gramedia.com\/best-seller\/wp-json\/wp\/v2\/posts\/19305\/revisions"}],"predecessor-version":[{"id":19458,"href":"https:\/\/www.gramedia.com\/best-seller\/wp-json\/wp\/v2\/posts\/19305\/revisions\/19458"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.gramedia.com\/best-seller\/wp-json\/wp\/v2\/media\/19312"}],"wp:attachment":[{"href":"https:\/\/www.gramedia.com\/best-seller\/wp-json\/wp\/v2\/media?parent=19305"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gramedia.com\/best-seller\/wp-json\/wp\/v2\/categories?post=19305"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gramedia.com\/best-seller\/wp-json\/wp\/v2\/tags?post=19305"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}