## Analisis tata letak dan komposisi pada situs niaga-el dr.evoo®
Maria Christina Ongkowidjojo, I Wayan Mudra, I Nyoman Larry Julianto* Program Magister Desain, Pascasarjana, Institut Seni Indonesia Denpasar Jl. Nusa Indah, Sumerta, Kec. Denpasar Tim., Kota Denpasar, Bali, Indonesia *Penulis Korespondensi: larry_smartdesign@ymail.com
Abstrak. Perkembangan  teknologi  informasi  menjadi  pemicu  pertumbuhan  bisnis  berbasis teknologi, terutama niaga-el, yang menjadikan internet sebagai media utama pertukaran barang dan jasa. Penelitian ini akan fokus pada analisis tata letak dan komposisi situs niaga-el dr.evoo®, perusahaan  perhiasan  anti  alergi  dan  kulit  sensitif. Dengan  menggunakan  pendekatan  kualitatif deskriptif,  penelitian  ini  menggambarkan  penggunaan  prinsip-prinsip  desain  berdasarkan  The Principles of Beautiful Web Design berdasarkan 7 kategori yakni defining good design, webpage anatomy,  system  grid,  balance,  unity,  emphasis,  dan  responsive  design .  Hasil  penelitian  ini menunjukkan bahwa dr.evoo® berhasil menerapkan prinsip desainnya dengan baik, menciptakan pengalaman pengguna yang efektif dan menarik. Responden memberikan respon positif terhadap defining  good design,  webpage  anatomy, dan  penggunaan system  grid . Prinsip-prinsip balance, unity, dan emphasis juga  diterapkan  dengan  baik,  menciptakan  tampilan  yang  konsisten  dan menarik. Responsive design situs memberikan pengalaman pengguna yang optimal pada berbagai perangkat. Dr.evoo® telah berhasil menciptakan situs niaga-el yang tidak hanya menonjol dalam desain  visual  dan  pengalaman  pengguna,  namun  perlu  juga  menunjukkan  komitmen  terhadap peningkatan  aksesibilitas  dan  responsivitas,  untuk  menciptakan  lingkungan  belanja  online  yang inklusif dan efisien.
Kata Kunci : Tata letak, komposisi, dr.evoo®, niaga-el, situs
Abstract. The  development  of  information  technology  serves  as  a  catalyst  for  the  growth  of technology-based  businesses,  particularly  in  niaga-el,  where  the  internet  becomes  the  primary medium for the exchange of goods and services. This study focuses on the analysis of the layout and compositions of the niaga-el situss of dr.evoo®, a company specializing in hypoallergenic and sensitive  skin  jewelry.  Utilizing  a  qualitative  descriptive  approach,  the  research  describes  the applications of design principles based on The Principles of Beautiful Web Design, covering seven categories: defining good design, webpage anatomy, system grid, balance, unity, emphasis, and responsive  design.  The  findings  demonstrate  that  dr.evoo®  effectively  applies  design  principles, creating an engaging and effective user experience. Positive responses from respondents highlight the  success  in  defining  good  design,  webpage  anatomy,  and  system  grid.  The  application  of balance, unity, and emphasis principles results in a consistent and appealing visual presentation. The  situs’s  respo nsive  design  ensures  an  optimal  user  experience  across  devices,  emphasizing dr.evoo®’s  commitment  to  accessibility  and  responsiveness  in  crafting  an  inclusive  and  efficient online shopping environment.
Keywords : Layout, composition, dr.evoo®, e-commerce, website

