{"id":665,"date":"2020-06-16T08:12:16","date_gmt":"2020-06-16T08:12:16","guid":{"rendered":"https:\/\/unydevelopernetwork.com\/?p=665"},"modified":"2020-06-16T08:12:29","modified_gmt":"2020-06-16T08:12:29","slug":"pencil-by-evolus-alternatif-aplikasi-rancang-desain-ui-yang-opensource","status":"publish","type":"post","link":"https:\/\/unydevelopernetwork.com\/index.php\/2020\/06\/16\/pencil-by-evolus-alternatif-aplikasi-rancang-desain-ui-yang-opensource\/","title":{"rendered":"Pencil by Evolus: Alternatif Aplikasi Rancang Desain UI yang OpenSource"},"content":{"rendered":"<span class=\"span-reading-time rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\">Reading Time: <\/span> <span class=\"rt-time\"> 4<\/span> <span class=\"rt-label rt-postfix\">minutes<\/span><\/span>\n<p>Merancang UI aplikasi baik itu desktop, web, maupun mobile merupakan langkah vital dalam proses pengembangan aplikasi. Karena dengan UI, user dapat dengan mudah berinteraksi dengan aplikasi. Oleh sebab itu, tanpa UI yang bagus, kemungkinan aplikasi akan dipakai banyak user akan semakin kecil. Oleh karena itu, para perancang UI\/UX berlomba untuk membuat UI aplikasi yang elegan dan mudah dipahami oleh user. Nah, berbicara tentang merancang dan mendesain UI, Saya ingin memperkenalkan sebuah aplikasi alternatif untuk merancang dan mendesain UI yang OpenSource. Aplikasi itu bernama: <strong>Pencil.<\/strong><\/p>\n\n\n\n<!--more-->\n\n\n\n<p><strong>Pencil<\/strong> adalah sebuah proyek yang didedikasikan untuk ketersediaan aplikasi rancang desain UI yang gratis dan OpenSource. Dari site project aplikasi ini yang beralamat di: <a rel=\"noreferrer noopener\" href=\"https:\/\/pencil.evolus.vn\/\" target=\"_blank\">https:\/\/pencil.evolus.vn\/<\/a>, dapat kita ketahui bahwa project ini masih berlangsung dan masih terus dilakukan <em>maintenance<\/em>.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"520\" src=\"https:\/\/unydevelopernetwork.com\/wp-content\/uploads\/2020\/06\/image-1-700x520.png\" alt=\"\" class=\"wp-image-667\" srcset=\"https:\/\/unydevelopernetwork.com\/wp-content\/uploads\/2020\/06\/image-1-700x520.png 700w, https:\/\/unydevelopernetwork.com\/wp-content\/uploads\/2020\/06\/image-1-300x223.png 300w, https:\/\/unydevelopernetwork.com\/wp-content\/uploads\/2020\/06\/image-1-768x571.png 768w, https:\/\/unydevelopernetwork.com\/wp-content\/uploads\/2020\/06\/image-1.png 818w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><figcaption>website project aplikasi Pencil<\/figcaption><\/figure><\/div>\n\n\n\n<p>Hal yang membuat saya terkagum adalah, aplikasi ini mendukung tiga platform sistem operasi terpopuler saat ini. Yakni Windows, MacOS, dan Linux. Hal ini dapat kita lihat dari halaman <em>download<\/em>.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"332\" src=\"https:\/\/unydevelopernetwork.com\/wp-content\/uploads\/2020\/06\/image-2-700x332.png\" alt=\"\" class=\"wp-image-669\" srcset=\"https:\/\/unydevelopernetwork.com\/wp-content\/uploads\/2020\/06\/image-2-700x332.png 700w, https:\/\/unydevelopernetwork.com\/wp-content\/uploads\/2020\/06\/image-2-300x142.png 300w, https:\/\/unydevelopernetwork.com\/wp-content\/uploads\/2020\/06\/image-2-768x364.png 768w, https:\/\/unydevelopernetwork.com\/wp-content\/uploads\/2020\/06\/image-2.png 812w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><figcaption>Aplikasi Pencil Mendukung tiga platform sistem operasi populer saat ini<\/figcaption><\/figure><\/div>\n\n\n\n<p>Nah, bagaimana dengan fitur yang dimiliki oleh aplikasi ini? Ternyata, aplikasi ini memiliki fitur yang bisa dibilang cukup lengkap. Apa sajakah fitur yang dimiliki oleh aplikasi ini?<\/p>\n\n\n\n<p><strong>1. Perancang Prototipe UI yang Mudah Digunakan<\/strong><\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"540\" src=\"https:\/\/unydevelopernetwork.com\/wp-content\/uploads\/2020\/06\/image-5-700x540.png\" alt=\"\" class=\"wp-image-671\" srcset=\"https:\/\/unydevelopernetwork.com\/wp-content\/uploads\/2020\/06\/image-5-700x540.png 700w, https:\/\/unydevelopernetwork.com\/wp-content\/uploads\/2020\/06\/image-5-300x231.png 300w, https:\/\/unydevelopernetwork.com\/wp-content\/uploads\/2020\/06\/image-5-768x593.png 768w, https:\/\/unydevelopernetwork.com\/wp-content\/uploads\/2020\/06\/image-5.png 867w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/figure><\/div>\n\n\n\n<p>Aplikasi ini menawarkan fitur perancang UI yang sangat mudah digunakan. Pengguna hanya perlu melakukan <em>drag &#8216;n drop<\/em> untuk meletakkan komponen desain pada canvas. Secara default, aplikasi ini sudah memiliki komponen UI bawaan untuk Android ICS, iOS, Windows Platform dan Website. Namun, Kita juga bisa masih menambahkan paket komponen UI tersebut melalui fitur <strong>Manage Collections<\/strong> yang dimiliki oleh aplikasi tersebut. Kita hanya perlu mencari paket layout yang kita perlukan dari repositori, kemudian kita unduh dan kita langsung dapat menggunakan paket komponen UI tersebut.<\/p>\n\n\n\n<p><strong>2. Memiliki Komponen Bentuk <em>built-in <\/em>yang Beragam<\/strong><\/p>\n\n\n\n<p>Aplikasi ini juga memiliki komponen <em>built-in<\/em> untuk beragam jenis bentuk.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"585\" height=\"525\" src=\"https:\/\/unydevelopernetwork.com\/wp-content\/uploads\/2020\/06\/stencils-1.png\" alt=\"\" class=\"wp-image-673\" srcset=\"https:\/\/unydevelopernetwork.com\/wp-content\/uploads\/2020\/06\/stencils-1.png 585w, https:\/\/unydevelopernetwork.com\/wp-content\/uploads\/2020\/06\/stencils-1-300x269.png 300w\" sizes=\"auto, (max-width: 585px) 100vw, 585px\" \/><\/figure><\/div>\n\n\n\n<p>Selain itu, aplikasi ini juga memiliki berbagai komponen untuk merancang UI di level <em>wireframe<\/em>. Sehingga, para perancang UI dapat dengan mudah melakukan pekerjaannya dari proses <em>wireframing<\/em> hingga membentuk UI yang siap diimplementasikan.<\/p>\n\n\n\n<p><strong>3. Mudah Mencari Clip-Art dari Internet<\/strong><\/p>\n\n\n\n<p>Seperti hal dengan produk Microsoft Office dari Microsoft, aplikasi juga memiliki mesin pencari clip-art bawaan yang memudahkan para perancang UI untuk mencari clip-art yang free di internet. Repositori yang digunakan oleh aplikasi ini adalah berasal dari OpenClipart.org yang memiliki cukup banyak clip-art free yang dapat digunakan.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"545\" src=\"https:\/\/unydevelopernetwork.com\/wp-content\/uploads\/2020\/06\/clipart-1-700x545.png\" alt=\"\" class=\"wp-image-675\" srcset=\"https:\/\/unydevelopernetwork.com\/wp-content\/uploads\/2020\/06\/clipart-1-700x545.png 700w, https:\/\/unydevelopernetwork.com\/wp-content\/uploads\/2020\/06\/clipart-1-300x234.png 300w, https:\/\/unydevelopernetwork.com\/wp-content\/uploads\/2020\/06\/clipart-1.png 768w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/figure><\/div>\n\n\n\n<p>Selain itu, para perancang UI juga tinggal melakukan <em>drag &#8216;n drop<\/em> untuk memindahkan clip-art dari panel pencari clip-art ke canvas.<\/p>\n\n\n\n<p><strong>4. Penautan Antar Halaman<\/strong><\/p>\n\n\n\n<p>Fitur ini merupakan fitur yang cukup canggih yang dimiliki oleh aplikasi ini. Karena dengan menggunakan fitur ini, para perancang UI dapat menggambarkan alur atau flow dari sebuah aplikasi ketika salah satu komponen UI diberikan aksi oleh user. Contohnya, ketika user menekan tombol menu, maka secara otomatis akan langsung di bawa ke halaman menu. Dengan menggunakan fitur ini, para perancang UI dapat menggambarkan alur \/ flow tersebut dengan mudah.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"470\" height=\"300\" src=\"https:\/\/unydevelopernetwork.com\/wp-content\/uploads\/2020\/06\/linking.png\" alt=\"\" class=\"wp-image-676\" srcset=\"https:\/\/unydevelopernetwork.com\/wp-content\/uploads\/2020\/06\/linking.png 470w, https:\/\/unydevelopernetwork.com\/wp-content\/uploads\/2020\/06\/linking-300x191.png 300w\" sizes=\"auto, (max-width: 470px) 100vw, 470px\" \/><\/figure><\/div>\n\n\n\n<p><strong>5. Dapat Digunakan Untuk Menggambar Diagram<\/strong><\/p>\n\n\n\n<p>Nah fitur ini biasanya digunakan oleh para rekayasawan perangkat lunak ketika melakukan pemodelan. Karena aplikasi juga memiliki komponen bawaan yang dapat digunakan untuk pemodelan, maka para rekayasawan perangkat lunak juga dapat menggunakan aplikasi ini. Selain itu, para perancang UI juga dapat menggunakan fitur ini untuk merancang alur \/ flow dari UI yang mereka buat sebelum dilakukan <em>wireframing<\/em>.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"573\" height=\"491\" src=\"https:\/\/unydevelopernetwork.com\/wp-content\/uploads\/2020\/06\/diagram-1.png\" alt=\"\" class=\"wp-image-679\" srcset=\"https:\/\/unydevelopernetwork.com\/wp-content\/uploads\/2020\/06\/diagram-1.png 573w, https:\/\/unydevelopernetwork.com\/wp-content\/uploads\/2020\/06\/diagram-1-300x257.png 300w\" sizes=\"auto, (max-width: 573px) 100vw, 573px\" \/><\/figure><\/div>\n\n\n\n<p><strong>5. Dapat Diexport ke berbagai bentuk<\/strong><\/p>\n\n\n\n<p>Fitur yang menurut Saya cukup canggih untuk ukuran aplikasi OpenSource, yakni memungkinkan hasil pekerjaan dapat diexport ke berbagai bentuk. <\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"470\" height=\"356\" src=\"https:\/\/unydevelopernetwork.com\/wp-content\/uploads\/2020\/06\/export-1.png\" alt=\"\" class=\"wp-image-681\" srcset=\"https:\/\/unydevelopernetwork.com\/wp-content\/uploads\/2020\/06\/export-1.png 470w, https:\/\/unydevelopernetwork.com\/wp-content\/uploads\/2020\/06\/export-1-300x227.png 300w\" sizes=\"auto, (max-width: 470px) 100vw, 470px\" \/><\/figure><\/div>\n\n\n\n<p>Selain mendukung untuk meng-export hasil ke bentuk PNG, hasil pekerjaan dari aplikasi Pencil ini juga dapat diexport dalam bentuk Single Web Page (.mht \/ html), PDF, SVG, dan ODT. Khusus untuk fitur Penautan Antar Halaman, supaya dapat bekerja dengan baik, maka hasil pekerjaan harus diexport dalam bentuk Single Web Page.<\/p>\n\n\n\n<p>Demikianlah bahasan singkat Saya mengenai Aplikasi Rancang Desain yang OpenSource: Pencil by Evolus. Semoga bermanfaat untuk Anda. Bagi Anda ingin mengunduh aplikasi ini, Anda dapat langsung menuju ke tautan yang berada di bagian bawah artikel ini. Apabila Anda memiliki pertanyaan atau saran, Anda dapat meninggalkannya di kolom komentar. Anda juga dapat mencuplik artikel ini, namun selalu sertakan URLnya. <\/p>\n\n\n\n<p>Terima Kasih.. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">^_^<\/h2>\n\n\n\n<p><strong>LINK UNDUH PENCIL APP<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/pencil.evolus.vn\/Downloads.html\">https:\/\/pencil.evolus.vn\/Downloads.html<\/a><\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"<p><span class=\"span-reading-time rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\">Reading Time: <\/span> <span class=\"rt-time\"> 4<\/span> <span class=\"rt-label rt-postfix\">minutes<\/span><\/span>Merancang UI aplikasi baik itu desktop, web, maupun mobile merupakan langkah vital dalam proses pengembangan aplikasi. Karena dengan UI, user dapat dengan mudah berinteraksi dengan aplikasi. Oleh sebab itu, tanpa UI yang&#8230;<\/p>\n","protected":false},"author":1,"featured_media":671,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[27,69,187],"tags":[233,234,231,230,229,232,226,227,228],"class_list":["post-665","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-software-development","category-umum-software-development","category-umum-2","tag-desain","tag-desain-ui","tag-designer","tag-free-app","tag-opensource","tag-pencil-by-evolus","tag-ui-design","tag-ui-designer","tag-ui-designer-app"],"featured_image_src":"https:\/\/unydevelopernetwork.com\/wp-content\/uploads\/2020\/06\/image-5.png","author_info":{"display_name":"Muhammad Irfan Luthfi","author_link":"https:\/\/unydevelopernetwork.com\/index.php\/author\/admin\/"},"jetpack_featured_media_url":"https:\/\/unydevelopernetwork.com\/wp-content\/uploads\/2020\/06\/image-5.png","jetpack_sharing_enabled":true,"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/unydevelopernetwork.com\/index.php\/wp-json\/wp\/v2\/posts\/665","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unydevelopernetwork.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unydevelopernetwork.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unydevelopernetwork.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unydevelopernetwork.com\/index.php\/wp-json\/wp\/v2\/comments?post=665"}],"version-history":[{"count":1,"href":"https:\/\/unydevelopernetwork.com\/index.php\/wp-json\/wp\/v2\/posts\/665\/revisions"}],"predecessor-version":[{"id":682,"href":"https:\/\/unydevelopernetwork.com\/index.php\/wp-json\/wp\/v2\/posts\/665\/revisions\/682"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/unydevelopernetwork.com\/index.php\/wp-json\/wp\/v2\/media\/671"}],"wp:attachment":[{"href":"https:\/\/unydevelopernetwork.com\/index.php\/wp-json\/wp\/v2\/media?parent=665"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unydevelopernetwork.com\/index.php\/wp-json\/wp\/v2\/categories?post=665"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unydevelopernetwork.com\/index.php\/wp-json\/wp\/v2\/tags?post=665"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}