## PERANCANGAN PROTOTYPE TAMPILAN ANTARMUKA PENGGUNA APLIKASI WEB KAMARDAGANG.COM DENGAN TEKNIK FLAT DESIGN PADA PT. SELARAS UTAMA INTERNASIONAL
Syifa Fauzia 1 ,  Fenty Eka Muzayyana Agustin 2 Undang Syaripudin 3 Yuditha Ichsani 4
1, 2, 4 Teknik Informatika UIN Syarif Hidayatullah Jakarta
3 Teknik Informatika UIN Sunan Gunung Djati Bandung
1 undang_if@uinsgd.ac.id, 2 fenty.eka@uinjkt.ac.id 3 undang_if@uinsgd.ac.id,
4 yuditha.ichsani@uinjkt.ac.id

## ABSTRAK
Meskipun  pertumbuhan e-commerce di  Indonesia  terbilang  pesat  namun  tidak  semua  tampilan antarmuka pengguna aplikasi web e-commerce di Indoensia memiliki karakteristik yang user friendly . Padahal  setiap user tentu  mengharapkan  tampilan  antarmuka  pengguna  dengan  kategori user experience yang  memuaskan  terutama  dalam  bidang e-commerce .  Salah  satu  web e-commerce yang tampilan antarmuka penggunanya masih dibuat sederhana dan belum memenuhi kriteria user friendly yaitu  kamardagang.com.  Web  tersebut  milik  PT.  Selaras  Utama  Internasional  yang  menjadi  tempat bagi  penulis  dalam  melaksanakan  penelitian,  dengan  melakukan  perancangan  prototype  tampilan antarmuka  pengguna  terlebih  dahulu  pada  web  kamardagang.com  tentunya  dengan  memanfaatkan kelebihan  dari Flat  Design diharapkan  akan  memudahkan  para front  end  programmer untuk membangun suatu tampilan antarmuka aplikasi web yang sebenarnya dengan mengaplikasikan desain prototype yang  telah  dibuat.  Di  dalam paper ini  telah  dirancang Prototype Tampilan  Antarmuka Pengguna  Aplikasi  Web  Kamardagang.com  dengan  teknik Flat  Design pada  PT.  Selaras  Utama Internasional.
Kata Kunci: flat design, user interface, website

## ABSTRACT
Despite the growth of e-commerce in Indonesia is quite fast, but not all of the user interface of web applications  of  e-commerce  in  Indonesia  has  the  characteristics  of  user  friendly.  In  fact,  every  user will expect to see the user interface with a satisfying user experience category, especially in the field of e-commerce. One of the e-commerce web that its user interface is simple and user friendly yet meet the criteria is kamardagang.com. The site is owned by PT. Selaras Utama Internasional, the place for author in conducting research, by designing the prototype of user interface kamardagang.com on the website, of  course,  by  using  the  advantages  of the  Flat  Design is expected to facilitate the front  end programmer  to  build  a  real  web  application  interface  by  applying  the  prototype  design  has  been created.  In  this  paper  has  been  designed  User  Interface  Prototype  of  Kamardagang.com  Web Applications with Flat Design technique at PT. Selaras Utama Internasional.
Keywords: flat design, antarmuka pengguna, situs web
148-157 ISSN 1979 - 1960

