Cara Membuat Design Aplikasi dengan Pencil
! March 28, 2017 (https://www.tutorialpemrograman.com/others/cara-membuat-design-aplikasi-
dengan-pencil-3/) " Fadhlillah Arieanto
(https://www.tutorialpemrograman.com/prole/fadliarieanto) # Others
(https://www.tutorialpemrograman.com/others/)
Pencil? Ya, betul, kalian tidak salah baca. Dalam tutorial kali ini, saya akan memberikan
penjelasan mengenai bagaimana Cara Membuat Design Aplikasi dengan Pencil. Pencil
yang saya maksud di sini adalah, sebuah aplikasi open source yang digunakan untuk
membuat sebuah prototype, design ataupun rancangan dari sebuah aplikasi. Nantinya,
hasil dari design yang telah kalian buat, dapat berupa gambar ( .png ) ataupun berbasis
web ( .html ).
Bluehost Web Get a free domain, free site builder
tools, 1-click WordPress install, and
Hosting 24/7 support
Silahkan klik video di bawah ini untuk melihat versi video. Abaikan jika kalian ingin
melanjutkan membaca.
Cara Membuat Design Aplikasi dengan Pencil
Cara Membuat Design Aplikasi dengan Pencil
Singkat kata, aplikasi ini sering digunakan untuk membuat sebuah rancangan ataupun
desain aplikasi desktop, mobile dan juga aplikasi berbasis web. Dengan menggunakan
Pencil, kalian hanya perlu fokus pada desainnya saja, tanpa perlu memikirkan coding
terlebih dahulu.
Aplikasi ini juga dapat digunakan untuk membuat owchart. Bagi teman-teman
programmer, pastinya akan sangat terbantu dengan aplikasi ini dalam membuat
sebuah owchart dari sebuah program yang telah dibuat.
Project yang dibuat, dapat langsung di export menjadi sebuah gambar ( .png ), halaman
web ( .html ), .pdf , hingga .svg .
Langsung saja, berikut adalah beberapa tools utama yang disediakan:
Basic Web Elements
HTML Text
Hyperlink
Heading
Breadcrumb
Desktop
Windows Frame
Button
Text Box
Label
Radio Button
List Box
Combo Box
Check Box
Group Box
Scroll Bar
Table
Dan lain-lain.
Baca juga: Cara Membuat Website Gratis di Microsoft Azure
(https://www.tutorialpemrograman.com/web/cara-membuat-website-gratis-di-
microsoft-azure-6/)
Mobile (Android & iOS)
Status Bar
Navigation Bar
Text
Button
Check Box
Radio Button
Keyboard
Dan lain-lain.
Flowchart
Process
Decision (IF)
Document (Print)
Data (input/output)
Connector
Or
Dan lain-lain.
Perlu kalian ketahui juga, aplikasi ini hanya terbatas untuk membuat desain
tampilannya saja, jadi tidak terdapat fungsi-fungsi logic atau programming yang dapat
digunakan dalam aplikasi tersebut.
Cara Membuat Design Aplikasi dengan Pencil
Kalian bisa mendownload versi stabilnya ataupun versi beta pada laman
http://www.pencil.evolus.vn/download.html atau klik di sini
(https://www.tutorialpemrograman.com/download/pencil). Tersedia untuk sistem
operasi Linux, Windows, dan juga Mac.
Cara menggunakannya sangat mudah, kalian hanya perlu drag n drop objek-objek yang
sudah tersedia ke bagian workspace kalian. Jika sudah, kalian bisa memanfaatkan
shortcut Ctrl + G (grouping) untuk menyatukan objek-objek tersebut menjadi satu.
Untuk mengatur ukuran, Pencil juga menyediakan pengaturan manual untuk mengatur
ukuran dari desain yang kita buat dengan satuan pixel ( px ).
Di bawah ini adalah salah satu desain sederhana yang sudah saya buat.
Gambar 1.
Jadi, itulah Cara Membuat Design Aplikasi dengan Pencil. Jika kalian mengalami
kesulitan, jangan sungkan untuk menanyakannya kepada kami melalui komentar di
akhir artikel. Semoga artikel ini bermanfaat. Terima kasih.
Tertarik untuk bergabung bersama kami? Daftar jadi Penulis Tamu, sekarang! Klik
Iklan
Google
oleh
disini (https://www.tutorialpemrograman.com/penulis-tamu/).
Iklan oleh Google
Aplikasi download Pencil
Cara membuat Apple ipad pro pencil
(https://www.tutorialpemrograman.com/ads/jadwaltayang.com)
Share this:
(https://www.tutorialpemrograman.com/others/cara-membuat-design-aplikasi-dengan-pencil-3/?
share=facebook&nb=1&nb=1)
(https://www.tutorialpemrograman.com/others/cara-membuat-design-aplikasi-dengan-pencil-3/?
share=twitter&nb=1&nb=1)
(whatsapp://send?text=Cara%20Membuat%20Design%20Aplikasi%20dengan%20Pencil
https%3A%2F%2Fwww.tutorialpemrograman.com%2Fothers%2Fcara-membuat-design-aplikasi-dengan-
pencil-3%2F)
(https://www.tutorialpemrograman.com/others/cara-membuat-design-aplikasi-dengan-pencil-3/?
share=email&nb=1&nb=1)
(https://www.tutorialpemrograman.com/others/cara-membuat-design-aplikasi-dengan-pencil-3/?
share=google-plus-1&nb=1&nb=1)
(https://www.tutorialpemrograman.com/others/cara-membuat-design-aplikasi-dengan-pencil-3/#print)
(https://www.tutorialpemrograman.com/others/cara-membuat-design-aplikasi-dengan-pencil-3/?
share=linkedin&nb=1&nb=1)
(https://www.tutorialpemrograman.com/others/cara-membuat-design-aplikasi-dengan-pencil-3/?
share=reddit&nb=1&nb=1)
(https://www.tutorialpemrograman.com/others/cara-membuat-design-aplikasi-dengan-pencil-3/?
share=telegram&nb=1&nb=1)
(https://www.tutorialpemrograman.com/others/cara-membuat-design-aplikasi-dengan-pencil-3/?
share=pinterest&nb=1&nb=1)
Related
(https://www.tutorialpemr (https://www.tutorialpemr (https://www.tutorialpemr
ograman.com/mobile/cara ograman.com/mobile/bela ograman.com/web/cara-
-membuat-aplikasi- jar-membuat-aplikasi- deploy-azure-web-app-
android-html5-dengan- android-html5-dengan- menggunakan-onedrive/)
intel-xdk/) intel-xdk-bagian-1/) Cara Deploy Azure Web App
Cara Membuat Aplikasi Belajar Membuat Aplikasi menggunakan OneDrive
Android HTML5 dengan Intel Android HTML5 dengan Intel (https://www.tutorialpemrog
XDK XDK Bagian 1 raman.com/web/cara-
(https://www.tutorialpemrog (https://www.tutorialpemrog deploy-azure-web-app-
raman.com/mobile/cara- raman.com/mobile/belajar- menggunakan-onedrive/)
membuat-aplikasi-android- membuat-aplikasi-android- February 8, 2017
html5-dengan-intel-xdk/) html5-dengan-intel-xdk- In "Microsoft Azure"
November 6, 2016 bagian-1/)
In "Android" November 8, 2016
In "Android"
(https://www.tutorialpemr (https://www.tutorialpemr (https://www.tutorialpemr
ograman.com/mobile/cara ograman.com/mobile/bela ograman.com/web/cara-
-membuat-aplikasi- jar-membuat-aplikasi- deploy-azure-web-app-
android-html5-dengan- android-html5-dengan- menggunakan-onedrive/)
intel-xdk/) intel-xdk-bagian-1/) Cara Deploy Azure Web App
Cara Membuat Aplikasi Belajar Membuat Aplikasi menggunakan OneDrive
Android HTML5 dengan Intel Android HTML5 dengan Intel (https://www.tutorialpemrog
XDK XDK Bagian 1 raman.com/web/cara-
(https://www.tutorialpemrog (https://www.tutorialpemrog deploy-azure-web-app-
raman.com/mobile/cara- raman.com/mobile/belajar- menggunakan-onedrive/)
membuat-aplikasi-android- membuat-aplikasi-android- February 8, 2017
html5-dengan-intel-xdk/) html5-dengan-intel-xdk- In "Microsoft Azure"
November 6, 2016 bagian-1/)
In "Android" November 8, 2016
In "Android"
Pensil Project (https://www.tutorialpemrograman.com/tag/pensil-project/)
Tips & Tricks (https://www.tutorialpemrograman.com/tag/tips-tricks/)
Video (https://www.tutorialpemrograman.com/tag/video/)
FADHLILLAH ARIEFIANTO
(HTTPS://WWW.TUTORIALPEMROGRAMAN.COM/PROFILE/FADLIARIEFIANTO)
Bukan coders, tapi suka coding. Bukan blogger, tapi suka blogging.
LEAVE A REPLY
$ Cara Membuat Formulir Online dengan Microsoft Excel (https://www.tutorialpemrograman.com/others/cara-
membuat-formulir-online-dengan-microsoft-excel/)
LOGIN
Username or email
Password
Remember Me
LOGIN
Don't have an account? Signup Now (https://www.tutorialpemrograman.com/register/)
(https://www.tutorialpemrograman.com/penulis-tamu/)
POPULAR POSTS
Belajar Membuat Aplikasi Android HTML5 dengan Intel XDK Bagian 1
(https:// (https://www.tutorialpemrograman.com/mobile/belajar-membuat-aplikasi-
www.tut android-html5-dengan-intel-xdk-bagian-1/)
orialpem 08 Nov , 2016
rograma
n.com/m Cara Mengatasi Broken Link pada WordPress
(https://
obile/bel (https://www.tutorialpemrograman.com/web/cara-mengatasi-broken-link-pada-
www.tut
ajar- wordpress/)
orialpem 16 Jan , 2017
membua
rograma
t-
n.com/w Belajar Membuat Aplikasi Android HTML5 dengan Intel XDK Bagian 4
aplikasi-
(https://
eb/cara- (https://www.tutorialpemrograman.com/mobile/belajar-membuat-aplikasi-
android-
www.tut
mengata android-html5-dengan-intel-xdk-bagian-4/)
html5-
orialpem 14 Nov , 2016
si-
dengan-
rograma
broken-
intel- Cara Install Plugin di WordPress
n.com/m
link-
xdk-
(https:// (https://www.tutorialpemrograman.com/web/cara-install-plugin-di-wordpress/)
obile/bel
pada-
bagian-
www.tut 19 Oct , 2016
ajar-
wordpre
1/)
orialpem
membua
ss/)
rograma Cara Mengatasi Duplicate Image pada WordPress
t-
(https://
n.com/w (https://www.tutorialpemrograman.com/web/cara-mengatasi-duplicate-image-
aplikasi-
www.tut
eb/cara- pada-wordpress/)
android-
orialpem 26 Jan , 2017
install-
html5-
rograma
plugin-
dengan-
n.com/w
di-
intel-
eb/cara-
wordpre
xdk-
FOLLOW US
mengata
ss/)
bagian-
si-
4/)
duplicat
e-image-
(
(htt
ps://
ww
% w.yo
(htt ' utub
p:// (htt e.co
ww & ps:// m/c
w.fa (htt gith han
ceb p:// ub.c nel/
ook. ww om/ UCu
com w.tw tuto ektB
/tut itter. rialp EJP3
orial com emr A2Z
pem /tut ogra TD2
rogr orial man wkp
ama proi com HUE
nid/) d) ) Q)
Iklan
Google
oleh
Iklan oleh Google
Apple ipad pro pencil
Aplikasi membuat website
Download software
Aplikasi program
HIGHLY RECOMMENDED
Trusted by Millions Users
Download time: up to 20 seconds
Software: MacKeeper
OS: Mac OS X 10.5+
File size: 172kb
Recommended by Experts
Download Now
CALENDAR
August 2017
M T W T F S S
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31
Jun (https://www.tutorialpemrograman.com/2017/06/)
LATEST POST
Mahasiswa Fasilkom UI Ciptakan Aplikasi Game Quran
(https://www.tutorialpemrograman.com/blogs/mahasiswa-fasilkom-ui-ciptakan-aplikasi-game-quran/)
June 20, 2017
[Challenge] Tizen Tematik Challenge: Hari Anak Nasional
(https://www.tutorialpemrograman.com/blogs/challenge/tizen-tematik-challenge-hari-anak-nasional/)
May 25, 2017
[Challenge] Tizen Tematik Challenge: Hari Koperasi Indonesia
(https://www.tutorialpemrograman.com/blogs/challenge/tizen-tematik-challenge-hari-koperasi-
indonesia/) May 25, 2017
[Challenge] Tizen Tematik Challenge: Puzzle Game
(https://www.tutorialpemrograman.com/blogs/challenge/tizen-tematik-challenge-puzzle-game/) May
25, 2017
[Challenge] IBM Bluemix / Watson crafted Solutions Challenge
(https://www.tutorialpemrograman.com/blogs/challenge/ibm-bluemix-watson-crafted-solutions-
challenge/) May 16, 2017
FACEBOOK (HTTP://WWW.FACEBOOK.COM/TUTORIALPEMROGRAMANID)
(
(htt
ps://
ww
% w.yo
(htt ' utub
p:// (htt e.co
ww & ps:// m/c
w.fa (htt gith han
ceb p:// ub.c nel/
ook. ww om/ UCu
com w.tw tuto ektB
/tut itter. rialp EJP3
orial com emr A2Z
pem /tut ogra TD2
rogr orial man wkp
ama proi com HUE
nid/) d) ) Q)
ABOUT US (HTTPS://WWW.TUTORIALPEMROGRAMAN.COM/ABOUT/)
CONTACT (HTTPS://WWW.TUTORIALPEMROGRAMAN.COM/CONTACT/)
REGISTER (HTTPS://WWW.TUTORIALPEMROGRAMAN.COM/REGISTER/)
Copyright 2017 Tutorial Pemrograman ID (https://www.tutorialpemrograman.com/)
Archives (https://www.tutorialpemrograman.com/archives/) - Terms of Use
(https://www.tutorialpemrograman.com/terms-of-use/) - Privacy Policy
(https://www.tutorialpemrograman.com/privacy-policy/) - Disclaimer
(https://www.tutorialpemrograman.com/disclaimer/) - Sitemap
(https://www.tutorialpemrograman.com/sitemap_index.xml/)
