## DESAIN SIMPLE DAN MODERN DALAM  PERANCANGAN WEBSITE PENJUALAN
Rina Dewi Indahsari dan Endang Setyati Dosen STMIK AsiA Malang

## ABSTRAK
Desain interface adalah sesuatu yang tidak dapat menipu, karena desain adalah hal yang pertama kali dilihat  dalam  penggunaan  sesuatu.  Tampilan  desain  interface  website  yang  menarik  akan  memberikan dampak  yang  luar  biasa  terhadap  minat  penggunanya.  Disamping  fasilitas  dan  sistem  yang  disediakan dalam  sebuah  website,  desain  interface  merupakan  hal  utama  yang  menjadi  pertimbangan  pengguna website.  Dalam  penelitian  ini  akan  dilakukan  perancangan  interface  website  dengan  pemilihan  layout, warna dan tipografi yang bergaya simple dan modern. Gaya ini dipilih karena mewakili karakteristik gaya hidup manusia di jaman sekarang yang selalu menginginkan segala sesuatu serba mudah, cepat tetapi tidak ketinggalan jaman. Perancangan layout akan memperhatikan kaidah desain secara umum seperti balance, proporsi dan unity dan sebagainya.
Kata kunci : desain, simple modern, website

## ABSTRACT
Interface  design  can  not  be  deceptive,  because  it  is  seen  as  the  first  one  in  any  aplication.  Attractive website  interface  design  will  provide  a  tremendous  effect  toward  the  users.  Beside  website  facilities  and systems, interface design also be  considered  by website  users. This study will scope  how to  design  interface website  by  chosing  layout,  colour  and  simple  or  modern  typography  style.  This  style  is  chosen  because  it represents  the  characteristics  of  human  lifestyles  recently,  who  always  want  any  things  easely,  fastly  and futuristic. Designing layout is concerning on design principles such as balance, proportion and unity, and so on.
Keywords: design, simple modern, website

## PENDAHULUAN
Saat  ini  Internet  telah  menjadi  kebutuhan dalam  segala  bidang.  Penerapannya  digunakan hampir  di  seluruh  sendi  kehidupan  manusia. Mulai  dari  bisnis,  pendidikan  sampai  hiburan. Fasilitas  dalam  internet  yang  banyak  digunakan adalah website . Dengan website , segala sesuatu di internet  disajikan  dalam  bentuk  yang  bagus  dan user-friendly ,  sehingga  pengguna  dari  kalangan anak-anak  sampai  tua  dapat  menggunakannya dengan  mudah.  Hal  ini  menyebabkan website menjadi sangat popular.
Perkembangan teknologi juga mempengaruhi gaya  hidup  pengguna  teknologi  tersebut.  Hal  ini berimbas pada minat dan ketertarikan seseorang terhadap  sesuatu  objek.  Zaman  yang  semakin modern  menjadikan  minat  manusia  berubah mengikuti tren  yang ada.  Demikian  juga masalah desain website. Pengguna internet akan memiliki kecenderungan  memilih website yang  desain tampilannya sesuai dengan minatnya.
Gaya hidup modern yang selalu menginginkan  segala  sesuatu  serba  instan, mudah,  cepat  dan simple, memberikan  dampak pada  desain website .  Kecenderungan  pengguna memilih  website  dengan  desain  yang  simple
dengan  pengaturan layout dan  penataan  menu yang mudah dipelajari.
Pada penelitian ini, akan dilakukan perancangan website bergaya simple dan modern dengan  pemilihan  warna,  tipografi,  serta  layout yang  sesuai  dengan  prinsip-prinsip  desain  yang ada.

## KAJIAN TEORI

