KOPERTIP: Jurnal Ilmiah Manajemen Informatika dan Komputer
Vol. 02, No. 03, Oktober 2018, pp. 122-129
Pembuatan Desain User Interface Aplikasi Teman
Bisnis Menggunakan Adobe XD CC
Ta’zirah Marwan 1,#
Intisari— Adanya UMK di Indonesia sangat menguntungkan
perkembangan pekonomian negara karena UMK meyumbang
hampir 100% pajak negara. Permasalahan yang dihadapi UMK
ialah sulitnya mendapatkan akses permodalan yang disebabkan
tidak adanya pencatatan keuangan. Karena itulah dibuat
aplikasi keuangan yang fokus untuk pencatatan transaksi bisnis
yang sesuai dengan standar IAI (Ikatan Akuntansi Indonesia),
yaitu TemanBisnis. Tujuan dari penelitian ini adalah membuat
desain user interface pada aplikasi TemanBisnis yang menarik
dan mudah dipahami oleh pelaku UMK. Metodologi yang
digunakan dalam penelitian ini adalah metode atomic design
yang terdiri dari 5 langkah, yaitu atoms, meolecules, organism,
templates, dan pages. Hasil dari penelitian ini adalah sebuah
desain user interface yang dapat dipakai dan digunakan untuk
aplikasi TemanBisnis. Jurnal ini diharapkan menjadi kontribusi
terbaru dengan menggunakan metode atomic design serta
aplikasi Adobe XD CC untuk pembuatan desain user interface.
Kata Kunci— TemanBisnis, User Interface, Usaha Mikro dan
Kecil, UMK, desain user interface
Abstract—Please write the Abstract in English and Intisari in
Bahasa Indonesia, each of which contains around 160-250 words.
These instructions give you guidelines to prepare papers for Jurnal
Kopertip. Use this document as a template if you are using
Microsoft Word 7.0 or later. Otherwise, use this document as an
instruction set. Define all symbols used in the Abstract. Do not cite
references in the Abstract. Do not delete the blank line immediately
above the Abstract; it sets the footnote at the bottom of this column.
Keywords— Abstract, template, article, Kopertip Journal
I. PENDAHULUAN
UMK (Usaha Mikro dan Kecil) adalah jenis usaha yang
memiliki nilai penjualan tahunan dibawah 300 juta hingga 2,5
miliar rupiah dengan nilai aset perusahaan dibawah 50 juta
hingga 500 juta rupiah. Banyaknya ukm di indonesia sendiri
ada 58 juta unit atau 99,9% unit usaha dibandingkan jenis unit
usaha lainnya. Adanya UMK di Indonesia sangat
menguntungkan perkembangan eekonomi negara karena
UMK meyumbang hampir 100% pajak negara.
UMK tidak terlepas dari masalah. Masalah terbesar UMK
ialah sulitnya mendapatkan akses permodalan yang
disebabkan tidak adanya pencatatan keuangan. TemanBisnis
merupakan aplikasi keuangan yang fokus untuk pencatatan
transaksi bisnis. Aplikasi ini juga dilengkapi dengan laporan
laba-rugi yang bertujuan mencatat laba dan rugi pemakai
aplikasi sesuai dengan standar IAI (Ikatan Akuntansi
Indonesia).
1 antarmuka, seperti warna, tipografi, aset ilustrasi dan ikon,
Program Studi Teknik Multimedia dan Jaringan, Politeknik Negeri
Jakarta, Jl. Prof. Dr. G.A Siwabessy, Kampus Baru UI, Depok, Jawa Barat,
Indonesia 16424
#
E-mail: tazirahmb@outlook.com
© Yayasan Kopertip Indonesia 2018
ISSN: 2549-9351
TemanBisnis memiliki empat fitur utama. Pertama,
mencatat transaksi bisnsis dengan cepat. Kedua, memiliki
daftar kategori yang otomatis disesuaikan dengan jenis usaha
pengguna software. Ketiga, TemanBisnis memberi laporan
berkala dalam bentuk arus kas dan laporan laba/rugi. Terakhir,
TemanBisnis terintegrasi dengan fitur catatan dan otomatis
tersimpan di dalam aplikasi.
User Interface yang dibuat pada aplikasi TemanBisnis
haruslah merupakan user interface yang mudah dan tidak
merepotkan penggunanya. Dalam laporan Praktik Kerja
Lapangan ini, akan dibahas bagaimana tampilan user interface
tersebut dibuat agar dapat memudahkan pengguna aplikasi
TemanBisnis dalam menggunakan aplikasi tersebut.
Penulisan ini bertujuan untuk membuat tampilan user
interface untuk aplikasi TemanBisnis. Pekerjaan yang
dilakukan adalah membuat desain komponen-komponen pada
user interface. Selanjutnya adalah bekerja sama dengan UX
Designer dalam mengolah data dan membuat desain user
interface. Terakhir adalah membuat prototype pada wireframe
menggunakan Adobe XD CC.
II. TINJAUAN TEORITIS
A. Desain User Interface
Desain User Interface (yang selanjutnya akan disebut
desain UI) merupakan salahsatu cabang desain yang berfokus
dalam pembuatan desain antarmuka pada aplikasi dan
halaman web, baik untuk penggunaan komputer maupun
mobile. UI itu sendiri merupakan salahsatu bagian dari
Interaksi Manusia dan Komputer (IMK). Tujuan dari UI
adalah memberikan desain antarmuka yang sesederhana dan
seefisien mungkin dan menghasilkan desain UI sebagus
mungkin agar memenuhi kebutuhan pengguna. (Galitz, 2007)
UI terkadang sering disamarkan atau disamakan fungsinya
dengan User Experience (UX), padahal kedua bidang ini
sangatlah berbeda. UX berfokus pada pengalaman pengguna
dalam memakai aplikasi. Pekerjaannya mencakup
menganalisa kebutuhan user dan mengumpulkan dan
mengolah data dengan mengetes prototype yang sudah dibuat
oleh UI designer. Adapun UI berfokus pada pembuatan desain
antarmuka pengguna dan perancangan interaksi yang
dilakukan pengguna. (Patterson & Erturk, 2015)
Pekerjaan yang dilakukan UI designer berfokus pada
tampilan visual pada suatu antarmuka. Tampilan visual
tersebut haruslah memiliki keterkaitan antara satu sama
lainnya agar dapat memberi pengalaman yang konsisten untuk
pengguna aplikasi. UI designer juga bertugas menyiapkan
komponen-komponen desain pada satu proyek desain
dan elemen interaksi (seperti tombol, radio button, dan
textbox).
UI designer juga menjadi jembatan antara UX designer dan
developer. UI designer mengkomunikasikan antarmuka yang
dibuat dengan UX designer agar sesuai dengan kebutuhan
122
KOPERTIP: Jurnal Ilmiah Manajemen Informatika dan Komputer
pengguna. Kemudian kepada developer, UI designer
menyediakan asset yang siap pakai untuk digunakan dan
mengomunikasikan penyesuaian desain saat diterapkan dalam
halaman web atau aplikasi.
Terdapat dua jenis desain antarmuka yang dibuat oleh UI
designer, yaitu wireframe dan mockup.
Wireframe adalah blueprint dari struktur antarmuka yang
akan dibuat. Umumnya, konten wireframe hanya berfokus
pada tata letak antarmuka saja dan Gambar dan ikon lainnya
diletakkan dengan gambar pengganti. Tujuan dari pembuatan
wireframe ini umumnya untuk menunjukkan visualisasi dan
kerangka dasar dari tampilan antarmuka yang akan dibuat.
(Adiseshiah, 2016)
Berbeda dengan wireframe, mockup merupakan tampilan
wireframe yang sudah diletakkan elemen visual. Mockup
merepresentasikan tampilan antarmuka yang akan diterapkan
dalam aplikasi atau halaman web. (Adiseshiah, 2016)
B. Adobe Illustrator CC
Adobe illustrator CC merupakan standar industri untuk
perangkat lunak pengolah Vector dan desain grafis. Umumnya,
Adobe Illustrator digunakan untuk membuat ilustrasi, ikon, dan
media promosi.
Sebagai pengolah vector, Adobe Illustrator memiliki
kelebihan tersendiri jika dibandingkan aplikasi pengolah
gambar bitmap. Berbeda dengan bitmap yang menggunakan
pixel-pixel untuk membuat gambar, file vector menggunakan
persamaan matematis sehingga dapat menghasilkan ukuran
gambar yang lebih ringan dan lebih mudah dimodifikasi.
Karena hal ini pula, umumnya desainer lebih memilih
menggunakan aplikasi ini untuk membuat desain yang
memiliki ukuran independen, seperti ikon dan logo.
C. Adobe Xd CC
Adobe XD CC (sebelumnya Adobe Experience Design CC)
Adalah perangkat lunak desain yang berfokus pada desain user
interface dan user experience. Pengguna dapat membuat desain
interface aplikasi sederhana kemudian membuat prototype-nya
dan dilihat ke klien ataupun anggota tim lain, seperti developer
dan project manager. Adobe XD CC didesain dan dibuat oleh
Adobe System, sehingga mendukung format file yang dibuat
oleh aplikasi Adobe lainnya, seperti Adobe Photoshop dan
Adobe Illlustrator. (Adobe Creative Cloud, 2017)
Adobe XD CC merupakan perangkat lunak yang tergolong
baru. Sebelumnya aplikasi ini dikenal dengan nama Project
Comet pada April 2016. Kemudian, Project Comet berubah
nama menjadi Adobe Experience Design CC dan memasuki
tahap Beta sejak bulan September 2016. Perangkat lunak ini
kemudian resmi meluncur dengan nama Adobe XD CC pada
akhir Oktober 2017. Karena masih tergolong baru, masih
banyak desainer yang belum mengetahui mengenai perangkat
lunak ini dan menggunakan aplikasi alternatif lainnya, seperti
Sketch dan Adobe Photoshop.
III. METODOLOGI PENELITIAN
Dalam pembuatan desain user interface aplikasi
TemanBisnis ini menggunakan metode Atomic Design.
Metode Atomic Design adalah metodologi pengembangan
desain yang memecah langkah-langkah desain dari bagian-
bagian kecil hingga menjadi satu kesatuan yang utuh. Brad
Frost, pengembang metodologi ini terinspirasi dari konsep
atom dan molekul pada kimia yang terdiri dari atom-atom
123
Vol. 02, No. 03, Oktober 2018
kecil yang menyatu hingga menjadi sebuah molekul, yang
kemudian juga menyatu hingga menjadi organisme kompleks
yang memiliki peran penting di dunia (Frost, 2016). Metode
ini memilki lima tahap seperti pada gambar berikut :
Gbr. 1 Tahapan pada metodologi Atomic Design
A. Atoms
Tahap atoms adalah tahap dasar saat desainer membuat
template dasar untuk tiap-tiap komponen desain yang akan
dibuat. Template dasar tersebut dapat berupa bentuk input
text, label, tombol, tabular, dan lainnya. Pada tahap ini juga
desainer menentukan warna dasar dan tipografi yang
digunakan pada desain agar nantinya desain yang sudah jadi
akan konsisten. (Frost, 2016)
B. Molecules
Pada tahap ini, desainer menyatukan komponen-komponen
yang sudah dibuat dalam tahap sebelumnya untuk dijadikan
sebuah unit yang memiliki tujuan. Sebagai contoh, kotak
pencarian, dan form label. Nantinya, komponen-komponen
molecules ini dapat digunakan berulang kali. (Frost, 2016)
C. Organism
Tahap ini menyatukan molekul-molekul atau atom-atom
atau organisme-organisme lain untuk menciptakan sebuah
komponen user interface yang lebih kompleks. Organisme
dapat terdiri dari elemen yang sejenis ataupun yang berbeda.
(Frost, 2016)
D. Templates
Pada tahap ini, desainer menyusun komponen-komponen
yang sudah ada hingga menjadi sebuah wireframe yang utuh.
Desainer mengatur struktur dan tata letak pada desain secara
detail. Tahap templates berfokus pada struktur dan kerangka
halaman yang akan dibuat, bukan tampilan yang sudah jadi.
(Frost, 2016)
E. Pages
Tahap ini mengubah wireframe yang sudah dibuat di tahap
sebelumnya menjadi sebuah mockup utuh yang berisi konten
interface yang sebenarnya. Pada tahap ini juga dibuat
beberapa variasi dari mockup yang akan dibuat. (Frost, 2016)
IV. ANALISIS DAN PERANCANGAN
Pengerjaan proyek ini diawali dengan beberapa tahapan
yang mengacu pada rancangan proyek dan analisis kebutuhan
bahan yang digunakan pada proyek. Adapun pembagian
tahapan analisis dan perancangannya adalah sebagai berikut :
Ta'zirah Marwan: Pembuatan Desain User Interface Aplikasi …