## Pendahuluan
Perkembangan  teknologi  informasi  saat  ini  semakin  intensif  didukung  dengan infrastruktur  pendukung  yang  telah  dibangun  oleh  pemerintah  maupun  swasta  terutama  di dalam bisnis. Melonjaknya bisnis berbasis teknologi ini karena adanya peningkatan pengguna internet oleh masyarakat, sehingga muncul kesempatan untuk menjual barang-barang secara daring hal ini telah menyebabkan berkembangnya niaga-el. Niaga-el menurut Hartman (dalam Romindo,  2019:  2-3)  merupakan  suatu  jenis  dari  mekanisme  bisnis  secara  elektronik  yang memfokuskan diri pada transaksi bisnis berbasis individu dengan menggunakan internet sebagai medium pertukaran barang atau jasa baik antara dua institusi (B-to-B) maupun antar institusi langsung (B-to-C). Maraknya komunitas bisnis yang menggunakan internet sebagai media secara tidak  langsung  telah menciptakan  dunia  bagi  para  pebisnis  di  dunia  maya,  dimana  tidak  ada batasan dunia yang memungkinkan seseorang berkomunikasi dengan orang lain secara efisien dan  efektif  ini  secara  langsung  merubah  cara  perusahaan  dalam  melakukan  bisnis  dengan perusahaan lain atau dengan konsumen.
Adanya niaga-el memberikan keuntungan dalam mempromosikan barang menjadi lebih mudah karena dilakukan secara langsung ( real time ) dan interaktif, distribusi barang semakin terjangkau, mendapatkan informasi produk lebih detail dan direspon secara langsung melalui online , biaya dan waktu menjadi lebih hemat karena dipesan secara online , dan memberikan kesempatan  bagi  para  penjual  untuk  mempromosikan  produk  secara  bebas  melalui online . Selain dari sisi penjual, pembeli juga diberikan keuntungan dalam berbelanja secara online yaitu pembeli  tidak  perlu  berpindah-pindah  tempat  dan  mengeluarkan  biaya  yang  lebih  untuk transportasi  dan  mendapatkan  biaya  yang  lebih  murah  untuk  mendapatkan  produk  yang diinginkan dari luar kota (Hernikawati, 2021: 194).
Semakin  banyaknya  konsumen  yang  kini  beralih  belanja  online,  hal  ini menjadi  sangat penting bagi platform  niaga-el  untuk  memastikan pengalaman pengguna yang lebih optimal. Salah  satu  aspek  yang  sangat  mempengaruhi  pengalaman  pengguna  adalah  tampilan  situs. Suksesnya sebuah tampilan situs tidak pernah lepas dari beberapa faktor, antara lain usabilitas, sistem navigasi, desain visual, konten, kompatibilitas, durasi proses, fungsionalitas, aksesibilitas, dan interaktif (Tadzkiy, 2020: 450). Namun untuk menciptakan situs niaga-el yang nyaman bagi penggunanya  diperlukan  satu  cara  dalam  proses  penciptaannya  menurut  Beaird  (2014:  xiv) yakni tata letak dan komposisi.
Tata  letak dan  komposisi  dalam  penciptaan  situs sangatlah  penting,  karena  dengan adanya tata letak dan komposisi desain situs yang tersusun dengan baik dapat menceritakan desain yang ingin disampaikan. Komposisi yang kuat tidak hanya membuat menarik penglihatan saja  tetapi  menarik  perhatian  juga, audiences akan  tetap  berada  di  dalam  situs untuk mempelajari produk yang dijual sekaligus dan adanya kemungkinan audiences membeli produk tersebut. Selain itu desain tata letak yang kuat dapat membantu audience dalam menemukan apa yang dicari lebih cepat dan mudah serta menyampaikan pesan brand dengan percaya diri (Simplified,  2019).  Hal  ini  berkaitan  dengan  dalam  tampilan  situs  niaga-el,  dimana  dengan adanya  tata  letak dan  komposisi  dapat  menarik  perhatian audience dan  lebih  mudah  dalam mempelajari brand serta produk di dalam brand tersebut serta membantu situs menjadi lebih interaktif.  Salah  satu  aspek  yang  dapat  mempengaruhi  pengalaman  pengguna  adalah  situs niaga-el dr.evoo®  yang  memiliki  potensi  besar  dalam  meningkatkan  penjualan  dan  menarik konsumen dengan memastikan tampilan situs yang efektif. Tampilan situs yang menarik dapat mempengaruhi keputusan pembelian dan kesuksesan bisnis.
dr.evoo®  merupakan  perusahaan yang  bergerak  dalam  penjualan  perhiasan  anti  alergi dan  kulit  sensitif  sejak  tahun  2017  dengan  media  penjualannya  melalui  situs  niaga-el.  Situs niaga-el  resmi  dr.evoo®  menjual  produk  perhiasan  dr.evoo®  yang  paling  lengkap  dalam
penjualan produk serta informasi mengenai produk dr.evoo® sendiri mulai dari anting, cincin, kalung, hingga gelang baik gelang rantai maupun gelang silikon yang tidak membuat kulit sensitif atau alergi. Namun dr.evoo® berada pada persaingan yang ketat dalam industri  niaga-el dan sedang berusaha untuk memastikan bahwa tampilan situs mereka efektif dan menarik perhatian pengguna.  Terdapat  tantangan  dalam  pengaturan  tata  letak dan  komposisi  situs  niaga-el dr.evoo® harus ditampilkan secara optimal sehingga pengguna dengan mudah dapat menavigasi dan  melihat  detail  produk.  Serta  memastikan  bahwa  tampilan  situs  niaga-el dr.evoo®  dapat beradaptasi dengan berbagai perangkat yang digunakan oleh pengguna sehingga tetap efektif dan menarik.
Untuk  mengatasi dari permasalahan tersebut dibutuhkan solusi analisis komposisi dan tata letak yang lebih mendalam untuk meningkatkan tampilan situs untuk memenuhi kebutuhan konsumen  dengan  memberikan  tampilan  situs  niaga-el yang  menarik  dan  informatif,  serta memastikan  pengguna  di  berbagai  perangkat  dapat  menikmati  pengalaman  berbelanja  yang optimal.  Hal  ini  membantu  dr.evoo®  mempertahankan  dan  meningkatkan  daya  tarik  bisnis niaga-el dr.evoo®  dan  memastikan  penampilan  situs  tidak  lagi  menjadi  penghalang  yang mempengaruhi keputusan pembelian pengguna. Tata letak dan komposisi pada situs niaga-el dr.evoo® menarik untuk dikaji. Dalam penelitian ini situs niaga-el dr.evoo® akan dikaji jenis tata letak dan komposisi apa yang digunakan berdasarkan “The Principles of Beautiful Web Design” oleh James Beaird (2020) berdasarkan 7 kategori yakni defining good design, webpage anatomy, system grid, balance, unity, emphasis, dan responsive design . Serta menunjukkan preview situs niaga-el dr.evoo® dalam berbagai ukuran perangkat, serta memastikan apakah  tata letak dan komposisi  pada  situs  niaga-el  dr.evoo®  betul-betul  sesuai  dengan  fungsinya.  Dengan  adanya penelitian ini diharapkan, kita dapat memahami struktur tata letak dan komposisi dalam situs niaga-el .

## Metode Penelitian
Metode  penelitian  yang  digunakan  dalam  penelitian  ini  adalah  menggunakan  metode penelitian kualitatif deskriptif. Metode penelitian kualitatif adalah metode penelitian sistematis untuk  mengkaji suatu objek, hasil penelitian yang diharapkan bukanlah berdasarkan ukuran- ukuran kuantitas, melainkan dari makna fenomena yang terjadi  (Prastowo, 2016: 24). Dalam penelitian ini terdapat data yang dikumpulkan berupa informasi yang berkaitan dengan masalah penelitian.  Data  ini  dikumpulkan  dari  pendapat  dan  persepsi  responden,  baik  secara  lisan maupun  tulisan.  Pengumpulan  data  dalam  penelitian  ini  menggunakan  teknik  observasi, wawancara dan kuesioner dalam pengumpulan data.
Penelitian  ini  menggunakan  metode  pengumpulan  data  lainnya  yakni  kepustakaan, dokumentasi, dan narasumber. Dalam penelitian ini, peneliti mengumpulkan data kepustakaan meliputi jurnal, buku, dan dokumen yang terkait dengan objek penelitian. Dokumentasi dalam penelitian  ini  mengumpulkan  data  dengan  mengambil screenshots tampilan  situs  niaga-el dr.evoo®.  Terakhir  narasumber  yang  diikutsertakan  dalam  penelitian  ini  adalah  orang-orang yang  memiliki  keahlian  khusus  dalam  bidang  desain  situs.  Desain  yang  dipilih  menjadi  objek pengkajian adalah situs niaga-el dr.evoo® dikaji dalam tata letak dan komposisi.