## I. PENDAHULUAN
Nilai  estetika  atau  keindahan  menjadi hal  utama  yang  dapat  menunjang  suatu  hasil karya  sehingga  dapat  dinikmati  oleh  mata, jiwa,  perasaan,  maupun  dengan  telinga. Keindahan  sangat  berkaitan  erat  dengan segala  sesuatu  yang  mencakup  kesatuan ( unity ), keselarasan
( harmony ),
kesetangkupan  ( symmetry ),  keseimbangan ( balance ),  dan  perlawanan  ( contrast )  [5].
Segala  sesuatu  di  alam  semesta  ini  memiliki nilai  estetika  atau  nilai  keindahan  tersendiri, seperti  langit,  bumi  dan  seluruh  isinya  yang merupakan  keindahan  dari  hasil  karya  seni Maha  Suci  Allah  SWT.  Manusia  juga  turut menerapkan  ilmu  dalam  bidang  seni  yang diturunkan dari para leluhurnya, contoh yang paling umum seperti memahat, mengukir dan melukis.  Sedangkan  pada era  modern  seperti sekarang ini dikenal istilah desain grafis yang difungsikan sebagai media untuk menyalurkan  kreatifitas  dalam  bidang  seni dengan memanfaatkan teknologi komputer.
Perkembangan teknologi di era globalisasi  seperti  sekarang  ini  semakin pesat,  terutama  perkembangan  teknologi  di bidang  media  informasi  salah  satunya  yaitu internet dimana peran internet menjadi sangat penting  dalam  kehidupan  sehari-hari  dan menjadi  salah  satu  media  informasi  yang paling banyak digunakan.
Gambar 1. Grafik Pengguna Internet di Indonesia (Sumber: [3])
Merujuk  pada  grafik  yang  disajikan oleh  APJII  (Asosiasi  Penyelenggara  Jasa Internet  Indonesia),  penggunaan  teknologi internet di Indonesia mulai tumbuh semenjak tahun 1998. Di tahun 1998 pengguna internet
di Indonesia hanya berjumlah 0.5 juta orang. Kemudian  tumbuh  pesat  hingga  menyentuh angka  55  juta  pengguna  di  tahun  2011  dan 139  juta  pengguna  di  tahun  2015  [3]. Pertumbuhan  angka  penggunaan  teknologi internet yang pesat ini memacu pertumbuhan web  di  Indonesia  terutama  pada  bidang e- commerce yang dimanfaatkan untuk memasarkan  berbagai  macam  produk  baik barang  maupun jasa.  Data dari lembaga  riset ICD  memprediksi  bahwa  pasar e-commerce di  Indonesia  akan  tumbuh  42%  dari  tahun 2012-2015.  Angka  ini  lebih  tinggi  jika dibandingkan  negara  lain  seperti  Malaysia (14%),  Thailand  (22%),  dan  Filipina  (28%) [7]. Meskipun pertumbuhan e-commerce di Indonesia terbilang pesat namun tidak semua tampilan  antarmuka  pengguna  aplikasi  web e-commerce di Indoensia memiliki karakteristik  yang user  friendly .  Padahal setiap user tentu  mengharapkan  tampilan antarmuka  pengguna  dengan  kategori user experience yang  memuaskan terutama dalam bidang e-commerce .  Pendapat  ini  tentunya diperkuat  dengan  data  yang  dikemukakan oleh  Google  melalui  riset  mereka  yaitu sebanyak 67% pengguna internet kemungkinan  akan  melakukan  transaksi  jika website yang mereka kunjungi adalah website bertampilan user  friendly .  Sebaliknya,  61% pengguna akan meninggalkan website dengan desain  yang  tidak user  friendly (Google, 2014),  dengan  bantuan  teknologi  komputer yang biasa difungsikan sebagai media desain grafis Flat  Design dapat  dijadikan  alternatif untuk  diterapkan  pada  tampilan  antarmuka pengguna  aplikasi  web  agar  memiliki karakteristik user  friendly . Flat  Design dinilai simple dan minimalis sehingga mudah untuk  menemukan  maksud  dari  desain  yang diberikan [9].
Salah  satu  web e-commerce yang tampilan  antarmuka  penggunanya  masih dibuat  sederhana  dan  belum  memenuhi kriteria user friendly yaitu kamardagang.com. Web  tersebut  milik  PT.  Selaras  Utama Internasional  yang  menjadi  tempat  bagi penulis  dalam  melaksanakan  penelitian, dengan  melakukan  perancangan  prototype tampilan antarmuka pengguna terlebih dahulu pada web kamardagang.com tentunya dengan  memanfaatkan  kelebihan  dari Flat
ISSN 1979 - 1960
Design diharapkan  akan  memudahkan  para front  end  programmer untuk  membangun suatu  tampilan  antarmuka  aplikasi  web  yang sebenarnya  dengan  mengaplikasikan  desain prototype yang telah dibuat. Tujuan
penulisan paper ini  adalah  merancang
Prototype Tampilan  Antarmuka  Pengguna Aplikasi  Web  Kamardagang.com  dengan Teknik Flat  Design pada  PT.  Selaras  Utama Internasional.