A. Atoms
Tahap Atoms pada pembuatan desain user interface ini
bertujuan agar nantinya komponen yang dibuat di dalam
antarmuka aplikasi TemanBisnis lebih konsisten dan memiliki
korelasi antara satu bagian dengan bagian lainnya. Pada tahap
ini, penulis membuat pembagian-pembagian komponen yang
akan digunakan pada user interface aplikasi TemanBisnis,
yaitu : tipografi, interaction unit, warna, dan ikon.
[1] Tipografi
User interface pada aplikasi TemanBisnis menggunakan
font roboto yang dibuat oleh Google dengan standar ukuran
dan style tipografi sebagai berikut.

TABEL 1
KOMPONEN TIPOGRAFI USER INTERFACE TEMANBISNIS
4 Float
N Jenis Style Tampilan Font . Button
o. Font Font
Regular Headline
1. Headline
24pt
[3] Warna
Medium Title
2. Title Warna yang akan digunakan dalam desain user interface
20pt
aplikasi TemanBisnis ialah sebagai berikut :
Subheade Regular Subheader
3.
r 16pt TABEL 3
Body 2 / Medium Menu WARNA YANG DIGUNAKAN PADA APLIKASI TEMANBISNIS
4.
Menu 14pt
Regular Menu Kode
5. Body 1 No
14pt Kategori Warna HTML warna
.
Regular Caption warna
6. Caption
12pt
Medium BUTTON
7. Button 14pt, 1. Warna Primer #00AE9C
uppercase
Medium Hyperlink
Hyperlin
8. 14pt, color
k
primary
2. Warna Aksen #FFA41D
[2] Interaction Unit
Interaction unit merupakan komponen dalam user interface
yang memiliki fungsi tertentu. Sesuai namanya, unit tersebut
dapat berinteraksi dengan pengguna. Bisa dengan ditekan atau
sebagai petunjuk (seperti label). Warna
3. #57AF48
Pemasukan
TABEL 2
KOMPONEN INTERACTION UNIT TEMANBISNIS

