## JURNAL ILMIAH KOMPUTER GRAFIS
, Vol.12, No.2, Desember 2018, pp. 1 - 12 p-ISSN : 1979-0414(print)
e-ISSN : 2621-6256 (online) http://jurnal.stekom.ac.id/index.php/pixel
 page 1
Received November 23, 2018; Revised November 29, 2018; Accepted Desember 12, 2018

## DESAIN SITUS WEB SEBAGAI MEDIA INFORMASI DAN PROMOSI PADA ESSY’S BROWNIES SEMARANG
A. H. B. Nurmana M. S. 1) ; Tri Adhi Wibowo 2)

## Progdi Desain Grafis STEKOM Semarang
Ayyub@stekom.ac.id ; triadhiwibowo@stekom.ac.id Jl. Majapahit 605, Semarang, telp/fax : 024-6717201-02

## ARTICLE  INFO
Article history:
Received 30 November 2018 Received in revised form 2 Desember 2018 Accepted 10Desember 2018
Available online 12Desember 2018

## ABSTRACT
Internet customers and users in Indonesia are expressed from year to year continues to grow. It can be seen from the graph that  is  processed  based  on  data  from  the  Indonesian Internet Service  Providers  Association  (APJII)  and  the  Central Statistics Agency (BPS), that internet customers and users are increasing  every  year.  The  usefulness  and  benefits  of  the website  include  making  it  easier  to  exchange  and  update information with other internet users, and to be able to obtain up-to-date information. A website is the work of individuals or individuals,  can  also  show  ownership  of  an  organization, company, and usually the website shows some special topics or specific interests.
Keywords: media, promotion, website,

## I. PENDAHULUAN
Essy’s  Brownies  yang  beralamatkan  di  Jl.  Karang  Rejo  Raya  No.  28A,  Banyumanik  Semarang Jawa  Tengah,  Indonesia  merupakan  sebuah  usaha  yang  bergerak  dibidang  perdagangan  yang  menjual beraneka macam kue brownies, aneka macam kue variasi, aneka macam permen, aneka produk – produk kesehatan  islami  dan  aneka  jajan  lainnya.  Kualitas  rasa  dari  produk  yang  dijual  Essy’s  Brownies  sudah tidak  diragukan  lagi.  Essy’s  Brownies  mempunyai  beberapa  agen  di  kota  Semarang  dan  Salatiga.  Di Semarang terdapat empat agen yang bertempat di Jl. Karang Rejo Raya No. 28A Banyumanik, Jl. Karang Rejo IV No. 38 Banyumanik, Ruko Bukit Emerald Utama Blok C-5 Meteseh, Jl. A.Yani No.1 Ungaran dan di Salatiga terdapat satu agen yang bertempat di Perum. Salatiga Permai Gg V No. 66 Blatongan. Selain itu Essy’s Brownies juga bekerjasama dengan seluruh swalayan ADA Semarang, dengan cara produk – produk Essy’s Brownies (kue brownies) juga dapat dibeli diseluruh swalayan ADA Semarang.
Akan tetapi media penyampaian informasi dan promosi yang digunakan Essy’s Brownies saat ini masih konvensional yaitu dengan menggunakan brosur, yang diberikan langsung kepada konsumen yang sudah melakukan transaksi pembelian produk dan penyebaran brosur hanya dilakukan di dalam toko saja sehingga jangkauanya  sangat  terbatas dan kurang dikenal oleh konsumen  khususnya  yang berada di luar kota. Dengan semakin berkembangnya dunia internet yang mampu menampung berjuta - juta informasi di dunia, untuk mempromosikan atau memasarkan produk tidak perlu bersusah payah. Semua dapat dilakukan dari belakang meja dan dengan koneksi internet, konsumen ataupun masyarakat dapat melihat contoh hasil atau produk dari sebuah situs web. Dengan adanya situs web, suatu perusahaan dapat menghemat waktu, tenaga  dan  konsumen  dapat  langsung berinteraksi  dengan  perusahaan.  Untuk  menjangkau  segmen  pasar yang lebih luas dalam memasarkan dan mempromosikan hasil atau produk unggulan Essy’s Brownies maka diperlukan situs web yang berisikan semua informasi mengenai Essy’s Brownies itu sendiri disertai dengan contoh atau gambar hasil produk yang dihasilkan.
Tidak  dapat  disangkal  bahwa  tampilan  sebuah  situs  web  yang  menarik  dan  mudah  untuk digunakan  akan  lebih  banyak  dikunjungi  orang.  Agar  tujuan  akhir  dari  situs  web  tersebut  dapat  tercapai yaitu  produk  dapat  dilirik  oleh  masyarakat  luas,  sebuah  kesan  pertama  yang  menarik  perhatian  waktu pertama kali membuka sebuah halaman situs web.
Beberapa  unsur  yang  mempengaruhi  keberhasilan  tersebut,  diantaranya:  mudah  digunakan, tampilan menarik, proses koneksi cepat, perpaduan warna sangat tepat, informasi yang lengkap, dan masih banyak  lagi  unsur  lain.  Semua  itu  bergantung  pada  respon  pengunjung/pengguna  terhadap  situs  web  itu sendiri. Saat ini situs web sudah menjadi salah satu bagian dari identitas sebuah institusi, sama pentingnya dengan alamat perusahaan. Situs web dapat dijadikan “guide” bagi pelanggan untuk mengetahui lebih jauh tentang profil sebuah institusi secara online (Slamet Riyanto, 2007).
Berdasarkan uraian permasalahan tersebut dan sekaligus mengatasi permasalahan tersebut penulis berinisiatif membuat desain situs web. Situs web ini diharapkan dapat berfungsi sebagai salah satu media penyampaian informasi dan promosi. Untuk itu penulis  membuat  skripsi dengan judul ”DESAIN SITUS WEB SEBAGAI MEDIA INFORMASI DAN PROMOSI PADA ESSY’S BROWNIES SEMARANG”.

