IMPLEMENTASI DESAIN WEBSITE RESPONSIVE SEBAGAI MEDIA PROMOSI PADA POPI CAFE PONDOK PINANG
Andi Sumange Rukka,  Mohamad Salman Alfarisi Manajemen Informatika, Fakultas Teknologi Informasi, Universitas Budi Luhur Jl. Raya Ciledug, Petukangan Utara, Kebayoran Lama, Jakarta Selatan 12260 E-mail: septiannurdiyanto10@gmail.com , mohamad.salman.alfarisi@gmail.com

## Abstrak
Pada masa kini medi berupa website pada suatu perusahaan itu sangat penting karena dapat memberikan citra positif kepada client serta dapat digunakan untuk mempermudah kegiatan promosi pada Popi Cafe.  Oleh karena itu penulis melakukan riset dengan judul Implementasi Desain Website Responsive Sebagai Media Promosi pada Popi  Cafe Pondok  Pinang, Popi  Cafe adalah perusahaan yang bergerak di  bidang  kuliner. Dalam laporan ini penulis  akan  menyusun  langkah  –  langkah  yang  bertujuan  untuk  pembuatan  tampilan  Website  responsive  , statyonary design dan merchandise sebagai penerapan di bidang Popi Cafe. Hasil dari penulisan laporan ini yaitu berupa  tampilan  dan  penerapan    Website  responsive  serta  desain  stationary  dan  merchandise  sebagai  media promosi pada Popi Café..
Kata kunci: Website, Advertising, Responsive, Desain

## 1. PENDAHULUAN
1.1 Latar Belakang
Teknologi  Informasi  masa  kini  yang    semakin pesat  menimbulkan  berbagai  macam  aspek  kegiatan yang  dapat  dilakukan.  Salah  satunya  adalah  aspek promosi.  Untuk  memudahkan  para customer untuk mengeahui produk maupun jasa yang disediakan oleh Popi Cafe .
Saat  ini  untuk  mencari  dan  mendapatkan informasi  di  internet  ,kita  dapat  melakukannya dengan  mengunjungi  suatu Website . Website merupakan  salah  satu  halaman  informasi  pada internet yang berupa Hypertext .Website mengandung isi yang beraneka ragam, suara, gambar, grafik, teks dari berbagai sumber dan melalui Website kita dapat mempromosikan  suatu  produk,  misalkan  pada  Popi Cafe . Saat  ini,  Popi Cafe belum  memiliki Website tersendiri  dalam  mempromosikan  produk  mereka, meraka  hanya  melakukannya  melalui  beberapa Website layanan wisata, Oleh karena itu, saya selaku penulis  berencana  untuk  membuat  sebuah  tampilan berupa Responsive W ebsite pada  Popi Cafe dengan judul  “Implementasi  Desain  Website  Interaktif Sebagai  Media  Promosi  Pada  Popi  Cafe  Pondok Pinang”

## 1.2 Rumusan Masalah
Berdasarkan latar belakang di atas, ada beberapa rumusan masalah pada Popi Cafe , sebagai berikut:
1. Tidak  adanya  penggunaan  W ebsite sebagai media pemasaran
produk untuk memperkenalkan Popi Café pada para calon pelanggan.
2. Belum  adanya  penggunaan multimedia interaktif berupa website pada Popi Café.

## 1.3 Tujuan Riset dan Penulisan
Tujuan  dari  riset  penulisan  yang  telah  penulis lakukan, yaitu:
1. Sebagai  hasil  laporan  tugas  akhir  dalam membuat  media  promosi  baru  berupa tampilan responsive website. .
2. Sebagai bentuk latihan dari ilmu yang telah dipelajari selama penulis menuntut ilmu.
3. Sebagai syarat untuk menuntaskan pendidikan  Diploma  3  Universitas  Budi Luhur.

## 1.4 Ruang Lingkup / Batasan Masalah
Pada jurnal ini penulis membuat media promosi berupa responsive  website dengan  batasan  masalah sebagai berikut :
1. Riset ini hanya mengembangkan UI website untuk  digunakan  Popi  Café  sebagai  media promosi.
2. Stationary yang dibuat berupa  brosur menu sebagai  penunjang  operasional  kafe.  Serta merchandise berupa mug (gelas)  sebagai merchandise untuk  ditempatkan  di front desk .