## Hasil dan Pembahasan
Tata letak dan Komposisi
Dalam  pembuatan  tata  letak dan  komposisi  yang  baik,  pertama  dilihat  dari  tingkat kemudahan  pengguna  yang  difokuskan  pada  fungsionalitas,  efektif  dalam  menyampaikan informasi,  dan  efisien.  Kedua  dari  sudut  pandang  nilai  estetika  dan  daya  tarik  visual  dalam desain.  Beberapa  desainer  terperangkap  dalam  menciptakan  nilai  estetika  dan  grafis  namun melupakan faktor pengguna, ada juga yang terlalu fokus dengan tingkat penggunaan namun melupakan daya tarik visualnya (Beaird, 2014: 7). Selain memperhatikan dua faktor tersebut, pengguna  akan  senang  jika  konten  atau  informasi  yang  dibutuhkan  masuk  ke  dalam  desain. Desainer dapat menciptakan desain situs berdasarkan tata letak dan komposisi yakni sebagai berikut.

## Defining Good Design
Hal  terpenting  yang  perlu  diingat  dalam  desain  adalah  sebuah  komunikasi.  Situs  yang berfungsi dan menyajikan informasi dengan baik tetapi buruk, tidak akan ada pengguna yang mau  menggunakannya.  Demikian  pula  dengan  pembuatan  situs  yang  indah  namun  sulit digunakan atau tidak dapat diakses, pengguna secara tidak langsung akan meninggalkan situs tersebut. Elemen desain dan fungsionalitas desain situs yang telah selesai akan berfungsi sebagai kesatuan unit yang kohesif. Terdapat beberapa alasan mengapa desain situs harus didefinisikan dengan baik (Beaird, 2020).
1. Users Are Pleased by the Design but Drawn to the Content
Navigasi utama dalam situs harus terlihat jelas di dalam halaman, dengan setiap link diberi judul deskriptif. Struktur navigasi tidak  hanya merespons perubahan tampilan saat kursor bergerak diatasnya, namun juga menyoroti halaman atau bagian yang sedang aktif, yang memiliki peran penting dalam membantu pengguna menemukan lokasi mereka di situs dan  memahami  cara  mencapai  tujuan  yang  diinginkan.  Situs  niaga-el dr.evoo® menggunakan template yang bisa membimbing konsumen untuk fokus kepada konten dan halaman  produk  yang  dimiliki  dr.evoo®,  karena  situs  yang  digunakan  menggunakan background berwarna putih sehingga konsumen dapat langsung membaca inti dari konten situs dr.evoo®
2. Users Can Move about Easily via Intuitive Navigation Dalam menampilkan sebuah  situs, harus dipastikan bahwa  blok  navigasi utama itu sendiri harus terlihat jelas di setiap halaman. Struktur navigasi yang tidak hanya mengubah tampilan saat diarahkan, tetapi juga menampilkan halaman atau bagian aktif, membantu pengguna melihat di mana mereka berada dan kemana mereka harus ke tempat yang dituju. Dalam situs niaga-el dr.evoo®, navigasi yang digunakan dibuat dengan huruf lowercase dan teks berwarna abu-abu tua, sehingga dapat mudah dibaca.
3. Users Recognize Each Page as Belonging to the Site Meskipun ada perbedaan secara signifikan antara  tata letak halaman beranda dan bagian halaman lainnya, tema atau gaya yang konsisten diperlukan di seluruh halaman situs untuk membantu menyatukan desain. Situs niaga-el dr.evoo® sangat mudah dikenali karena terdapat warna putih, abu-abu, dan ungu yang mendominasi dan digunakan juga sebagai warna khas dr.evoo®.

## Webpage Anatomy
Anatomi situs terdiri dari beberapa komponen yang terdiri dari container , logo, navigasi, konten, footer ,  dan whitespace . Container merupakan  sebuah  wadah  dimana  elemen  akan tersusun  dan  memiliki  sifat  fleksibel,  dimana container bisa  menyesuaikan  ukuran  tanpa mengurangi  isi  konten.  Logo  sebagai  identitas  dari  kepemilikan  situs.  Navigasi  merupakan tindakan  untuk  mencari  halaman  di  dalam  internet  yang  berbentuk  situs  web.  Konten merupakan titik fokus desain situs yang berisikan teks, gambar, atau video di dalam situs. Footer
berlokasi  di  bawah  halaman  situs,  yang  berisikan  informasi  hak  cipta,  kontak,  dan  beberapa tautan ke  bagian utama  situs. Terakhir, whitespace atau ruang negatif yang bertujuan untuk mengarahkan  pandangan user, namun  juga  membantu  menciptakan  keseimbangan  dan kesatuan (Beaird, 2014: 8-10).
1. Container
Web page anatomy pada situs niaga-el dr.evoo® terdapat container sebagai wadah untuk menyusun elemen dari setiap laman yang dimiliki situs niaga-el dr.evoo®. Container memiliki  peran  sebagai  wadah  yang  strategis  dalam  menata  elemen-elemen  visual  yang membentuk tampilan visual dan fungsionalitas pada setiap halaman situs niaga-el dr.evoo®. Penggunaan container diimplementasikan  dengan  cermat  untuk  memastikan  susunan elemen yang teratur dan estetis, menarik bagi pengguna. Dengan adanya container , setiap halaman  dalam  situs  niaga-el dr.evoo®  menjadi  lebih  terorganisir  dan  mudah  dinavigasi, meningkatkan pengalaman pengguna secara keseluruhan.
2. Logo
Logo dr.evoo® berada di paling atas dan di posisi tengah sebagai identitas. Dengan penempatan yang terpusat dan mendominasi di bagian atas, logo ini memberikan kesan yang langsung terfokus pada merek, menonjolkan citra merek dr.evoo® dengan jelas.
Gambar 1. Logo dr.evoo® pada Situs niaga-el dr.evoo®