## 1. Internet
Internet  adalah  suatu  media  informasi komputer  global  yang  dapat  dikatakan  sebagai teknologi  tercanggih  abad  ini.  Dengan  Internet seseorang dapat melakukan semua aktivitas yang sulit dilakukan secara biasa mulai dari menonton, membaca  berita,  maupun  berbelanja.  Secara etimologis, Internet berasal  dari  bahasa  Inggris, yakni inter berarti antar dan net berarti jaringan sehingga dapat diartikan internet adalah hubungan antar jaringan. (Nugroho, 2004:1). Fasilitas yang ada di internet:
a. WWW ( World Wide Web )
b. Electronic Mail
c. FTP ( File Transfer Protocol )
d. Tele Networking (TelNet)
e. User’s Network (UseNet)
f. Internet Relay Chat (IRC)
g. WAIS Server
h. Internet Phone/Conference
i. Mailing List
2. Website
Terminologi website adalah  kumpulan  dari halaman-halaman situs yang biasanya terangkum dalam  sebuah domain atau subdomain yang tempatnya  berada  didalam World  Wide  Web (WWW)  di Internet .    Sebuah  web  page  adalah dokumen  yang  ditulis  dalam  format Hyper  Text Markup  Language (HTML)  yang  hampir    selalu diakses    melalui    HTTP,    yaitu protocol yang menyampaikan  informasi  dari server  website untuk  ditampilkan  kepada  para  pemakai  melalui web  browser .    Semua    publikasi    dari website- website tersebut    dapat    membentuk  sebuah jaringan.
Website atau  situs  dapat  juga  diartikan sebagai  kumpulan  halaman  yang  menampilkan informasi  data  teks,  data  gambar  diam  atau gerak, data animasi, suara,  video  atau  gabungan dari    semuanya,    baik    yang    bersifat    statis maupun dinamis yang membentuk satu rangkaian  bangunan  yang  saling  terkait  dimana masing-masing  dihubungkan  dengan  jaringan- jaringan halaman ( hyperlink) .
Bersifat  statis  apabila  isi  informasi website tetap,  jarang    berubah,  dan  isi  informasinya searah  hanya  dari    pemilik website .  Sedangkan, bersifat    dinamis    apabila    isi  informasi  website selalu  berubah-ubah  dan  isi  informasinya interaktif  dua  arah  berasal  dari  pemilik  serta pengguna website .

## 3. Konsep Desain
Desain merupakan perencanaan dalam pembuatan sebuah objek, sistem, komponen atau struktur.  Dalam  artian  yang  lebih  luas,  desain merupakan  seni  terapan  dan  rekayasa  yang berintegrasi  dengan  teknologi.  Desain  dikenakan pada bentuk sebuah rencana, dalam hal ini dapat berupa  proposal,  gambar,  model,  maupun deskripsi.
“Merancang  ialah  proses  pencipta  rupa  untuk maksud  tertentu.  Berbeda  dengan  karya  lukis atau patung yang bersifat murni ekspresi, sebuah karya  rancang  harus  memenuhi  fungsi  praktis. Atau  dengan  kata  lain  dapat  disebutkan  bahwa karya desain (rancangan) harus mampu memenuhi kebutuhan penggunanya. Karya desain  yang  baik  ialah  ungkapan  rupa  yang sebaik-baiknya, yang berisi pesan atau bentuk.”
“Untuk  membuat  dengan  tepat  dan  efektif, desainer harus mencari cara terbaik agar sesuatu itu dapat dibentuk, dibuat, disebarkan, digunakan dan  dikaitkan  dengan  lingkungan.  Yang  tidak boleh  dilupakan  adalah  bahwa  seorang  desainer adalah  seorang  pemecah  masalah.  Karena  itu desainer  dituntut  selalu  berusaha  mencari pemecahan  masalah  yang  cocok.  Dan  hal  kedua yang tidak boleh dilupakan adalah bahwa ciptaan desainer seharusnya tidak hanya indah, melainkan harus pula berfungsi dan mencerminkan selera zaman.” (Wong, 2003 : 1). ”Fungsi  sebuah  desain  adalah  meyampaikan informasi  pada  pembacanya  melalui  simbol, warna,  garis.  Fungsi  tersebut  dapat  terwujud apabila dalam proses perancangannya menggunakan  metodologi  yang  tepat  dengan komposisi  teknik,  konsep  visual,  teknologi pendukung yang seimbang sehingga menghasilkan  sebuah  karya  desain  yang  dapat dinikmati  dan  informasi  yang  terkandung didalamnya  dapat  tersampaikan  dengan  baik.” (Wong, 1996:1).