## II. TINJAUAN PUSTAKA 2.1.  Aplikasi Web
2.1.1.  Definisi Aplikasi Web
Menurut  [10]  aplikasi  web  adalah sebuah  sistem  informasi  yang  mendukung interaksi pengguna melalui antarmuka berbasis  web.  Fitur-fitur  aplikasi  web biasanya berupa data persistence, mendukung transaksi  dan  komposisi  halaman  web dinamis yang dapat dipertimbangkan hibridisasi,  antara  hipermedia  dan  sistem informasi.  Menurut  [4],  aplikasi  web  adalah aplikasi yang mempunyai arsitektur three-tier yang  dijalankan  pada browser sebagai front end .  Menurut  [3],  aplikasi  web  atau  yang biasa  disebut web  application ialah  suatu website yang  membuat  pengguna  dapat mengakses  internet  melalui software dari berbagai komputer atau device yang terkoneksi dengan internet.
Berdasarkan  ketiga  pendapat  tersebut, dapat  diambil  kesimpulan  bahwa  aplikasi web adalah sistem informasi yang mendukung interaksi pengguna yang
dijalankan  pada browser sebagai  front  end dimana penggunanya dapat mengakses internet  melalui software dari  berbagai komputer atau device yang terkoneksi dengan internet.

## 2.1.2.  Karakteristik Aplikasi Web
Aplikasi  Web  memiliki  karakteristik- karakteristik sebagai berikut [10]:
1. Aplikasi  Web  akan  secara  konstan meningkat dan informasi yang dimasukan  ke  dalam  dan  disajikan  oleh situs  Web  juga  akan  berubah.  Tidak seperti  perangkat  lunak  konvensional yang  melalui  perencanaan  dan  revisi terpisah  pada  waktu  tertentu  di  dalam siklus  hidupnya,  aplikasi  Web  secara terus menerus meningkat dalam kaitannya  dengan  kemampuan  dan ketidakstabilan kebutuhan.
2. Aplikasi  Web  tidak  terpisahkan  dari perangkat  lunak.  Konten  yang  dapat mencakup  teks,  grafis,  citra,  audio, dan/atau  video  terintegrasi  dengan pengolahan prosedural.
3. Aplikasi Web bertujuan untuk digunakan  secara  luas  oleh  komunitas pengguna yang variable, dengan sejumlah  besar  pengguna  anonim  (bisa menjadi  jutaan,  seperti  kasus  eBay  dan 2000 Sydney Olympics Website ) dengan berbagai kebutuhan, harapan, dan sekumpulan keahlian.
4. Saat  ini,  kebanyakan  sistem  berbasis Web  adalah content-driven ( database -
driven).  Pengembangan  sistem  berbasis Web meliputi penciptaan dan manajemen  dari  konten,  seperti  halnya ketentuan  yang  sesuai  untuk  penciptaan konten dan pemeliharaan.
5. Secara umum, kebanyakan sistem berbasis Web menuntut “ look and feel ”, menyokong kreativitas visual, dan inkorporasi multimedia dalam presentasi dan antarmuka.
6. Aplikasi Web mempunyai jadwal pengembangan  yang  dipadatkan  dan tekanan waktu yang padat.
7. Pencabangan kegagalan atau ketidakpuasan  pengguna  dari  aplikasi berbasis  Web  sering  lebih  buruk daripada sistem IT konvensional.
8. Media  pengiriman  untuk  aplikasi  Web sangat  berbeda  dengan  perangkat  lunak tradisional. Aplikasi Web harus mengatasi berbagai format dan perangkat  tampilan,  dan  mendukung perangkat  keras,  perangkat  lunak,  dan jaringan  dengan  kecepaan  akses  yang beragam.
9. Keamanan  dan  privasi  pada  sistem berbasis Web lebih dituntut
dibandingkan  dengan  yang  ada  pada perangkat lunak tradisional.
10. Web  menunjukan  suatu  ikatan  yang lebih besar antara seni dan ilmu daripada yang  secara  umum  ditemui  dalam pengembangan perangkat lunak.
ISSN 1979 - 1960