## 1.5 Metode Penelitian
Beberapa  metode  yang  digunakan  penulis ddlam  penulisan  laporan  tugas  akhir  ini,  seperti Wawancara ( Interview ) secara langsung dengan Para “Popi Café  Family”, Pengamatan  Langsung  ( Observasi ), ), studi pustaka ( Library Study ), analisa, implementasi serta saran dalam kegiatan penyusunan laporan tugas akhir.

## 1.6 Sistematika Penulisan
Dalam  penulisan  Jurnal  ini  penulis  meyajikan dengan membagi tema kedalam 5 bab disertakan sub bab,  dimana  tiap-tiap  bab    memiliki  kategori pembahasan tersendiri.

## 2.  LANDASAN TEORI
2.1 Internet
Internet adalah jaringan  yang  saling  terhubung satu sama lain. Didalam jaringan internet menyimpan file,  seperti  halaman web ,  yang  dapat  diakses  oleh seluruh jaringan komputer.[1]
2.2 Website
Website sebagai suatu ruang informasi didalam internet , yang mencangkup segala macam informasi baik yang bersifat Positif maupun Negatif. Informasi tersebut  dapat  diakses  dari  berbagai  penjuru  dunia, dimanapun  serta  kapanpun,  selama  terkoneksi  oleh internet .[2]
2.3 Web Browser
Web browser adalah software yang   berfungsi untuk    mengakses    dan    melihat    halaman web atau mengakses program web 2.0 di internet.[3]
2 . 4 URL ( Uniform Resource Locator ) URL adalah alamat  sebuah file yang  dapat diakses di internet ,berisi nama protocol internet yang dibutuhkan  untuk  mengakses file, nama  computer yang  berisi file tersebut,  dan  direktori  dimana file tersebut berada. Secara umum, URL dibagi menjadi 3 ( tiga ) bagian. Bagian pertama menunjukan protocol yang  dipakai  seperti http:// atau https://. Bagian kedua menunjukan alamat host seperti www.yahoo.com. Bagian  ketiga  menunjukan path direktori file. Yaitu  tempat  dimana file yang  ingin diakses disimpan di server. [4]
2.6 HTML ( Hypertext Markup Language )
Hypertext  Marup  Language (HTML)  adalah bahasa  standar  yang  banyak  halaman Web gunakan untuk  menentukan  struktur  pada  halaman website. Web  itu  sendiri  tidak  peduli  terhadap  data  yang ditransfer,  tetapi  semua  browser  terkini  dapat  me- render HTML  menjadi  bentuk  halaman  yang  bisa dibaca pada layar anda.[5]

## 2.7 Responsive Web Design
Responsive  Web  Design adalah  sebuah  strategi untuk  membuat setting -an layout khusus  untuk tampilan  halaman  Website pada beberapa perangkat berdasarkan  ukuran  layar  perangkat  tersebut. Tekniknya  yaitu  dengan  hanya  menyediakan  satu dokumen  html  yang  dapat  diterapkan  pada  semua jenis  perangkat,  tetapi  menerapkan  beberapa  baris syntax khusus  pada  sebuah  file  css,  yang  akan membuat  tampilan Website tersebut  menyesuaikan tampilannya  di  berbagai  jenis  perangkat  dengan ukuran  layar  yang  berbeda-beda.  Misalnya,  saat sebuah Website dilihat  pada browser  smartphone , conten t  pada Website tersebut  muncul  dengan tampilan satu, tetapi ketika Website yang sama dilihat pada browser  desktop atau  komputer  dengan  layar besar,  content  dalam Website tersebut  akan  muncul dengan tampilan 3 kolom.[6]

## 3. ANALISIS

## 3.1 Sejarah Organisasi
Diawali  dengan  hobi  sepasang  suami  istri dibidang  kuliner,  baik  itu  mencicip  maupun mengolah. Dimulailah  mendirikan  sebuah  mini kafe pada tahun 2016. Mini Cafe tersebut  bernama Popi Cafe ,  nama  yang  diambil  dari  nama  anak  mereka  , yang  berlokasi  di  Jl.Pondok  Pinang  Raya  No,  5B Kebayoran  Lama  Pondok  Pinang,  Jakarta  Selatan. Dan  selama  2  tahun  ini  Popi Cafe selalu mengembangkan  usahanya  dari  bidang  desain  kafe, menu, serta pelayanan  lainnya. Demi  membuat para pelanggan  merasa  nyaman  serta  tidak  pernah  bosan untuk berkunjung ke Popi Cafe .
Visi: Menjadikan Popi cafe sebagai coffee brand life style terdepan  di  Indonesia  dan  sebagai  wadah  untuk melayani jam-jam bersantai anda.
Misi : a. Menyediakan coffee dan menu yang berkualitas.
b. Menyediakan  tempat  yang  nyaman  untuk berkumpul dan bersantai.
c. Menempatkan pelanggan sebagai prioritas.
d. Memberikan  pelayanan  yang  prima  dan  unggul dalam penyajian.
e. Memotivasi pelanggan dengan cita rasa.