## 3. Header
Header yang bertuliskan “klik disini untuk registrasi tindik” sebagai bentuk informasi yang penting untuk  konsumen yang ingin mendaftarkan jasa  pelayanan tindik  untuk  bayi maupun dewasa. Pesan ini dirancang secara strategis untuk memberikan pengguna  situs informasi  yang  jelas  dan  langsung,  memudahkan  proses  registrasi  bagi  pengunjung  yang tertarik dengan layanan tindik yang disediakan oleh dr.evoo®.
Gambar 2. Header Situs niaga-el dr.evoo®
4. Navigasi
Navigasi dari situs dr.evoo® yang terdiri dari beranda, sale , koleksi, perhiasan, tindik, gift  card ,  rekanan,  tentang  kami,  dan  juga  ikon  kaca  pembesar.  Pada  ukuran desktop , digunakan  navigasi  horizontal  umum  dengan  urutan  kiri  ke  kanan  untuk  integrasi  yang mudah. Navigasi dropdown digunakan untuk rincian koleksi, perhiasan, tindik, dan tentang kami. Breadcrumbs sebagai  navigasi  sekunder  membantu  pengguna  memahami  lokasi mereka  dalam  situs.  Pada  ukuran smartphone, digunakan  navigasi hamburger untuk menghemat  ruang,  diakses  melalui  ikon  tiga  garis  dengan dropdown menu  serupa  pada tampilan desktop .
Gambar 3. Navigasi Situs niaga-el pada Tampilan Desktop
Gambar 4. Navigasi Situs niaga-el pada Tampilan Smartphone
5. Konten
Konten dari situs niaga-el dr.evoo® menampilkan beragam informasi tergantung pada navigasi  yang  dipilih.  Setiap  bagian  dari  situs  ini  menawarkan  kekayaan  informasi  yang mencakup  berbagai  aspek  produk  dan  layanan  dr.evoo®,  memberikan  pengguna pengalaman yang mendalam dan informatif sepanjang perjalanan pengguna melalui  situs ini. Konten dirancang untuk memberikan gambaran yang lebih detail mengenai berbagai produk perhiasan anti alergi dan kulit sensitif yang ditawarkan oleh dr.evoo®, memastikan bahwa  pengguna  dapat  dengan  mudah  mengakses  dan  mengeksplorasi  informasi  yang mereka cari tanpa hambatan.
a. Halaman Beranda
Halaman beranda situs niaga-el dr.evoo® menampilkan banner yang memuat foto produk dan model dr.evoo®. Tersedia tiga kategori produk dr.evoo®: “14K Solid Gold”, “For Babies 0+ Month”, dan “Stôry”. Setiap kategori menampilkan produk dengan nama dan harga. Banner informasi secara vertikal menampilkan koleksi produk secara singkat, metode tindik steril “ One Push-Technology ”, dan koleksi perhiasan Titanium. Informasi meliputi  slogan  “Evolve,  You.”,  rekanan,  dan  artikel  gaya  hidup.  Pada  bagian  akhir, terdapat  logo  “i  am  medic -grade ™”,  “allergy  no  worry”,  logo  FDA  ( Food  and  Drug Administrations ),  dan  logo medical  grade yang  disetujui  oleh  menteri  kesehatan internasional.
b. Halaman Koleksi
Konten  pada  navigasi  koleksi  terdiri  dari banner informasi  yang  berisikan  foto produk  dan  teks  penjelasan  yang  berkaitan  dengan  tema  produk  yang  dimiliki  oleh dr.evoo®. Menampilkan pula foto produk tema dr.evoo® dengan latar belakang warna abu-abu, nama, dan harga produk.
c. Halaman Perhiasan
Konten pada navigasi perhiasan dr.evoo® memiliki tata letak yang sama dengan konten navigasi koleksi, namun yang menjadi pembeda adalah ketika pengguna memilih navigasi  perhiasan  tanpa  memilih  secara  spesifik  produk  apa  yang  ingin  dicari  oleh pengguna. Konten yang ditampilkan adalah banner dari setiap kategori produk “Anting - anting”,  “Stôry”,  “Gantari”,  “Titanium”,  “Kalung”,  “Gelang  Rantai”,  dan  “Newborn” dengan foto produk serta tampilan slide produk dr.evoo® dari setiap kategorinya.
d. Halaman Tampilan Produk
Halaman produk dr.evoo® menampilkan konten foto produk dari berbagai sisi dan deskripsi  produk  yang  dijelaskan  secara  detail  mulai  dari  kode  SKU  produk,  bahan material  yang  digunakan  dalam  pembuatan  perhiasan  dr.evoo®,  rekomendasi  usia, dimensi, garansi dan keamanan dari produk, dan sistem pengiriman yang dilakukan oleh dr.evoo® dijelaskan secara detail dalam konten ini. Selain itu terdapat juga rekomendasi produk yang secara otomatis akan dimunculkan ketika memasuki salah satu halaman produk dan histori produk yang sudah dilihat sebelumnya.
e. Halaman Tindik Halaman tindik dr.evoo® dibagi menjadi empat bagian. Pertama halaman tindik menampilkan foto model dalam proses  tindik  dengan teknologi One-push , dilengkapi dengan judul “ One-push Technology ” dan penjelasan rinci. Terdapat juga logo “ allergy no worry” , logo FDA ( Food and Drug Administrations ), dan logo medical grade . Selain itu, disajikan produk alat tindik, video “5 Langkah Mudah Tindik dr.evoo®”, serta opsi paket tindik untuk bayi dan umum. FAQ juga tersedia.
Kedua,  halaman  Tindik  Newborn  menampilkan  produk  dr.evoo®  untuk  bayi dengan logo dan persetujuan kesehatan internasional. Terdapat infografis “5 Langkah Mudah Tindik dr.evoo®” dan kategori produk “Tindik Newborn” dengan pilihan 24K Gold Plated  dan  14K  Solid  Gold.  FAQ  juga  disertakan.  Ketiga,  halaman  Registrasi  Tindik berisikan  informasi  jadwal  operasional  dan  pengaturan  registrasi  tindik  di  dr.evoo®. Disertakan formulir registrasi untuk pengguna.
Keempat,  halaman  Aftercare  menampilkan  model  menggunakan  produk aftercare dr.evoo®, judul “Aftercare”, dan subjudul “Layanan Perawatan Pasca Tindik”. Infografis  menjelaskan  proses  penyembuhan,  pemasangan  anting,  penggunaan aftercare lotion , dan tips bagi pengguna hijab. FAQ juga disertakan.
f. Halaman Gift Card
Konten dari navigasi gift card menampilkan banner informasi yang berisikan foto produk dan teks penjelasan yang berkaitan dengan penjualan gift card . Halaman produk penjualan gift card sama dengan isi konten dengan halaman produk perhiasan dr.evoo® dengan menampilkan foto produk gift card , pilihan nominal harga, dan deskripsi detail termasuk kode SKU, garansi, keamanan, dan sistem pengiriman dr.evoo®. Halaman ini juga menampilkan rekomendasi produk otomatis dan histori produk yang telah dilihat sebelumnya.
g. Halaman Rekanan Halaman Rekanan di situs niaga-el dr.evoo® menampilkan foto produk dan alat tindik  dr.evoo® dengan judul “Daftar Rekanan dr.evoo®”. Terdapat informasi tentang 200  rekanan  resmi  dr.evoo®  di  seluruh  Indonesia.  Ilustrasi  peta  Indonesia  dengan penanda rekanan tersebar di seluruh Indonesia. Navigasi abjad dan pendaftaran sebagai
rekanan  disediakan  untuk  mempermudah  pengguna mencari  dan  bergabung  dengan kemitraan dr.evoo®
h. Halaman Tentang Kami ( About Us )
Halaman tentang kami dibagi menjadi tiga bagian. Halaman profil menampilkan judul “Tentang Kami”, “dr.evoo®”, “Evolve, You.”, “PT. Drevoo Inovatif Indonesia”, dan “Team  Profesional”  dengan  penjelasan  masing -masing.  Logo  dr.evoo®  dan  ilustrasi tangan membentuk hati melengkapi halaman ini. Bagian kedua, halaman #drevoopeduli (csr), menampilkan foto, judul, teks, dan kolom komentar dengan input nama, email, dan  komentar. Halaman  ketiga,  “Hubungi  Kami”,  berisikan  foto  produk  dr.evoo®, informasi alamat, nomor telepon, dan email kontak. Terdapat juga kolom pesan dengan input nama, email, telepon, dan pesan.
i. Halaman Keranjang Belanja Pada halaman keranjang belanja, terdapat sebuah tabel yang memuat informasi detail mengenai produk yang dipilih, jumlahnya, harga per item, dan total biaya yang perlu dibayarkan oleh pengguna. Selain itu, navigasi dalam bentuk tombol “ checkout ” tersedia  untuk  memudahkan  pengguna  melanjutkan  proses  pembelian.  Navigasi tambahan yang mencakup “lanjutkan belanja”, “perkiraan ongkos kirim”, dan “catatan untuk  penjual”  juga  disertakan  dengan  menggunakan underline ,  guna  memberikan kemudahan navigasi dan aksesibilitas kepada pengguna.
j. Halaman Pembayaran
Halaman  pembayaran  dibagi  menjadi  dua  kolom.  Kolom  sisi  kiri  memuat informasi kontak, alamat pengiriman, pilihan pengiriman, dan opsi pembayaran dengan tombol “bayar” di bagian bawah. Kolom sisi kanan menampilkan detail produk dengan foto, nama, dan harga produk. Ada juga kolom untuk kode gift card atau voucher dengan tombol  “pakai”.  Subtotal,  biaya  pengiriman,  dan  total  pembelanjaan  ditampilkan transparan, memastikan pemahaman yang detail dan pengalaman pengguna yang lebih efisien.
6. Footer
Footer pada  situs  niaga-el dr.evoo®  tidak  hanya  memuat  navigasi  horizontal  yang detail,  namun  juga  menyajikan  berbagai  elemen  penting  yang  melengkapi  pengalaman pengguna.  Informasi  hak  cipta  menjamin  keaslian  dan  keamanan  produk  dr.evoo®.  Logo bank  sebagai  mitra  pembayaran  menambahkan  kepercayaan  pada  sistem  pembayaran. Dengan  menyertakan  elemen-elemen  ini,  dr.evoo®  meningkatkan  transparansi  dan mempermudah  pengguna  untuk  mengakses  informasi  tambahan  terkait  situs  dan layanannya.
Gambar 5. Footer Situs niaga-el dr.evoo®
7. Whitespace
Whitespace diimplementasikan  dalam  desain  situs  niaga-el dr.evoo®  untuk menciptakan  pengalaman  pengguna  yang  lebih  menarik  dan  efektif.  Penggunaan whitespace ini tidak hanya berfungsi sebagai elemen visual, namun juga sebagai alat untuk memandu perhatian pengguna pada konten yang disajikan. Dengan memberikan ruang yang cukup  di  sekitar  elemen-elemen  utama,  dr.evoo®  menciptakan  tampilan  yang  bersih, terorganisir, dan mudah dipahami.