## 2.1.3.  Jenis Aplikasi Web
Ada  tiga  aplikasi  Web  yang  utama, yaitu [10]:
1. Pelanggan  berhadapan  dengan  aplikasi yang  dikenal  sebagai  situs e-commerce atau  B2C  yang  menggunakan  internet. Para  pelanggan  biasanya  dapat  memilih produk  atau  jasa  yang  dibeli  dengan menggunakan  kartu  belanja  ( shopping card )  dan  metode  pembayaran  ( Payment
Methods ). Contohnya adalah www.amazon.com dan www.ebay.com. 2. Pegawai berhadapan dengan aplikasi yang menggunakan intranet didalam perusahaan.  Salah  satu  contohnya  adalah aplikasi laporan akuntansi perusahaan.
3. Aplikasi yang berhadapan dengan pelanggan-penyalur  dikenal  sebagai  situs B2B (Bisnis ke Bisnis) dan menggunakan Ekstranet,  perluasan  dari  Intranet  yang mengizinkan perusahaan di sisi luar untuk bekerja  di  dalam  ruang  yang  terlindungi kata sandi.

## 2.1.4.  Arsitektur Aplikasi Web
Ada  dua  komponen  dasar  di  dalam arsitektur Web, yaitu browser Web dan server Web.  Browser  Web  menawarkan  antarmuka grafis  untuk  pengguna  dan  bertanggung  jawab untuk  komunikasi  dengan server Web  dengan penjelasan sebagai berikut [10]:
1. Pengguna  meminta  suatu  layanan  dengan mengklik  tautan  ( link )  atau  dengan mengetikan sebuah perintah dengan keyboard . Browser  Web menangkap perintah  tersebut  dan  menerjemahkannya ke dalam permintaan HTTP.
2. Browser kemudian
meneruskan permintaan  yang  baru  saja  diciptakan kepada server Web  dari  penyedia  konten. Ketika server menerima sebuah permintaan,  permintaan  tersebut  akan diproses.
3. Ketika pemrosesan dilakukan, server Web kemudian  mengirimkan  kembali  respon tersebut ke browser .
4. Ketika browser menerima respon tersebut, browser menerjemahkannya  ke  dalam bentuk yang dapat dibaca oleh manusia.
2.2. Kamardagang.com Menurut Baskoro  selaku Project Manager di  PT.  Selaras  Utama  Internasional,
kamardagang.com  merupakan  produk  PT. Selaras  Utama  Internasional  yang  sedang dikembangkan  dalam  beberapa  bulan  terakhir, di  mana  produk  tersebut  merupakan  sebuah aplikasi  yang  menyediakan  ruang  untuk  para pebisnis  dalam  mengelola  informasi  dan jaringan  bisnisnya  secara online .  Tujuan  dari kamardagang.com yaitu memberikan
kemudahan  bagi  para  pengusaha  untuk menjalankan  kegiatan  bisnis  dalam  bentuk e- commerce B2B  ( Business  to  Business )  guna mendorong  peningkatan  kerjasama  bisnis  di antara para pengusaha. Kamardagang dibangun dalam aplikasi berbasis web dan mobile .
2.3.

## Flat Design

## 2.3.1. Definisi Flat Design
Flat  Design adalah desain  dengan pendekatan minimalis  yang menekankan kegunaan, dengan desain yang bersih tanpa ada bevel,  bayangan,  tekstur,  berfokus  pada tipografi,  warna-warna  cerah  dan  ilustrasi  dua dimensi [8].
Menurut  [2], flat  design adalah  genre (aliran)  desain  UI  minimalis,  atau  bahasa desain  yang  sedang  banyak  digunakan  oleh user  interface grapher (seperti website dan web  apps). Flat  design mengacu  kepada style desain interface yang  menghilangkan  pilihan stylistic yang  memberikan  ilusi  3  dimensional (seperti drop  shadow , gradient , texture ,  dan depth ) dan fokus terhadap penggunaan elemen minimalis,  seperti  tipografi  dan flat  colors (warna datar).
Menurut  [1], flat  design adalah implementasi dari gaya minimalis dan mengaitkannya  dengan The  Swiss  Style yang terkenal  pada  tahun  1940-an  sampai  1950-an. Dari  ketiga  pendapat  tokoh  di  atas  dapat disimpulkan flat  design adalah  desain  dengan pendekatan  minimalis  yang  mengacu  pada penggunaan elemen minimalis, seperti tipografi dan flat colors (warna datar).