## 4. Kaidah Desain
Kaidah dasar merupakan kaidah yang mutlak harus  ada  dalam  proses  penataan  unsur-unsur desain. Unsur-unsur seni tersebut meliputi: a. Proporsi “Proporsi merupakan konsep tentang perbandingan yang berfungsi untuk mendapatkan  kesesuaian  visual  bentuk,  baik ditinjau  dari  antar  bagian  bentuk  yang  lain ataupun  bidang,  dengan  cara  penempatan, penyesuaian  serta  pengaturan  susunan  dan ukuran.” (Wong, 2003:3).
b. Unity (kesatuan)
Unity merupakan  konsep  tentang  kesatuan  yang berfungsi  sebagai  pengorganisasian  elemen- elemen  bentuk  yang  terpisah  dan  berdiri  sendiri menjadi  perpaduan  yang  dipandang  sebagai suatu kesatuan bentuk tunggal.
“Ciri  dari  tercapainya  kesatuan  adalah  apabila dalam  sebuah  komposisi  ada  bagian  yang dilenyapkan, maka komposisi itu secara keseluruhan  akan  tampak  janggal.”  Wong  (  2003 :3).
c. Balance (keseimbangan) “Secara umum dapat didefinisikan keseimbangan adalah hasil  susunan satu  atau  lebih  elemen dari desain  yang  sama  antara  yang  satu  dengan  yang lainnya.  Jika  kita  perhatikan,  setiap  objek mempunyai  keseimbangan  yang  terstruktur, misalnya  bentuk  simetri  pada  bunga  dan  garis pada kulit rumah siput.” (Hakim dan Mutmainah, 2003:7).
Kaidah  lanjutan  adalah  penunjang  proses penataan  unsur-unsur  dari  kaidah  dasar.  Kaidah lanjutan ini dibagi lagi menjadi lima, yaitu :
a. Intensity (Intensitas)
Yang  dimaksud  intensity  adalah  konsep tentang susunan jumlah, dengan tujuan untuk membuat  penegasan  yang  berirama  dengan penganekaragaman  jumlah  bentuk  diberbagai tempat.
b. Complexity (Tingkat Kerumitan) Yang  dimaksud complexity adalah kerumitan/ detail dari visualisasi sebuah rancangan, yang bertujuan  untuk  menciptakan  nilai  mutu  dari sebuah karya rancang.
c. Rhytme (Irama) Yang  dimaksud  dengan rhytme (irama)  disini adalah  untaian  kesan  yang  ditimbulkan  oleh unsur-unsur yang dipadukan secara berdampingan  dan  secara  keseluruhan  dalam suatu  komposisi.  Kesan  adanya  rhytme  ini bisa  diperoleh  dengan  cara  memberikan perulangan pada suatu komposisi.
d. Contrast (Perbedaan)
Yang dimaksud contrast adalah paduan unsur desain  yang  satu  sama  lainnya  berbeda. Semua  unsur  desain  memunculan  contrast, contrast dapat  menimbulkan  minat,  meng- hidupkan  desain,  membubuhi  komposisi. Dengan  sedikit  contrast  tidak  akan  terjadi monoton. Contrast didasarkan  pada  watak desainer serta tujuan dari desain yang dibuat.
e. Emphasis (Pusat Perhatian) Emphasis adalah pusat perhatian pada sebuah media.  Sebagai  media  perhatian,  emphasis merupakan  obyek  yang  dirancang  untuk menjadi pengikat perhatian sekaligus menetapkan  fokus  dan  arah  dari  sebuah komposisi. Perlu diingat bahwa semua desain, apapun bentuknya harus mempunyai emphasis.  Keefektifan  fungsi  akan  sangat dibantu  bila  desain  yang  dibuat  memiliki tujuan serta strategi penyampaian yang jelas. Emphasis dapat diwujudkan melalui beberapa tindakan antara lain:
1). Perbedaan warna, bentuk, ukuran, tekstur 2). Penempatan obyek pada posisi tertentu
3).  Komposisi  yang  memiliki  kecenderungan arah
5. Warna
Warna dapat didefinisikan secara obyektif/fisik sebagai sifat cahaya yang dipancarkan,  atau  secara  subyektif/psikolog sebagai bagian dari pengalaman indra penglihatan.  Sebagai  bagian  dari  pengamalan indra  penglihatan,  warna  adalah  merupakan pantulan cahaya dari sesuatu yang nampak, yang diterima  mata  berupa  :  cat,  tekstil,  batu,  tanah, daun,  kulit,  rambut,  dan  lain-lain,  disebut “ pigmen ” atau warna bahan. (Sanyoto, 2005:9)
Berikut  merupakan  beberapa  fungsi  dari  warna, antara lain :
a. Menciptakan kesan tertentu
b. Menyampaikan pesan, perasaan, suasana hati.
c. Menarik perhatian ke arah yang ditonjolkan
d. Menciptakan  ilusi  ruang,  jarak,  suhu,  bahkan bentuk tubuh.
e. Menyatukan berbagai obyek, misalnya busana dan perlengkapannya.
Menurut  kejadiannya,  warna  dibagi  menjadi dua  yaitu  warna  additive  dan  subtractive. Additive  adalah  warna  yang  berasal  dari  cahaya yang  disebut spectrum, dan  subtractive  adalah warna yang berasal dari bahan disebut pigmen.
Warna  pokok  additive  ialah  merah  ( red ), hijau  ( green )  dan  biru  ( blue ),  dalam  komputer disebut  warna  model  RGB.  Warna  pokok subtractive  menurut  teori  adalah  sian  ( cyan ), magenta,  kuning  ( yellow ),  dalam  komputer disebut warna model CMY.
Gambar 1.  Warna CMY