## System Grid
Sistem grid dalam situs merupakan sistem untuk mengatur isi konten di dalam halaman serta  menjajarkan  urutan  yang  sesuai.  Hal  ini  bertujuan  untuk  membentuk  kerangka user interface (Gilis, 2022). Menurut Beaird (2014: 14), system grid column sendiri terdiri dari 12, 16, dan  24  kolom.  Kolom  ini  sangat  membantu  dalam  pengaturan  desain  karena  elemen  desain dapat diatur sesuai dengan batas kolom agar mencapai sebuah keseimbangan. Sementara pada ukuran smartphone memiliki ukuran tetap adalah 4 kolom (Tang, 2019). Sistem grid yang diterapkan dalam struktur situs niaga-el dr.evoo® memiliki keunggulan dalam pengaturan elemen. Dalam penggunaannya, situs ini menggunakan 12 kolom grid ketika diakses melalui perangkat desktop atau layar yang lebih besar, 4 kolom grid pada smartphone , dan 8 kolom pada perangkat tablet . Setiap kolom pada sistem grid berfungsi sebagai batas yang membantu  dalam  penataan  dan  penempatan  elemen-elemen  konten  pada  halaman  produk. Penggunaan  12  kolom,  8  kolom,  dan  4  kolom grid pada  situs  niaga-el dr.evoo®  telah  diatur berdasarkan batas yang sudah ditentukan. Elemen-elemen yang disusun pada masing-masing perangkat menyesuaikan batas kolom, sehingga tata letak yang disusun rapi dan optimal.
Gambar 6. Sistem Grid 12 Kolom Situs niaga-el dr.evoo® Melalui Desktop
Gambar 7. Sistem Grid 4 Kolom Situs niaga-el dr.evoo® Melalui Smartphone
Gambar 8. Sistem Grid 8 Kolom Situs niaga-el dr.evoo® Melalui Tablet