## 2.3.2. Karakteristik Flat Design
Berikut  adalah  karakteristik  dari flat design [2]:
1. Warna:  Dari  segi  warna flat  design menghindari  penggunaan  warna  yang bermacam-macam.  Mengkombinasikan  1-3 warna yang cenderung cerah dan solid.
2. Tanpa  Efek:  Setiap  bentuk  yang  di  buat untuk membentuk susunan layout web tidak menggunakan efek seperti gradasi, emboss, dan efek 3D.
ISSN 1979 - 1960
3. Elemen  Sederhana:  Seperti  bentuk  kotak, lingkaran, yang di susun rata berpola.
4. Pemilihan Font : Font yang  digunakan cenderung  sederhana  dan  seragam.  Tidak menggunakan banyak kombinasi jenis font .
5. Minimalis:  Hindari  membuat  desain  yang terkesan realistis.

## III. METODE PENELITIAN 3.1. Gambaran Umum Perancangan
Tampilan  antarmuka  aplikasi  web kamardagang.com  terdiri  dari  beberapa  menu yang  dapat  diakses  oleh user ,  diantaranya: menu Sign  Up,  Sign  In,  Download,  Contact, Language,  Search,  Add  New  Business ,  dan Sign  Out .  Menu Sign  Up digunakan  untuk menjadi user dengan  status  member  dari  web kamardagang.com  dengan  mengisikan  form yang telah disediakan
di web kamardagang.com.  Menu Sign  In digunakan oleh user yang  sudah  berstatus member agar dapat  mengakses  semua  menu user di  web kamardagang.com. Menu Download
menampilkan pop  up untuk  mengunduh aplikasi kamardagang.com versi mobile . Menu Contact  menampilkan pop  up beberapa  media sosial  dan email kamardagang.com.  Menu Language  memberikan  bantuan  pengaturan bahasa  pada  aplikasi  web  kamardagang.com dimana  tersedia  dua  bahasa  yaitu  Indonesia dan  Inggris.  Hasil  pencarian  dari Search yaitu menampilkan  portofolio  singkat  dari  banyak perusahaan  dimana  dari  tiap  perusahaan tersebut  memiliki  jenis  produk  bisnisnya tersendiri.  Adapun  menu  A dd  New  Business hanya  dapat  diakses  apabila user sudah melakukan Sign In , halaman tersebut berfungsi untuk  menampilkan  bisnis  yang  diinput user pada halaman hasil pencarian dari Search yaitu Search Result Page .

## 3.2. Tujuan Perancangan
Perancangan prototype untuk tampilan antarmuka  aplikasi  web  kamardagang.com ditujukan  untuk  memudahkan  para front  end programmer dalam  membangun  tampilan atarmuka  aplikasi  web  kamardagang.com dimana  nantinya front  end  programmer hanya perlu  menerapkan  desain prototype yang  telah dibuat  pada  aplikasi  web  kamardagang.com. Sesuai  dengan  tugas front  end  programmer yaitu membangun tampilan antarmuka aplikasi yang  dapat  dikategorikan user  friendly agar user mudah  mendapatkan  informasi  yang dibutuhkan, tool-tips yang informatif, dan slide
banner promosi  yang  efektif  karena  front  end programmer  bekerja  bukan  dengan  tuntutan supaya  web  terlihat  bagus  dan  artistik  secara visual  melainkan  lebih  ke  sisi  fungsionalnya oleh  sebab  itu  dibutuhkan  gambaran  konten website untuk  memudahkan  para  front  end programmer dalam proses building.

## 3.3. Syarat-syarat Perancangan
Kelengkapan  yang  digunakan  untuk perancangan prototype tampilan  antarmuka aplikasi  web  kamardagang.com  yaitu  sebagai berikut:
Software : a. Windows 8 b. Adobe Photoshop CS6 c. CorelDRAW X7 d. Google Chrome Hardware a. Laptop Asus tipe A45CB b. RAM 4 GB c. Processor Intel Core i3-3217U, 1.80 GHz d. Graphics NVDIA GT 740M

