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%2Ffanyv88.com%3A443%2Fhttps%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/)