N Nama
Gambar Komponen
o. Komponen Warna
4. #FE5151
Pengeluaran
1
Tombol
.

5. Warna Catatan #2597D9

2 Radio
. Button

6. Warna Teks #292929

3 Text
. field

124
KOPERTIP: Jurnal Ilmiah Manajemen Informatika dan Komputer Vol. 02, No. 03, Oktober 2018

[4] Ikon dan Ilustrasi penulis membuat komponen untuk header, bottom navigation,
Ikon yang digunakan pada aplikasi TemanBisnis berasal form, dan daftar kategori.
dari ikon standar material design milik google dan website
penyedia ikon yaitu iconfinder.com. Adapun untuk ilustrasi TABEL 5
KOMPONEN ORGANISM PADA APLIKASI TEMANBISNIS
dibuat dengan menggunakan aplikasi Adobe Illustrator CC.
Tahap pengerjaan ilustrasi akan dijelaskan pada bagian pages.
N Nama Gambar Komponen
o. Komponen

Card
1
transaksi
.
harian

2 Card list
. catatan

Gbr. 2 Ikon-ikon pada user interface aplikasi TemanBisnis

3 bottom
B. Molecules . navigation
Pada tahap ini, komponen-komponen yang sudah dibuat
dalam tahap sebelumnya disatukan untuk dijadikan sebuah
unit yang memiliki tujuan. Sebagai contoh, kotak pencarian,
dan form label. Nantinya, komponen-komponen molecules ini Header
dapat digunakan berulang kali. 4 umum
Adapun komponen yang dibuat pada tahap ini adalah : . (dengan
tabular)
TABEL 4
KOMPONEN MOLECULES PADA APLIKASI TEMANBISNIS
Header
N Nama Gambar Komponen 5 umum
o. Komponen . (tanpa
tabular)