## IV. HASIL DAN PEMBAHASAN
4 .1. Perancangan  Prototype  Tampilan
Antarmuka Pengguna
Penulis yang berperan sebagai designer  membuat  logo  dan  menentukan  gaya desain  dari  tampilan  antarmuka  aplikasi  web kamardagang.com  dimana  logo  dan  tampilan antarmuka  yang  dibuat  lebih  condong  ke  arah Flat  Design dengan  padanan  beberapa  warna yang  cerah  serta  pengaplikasian  beberapa bentuk  objek  solid  seperti  persegi  dan lingkaran.  Setelah  menentukan  gaya  desain, penulis  membuat  model-model  konten  yang diatur  tata  letaknya.  Model-model  konten tersebut dibuat dengan menggunakan
CorelDRAW X7. Selanjutnya dilakukan pengukuran  porsi  ukuran  model.  Yang terakhir, adalah pemberian warna dan cropping menggunakan Adobe Photoshop CS6.
Berikut  adalah  hasil  perancangan prototype tampilan  antarmuka  aplikasi  web kamardagang.com
1. Logo
Gambar 2. Prototype Logo Kamardagang.com
ISSN 1979 - 1960
Penulis  memilih  bentuk  lingkaran untuk  dasar  logo  dari  web  kamardagang.com karena  ligkaran  merupakan  elemen  yang sangat  populer  dalam  desain  logo.  Bentuk lingkaran  sangat  cocok  dengan  perusahaan yang  ingin  memberikan  kesan  yang  dinamis, rotasi, tidak terputus, tidak memiliki awal atau akhir, abadi, dan bersifat menjaga hal-hal yang ada  di  dalam  serta  menunjukkan  suatu komunitas. Tiga huruf yang terdapat pada logo kamardagang.com yaitu ‘Kdg’ yang merupakan  kependekan  dari  kamardagang. Penulis  menyesuaikan  dengan  permintaan  dari pemilik  produk  yang  menginginkan  logonya hanya  diwakilkan  dengan  tiga  huruf  yaitu ‘Kdg’  dan  dibuat  dengan  teknik  tipografi. Warna  biru  dan  putih  menjadi  padanan  warna untuk  logo  kamardagang.com.  Penulis  tidak mengaplikasikan  banyak  warna  pada  logo kamardagang  karena  penulis  menginginkan suatu logo yang simple dan mudah diingat.
2. Home
Gambar 3. Prototype Design 1 Home Kamardagang.com Penulis  membuat  tiga  desain  untuk  halaman Home dimana  untuk  desain  pertama  penulis mengaplikasikan  konten flat  desain yang sangat dominan dan objek-objek yang mengisi landing  page pada  halaman Home cukup mencirikan  tema business namun  objek-objek tersebut  terlalu  banyak  menggunakan  padanan warna sehingga kurang memiliki kesan mature untuk para B2B user .
Gambar 4. Prototype Design 2 Home Kamardagang.com Pada  desain  halaman Home yang  kedua, penulis  menghilangkan  objek-objek  yang mengisi landing  page .  Sesuai  fungsi  dari  web kamardagang.com  yaitu  untuk  menjalankan kegiatan business  to  business maka  penulis mengaplikasikan  sebuah  gambar  dengan  tema business yang  sangat  menonjol  pada landing page serta  menerapkan  sedikit  efek blur pada header sesuai  dengan  permintaan  dari  CEO kamardagang.com.
Gambar 5. Prototype Design 3 Home Kamardagang.com
Desain halaman Home yang ketiga merupakan desain  yang  diterapkan  sebagai interface sebenarnya pada aplikasi web kamardagang.com.  Penulis  mengganti header menjadi  bentuk  persegi  yang  memanjang karena  penerapan  efek blur membuat header keluar  dari  karakteristik flat  design, karena pada dasarnya flat design hanya mengaplikasikan  objek  dan  warna  yang  solid. Fungsi  halaman Home dapat  diakses  dengan meng-klik gambar logo kamardagang di pojok kiri.
3. Header
Gambar 6. Prototype Header
Kamardagang.com
Bagian header dibuat  memanjang  penuh kesamping  seperti  tampilan header web  pada umumnya.  Warna  biru  dipilih  menjadi  warna dasar  pada header dengan  warna font putih agar  selaras  dengan  warna  logo  dari  web kamardagang.com.
4. Search Box
Gambar 7. Prototype Search Box Kamardagang.com
ISSN 1979 - 1960
Search box sengaja penulis buat dengan ukuran besar yang diposisikan di tengah gambar dasar dari landing  page . Search  button pada search box penulis buat terkesan minimalis agar lebih menguatkan karakteristik dari flat design .