## II. METODE PENGEMBANGAN
A. Sejarah Singkat Perusahaan Essy’s  Brownies  merupakan  usaha  yang  bergerak  dibidang  perdagangan  yang  menjual beraneka  macam  kue  brownies,  aneka  macam  kue  variasi,  aneka  macam  permen,  aneka  produk - produk  kesehatan  islami  dan  aneka  jajan  lainnya.  Usaha  ini  berlokasi  di  Jl.  Karang  Rejo  Raya  No. 28A Banyumanik Semarang,  Jawa Tengah. Essy’s Brownies berdiri pada tahun 1998 dan didirikan oleh Ny.Essy Hermawati. Penamaan Essy’s Brownies diambil dari nama depan Ny.Essy Hermawati yang sekaligus merupakan pemilik dari usaha ini. Bakat membuat kue brownies dan basic pada hobi membuat kue membuat sang pemilik memilih untuk berkarir dibidang ini. Selain itu keinginan untuk merubah image atau pandangan masyarakat yang selama ini masih memandang sebelah mata terhadap seni  membuat  aneka  macam  kue  membuat  Ny.Essy  Hermawati  terus  berkarya  dengan  mengikuti berbagai macam lomba ditingkat Kecamatan dan tingkat Kotamadya.
Berbagai  penghargaan  atas  prestasinya  membuktikan  kualitas  dan  profesionalismenya. Keikutsertaannya  dalam  berbagai  pameran  antara  lain:  lomba  kategori  PKK  mewakili  Kec. Banyumanik di Kotamadya Semarang tahun 2005 dan mendapatkan juara 1, Salatiga Expo di kawasan Pasar  Raya  II,  Salatiga  tahun  2007,  bazar  aneka  kue  menarik  di  Masjid  Agung  Jawa  Tengah, Semarang  tahun  2008,  Semarang  Expo  di  gedung  Lawang  Sewu,  Semarang  tahun  2009,  bazar pembukaan Cito cabang Banyumanik di Kec. Banyumanik, Semarang tahun 2009, membuat Essy’s Brownies semakin berkembang baik di Semarang, Jawa Tengah hingga merambah ke kota lain yaitu Salatiga.
Essy’s  Brownies  mempunyai  beberapa  agen  di  kota  Semarang  dan  Salatiga.  Di  Semarang terdapat empat agen yang bertempat di Jl. Karang Rejo Raya No. 28A Banyumanik, Jl. Karang Rejo IV No. 38 Banyumanik, Ruko Bukit Emerald Utama Blok C-5 Meteseh, Jl. A.Yani No.1 Ungaran dan di Salatiga terdapat satu agen yang bertempat di Perum. Salatiga Permai Gg V No. 66 Blatongan. Saat ini Essy’s Brownies juga bekerja sama dengan seluruh swalayan ADA Semarang, dengan cara produk - produk  Essy’s  Brownies  (kue  brownies)  juga  dapat  dibeli  diseluruh  swalayan  ADA  Semarang. Semua ini bertujuan untuk mempermudah calon konsumen untuk membeli dan merasakan kenikmatan rasa dari produk - produk yang dijual oleh Essy’s Brownies.
B. Visi dan Misi Perusahaan
Kualitas  rasa  dari  produk  yang  dijual  Essy’s  Brownies  sudah  tidak  diragukan  lagi,  Essy’s Brownies sudah memiliki banyak pengalaman di dalam hal membuat beraneka macam rasa maupun bentuk  kue  brownies  dan  telah  mengikuti  beberapa  pameran  maupun  event - event  besar  di  kota Semarang maupun luar kota Semarang. Oleh karena itu Essy’s Brownies memiliki visi untuk menjaga kualitas rasa dari produk - produk yang dihasilkan dan ingin lebih melebarkan sayap dalam hal ingin memperluas pangsa pasar dan agar lebih dikenal oleh masyarakat.
Guna mencapai visi tersebut, Essy’s Brownies memiliki misi ingin menambah lagi salah satu media promosi yaitu dengan website atau situs web, agar lebih bisa dikenal oleh masyarakat.
C. Metode Penelitian
Secara ringkas dan terperinici, penulis membuat skema penelitian dari awal, yaitu: mengapa penelitian  dilakukan, bagaimana proses  penelitian,  hasil  akhir  dari  penelitian  dan  untuk  siapa  hasil penelitian dibuat.  Penelitian  ini  dapat  digambarkan dengan  skema  kerangka  pemikiran sebagai berikut:

## Gambar 1 Kerangka Pemikiran
Keterangan : Essy’s  Brownies mempunyai suatu  masalah yaitu  media  promosinya  masih  menggunakan  brosur, sehingga jangkauanya sangat terbatas dan kurang dikenal oleh masyarakat khususnya yang berada di luar kota. Salah satu tujuan dari penelitian ini adalah memperluas area pemasaran Essy’s Brownies di Jawa  Tengah. Mendefinisikan  masalah  dan  mengetahui  tujuan  penelitian  termasuk  dalam  tahap perencanaan. Setelah  tahap  perencanaan selesai  dilakukan  kemudian  masuk  ke  tahap  analisis, yaitu tahap  pengumpulan  data  yang  menggunakan  metode pengumpulan  data  dengan  cara interview dan observasi. Selanjutnya tahap perancangan yaitu  tahap  pembuatan  dan  penyusunan  desain situs  we b yang  membutuhkan  data – data  berupa  teks  dan  gambar.  Pada  tahap  ini  menggunakan beberapa software yaitu Adobe Photoshop, Adobe ImageReady, Corel Draw dan Macromedia Dreamweaver. Setelah tahap perancangan, kemudian masuk ke tahap penerapan dimana pada tahap ini ada kebijakan dari  pemilik  Essy’s  Brownies  dan  selanjutnya  tahap  penggunaan,  yang  di  dalamnya  mengenai pendanaan. Pendanan ditanggung oleh pemilik Essy’s Brownies. Hasil akhir dari penelitian ini adalah salah satu tekhnologi informasi yaitu situs web . Situs web ini dapat diakses oleh masyarakat melalui internet  dan masyarakat dapat  berinteraksi dengan  adanya  buku  tamu. Administrator  web bertugas untuk meng- up  date informasi  dan  menanggapi  pesan dari  masyarakat  yang  masuk  melalui  buku tamu.
Analisis Perencanaan Data Teks dan Gambar Konsumen Website “Essy’s Brownies” Essy’s Brownies Perancangan Administrator Adobe Photoshop, Adobe ImageReady, Corel Draw dan Macromedia Dreamweaver Interview Observasi Penerapan Penggunaan Masalah adalah brosur Tujuan Penelitian Kebijakan Pendanaan