## 3.2 Adobe Muse CC
Adobe  Muse  CC merupakan software  adobe family yang berfokus pada desain website , kita bebas mendesain  tampilan website sesuai  yang  kita inginkan  tanpa perlu  repot melakukan coding -nya. Hanya  cukup  dengan Drag  and  Drop serta memanfaatkan tools yang  telah  disediakan  oleh Adobe  Muse.  Adobe  Muse dapat    membuat  dan mempublikasikan  website  secara Responsive pada tampilan  mode desktop maupun mobile .  Hal  ini
membuat  anda  sangat  bebas  dalam  men-desain tampilan website anda.

## 3.3 Rancangan Aplikasi Desain
a. Rancangan Layar
Gambar 1. Rancangan Layar Master Page
Gambar 2. Rancangan Layar Home Page
Gambar 3. Rancangan Layar Layanan Popi
Gambar 4. Rancangan Layar Menu Popi
Gambar 5. Rancangan Layar Tentang Popi
Gambar 6. Rancangan Layar Galeri Popi
Gambar 7. Rancangan Layar Online Booking Popi Gambar 8. Rancangan Stationary Flyer Menu ( Front )
Gambar 9. Rancangan Stationary Flyer Menu ( Back )
Gambar 10. Desain Marchandise Mug
Gambar 11. Desain Re-make Logo Popi Café
b. Flowchart
Gambar 12. Rancangan Layar Flowchart Home Page

## 4.    IMPLEMENTASI
Gambar 13. Implementasi Desain Home Page
Gambar 14. Implementasi Desain Layanan Popi Page
Gambar 15. Implementasi Desain Menu Popi Page
Gambar 16. Impelementasi Desain Tentang Popi Page
Gambar 25. Implementasi Desain Instagram Galeri Page
Gambar 17. Implementasi Desain Online Booking Page
Gambar 27. Implementasi Desain Stationary Flyer Menu
( Front )
Gambar 18. Implementasi Desain Stationary Flyer Menu
( Back )
Gambar 19. Implementasi Desain Marchandise Mug
Gambar 20. Implementasi Desain Re-make Logo Popi Cafe

## 5.    KESIMPULAN
Dari  jurnal  yang  penulis  buat  , Website begitu  pentingnya  sebagai  media  informasi sekaligus  promosi  serta  bermanfaat  untuk mempermudah calon pelanggan dalam mencari informasi mengenai Popi Cafe. Popi Café belum adanya Website dan  masih  menggunakan katalog serta promosi melalui beberapa Website wisata  ternama  untuk  memberi  informasi kepada pelanggan maupun calon pelanggan.
Pencarian sebuah konsep dalam pembuatan
Website sangatlah  penting,  agar  suatu  produk atau jasa yang kita ingin publish melalui Website dapat menjadi sebuah informasi yang
bermanfaat, jelas, dan informative serta  mudah diakses,  agar  mempermudah  calon  pelanggan untuk  lebih  mengetahui  Popi Café sebelum mereka  berkunjung.  Penulis  juga  menerapkan stationary berupa flyer menu yang akan berguna dalam  oprasional  Popi  Cafe.  Sedangkan  untuk merchandise dalam bentuk Mug (gelas) sebagai aksesoris  tambahan Front  Desk .  Jadi  dapat disimpulkan,  penerapan  desain Website ini dapat menjadi salah satu cara untuk meningkatkan media promosi serta memperlancar  oprasional pada Popi Café.

## 6.    DAFTAR PUSTAKA
[1] Simarmata, Janner. 2010. Rekayasa Web Edisi 1. Yogyakarta: Andi.
[2] J, Nielsen. 2010. Prioritizing Web Usability. Berkeley: New Rider .
[3] Shelly. 2011. Web Design With HTML &
CSS3 Introductory. Canada: Papercavalier .
[4 ] Suyanto. 2009. Pengantar Desain Web Untuk
Bisnis. Yogyakarta: Andi . [5] John. 1997. Menguasai Desain Web.Jakarta: PT Elex Media Komputindo .
[6 ] Robins, Jeniffer. 2012. Learning Web Design Fourth Edition. Canada: O’Reilly Media Inc .