## 5. Sign Up
Gambar 8. Prototype Halaman Sign Up Kamardagang.com
Logo  kamardagang.com  yang  terdapat  pada form Sign Up penulis buat terkesan transparent dengan  memanfaatkan  permainan opacity .  Penulis  mengaplikasikan  warna  biru donker sebagai warna dasar pada halaman Sign Up karena  penulis  ingin  membuat  ciri  khas pada  halaman-halaman  yang  difungsikan sebagai input data  dari user .  Warna  biru  yang menjadi ciri khas web kamardagang.com tidak dihilangkan tetapi hanya diaplikasikan sedikit.
6. Sign In
Gambar 9. Prototype Halaman Sign In Kamardagang.com
Desain  dari  form Sign  In tidak  berbeda  dari form Sign Up yang membedakan hanya konten yang perlu diisi oleh user .
7. Download
Gambar 10. Prototype Download
Kamardagang.com
Menampilkan pop  up yang  berfungsi  untuk men- download aplikasi kamardagang.com untuk android  mobile .  Warna  dasar pop  up lebih  dominan  ke  warna  putih  dengan  sedikit padanan  warna  biru  dengan  menggunakan shape persegi  panjang  dan  lingkaran  untuk close  button . Shape dengan  bentuk  sederhana dipilih  karena  sesuai  dengan  karakteristik  dari flat  design . Landing  page tetap  ditampilkan namun dengan tambahan tools  opacity sehingga terkesan transparan.
8. Contact
Gambar 11. Prototype Contact
Kamardagang.com
Menampilkan pop  up yang  berfungsi  untuk melihat email dan media social seperti twitter, facebook,
dan instagram dari
kamardagang.com.  Warna  dasar pop  up lebih dominan  ke  warna  putih  dengan  sedikit padanan  warna  biru  dengan  menggunakan shape yang  persegi  panjang  dan  lingkaran untuk close  button . Shape dengan  bentuk sederhana  dipilih  karena  sesuai  dengan karakteristik  dari flat  design . Landing  page tetap  ditampilkan  namun  dengan  tambahan tools opacity sehingga terkesan transparan.
148-157 ISSN 1979 - 1960
9. Language
Gambar 12. Prototype Language
Kamardagang.com
Menampilkan pop up yang difungsikan
untuk pengaturan bahasa pada web kamardagang.com. Terdapat dua pilihan bahasa  yaitu  Indonesia  dan  Inggris.  Warna dasar pop  up yaitu  putih  dengan  ciri  khas warna  biru  dari  kamardagang.com  untuk font - nya. Landing  page tetap  ditampilkan  namun dengan  tambahan tools  opacity sehingga terkesan transparan. 10. Search Results Page
Gambar 13. Prototype Design 1 Search Results Page Kamardagang.com
Search Results Page merupakan
tampilan  hasil  dari  pencarian  melalui search box yang  menampilkan portofolio singkat  dari banyak perusahaan dan masing-masing produknya yang disuguhkan dalam bentuk list . Search  Results  Page dilengkapi  dengan tools filter dan sort  by yang  difungsikan  untuk mempermudah  pencarian.  Penulis  membuat dua desain untuk halaman Search Results Page dimana  pada  desain  pertama  terdapat list portofolio  dengan bar  terpisah dan  padanan warna  yang  sedikit  berbeda  dari  tiap bar yang menurut pendapat dari CEO kamardagang.com
tampilan bar secara  terpisah  sangat  jarang diterapkan  pada  aplikasi  web  sehingga  desain tersebut  lebih  cocok  untuk  diterapkan  pada aplikasi mobile dan  pengaplikasian  macam- macam warna pada tiap bar akan memberikan efek  kontras  pada  konten  logo  atau  gambar dari  tiap  perusahaan,  mengingat  logo  atau gambar  dari  tiap  perusahaan  memliki  padanan warna yang bermacam-macam.
Gambar 14. Prototype Design 2 Search Results Page Kamardagang.com
Penulis mengganti tampilan list dengan bar terpisah  menjadi  tampilan list yang memuat  berbagai  macam  portofolio  dari  tiap perusahaan  dalam  satu bar sekaligus,  untuk segi  warna  didominasi  oleh  warna  dasar  putih agar  terkesan  netral  dan  dapat  memberikan tekanan  pada  warna-warna  lainnya  terutama pada  logo  atau  gambar  produk  dari  tiap perusahaan.
11. Add New Business
ISSN 1979 - 1960
Gambar 15. Prototype Add New Business
Kamardagang.com
Halaman  ini  merupakan  halaman  yang  hanya dapat diakses oleh user yang sudah melakukan Sign  Up .  Sama  seperti  halaman Sign  In dan Sign  Up penulis  mengaplikasikan  warna  ciri khas untuk halaman input data oleh user yaitu biru donker.
12. Form Add New Business
Gambar 16. Prototype Form Add New Business Kamardagang.com
Halaman  ini  merupakan  halaman  lanjutan  dari halaman  sebelumnya  yang  difungsikan  untuk melakukan submit produk  yang  nantinya  akan ditampilan  di  halaman Search  Result  Page . Sama  seperti  halaman  sebelumnya,  karena halaman ini merupakan halaman yang difungsikan untuk input data user maka penulis mengaplikasikan  warna  dasar  biru  donker namun  tetap  dengan  padanan  warna  biru  yang mencirikan web kamardagang.com.