1
Tabular
.

Header
6
Laporan pie
2 Kategor .
chart
. i

Kompo
3
nen
.
Transaksi
Setelah semua komponen terkumpul, penulis menyimpan
Tampila
ikon, tipografi, warna, dan interaction unit ke dalam symbol
4 n tulisan
pada aplikasi Adobe XD CC.
. dengan
ikon

C. Organism
Tahap ini menyatukan molekul-molekul atau atom-atom
atau organisme-organisme lain untuk menciptakan sebuah
komponen user interface yang lebih kompleks. Pada tahap ini,

125
Ta'zirah Marwan: Pembuatan Desain User Interface Aplikasi …

Gbr. 3 Symbol untuk jenis font dan warna

Gbr. 4 Symbol untuk asset-asset dan komponen-komponen

D. Templates
Pada tahap ini, penulis membuat wireframe untuk aplikasi
TemanBisnis. Adapun data untuk pembuatan wireframe
TemanBisnis penulis dapatkan dari UX Designer TemanBisnis.
Setelah data didapat, wireframe aplikasi TemanBisnis
dibuat dengan menggunakan Adobe XD CC.

126
KOPERTIP: Jurnal Ilmiah Manajemen Informatika dan Komputer Vol. 02, No. 03, Oktober 2018

Gbr. 5 Wireframe TemanBisnis