## Balance (Keseimbangan)
Keseimbangan merupakan pemerataan bobot elemen visual dalam desain. Keseimbangan visual terjadi pada sumbu vertikal, pandangan kita membutuhkan bobot visual yang sama. Jika elemen di kedua sisi tata letak memiliki bobot yang sama, mereka akan menyeimbangkan satu sama lain. Keseimbangan sendiri dibagi menjadi dua yakni keseimbangan simetris dan asimetris. Keseimbangan simetris merupakan keseimbangan yang terjadi ketika unsur-unsur elemen sama berada  di  garis  sumbu.  Keseimbangan  asimetris  merupakan  keseimbangan  yang  berbentuk abstrak yang melibatkan ukuran, bentuk, atau nada (Beaird, 2014: 16-19).
Situs niaga-el dr.evoo® mengusung prinsip keseimbangan dengan tata letak simetris pada halaman  navigasi  seperti  beranda,  koleksi,  perhiasan,  tindik,  profil,  tentang  kami,  dan blog . Namun, saat mengakses halaman produk, desain situs berubah menjadi keseimbangan asimetris untuk menciptakan tampilan dinamis dan menarik. Perubahan ini bertujuan untuk memberikan fokus pada produk, menciptakan visual menarik, dan menyesuaikan tata letak dengan konten khusus. Sehingga, keseimbangan antara halaman navigasi dan produk memberikan variasi visual yang memikat dalam pengalaman pengguna di situs niaga-el dr.evoo®.
Gambar 9. Balance Simteris pada Situs niaga-el dr.evoo®
Gambar 10. Balance Simteris pada Situs niaga-el dr.evoo®

## Unity (Kesatuan)
Kesatuan merupakan penggabungan teks dan bentuk yang berhubungan satu sama lain sehingga  menghasilkan  harmoni.  Kesatuan  sendiri  dibagi  menjadi  dua  yakni proximity dan repetisi. Proximity merupakan  pemindahan  elemen  yang  lebih  dekat  atau  lebih  jauh  untuk mendapatkan tampilan yang lebih teratur secara berkelompok (Reynolds, 2008:157). Repetisi merupakan penggunaan kembali elemen yang serupa di dalam desain yang akan menghadirkan rasa kesatuan, konsistensi, dan keterpaduan yang jelas (Reynolds, 2008: 155).
Bentuk  kesatuan  pada  situs  niaga-el dr.evoo®  tercermin  dalam  penggunaan  elemen- elemen yang diulang, seperti pada banner produk di halaman utama perhiasan. Pengulangan visual  pada  banner  tersebut,  yang  terdiri  dari  foto  produk  dan slide produk  dr.evoo®, menciptakan  konsistensi  desain.  Di  sisi  lain,  halaman  perhiasan  yang  terkategori  (kecuali kategori  stôry),  halaman  koleksi,  history  produk  sebelumnya,  dan  rekomendasi  produk, menampilkan pengulangan dalam tata letak foto produk dan teks dengan ukuran yang seragam. Berbeda  dengan  halaman  produk  stôry,  terdapat  perbedaan  orientasi  bentuk  yang  berbeda- beda  yakni  persegi  untuk  menampilkan  foto  produk charms dan  persegi  panjang  untuk menampilkan gelang strap . Jika pengguna sebelumnya melihat produk stôry, maka repetisi ini tidak akan terjadi, kecuali jika desainer melakukan penyesuaian kembali tata letak foto produk yang sebelumnya berorientasi persegi panjang agar dibuat serupa dengan orientasi persegi.
Gambar 11. Repetisi pada Halaman Produk Situs niaga-el dr.evoo®

## Emphasis (Penekanan)
Penekanan berfokus pada pembuatan elemen yang dapat menarik perhatian audience . Salah satu cara untuk mencapai penekanan adalah membuat elemen sebagai titik fokus. Dengan adanya  titik  fokus  setiap  elemen  dalam  halaman  web  menjadi  menarik  perhatian audience . Salah satu prinsip yang dari penekanan yang masih digunakan saat ini adalah kontras. Kontras merupakan  penjajaran  elemen  yang  berbeda,  semakin  besar  perbedaan  antara  elemen  dan sekitarnya, semakin menonjol elemen tersebut (Beaird, 2014: 24,26).
Penekanan dalam situs niaga-el dr.evoo® terfokus pada tombol navigasi Call The Action (CTA)  dan  tombol  “+  keranjang”  yang  didesain  dengan  warna  ungu  sebagai  tombol  kontras. Penggunaan  warna  kontras  pada  tombol  ini  tidak  hanya  memberikan  kenyamanan  bagi pengguna, namun juga menarik  perhatian pengguna sambil memberikan petunjuk  yang jelas mengenai langkah selanjutnya dalam proses berbelanja. Warna kontras juga diterapkan pada penunjuk  harga  potongan,  dimana  harga  yang  sudah  dipotong  ditampilkan  dengan  warna orange untuk menarik perhatian pengguna terhadap promosi yang sedang berlangsung di dalam situs. Selain itu, terdapat label yang menandakan bahwa produk sudah habis disertai dengan warna kontras, khususnya warna abu-abu gelap, memberikan indikasi visual yang jelas bahwa produk tersebut telah habis terjual.
Gambar 12. Tombol Navigasi “+ keranjang” pada Situs niaga-el dr.evoo®
Gambar 13. Harga Produk pada Situs niaga-el dr.evoo®
Gambar 14. Harga dan Model Produk pada Situs niaga-el dr.evoo®