## V. KESIMPULAN

## 4.1. Kesimpulan
Dari  hasil  analisa  dan  pembahasan yang  telah  penulis  uraikan  di  atas,  dapat disimpulkan  bahwa Prototype Tampilan Antarmuka Aplikasi Web Kamrdagang.com  mempermudah  tugas front  end programmer dalam  membangun aplikasi web kamardagang.com agar tampilan  antarmuka  web  lebih  terstruktur dan tidak menyimpang dari tujuan awal.
4.2. Saran
1. Pengembangan  lebih  lanjut  dapat dilakukan  untuk  hasil  yang  lebih  baik, oleh  karena  itu  penulis  menyarankan beberapa hal yaitu sebagai berikut:
2. Rancangan tampilan
antarmuka pengguna  cakupannya  dapat  diperluas untuk keseluruhan aplikasi web
kamardagang.com untuk bisa mengatur keselarasan tampilan;
3. Rancangan  tampilan  tidak  hanya  sebatas gambaran  grafis  saja  tetapi  sudah  bisa diimplementasikan  dalam  aplikasi,  seperti penggunaan CSS dan javascript.

## DAFTAR PUSTAKA
[1] Anindita, M. Riyanti, MT. 2016 Tren Flat
Design dalam Desain Komunikasi Visual. Jurnal Dimensi DKV, Vol. 1-No. 1. April 2016 [2] Argiacyber.  2013.  Karakteristik Flat Design . http://argiacyber.blogdetik.com/2013/12/0 4/karakteristik-flat-desain. [3] Asosiasi  Penyelenggara  Jasa  Internet Indonesia  (APJII).  Grafik  Pengguna Internet di Indonesia. http://www.apjii.or.id/v2/index.php/read/p age/halaman-data/9/statistik.html (Diakses
5 Desember 2016 pukul 14.17 WIB).
[4] Chan,  VN.  2012Aplikasi  Berbasis  Web untuk  Pengendali  Pengiriman  Gas  PT Surya  Biru  Murni  Acetylene  Balikpapan. TesisUPN “Veteran” Yogyakarta
[5] Irawan,  B.  2013.  Dasar-dasar  Desain. Bogor: Griya Kreasi.
[6] Irwansyah, E.  Moniaga, JV. 2014 Pengantar Teknologi Informasi. Yogyakarta: deePublish.
[7] Mahatma, R. 2016. Data Statistik Mengenai  Pertumbuhan  Pangsa  Pasar  E- Commerce di Indonesia Saat Ini. https://buattokoonline.id/data-statistik- mengenai-pertumbuhan-pangsa-pasar-e- commerce-di-indonesia-saat-ini/
[8] Editorial  Team.  2014.  Apa  itu  Flat Design. http://www.pindexain.com/apa- itu-flat-design/
[9] Pratas,  Antonio.  2014.  Creating Flat Design Website s. Birmingham: Packt.
[10] Simarmata,  Janner.  2012. Rekayasa  Web. Yogyakarta: ANDI.
Syifa Fauzia: Perancangan Prototype … 148-157 ISSN 1979 - 1960