## Gambar 2  Warna RGB
Warna diklasifikasikan menjadi 5 jenis, yaitu warna primer, warna sekunder, warna intermediate,  warna  tertier  dan  warna  kuarter. Masing-masing memiliki kelompok warna.
a. Warna Primer Warna primer, atau yang sering disebut warna pokok.  Ciri  dari  warna  primer  adalah  warna tersebut tidak dapat dibentuk dari warna lain. Disebut  warna  pokok  karena  warna  tersebut digunakan sebagai  pokok percampuran untuk memperoleh warna-warna lain. Warna primer tersebut adalah :
- Biru,  nama  yang  sebenarnya  adalah  sian ( cyan ), yaitu biru semu hijau.
- Merah,  nama  sebenarnya  magenta,  yaitu merah semu ungu.
- Kuning, dalam tinta cetak disebut yellow.
Gambar 3  Warna Primer
b. Warna Sekunder Warna  sekunder  adalah  warna  kedua  yaitu warna  jadian  dari  pencampuran  dua  warna primer/pokok/pertama. Warna sekunder adalah:
Gambar 4  Warna Sekunder
c. Warna Intermediate Warna  intermediate  adalah  jenis  warna perantara,  yaitu  warna  yang  ada  diantara warna  primer  dan  sekunder  pada  lingkaran warna.    Ada  6  warna  standart  dan  6  warna intermediate disusun kedalam bentuk lingkaran, yang selanjutnya digunakan sebagai dasar teori warna.
d. Warna tertier Warna  tertier,  atau  sering  disebut  warna ketiga, adalah  warna hasil  campuran dari dua warna sekunder
Gambar 5  Warna tertier
e. Warna Kuarter
Warna  kuarter  atau  warna  keempat  adalah warna  hasil  percampuran  dari  dua  warna tertier atau warna ketiga.
Warna dari sebuah benda seringkali menimbulkan  kesan  psikologi  yang  berbeda, tergantung  dari  jenis  warnanya.  Kesan  warna secara umum adalah sebagai berikut:
a. Merah
Merah  adalah  warna  yang  kuat  sekaligus hangat.  Biasanya  digunakan  untuk  membe- rikan  efek  psikologi  ‘panas’  ,  ‘berani’,  ‘marah’ dan ‘berteriak’. Beberapa studi juga mengindentifikasi  merah  sebagai  warna  yang sexy.
b. Oranye Oranye  adalah  hasil  peleburan  merah  dan kuning,  sehingga  efek  yang  di  hasilkan  masih
tetap sama, yaitu ‘kuat’ dan ‘hangat’. Warna ini sering  digunakan  pada  tombol  website  yang penting,  seperti  ‘ buy  now’ , ‘register  now’ dan lainnya  yang  sejenis,  istilahnya  adalah  ‘ call  to action’ button. c. Kuning Kuning adalah warna yang ceria, menyenangkan.  Tidak  heran  warna  kuning identik  dengan  mainan  anak-anak.  Warna kuning  juga  dapat  digunakan  untuk  menarik perhatian seseorang terhadap sebuah desain.
d. Hijau Hijau  adalah  warna  yang  tenang  karena biasanya  dikaitkan  dengan  lingkungan  dan alam. Di dalam desain, kita bisa menggunakan warna hijau untuk memberikan kesan segar.
e. Hitam
Hitam  adalah  warna  yang  gelap,  suram, menakutkan tetapi elegan. Elemen apapun jika diletakkan  diatas  background  hitam  akan terlihat  lebih  bagus  (misalnya,  saat  menam- pilkan  foto,  portfolio  atau  produk).  Tetapi tidak selalu efektif di dalam kasus tipografi
f. Coklat
Coklat adalah warna bumi, memberikan kesan hangat,  nyaman  dan  aman.  Namun  selain  itu, coklat  juga  memberikan  kesan  ‘ sophisticated ’ karena  dekat  dengan  warna  emas.  Sebuah desain  dengan  kombinasi  warna  hitam  dan coklat  muda  dapat  menimbulkan  kesan ’mahal’.
g. Ungu Ungu  adalah  warna  yang  memberikan  kesan spiritual,  kekayaan  dan  kebijaksanaan.  Ungu juga  warna  yang  unik  karena  sangat  jarang ditemukan di alam.
h. Biru
Biru  adalah  warna  favorit  para  pria  dan termasuk  warna  yang  ‘dingin’.  Jika  di  dunia desain,  biru  sering  disebut  “warna  corporate” karena  hampir  semua  perusahaan  menggu- nakan  warna  biru  sebagai  warna  utamanya. Selain itu biru merupakan warna yang tenang dan bersifat penyendiri.
i. Putih
Putih  adalah  warna  yang  murni.  Oleh  karena itu  sering  dianggap  sebagai  warna  yang menimbulkan efek suci dan bersih. Ketika kita ingin  membuat  desain  yang  simple  dan minimalis,  menggunakan  warna  putih  adalah langkah yang tepat.