## Responsive Design
Perangkat yang digunakan ketika mengakses situs terkadang ukuran layarnya berbeda- beda. Oleh karena itu desainer harus bisa menyesuaikan sekaligus menata alternatif tata letak sesuai dengan layar perangkat yang digunakan oleh audience . Salah satu jenis Resizing tata letak adalah responsive  design . Responsive  design merupakan  pengaturan  ukuran  tata  letak yang tidak hanya fokus pada ukuran komputer, namun pada ukuran smartphone juga memiliki ukuran variatif.  Sehingga  responsive  design  bisa  menjadi  alternatif  untuk  menyusun  situs dalam berbagai ukuran (Beaird, 2014: 40-42).
Situs niaga-el dr.evoo® dirancang dengan tata letak responsif, tata letak dari situs dapat menyesuaikan diri dengan ukuran layar perangkat yang digunakan. Ketika pengguna membuka situs  niaga-el dr.evoo®  melalui  komputer  atau  laptop,  tata  letak situs  akan  menampilkan
tampilan yang lebih luas, memperlihatkan keseluruhan elemen desain dengan jelas. Sebaliknya, ketika pengguna mengakses situs niaga-el dr.evoo® dari smartphone , tata letak halaman produk akan disesuaikan lebih kecil, menciptakan tampilan yang lebih minimalis karena keterbatasan ruang pada layar perangkat tersebut.
Gambar 15. Responsive Design Situs niaga-el dr.evoo® pada Perangkat Desktop, Smartphone , dan Tablet

## Hasil Survei Dengan Responden
Dalam penelitian ini, dilakukan survei dengan tujuan untuk  mengevaluasi sejauh mana optimalitas  situs  niaga-el dr.evoo®.  Berdasarkan  kuesioner  yang  telah  dianalisis,  diperoleh sejumlah  temuan  yang  memberikan  gambaran  mendalam  mengenai  persepsi  responden terhadap  berbagai  aspek  situs  niaga-el dr.evoo®.  Hasil  ini  mencakup  berbagai  variabel  yang disusun  secara  sistematis,  memungkinkan  kita  untuk  mengevaluasi  tingkat  kepuasan  dan respons terhadap elemen-elemen desain yang ada pada situs niaga-el dr.evoo®.
Table 1 . Hasil Kuesioner Variabel Kategori Sangat Optimal Optimal Cukup Optimal Tidak Optimal Sangat Tidak Optimal f % f % f % f % f % Defining Good Design 9 37,5% 13 54,17% 1 4,17% 1 4,17% 0 0 Webpage Anatomy 18 50% 13 36,11% 2 5,56% 3 8,33% 0 0 System Grid 10 83,3% 1 8,33% 0 0 1 8,33% 0 0 Balance 4 16,67% 16 66,67% 3 12,5% 1 4,17% 0 0 Unity 5 41,67% 4 33,33% 3 25% 0 0 0 0 Emphasis 9 37,5% 10 41,67% 3 12,5% 2 8,33% 0 0 Responsive Design 6 50% 4 33,33% 2 16,6% 0 0 0 0

## Sumber: Maria (2023)
Berdasarkan  perhitungan  skala  Likert  untuk  variabel  7  kategori  situs  menurut  James Beaird  dilakukan  dengan  melibatkan  12  responden  berdasarkan  pada  tabel  diatas.  Dengan menggunakan  rumus  T  x  P n ,  dihitung  total  skor  untuk  setiap  pilihan  skor.  Hasil  perhitungan tersebut dijumlahkan, dan total skor diperoleh sebesar 607. Selanjutnya, dilakukan interpretasi skor  dengan  menentukan  nilai  tertinggi  (Y),  dan  terendah  (X),  serta interval  (I)  sebesar  20%. Dengan rumus indeks persentase, total skor dibagi dengan nilai tertinggi (Y) dikali dengan 100, hasil  akhir  menunjukkan  bahwa  optimalisasi  situs  niaga-el dr.evoo®  berada  dalam  kategori sangat optimal dengan indeks persentase sebesar 84.3%.
Respon defining good design pada situs niaga-el dr.evoo® cukup positif, dengan mayoritas responden menilai bahwa desain situs telah berhasil menggabungkan baik fungsi dan estetika. Semua  elemen  desain,  termasuk container, logo,  navigasi,  konten, footer ,  dan whitespace , mendapat  tanggapan  positif  karena  telah  mengimplementasikan  dengan  baik  oleh  sebagian besar  responden.  Penggunaan grid  system dan  keseimbangan  diterima  positif  karena  telah membantu menyusun isi konten dan menjaga keseimbangan visual, sementara prinsip kesatuan menciptakan kesatuan harmonis dalam desain.
Penggunaan warna kontras untuk menekankan unsur-unsur tertentu dan desain responsif yang memberikan pengalaman optimal pada berbagai perangkat mendapatkan respon positif dari  mayoritas  responden.  Meskipun  demikian,  pengalaman  pengguna  yang  sangat  baik diimbangi  dengan  tantangan  dalam  aspek  aksesibilitas,  terutama  bagi  pengguna  dengan gangguan penglihatan warna. Perlunya rekomendasi untuk menerapkan standar Web Content Accessibility Guidelines (WCAG) diakui sebagai langkah proaktif untuk meningkatkan inklusivitas. Konsistensi dalam desain, mulai dari beranda hingga dalam tahap pembayaran dianggap memberikan  kesan  yang  kuat  dan  mudah  diingat,  menciptakan  citra  merek  yang  konsisten. Meskipun  demikian,  area  responsivitas  gambar  pada  perangkat smartphone diidentifikasi sebagai titik yang dapat ditingkatkan. Secara keseluruhan, dr.evoo® berhasil menciptakan situs niaga-el yang tidak  hanya unggul dalam desain visual dan pengalaman pengguna, tetapi juga menunjukkan komitmen untuk terus meningkatkan aksesibilitas dan responsivitas, menciptakan lingkungan  belanja online yang  inklusif,  efisien,  dan  dapat  memenuhi  kebutuhan  beragam pengguna.