Setelah seluruh wireframe dibuat, kumpulan wireframe

tersebut disatukan dengan Prototype Tools milik Adobe XD
agar menjadi interaktif. prototype yang sudah dibuat nantinya
akan diberikan ke product manager untuk direview.

Gbr. 5 Prototype pada wireframe TemanBisnis

E. Pages
Pada tahap ini, mockup yang berisi konten dan desain yang
sebenarnya dibuat berdasarkan review dan wireframe yang
sudah dibuat di tahap templates.

127
Ta'zirah Marwan: Pembuatan Desain User Interface Aplikasi …

V. PENUTUP

A. Kesimpulan
Berdasarkan dari hasil Praktek Kerja Lapangan (PKL) yang
dilaksanakan di PT. Badr Interactive, dapat disimpulkan
bahwa :
1. Pembuatan desain komponen-komponen pada user
interface TemanBisnis haruslah konsisten dan memiliki
kemiripan antara satu komponen dan komponen lainnya
agar dapat memberikan kemudahan untuk pengguna
dalam menggunakan aplikasi TemanBisnis;
2. Kerjasama yang baik antara User Interface Designer dan
User Experience Designer diperlukan untuk
menghasilkan desain user interface sehingga sesuai
dengan kebutuhan pengguna;
3. Pembuatan prototype pada wireframe yang dibuat
menggunakan Adobe XD CC memudahkan tim dalam
melakukan pengetesan wireframe kepada pengguna
lainnya.