## 6. Tipografi
Tipografi merupakan representasi visual dari sebuah bentuk komunikasi verbal dan merupakan  properti  visual  yang  pokok  dan efektif.  Hadirnya  tipografi  dalam  sebuah  media terapan visual merupakan faktor yang membedakan  antara  desain  grafis  dan  media
ekspresi  visual  lain  seperti  lukisan.  Lewat kandungan  nilai  fungsional  dan  nilai  estetiknya, huruf  memiliki  potensi  untuk  menterjemahkan atmosfir-atmosfir  yang  tersirat  dalam  sebuah komunikasi  verbal  yang  dituangkan  melalui abstraksi  bentuk-bentuk  visual.  Secara  garis besar tipografi digolongkan menjadi:
a. Roman, pada awalnya adalah kumpulan huruf kapital seperti yang biasa ditemui di pilar dan prasasti Romawi,
namun kemudian definisinya  berkembang  menjadi  seluruh huruf  yang  mempunyai  ciri  tegak  dan didominasi garis lurus kaku.
a. Serif,  dengan  ciri  memiliki  serif  di ujungnya. Selain membantu keterbacaan, serif juga memudahkan saat huruf diukir ke batu.
Gambar 6  Serif Font
b. Egyptian ,  atau  populer  dengan  sebutan slab serif. Cirinya adalah kaki/sirip/serif yang  berbentuk  persegi  seperti  papan dengan  ketebalan  yang  sama  atau hampir  sama.  Kesan  yang  ditimbulkan adalah kokoh, kuat, kekar dan stabil.
c. Sans  Serif ,  dengan  ciri  tanpa  sirip/serif, dan memiliki ketebalan huruf yang sama atau hampir sama. Kesan yang ditimbulkan  oleh  huruf    jenis  ini  adalah modern, kontemporer dan efisien.
Gambar 7 Sans Serif
d. Script ,  merupakan  goresan  tangan  yang dikerjakan  dengan  pena,  kuas  atau  pensil tajam  dan  biasanya  miring  ke  kanan.  Kesan yang  ditimbulkannya  adalah  sifat  pribadi dan akrab.
e. Miscellaneous ,  merupakan  pengembangan dari bentuk-bentuk yang sudah ada. Ditambah  hiasan  dan  ornamen,  atau  garis- garis  dekoratif.  Kesan  yang  dimiliki  adalah dekoratif dan ornamental.

## PEMBAHASAN
1. Analisa Masalah
Dalam penelitian ini akan dilakukan perancangan desain  interface website untuk  Dny Shop.  Dny  Shop  adalah shoe  shop khusus  untuk sepatu  lukis  tangan.  Dny  Shop  berawal  dari  hobi melukis  dan  membuat  graviti  sang  pemilik  yang bernama Denni. Pada mulanya Denni hanya iseng
menyalurkan  hobi  menggambarnya  dengan mencoba  untuk  melukis  sepatu  miliknya  sendiri. Hasil  dari  keisengan  tersebut  ternyata  banyak  di sukai oleh teman-temannya dan mereka meminta agar  Denni  melukis  sepatu  mereka.  Dari  sini Denni  berinisiatif  untuk  membuat  usaha  sepatu lukis  dan  memberi  label  sepatu  lukis  tersebut Dny Shop.
Dny  Shop  dijalankan  oleh  Denni  dengan dibantu beberapa temannya. Pada awalnya Denni hanya  menerima  pesanan  dari  teman-teman dekatnya tapi kini konsumen dari Dny Shop lebih banyak  dan  luas  jangkauannya  dikarenakan selain  promosi  dari  mulut  ke  mulut  Dny  Shop juga  mempromosikan  sepatu  lukisnya  melalui akun facebooknya yaitu dyn_art99@yahoo.com.
Target audience Dny Shop adalah anak muda,
tetapi tidak menutup kemungkinan bias diperuntukkan  bagi  kaum  dewasa/tua  yang memiliki minat pada stylist. Oleh karena itu akan dirancang desain  sedemikian rupa sehingga cock untuk target audience tersebut.