## Simpulan
Situs niaga-el dr.evoo® telah dirancang dengan mempertimbangkan prinsip-prinsip desain yang telah melibatkan tata letak dan komposisi dari 7 kategori pada “The Principles of Beautiful Web Design” oleh James Beaird. Elemen desain seperti container, logo, navigasi, konten, footer, dan  whitespace,  serta  penggunaan  sistem  grid  yang  konsisten.  Desain  situs  ini  menekankan keseimbangan dan kesatuan dengan pengulangan elemen dan penekanan pada tombol navigasi. Responsif  terhadap  berbagai  perangkat,  memberikan  situs  ini  tampilan  yang  optimal  pada komputer, smartphone, dan tablet. Survei dilakukan untuk mengevaluasi optimalisasi situs, dan hasilnya  menunjukkan  tingkat  kepuasan  yang  signifikan.  Keseluruhan  situs  niaga-el  dr.evoo® menggabungkan  fungsi,  estetika,  dan  pengalaman  pengguna  yang menyeluruh,  menciptakan media yang menarik dan efektif bagi pengguna.

## Daftar Pustaka
Ali,  F.  (2018).  Optimalisasi  Web  Design  STMK  Trisakti  Berdasarkan  Layout  and Composition. Magenta| Official Journal STMK Trisakti , 2 (01), 257-270.
https://orcid.org/0000-0002-5469-0663 .
Beaird, J. (2014). The Principles of Beautiful Web Design . 3th Edition ed. Canada: Sitepoint.
Beaird, J. (2020). The Principles of Beautiful Web Design . 4th Edition ed. Canada: Sitepoint.
Bramantya, A. ( 2016 ). Kajian Layout Desain Web OLX. Co. Id. Jurnal Pendidikan Seni Rupa , 4 , 469-477. https://ejournal.unesa.ac.id/index.php/va/article/view/17759 .
Ekarini, F. (2017). Analisis Desain Website Bni, Bukopin, J. Co Donuts dan Mcdonals Menurut Buku  “The  Principles  Of  Beautiful  Web  Design”. Elinvo  (Electronics,  Informatics,  and Vocational Education) , 2 (1), 8-20. https://doi.org/10.21831/elinvo.v2i1.14489 .
Gillis,  O.  (2022).  6  Rules  for  Creating  Grid  Layouts  in  Web  Design.  Elementor. https://elementor.com/blog/grid-design/# .
Hanafi, A. (2012). Software Design Pattern Pada Situs-Situs ECommerce. https://ejournal.unjaya.ac.id/index.php/teknomatika/article/view/396 .
Hanifah,  T.  (2020).  Analisis  kualitas  website  e-commerce  berdasarkan  prinsip  desain web. DEKAVE: Jurnal Desain Komunikasi Visual , 10 (3), 448-467.
https://doi.org/10.24036/dekave.v10i3.109004 .
Hernikawati, D. (2021). Analisis Dampak Pandemi COVID-19 terhadap Jumlah Kunjungan pada Situs E-Commerce di Indonesia Menggunakan Uji T Berpasangan. Jurnal Studi Komunikasi Dan Media , 25 (2), 191-202. https://doi.org/10.31445/jskm.2021.4389 .
Kingston,  C.  (2019).  Key  Principles  for  Better  Design  Composition.  Adobe  XD. https://xd.adobe.com/ideas/process/ui-design/design-composition-key-principles/ .
Kuswanto, H. (2017). Analisis Prinsip Layout and Composition pada Web Design Perusahaan PT.
Bank  Rakyat  Indonesia,  Tbk  dan  PT.  FIF  Group  berdasarkan  Buku  “The  Principle  of Beautifull  Website  Design  By  Jason  Beaird”. Elinvo  (Electronics,  Informatics,  and Vocational Education) , 2 (1), 1-7. https://doi.org/10.21831/elinvo.v2i1.14488 .
Maulana, A., Arjun, N. R., Akbar, F., Suryanti, N. A., & Firmansyah, H. (2021). Peran e-commerce di  tengah  pandemi  terhadap  gaya  hidup  masyarakat  Indonesia  masa  kini. Journal  of Education and Technology , 1 (1), 55-61. http://jurnalilmiah.org/journal/index.php/jet/article/view/41 .
Nurrohmah, S., & Andrian, R. (2023). Mendesain Ulang  Tampilan UI Website Desa Sukamukti Menggunakan  Metode  Design  Thinking. Jurnal  Teknologi  dan  Informasi , 13 (1),  29-43. https://doi.org/10.34010/jati.v13i1.8756 .
Prastowo,  A.  (2016). Metode  Penelitian  Kualitatif  dalam  Perspektif  Rancangan  Penelitian . Yogyakarta: Ar-Ruzz Media.
Reynolds, G. (2008). The Big Four: Contrast, Repetition, Alignment, Proximity. Presentation Zen. https://www.presentationzen.com/chapter6_spread.pdf .
Romano,  J.,  &  Spivak,  E.  (2021).  10  Best  Website  Layout  Ideas  to  Get  You  Started.  Wix. https://www.wix.com/blog/2020/02/situs-layouts/ .
Romindo, et all. (2019). E-Commerce: Implementasi, Strategi, dan Inovasinya . Medan: Yayasan Kita Menulis.
Simplified. (2019). 7 Basic Principles of Graphic Design Foundations : Composition and Layout. Simplified. https://simplified.com/blog/design/graphic-design-composition-and-layout/ . Tang,  C.  (2019).  Responsive  grids  and  how  to  actually  use  them.  UX  Collective. https://uxdesign.cc/responsive-grids-and-how-to-actually-use-them-970de4c16e01 .