B. Saran
Desain user interface TemanBisnis yang dihasilkan belum
sempurna. Oleh karena itu, penulis memberikan saran-saran
yang dibutuhkan untuk perkembangan desain user interface
TemanBisnis ini :
1. Menggunakan komponen desain yang kreatif, namun
tetap memiliki keterkaitan antara satu komponen dan
komponen lainnya;
2. Meyusun tata letak desain user interface yang memiliki
maksimal 3 poin fokus dalam satu screen;
3. Bekerja sama dengan user experience designer agar dapat
menghasilkan desain user interface yang sesuai dengan
kebutuhan pengguna;
4. Terus melakukan uji coba prototype berkala untuk
mengetahui kebutuhan pengguna.

UCAPAN TERIMA KASIH

Terima Kasih penulis sampaikan kepada instansi
Pendidikan Politeknik Negeri Jakarta atas ilmu yang telah
penulis gunakan dalam hal penelitian ini, juga kepada kepada
Tim Jurnal Kopertip yang telah meluangkan waktu untuk
mereview artikel ini.

REFERENSI
[1] Adiseshiah, E. G., 2016. Wireframes Vs Mockup: What's the best
option?. [Online]
Available at: https://www.justinmind.com/blog/wireframes-and-
mockups-whats-the-best-option/
[2] Adobe Creative Cloud, T., 2017. Adobe Illustrator User Guide.
[Online]
Available at: https://helpx.adobe.com/illustrator/user-guide.html
[3] Adobe Creative Cloud, T., 2017. Adobe XD User Guide. [Online]
Available at: https://helpx.adobe.com/xd/user-guide.html
[4] Adobe Creative Team, 2017. Adobe Illustrator CC Classroom in a
Book. Old Stannifer: Adobe Press.
[5] Anderson, J., McRee, J. & Wilson, R., 2010. Effective UI. Sebastopol:
O'Reilly Media.
[6] Ascarya & Rahmawati, S., 2015. Analisis Determinan Kenaikan Kelas
Gbr. 6 Mockup TemanBisnis Usaha Mikro. Publikasi Bank Indonesia.
[7] Frost, B., 2016. Atomic Design. Pittsburgh,: Self-publish.
[8] Galitz, W. O., 2007. The Essential Guide to User Interface Design: An
Introduction to GUI Design Principles and Techniques. 3 ed. New
York City: John Wiley & Sons.
[9] Huddleston, R., 2017. Beginning Adobe Experience Design. Berkeley:
Apress.

128
KOPERTIP: Jurnal Ilmiah Manajemen Informatika dan Komputer Vol. 02, No. 03, Oktober 2018

[10] Kementerian Koperasi dan UKM, 2014. Perkembangan Data Usaha [13] Patterson, E. & Erturk, E., 2015. An Inquiry into Agile and Innovative
Mikro, Kecil, Menengah (UMKM) dan Usaha Besar (UB) Tahun 2012- User Experience. ResearchGate Journal.
2013. [Online] [14] Shneiderman, B. et al., 2016. Designing the User Interface: Strategies
Available at: http://www.depkop.go.id/pdf- for Effective Human-Computer Interaction, 6th Edition. Hoboken:
viewer/?p=uploads/tx_rtgfiles/sandingan_data_umkm_2012-2013.pdf Pearson.
[11] Krug, S., 2014. Don't Make Me Think, Revisited: A Common Sense [15] TemanBisnis, 2017. TemanBisnis - Pencatat Keuangan Untuk Pelaku
Approach to Web Usability. San Francisco: New Riders. Bisnis. [Online] Available at: http://temanbisnisapp.com
[12] LPPI & Bank Indonesia, 2015. Profil Bisnis Usaha Mikro, Kecil, dan [Accessed 19 09 2017].
Menengah (UMKM), s.l.: s.n.

129