## 2. Perancangan Peta Situs
Tampilan  peta  situs  pada  halaman  utama website  Dny  Shop  seperti  pada  gambar  dibawah terdiri  dari  beberapa  tombol  menu  yaitu  : home, profile, katalog, trolly , informasi, artikel.
Gambar 8. Peta Situs
3. Perancangan Layout website Dny Shop
Tahap  awal  perancangan  website  Dny  Shop ini  adalah  menentukan  ukuran  lebar  dan  tinggi layout yang nanti akan digunakan.
Ukuran lebar dari layout Dny Shop adalah 800px dengan  ukuran  tinggi  yang  diatur  auto,  sehingga tinggi  dari  website  ini  akan  menyesuaikan dengan  apa  yang  ditampilkan  pada  website  Dny Shop.
a. Perancangan Layout Halaman Utama Perancangan  layout  halaman  utama  adalah perancangan  untuk  desain  sketsa  website yang  akan  digunakan  untuk  halaman  utama website  Dny  Shop.  Berikut  ini  adalah  desain sketsa awal layout pada halaman website Dny Shop.
Gambar 9. Layout halaman website
Desain Layout pada  halaman  ini  terdiri dari  header,  mainmenu,  panel  kiri,  isi, panel kanan dan footer . b. Perancangan Header Pada  bagian header terdapat  logo  Dny  Shop dan menu search pada bagian sisi atas header . Logo Dny Shop berada disisi kiri atas header. Pada  bagian  header  ini  juga  terdapat image slide  yang  berisi  kata-kata  untuk  mempro- mosikan  produk  Dny  Shop.  Disisi  sebelah kanan  image  slide  terdapat  pilihan  kategori style  sepatu  yang  ada  di  Dny  Shop  serta kalimat “selamat datang”.
Gambar 10. Sketsa Desain Header
c. Perancangan Pilihan Kategori Style
Pada  bagian  konten  kategori  style  terdapat tiga  menu  pilihan  style  sepatu  yang  terdapat pada website Dny Shop.
Gambar 11. Sketsa Konten Kategori
d. Perancangan
Pada  bagian  main  menu  terdiri  dari  menu utama  dan  beberapa  sub  menu  yang  didesain drop down (menurun kebawah).
Gambar 12.  Sketsa Mainmenu
e. Perancangan Konten Isi
Perancangan  untuk  bagian  konten  isi website  disesuaikan  dengan  data  atau informasi  yang  akan  ditampilkan  pada website Dny Shop. f. Perancangan Panel kiri dan kanan
Panel kiri pada halaman website Dny Shop terdiri  dari  menu trolly , contact ,  dan partner.
Panel  kanan  pada  halaman  website  Dny Shop hanya berisi shoutbox dan promo.
Gambar 13. Sketsa Panel Kiri dan Kanan