## III. HASIL DAN PEMBAHASAN
Pada  bagian  ini  membahas  tentang  teknik  pengembangan situs web sesuai  dengan desain layout . Proses  pengembangan  diawali  dengan  pembuatan header menggunakan software Corel  Draw  X3  dan Adobe Photoshop CS2 kemudian hasil desain yang sudah jadi diolah dalam software Adobe ImageReady CS  dan Macromedia  Dreamweaver 8.  Bagian penting  dalam  sebuah situs web adalah  memiliki header , isi/ content dan footer . 1. Pembuatan Header Pembuatan header menggunakan  program Corel  Draw  X3  dan  Adobe Photosop  CS2.
Langkah - langkahnya sebagai berikut:
(a) Membuka aplikasi Corel Draw X3
Gambar 4.7 Tampilan Splas Screen Corel Draw X3
(b) Mengatur ukuran lembar kerja
Mengatur  ukuran  lembar kerja caranya  adalah dengan  merubah  ukuran paper  width and  height, menjadi width :775  dan height :100,  kemudian  pada units pilih pixels .  Seperti gambar di bawah ini:

## Gambar 4.8 Tampilan Pengaturan Ukuran Lembar Kerja
Maka akan tampil lembar kerja sesuai dengan ukuran yang telah diatur.
Gambar 4.9 Tampilan Lembar Kerja Pada Corel Draw X3 (c) Membuka gambar

## 5p-ISSN :1979-0414 e-ISSN : 2621-6256
Untuk membuka gambar caranya adalah pilih File > Import > Cari gambar yang akan kita buka > Import .
Gambar 4.10 Tampilan Gambar Yang Sudah Dibuka Kemudian  mengatur  ukuran  dan  letak  gambar  supaya  sesuai  dengan  lembar  kerja  yang sudah diatur sebelumnya.

## Gambar 4.11 Tampilan Gambar Sesuai Ukuran Lembar Kerja
(d) Transparansi gambar Supaya  gambar terlihat  lembut  dan  menyambung  maka  diatur  dengan  cara  pilih Interavtive Transparency Tool > Kemudian tempatkan dan tarik tool tersebut pada tepi masing - masing gambar. Seperti gambar di bawah ini:
Gambar 4.12 Tampilan Gambar Yang Sudah di Transparansi
Pengaturan Interavtive Transparency Tool
(e) Eksport gambar menjadi format PSD Gambar di- eksport ke dalam bentuk format gambar Photoshop yaitu PSD dengan cara pilih File > Eksport > Kemudian isi nama file dan pilih format file PSD pada Save As Type > Eksport > Ok Gambar 4.13 Tampilan Eksport Gambar
(f) Membuka aplikasi Adobe Photoshop CS2
Gambar 4.14 Tampilan Splas Screen Adobe Photosop CS2
(g) Membuka file gambar Untuk membuka file gambar caranya pilih File > Open > Cari file yang akan dibuka > Open
Gambar 4.15 Tampilan Cara Membuka File
(h) Menambahkan layer style pada tulisan nama dan slogan perusahaan
Pada tulisan nama perusahaan “Essy’s Brownies” dan slogan perusahaan “maniskan harimu dengan browniesku” agar tampak lebih hidup ditambahkan layer style dengan cara pilih Layer > Layer Style > Kemudian atur pada Drop Shadow , Owter Glow dan Stroke .
Gambar 4.16 Tampilan Pengaturan Layer Style
(i) Menambahkan gambar logo Untuk membuka file logo caranya pilih File > Open > Nama file : Logo > Open
Gambar 4.17 Tampilan File Logo Yang Sudah Dibuka Kemudian pada logo ditambahkan layer style yaitu: Drop Shadow , Owter Glow dan Bevel and Emboss.
Gambar 4.18 Tampilan Pengaturan Layer Style Pada Logo

## Gambar 4.19 Tampilan Desain Header
2. Optimasi Gambar Website Menggunakan Adobe ImageReady CS (a) Mengaktifkan program Adobe ImageReady CS
Setelah  selesai  mendesain  tampilan website pada  program  Adobe  Photoshop  CS2 kemudian gambar dioptimasikan pada program Adobe ImageReady CS.
Gambar 4.20 Tampilan Desain Website dan Tombol Menuju ImageReady CS (b) Proses pemotongan gambar Untuk memotong gambar caranya adalah aktifkan Slice Tool kemudian seleksi bagian gambar yang akan dipotong.

## Gambar 4.21 Tampilan Gambar Yang Sudah Terpotong
(c) Optimasi gambar Setelah  gambar  selesai  dipotong  sesuai  dengan  bagiannya,  selanjutnya  gambar dioptimasikan  supaya  ukuran  gambar  menjadi  lebih  kecil  dan  cepat  diakses  oleh user /pengguna internet.

## Gambar 4.22 Tampilan Gambar Yang Telah Dioptimasi
Setelah  selesai  dioptimasi,  gambar  akan  berubah  ukuran  menjadi  101.1  KB  dan  dapat diakses  selama  19  detik  oleh user /pengguna internet  yang  menggunakan kecepatan/ bandwitdh 56.5 KBps. Seperti gambar dibawah ini:

## Gambar 4.23 Tampilan Ukuran Gambar dan Kecepatan Akses
(a) Proses penyimpanan Setelah gambar selesai dioptimasi kemudian disimpan dengan cara pilih File > Save Optimized  As >  Kemudian  buat folder baru  dan  tempatkan folder sesuai  dengan  tempat yang  diinginkan  >  Isikan  nama file dengan: Index >  Pada save  as  type pilih  HTML and
Images > Save
Gambar 4.24 Tampilan Save As Type
3. Pembuatan HTML Dengan Program Macromedia Dreamweaver 8 (a) Membuka aplikasi Macromedia Dreamweaver 8

## Gambar 4.25 Tampilan Splas Screen Macromedia Dreamweaver 8
(b) Mendefinisikan Site
Langkah  pertama  dalam  pembuatan website dengan  Macromedia Dreamweaver  8  adalah  mendefinisikan site ,  yaitu  mengatur  atau menempatkan file - file yang saling berhubungan ke dalam satu folder . Lihat langkah - langkah di bawah ini:
Gambar 4.26 Tampilan Pembuatan Dreamweaver Site
Gambar 4.27 Tampilan Site Definition For Website Name - Editing Files
Gambar 4.28 Tampilan Editing Files, Part 2
Gambar 4.29 Tampilan Editing Files, Part 3

## Gambar 4.33 Tampilan Index Pada Manage Site

## IV. KESIMPULAN
Berdasarkan  uraian  yang  terkandung  pada  bab - bab  sebelumnya  mengenai  pembuatan  desain situs web Essy’s Brownies, dapat diambil beberapa kesimpulan yaitu sebagai berikut:
1. Situs web ini  merupakan alternatif  media  promosi  selain  brosur bagi  Essy’s  Brownies, yang dimana  jangkauannya  lebih  luas dan diharapkan  mampu  memperluas  area  pemasaran Essy’s Brownies di sekitar Jawa Tengah.
2. Situs web ini dapat  memberikan  kemudahan  dalam  hal  up  date  informasi  untuk  keperluan promosi.
3. Penggunaan situs web relatif lebih murah jika dibandingkan dengan brosur, dilihat dari sisi up date informasi dan jangkauan promosinya. Situs web memerlukan kurang lebih Rp 165.000,00 untuk biaya domain dan hosting selama satu tahun, sedangkan brosur memerlukan biaya untuk mencetak,  mengedarkan  dan  biaya  tambahan  lainnya.  Jika  ditotal  akan  lebih  mahal  daripada situs web.
4. Alamat situs web pada Skripsi ini adalah ‘www.essybrownies.com’.
. DAFTAR PUSTAKA [1] Adnyana Agus.M, (2008); “Animasi Flash dengan SwisHMax Bag.I” [Online],
[2] Atisah Sipatehut, (1991). “Dasar-dasar Desain”. Depdikbud
[3] Azami, Hairul (2006); “Konsep Dasar Dalam Desain Web”, [Online],
[4] Djelantik,A.A.M. (1999). “Estetika Sebuah Pengantar”. Bandung
[5] Sugiyono. 2015. “ Metode Penelitian Kuantitatif, Kualitatif dan R&D”. Bandung : Afabeta.
[6] Sujadi, 2003. “ Metodologi Penelitian Pendidikan” . Jakarta : Rineka Cipta Komputindo.
[7] Sukmadinata, Nana Syaodih. 2005. “ Metode Penelitian Pendidikan”. Bandung: Rosdakarya.
[8[ Pujiriyanto, (2005), “Desain Grafis Komputer”, Yogyakarta