## g. Perancangan Footer
Pada bagian footer  hanya terdapat tulisan “ Copyright  Dny  Shop ”  yang  berada  di  sisi sebelah kanan.
Gambar 14. Sketsa Footer
4. Konsep Desain Layout Website Dny Shop
Konsep  desain  website  dari  Dny  Shop  adalah teenager.  Baik  dalam  hal  warna  maupun typografi yang digunakan.
Warna  yang  digunakan  pada website Dny Shop  adalah  warna-warna  cerah  yang  identik dengan  remaja  ( teenager ).  Penggunaan  warna- warna cerah ini mendominasi pada bagian header dan  footer .  Sedangkan  untuk  background  pada setiap  pilihan  konten  menu  banyak  digunakan warna  putih,  abu-abu  dan  hitam,  hal  ini  karena warna-warna  tersebut  dapat  menonjolkan  apa yang  ingin  di  tampilkan  pada  konten  menu tersebut.
Untuk lebih mengesankan website ini bertema teenager (remaja)  typografi  yang digunakan pada website ini adalah Fredericka the Great.  Jenis  typografi  ini  memiliki  detail  unik yang memberi kesan dekoratif. Selain menggunakan font  Fredericka the Great, website ini  juga  menggunakan  font  Helvetica  yang memberikan kesan simple dan modern.
a. Header
Pada bagian header terdiri dari logo Dny Shop, slide  show  image,  kategori  style  dan searching. Background pada header menggunakan  warna  merah  muda  (#fd54cf) yang memberi kesan feminim, kuning (#f3ff6d)  yang  memberi  kesan  ceria  ,  dan hijau (#e2fb55) yang  memberi  kesan
segar. Gambar  15. Desain Header
1). Logo Dny Shop hanya berupa text dan garis bawah  pada  bagian  text  shop.  Jenis  huruf yang digunakan pada logo Dny Shop adalah brody.  Jenis  font  ini  menyerupai  goresan tangan  yang  dikerjakan  dengan  kuas,  ini melam-bangkan bahwa pengerjaan lukisan pada  sepatu  dilakukan  secara  manual. Selain  itu  jenis  font  ini  memberikan  kesan akrab.  Warna  hitam  (#000000)  pada  logo digunakan agar logo tersebut bisa diterapkan  pada  berbagai  macam  warna background  selain  itu  warna  hitam  juga memberikan kesan simple.
2).  Image  slide  show berisi  kata-kata  promosi produk  Dny  Shop.  Setiap  desain  pada image  slide  show berbeda  satu  dengan lainnya.
3).  Pada  bagian  searching  terdiri  dari  tombol yang  berupa  image  kaca  pembesar  dan tempat  untuk  menginput  kata  kunci  yang akan dicari.
4).  Kategori  style  yang  berada  pada  sisi  kanan image  slideshow  berisi  tiga  pilihan  style sepatu  yang  ada  pada  Dny  Shop  yaitu highheels dengan background warna merah  muda  (#f16abd)  yang  memberi kesan  feminim,  model  vans  dengan background kuning (#e0e477) yang
memberi  kesan  ceria,  dan  sneaker  dengan background hijau (#7ebe5f)
yang memberi  kesan fresh. Background yang digunakan  pada  kategori  style  ini  berupa gradasi  warna  hitam  (#000000)  dan  abu- abu (#313131).
5).  Selain  pilihan  kategori  style  terdapat  pula kalimat selamat datang yang menggunakan font Fredericka  the Great berwarna  merah muda (#d2429a).
b. Mainmenu
Pada  bagian  mainmenu  jenis  typografi  yang digunakan  adalah  Arial,  Helvetica  dengan warna  abu-abu  (#7a7878)  agar  tampak kontras  dengan background abu-abu  yang lebih  muda    (#eaeaea).  Pada  bagian submenu background yang digunakan adalah  warna  abu-abu  (#eaeaea)  dengan opacity  0.7.  Apabila  terdapat  kursor  diatas pilihan  menu    warna background akan berubah  menjadi  warna  hitam  (#000000) begitu  pula  dengan  warna font yang  semula berwarna  abu-abu  (#7a7878)    menjadi merah muda (#fd54cf).
Gambar  16.  Desain mainmenu
c. Panel
Pada  website  Dny  Shop  terdapat  panel  kiri dan kanan. Desain pada panel kiri dan panel kanan  sama,  hanya  saja  yang  membedakan adalah  isi  dari  panel  tersebut.  Panel  kiri berisi trolly,  contact  dan  partner sedangkan pada  panel  kanan  berisi  promo  dan shoutbox.
Penggunaan panel ini agar website Dny Shop terlihat seimbang (balance) antara sisi kanan dan  kiri.  Warna background panel  adalah putih (#ffffff) dan pada background di setiap judul  menu  menggunakan  warna  hitam (#000000).  Jenis  typografi  yang  digunakan Arial,  Helvetica  dan  menggunakan  warna kuning (#fff32d).
Gambar 17.  Desain Panel
d. Footer
Background pada  footer  Dny  Shop  terdiri dari tiga warna yaitu merah muda (#fd54cf), kuning  (#f3ff6d),  dan  hijau  (#e2fb55) dengan  warna  abu-abu  (#d4d4d4)  pada bagian text.
Gambar 18.  Desain Footer
5. Tampilan Website
Bentuk  tampilan  hasil  eksekusi  pada  aplikasi website yang dirancang yaitu :

## a. Home
Halaman  home  berisi  produk  sepatu  lukis terbaru  dari  Dny  Shop.  Selain  itu  juga terdapat  beberapa  artikel  yang  dimuat  di website Dny Shop.
Berikut  adalah  tampilan  halaman  home pada website Dny Shop.
Gambar 19. Halaman Home
b. Profile
Halaman  Profile  berisi  profile  dari  Dny Shop.  Berikut  adalah  tampilan  halaman profil pada website Dny Shop
Gambar 20.  Halaman profil
c. Katalog
Halaman  katalog  berisi  seluruh  produk sepatu lukis yang ada di website Dny Shop. Berikut  adalah  tampilan  halaman  profil pada website Dny Shop
Gambar 21.  Halaman Katalog
d. Artikel Berikut  adalah  tampilan  halaman  Artikel pada website Dny Shop
Gambar 22.  Halaman Artikel e. Contact Us
Halaman Contact  Us berisi  no  telp  yang dapat di hubungi dan alamat dari Dny Shop. Selain  itu  terdapat form  contact secara online  yang  menghubungkan  customer dengan  Dny  Shop.  Berikut  adalah  tampilan halaman contact us pada website Dny Shop
Gambar 23. Halaman contact us

## f. Trolly
Halaman Trolly dapat diakses jika customer telah  memilih  barang.    Apabila  customer menekan  menu  trolly  sebelum  memilih barang  maka  akan  muncul  tampilan  ”trolly anda masih kosong”
Gambar 24.  Trolly kosong
Jika customer telah  memilih  barang  maka akan  muncul  tampilan  halaman trolly sebagai berikut.
Gambar 25.  halaman Trolly
g. Pemesanan Setelah  memilih  barang  customer  akan masuk  ke  halaman  pemesanan  dimana customer  harus  mengisi  form  biodata  di kustomer  baru,  akan  tetapi  jika  customer tersebut  sebelumnya  pernah  membeli sepatu  lukis  di  Dny  Shop,  customer  hanya perlu  mengisi    alamat  email  dan  password di form kustomer lama. Berikut adalah tampilan halaman pemesanan pada website Dny Shop
Gambar 26.  halaman pemesanan
h. Selesai Transaksi Setelah  kustomer  mengisi  data  di  form pemesanan  maka  akan  muncul  halaman selesai transaksi. Halaman Selesai transaksi ini berisi data barang yang telah dipesan.
Berikut  adalah  tampilan  halaman  selesai transaksi pada website Dny Shop
Gambar 27.  halaman selesai transaksi

## PENUTUP
Konsep desain yang digunakan pada website Dny  Shop  adalah  simple  dan  ceria,  dengan penggunaan  warna-warna  cerah  seperti  warna pink,  kuning  dan  hijau  memberikan  kesan  ceria pada  tampilan  website  Dny  shop.  Hal  ini  sesuai dengan  kalangan  yang  ingin  ditembak  dalam penjualannya yaitu kalangan muda dan remaja.
Jenis  font  yang  digunakan  adalah  Helvetica dan  Frederica  the  great  yang  memberikan  kesan simple, ornament dan modern .
Dalam proses perancangan website sebaiknya  tidak  meninggalkan  konsep  desain yang sesuai dengan karakter Dny Shop.
Digunakan layout  simple  mondrian  layout guna memberi kesan simple dan modern.

## DAFTAR PUSTAKA
1. Abdi,  Sanyoto,S,  (2005), Dasar-dasar  Tata Rupa  dan  Desain ,    Arti  Bumi  Intaran.
Yogyakarta. 2. Hakim,    Lukmanul,  &  Siti,  Mutmainah, (2003), Rahasia  dan  Trik  Mendesain  Situs
Cantik. Elex Media Komputindo,  Jakarta.
3. Indrajit,  Eko,  Richardus,  P.,  Bambang  N., Muhammad,  Syukri.  (2002), Aplikasi  Web Database  Menggunakan  PHP  &  MySQL, Elex Media Komputindo. Jakarta. 4. Kadir,  Abdul,  (2011), From  Zero  To  A  Pro CSS, Andi,  Yogyakarta.
5. Niederst,J.  (2001), Web  design  in  a  nutshell, Reily & associates. California.
6. Wong,  Wucius.  (1996), Beberapa  Asas Merancang Trimatra , ITB. Bandung
7. Wong,  Wucius.  (2003), Beberapa  Asas Merancang  Dwimatra ,    ITB,  Bandung.