Analisis Desain Website BRI, BRI Syariah,

Matahari Departement Store, dan MatahariMall.com melalui

Pendekatan The Principles of Beautiful Web Design

Diajukan Untuk Memenuhi Ujian Akhir Semester (UAS)

Mata Kuliah Sistem Multimedia
Dosen Pengampu : Handaru Jati, Ph.D

Oleh :

HENNY PRASETYANI
NIM. 15720251010

PENDIDIKAN TEKNIK ELEKTRONIKA DAN INFORMATIKA

PROGRAM PASCASARJANA
UNIVERSITAS NEGERI YOGYAKARTA
2017
 Analisis Desain Website BRI, BRI Syariah,
Matahari Departement Store, dan
MatahariMall.com melalui
Pendekatan The Principles of Beautiful Web Design
Henny Prasetyani – 15720251010
Pendidikan Teknik Elektronika dan Informatika, Pascasarjana Universitas Negeri Yogyakarta
hennyprasetyani@rocketmail.com
Abstrak - Paper ini bertujuan untuk mengetahui hasil dari
analisis desain website melalui pendekaktan “The Principle
Beautiful Web Design” menggunakan tujuh variabel antara
lain Defining good Design, Web Page Anatomy, Grid Theory,
Balance, Unity, Bread and Butter Layout dan Fresh Trends.
Membandingkan empat website yang terdiri 2 jenis website
perbankan dan 2 jenis penjualan produk yaitu website BRI
dengan website BRI Syariah dan website Matahari
Departement Store dengan website MatahariMall.com.
Website penjualan produk lebih baik dibandingan dengan
website perbankan dalam hal tampilan desain website dan
hampir seluruh variabel digunakan dalam mendesain
tampilan websitenya. Walaupun merupakan bagian dari
perusahaan yang sama namun tampilan desain website
berbeda.
Kata Kunci: Pendekatan “The Principle Beautiful Web
Design”, Website.
I. PENDAHULUAN
Penggunaan internet berkembang secara pesat dan
hampir semua aspek kehidupan manusia tidak dapat
dipisahkan dari penggunan internet. Hal ini dapat dilihat
dari data terbaru We Are Social pada Agustus 2015,
pengguna internet aktif di seluruh dunia kini mencapai
angka 3,17 miliar. Dari tahun ke tahun, jumlah pengguna
internet akan tumbuh hingga 7,6%. Fenomena ini tidak
terlepas dari kebutuhan manusia akan tuntutan
kemudahan dari berbagai hal dalam aspek kehidupan.
Bidang pemasaran produk juga tidak terlepas dari
dampak pengunaan internet yang terus berkembang.
Internet akan memudahkan pemasaran produk mereka
sehingga produk akan lebih dikenal. Salah satu media
internet yang digunakan yaitu melalui website. Website
merupakan kumpulan web page yang telah dihubungkan
dan berisi informasi tentang produk, organisasi, dan lain-
lain (Merriam-Webster’s online dictionary). Web page
yang baik disusun dengan prinsip tata letak dan
komposisi yang diperhatikan sehingga dapat menarik
perhatian pengunjung. Maka dari itu perlu membuat
desain website yang baik agar pengunjung dapat
1
merespon tujuan dari website tersebut dan akan kembali
lagi untuk mengunjunginya.
Dalam membuat desain website yang baik maka
diperlukan prinsip-prinsip dan salah satu teori yang dapat
digunakan yaitu teori the principles of beautiful web
design. Prinsip tentang tata letak dan komposisi
merupakan hal paling awal yang perlu diperhatikan.
Prinsip tata letak dan komposisi ini terdiri dari 12 variabel
yang dapat digunakan.
Dunia perbankan adalah salah satu bidang yang
sangat membutuhkan website dalam penyampaian
informasi kepada para nasabah. Diharapkan dengan
penggunaan website para nasabah yang membutuhkan
informasi tidak perlu lagi datang lansung ke bank. Hal ini
dapat memudahkan dan menghemat waktu para nasabah.
Salah satu bank di Indonesia yang membutuhkan website
dalam ini yaitu Bank BRI yang dapat di akses pada
http://www.bri.co.id/.
BRI juga melayani proses perbankan secara syariah
yaitu pada BRI Syariah. BRI dan BRI Syariah merupakan
perusahan terpisah namun saham yang dimiliki BRI
Syariah sebagian besar masih dari BRI. BRI Syariah
dapat diakses melalui http://www.brisyariah.co.id/.
Sehingga desain website yang dimilki keduanya juga akan
berbeda walaupun BRI Syariah awalnya merupakan
bagian dari BRI.
Salah satu bidang lagi yang sangat membutuhkan
website dalam pemasaran produknya adalah Matahari
Departement Store. Walaupun awalnya perusahaan ini
hanya berpromosi lewat toko fisik, namun seiring
berkembangnya pengguna internet perusahaan ini juga
berpromosi lewat website. Matahari Departement Store
dapat diakses pada laman http://www.matahari.co.id/.
Departement Store membuat situs perdagangan
elektronik berupa toko online (e-commerce) dengan nama
MatahariMall.com. Diharapakan dengan pemanfaatan
website ini akan meningkatkan penjualan dari Matahari
Departement Store dan dapat diakses pada laman
https://www.mataharimall.com/. Walaupun
MatahariMall.com merupakan anak perusahaan dari
Matahari Departement Store namun keduanya memiliki
desain website yang sangat berbeda.
Maka paper ini bertujuan untuk menganalisis desain
website dari BRI dengan BRI Syariah dan Matahari
Departement Store dengan MatahariMall.com. Analisis
desain website mengunakan konsep The Principles of
Beautiful Web Design pada prinsip tata letak dan
komposisi. Tata letak dan komposisi yang dianalisis
meliputi defining good design, web page anatomy, grid
theory, balance, unity, bread-and-butter layouts dan fresh
trends.
II. LITERATURE REVIEW DAN METODE
Literature Review
Mengacu pada pendapat Jason Baeird dalam The
Principles of Beautiful Web Design (2010: 1) pada prinsip
Layout and Composition, hal yang paling sulit dalam
melakukan desain website adalah memulai. Sehingga
website yang dikembangkan dapat terlihat indah, elegan,
dan memiliki desain fungsional.
Prinsip Layout and Composition (tata letak dan
komposisi) dalam (Baeid, 2010) memiliki beberapa
valiabel, antara lain.
a. Design Process
Design Process merupakan proses desain tentang
apa saja yang diperlukan oleh pembaca, seperti tata
letak. Sehingga desain website yang dibuat sesuai apa
yang diperlukan oleh pembaca. Variabel ini terdiri dari
2 sub variabel yaitu discovery dan implementaton.
b. Defining Good Design
Dalam mendefinisikan desain yang baik terdapat
dua sudut pandang yaitu baik atau buruk tentang
tampilan website. Jika berfokus pada fungsi maka
informasi yang disajikan harus efektif dan efisien.
Sehingga sub variabel yang digunakan dalam
mementukan tampilan desain website yang baik yaitu
users are pleased by the design but drawn to the
content, users can move about easily via intuitive
navigator, dan users recognize each page as belonging
to the site.
c. Web Page Anatomy
Anatomi dalam halaman website merupakan salah
satu persyaratan dalam mendesain website dan
merupakan tugas yang sederhana. Anatomi ini dibagi
menjadi beberapa sub variabel yaitu containing block,
logo, navigation, content, footer, dan whitespace.
d. Grid Theory
Grid merupakan hal yang penting juga untuk
desain grafis website. Grid digunakan pada segala
sesuatu yang menjadi kotak dan menjejerkannya tetapi
semuanya berhubungan dengan proporsi. Grid adalah
garis yang tak tampak yang digunakan dalam
memadukan elemen-elemen di sebuah halaman.
Variabel ini terdiri dari the rule of thirds.
2
e. Balance
Dalam sebuah layout apabila di kedua sisi
mempunyai berat yang seimbang maka akan
menciptakan suatu keseimbangan dalam desain. Ada
dua sub variabel dalam variabel ini yaitu symmetrical
balance dan asymmetrical balance.
f. Unity
Unity merupakan cara dalam menyatukan
komposisi elemen yang berbeda menjadi satu. Layout
yang menyatu sebagai satu kesatuan lebih baik
dibandingkan yang diidentifikasikan secara terpisah.
Variabel ini terdiri dari proximity dan repetition.
g. Emphasis
Emphasis lebih berfokus kepada satu elemen yang
menarik perhatian dari pengguna website. Metode
dalam emphasis dengan membuat elemen yang menjadi
titik fokus. Titik fokus merupakan halaman yang
menarik mata pemirsa, secara keseluruhan membaur
dengan lingkungannya. Variabel ini terdiri dari
placement, continuance, isolasi, kontras, dan proporsi.
h. Bread and Butter Layouts
Ketika tampilan website muncul, terdapat
kemungkinan tata letak yang benar-benar tidak terbatas,
yaitu pada saat melihat konfigurasi tertentu dari
identitas, navigasi, dan konten tentang layout yang
digunakan dalam tampilan desain website. Sub variabel
ini yaitu left column navigation, right column
navigation, dan three column navigation.
i. Getting Inspired
Desain situs website dari galeri kebanyakan
memiliki ide-ide baru dan inovatif yang dapat
membantu berpikir di luar kotak halaman website dan
tidak hanya melihat layout saja. Sub variabel ini yaitu
using a morgue file.
j. Fresh Trends
Warna dan tekstur pada kotak yang membentuk
tata letak, lalu dilakukan identifikasi ide-ide umum dan
tren desain. Sehingga dapat dihasilkan beberapa tren
yang tampaknya akan muncul di layout halaman
website. Sub variabel ini antara lain expansive footer
navigation, three column with content first, resizing :
fixed widht vs liquid widht, dan an alternative : variable
fixed-widht layout.
k. Screen Resolution
Dalam merancang resolusi layar jauh lebih mudah
dan resolusi layar monitor pengguna harus benar-benar
diperhatikan.
l. Application : Florida Country Tile
Florida Negara Tile merupakan perusahaan nyata.
Perusahaan tidak memiliki kehadiran online dan satu-
satunya identitas asli yang dimiliki adalah logo.
 Pada penelitian (Abidi dan Ramadhani, 2010)
menyatakan bahwa website merupakan media yang
efektif dalam menjangkau target yang luas. Website tidak
perlu memiliki informasi yang lengkap namun harus
memiliki kepastian dan kebenaran informasi yang
disajikan. Website harus memenuhi kebutuhan user
sehingga website dapat memenuhi kebutuhan mereka.
Pada penelitian (Rahmidani, 2015) menyatakan
penggunaan e-commerce dapat digunakan untuk
melakukan penjualan. Penggunaan implementasi
teknologi dapat menggunakan e-commerce dan dapat
memberikan banyak manfaat bagi perusahaan untuk
melakukan persaingan.

Metode
Metode yang digunakan dalam analisis ini adalah
konsep The Principles of Beautiful Web Design pada
prinsip tata letak dan komposisi. Tata letak dan komposisi
yang dianalisis meliputi defining good design, web page
anatomy, grid theory, balance, unity, bread-and-butter
layouts dan fresh trends.
Analisis dilakukan pada website perusahaan Gambar 2. Tampilan Website BRI Syariah
perbankan yaitu BRI dengan BRI Syariah yang awalnya
merupakan bagian dari BRI. Serta perusahaan Matahari
Departement Store yang memiliki anak perusahaan yaitu
MatahariMall.com. Matahari Departement Store dan
MatahariMall.com merupakan perusahaan yang sama
namun memiliki website yang berbeda.
Semua perusahaan ini memiliki tampilan website
yang berbeda karena fokus penyampaian informasi yang
berbeda sesuai dengan tujuan yang ingin dicapai dari
perusahaan. Namun perusahaan-perusahaan ini memiliki
kesamaan, yaitu awal mula berdirinya BRI Syariah dari
BRI dan MatahariMall.com dari Matahari Departement
Store.

III. HASIL ANALISIS Gambar 3. Tampilan Website Matahari Departemet

Berikut tampilan halaman website : Store

Gambar 1. Tampilan Website BRI

Gambar 4. Tampilan Website MatahariMall.com

3
 Berikut analisis desain dari masing-masing website
berikut.
1. BRI
a. Defining Good Design
Informasi yang disajikan dalam website ini efektif
dan efisien. Efektif karena website yang dibuat sesuai
dengan tujuan awal yaitu penyampaian informasi
kepada para nasabah. Efektif karena dengan website ini
nasabah dapat menghemat waktu dan tenaga tanpa
harus datang langsung ke bank.
1) Users are pleased by the design but drawn to the
content
Pada halaman website di menu beranda, waktu
yang digunakan pengguna/nasabah dalam memindai
halaman untuk informasi yang mereka inginkan di
desain baik. Link ke halaman lain dipisah secara baik
tanpa mengganggu atau penghalangi antara pengguna
dan informasi. Grafis yang warna warni membimbing
mata untuk kembali ke informasi tanpa mengganggu
pembaca atau dalam pengorganisasian halaman.
2) Users can move about easily via intuitive
navigator
Pada penempatan navigasi, blok navigasi sudah
terlihat jelas pada halaman dan tiap link sudah
memiliki judul deskriptif. Ketika pengguna
mengarahkan mouse ke menu navigasi maka akan
terlihat menu navigasi mana yang aktif dan pengguna
akan mengetahui informasi mana yang mereka
perlukan.
Navigasi dalam desain website ini mudah untuk
ditemukan dan dipisahkan secara visual dari konten,
sehingga pengguna dapat fokus pada informasi yang
mereka butuhkan dan beralih ke konten lainnya.
Website BRI juga menyediakan navigasi untuk
beralih ke website lain dan diletakkan terpisah dari
menu navigasi yang masih pada satu website.
Navigasi ini dapat membuat pengguna mudah dalam
menemukan informasi mana yang mereka butuhkan.
Namun pemisahan halaman website yang berbeda
belum dikelola dengan baik sehingga masih
membingungkan pengguna.
3) Users recognize each page as belonging to the
site.
Blok konten pada halaman website ini dibagi
secara berbeda dan memungkinkan pengguna
mengetahui bahwa ini adalah halaman dari situs yang
sama. Hal ini ditunjukkan dari bagian atas halaman
website yang masih sama dan latar belakang halaman
website yang masih sama.
b. Web Page Anatomy
Anatomi dalam halaman website ini sudah
dikelola dengan baik. Hal ini dapat dilihat pada
containing block yang terletak di tengah dan masih
ada ruang kosong di pinggir tampilan website. Namun
hal ini membuat presisi seimbang antara tulisan
4
dengan tampilan. Logo sudah sangat jelas terlihat
yaitu di bagian kanan atas pada header. Navigation
mudah untuk ditemukan dan digunakan, namun
pemisahan halaman website pada navigasi yang
berbeda belum dikelola dengan baik sehingga masih
membingungkan pengguna. Content terdapat di
tengah tampilan website sehingga pengguna dapat
mencari informasi yang mereka butuhkan. Footer
terletak di sisi bawah halaman dan berwarna orange
sehingga pengguna dapat membedakan. Whitespace
dalam halaman website cukup banyak namun hal ini
sangat balance dan unity.
c. Grid Theory
Grid sudah digunakan dengan baik dalam
website ini. Hal ini dapat dilihat dari the rule of thirds
yang sudah terpenuhi. Tiga kolom utama ini yaitu
navigasi, konten, dan footer dari atas ke bawah.
d. Balance
Halaman website ini menggunakan asymmetrical
balance. Hal ini dapat dilihat dari sisi kanan dan kiri
yang seimbang satu sama lain, sehingga website ini
terlihat rapi. Komposisi terlihat lebih abstrak namun
dibuat lebih menarik.
e. Unity
Pada variabel ini menggunakan pendekatan
repetition yang dapat menyatukan seluruh isi website.
Batas warna yang digunakan sangat kontras terlihat
antar header, konten dan footer. Namun kontras
warna ini dipadukan dengan baik sehingga dapat
menyatukan isi dari website.
f. Bread and Butter Layouts
Bread and Butter Layouts pada website ini sudah
digunakan dengan baik, three column navigation
digunakan dalam desain website ini yang artinya
layout tiga kolom ini memiliki kolom tengah yang
luas dan diapit oleh dua kolom navigasi kecil yaitu
navigasi dan footer.
g. Fresh Trends
Desain website ini belum menggunakan
expansive footer navigation, namun menggunakan
three column with content first yang terdapat pada
konten yang diapit navigasi dan footer.
2. BRI Syariah
a. Defining Good Design
Informasi yang disajikan dalam website ini
efektif dan efisien. Efektif karena website yang dibuat
sesuai dengan tujuan awal yaitu penyampaian
informasi kepada para nasabah. Efektif karena dengan
website ini nasabah dapat menghemat waktu dan
tenaga tanpa harus datang langsung ke bank.
1) Users are pleased by the design but drawn to the
content
Pada halaman website di menu beranda, waktu
yang digunakan pengguna/nasabah dalam memindai
 halaman untuk informasi yang mereka inginkan di
desain sangat baik. Link ke halaman lain dipisah
secara baik tanpa mengganggu atau mengahalangi
antara pengguna dan informasi. Grafis yang warna
warni membimbing mata untuk kembali ke informasi
tanpa mengganggu pembaca atau dalam
pengorganisasian halaman.
2) Users can move about easily via intuitive
navigator
Pada penempatan navigasi, blok navigasi sudah
terlihat jelas pada halaman dan tiap link sudah
memiliki judul deskriptif dan memiliki sub bab yang
berisi informasi yang dibutuhkan. Ketika pengguna
mengarahkan mouse ke menu navigasi maka akan
terlihat perunbahan warna menu navigasi mana yang
aktif dan pengguna akan mengetahui informasi mana
yang mereka perlukan.
Navigasi dalam desain website ini mudah untuk
ditemukan dan dipisahkan secara visual dari konten,
sehingga pengguna dapat fokus pada informasi yang
dibutuhkan dan mereka akan tahu di mana mencarinya
ketika mereka siap untuk beralih ke konten lainnya.
3) Users recognize each page as belonging to the
site.
Blok konten pada halaman website ini dibagi
secara berbeda dan memungkinkan pengguna
mengetahui bahwa ini adalah halaman dari situs yang
sama. Hal ini ditunjukkan dari bagian atas halaman
website yang masih sama dan latar belakang halaman
website yang masih sama.
b. Web Page Anatomy
Anatomi dalam halaman website ini sudah
dikelola dengan cukup baik. Hal ini dapat dilihat pada
containing block yang terletak di tengah dan masih
ada ruang kosong di pinggir bagian bawah karena
bagian atas sudah dipenuhi dengan gambar. Sehingga
membuat presisi kurang seimbang antara tulisan
dengan tampilan. Logo kurang jelas terlihat karena
berwarna putih dan warna latar belakang juga
berwarna putih sehingga kurang jelas. Logo juga
kurang besar dibanding dengan tulisan yang lain.
Navigation mudah untuk ditemukan dan digunakan
serta telah dikelola dengan baik sehingga membantu
pengguna. Navigasi juga berisi sub bab yang sangat
membantu pengguna. Content terdapat di tengah
tampilan website sehingga pengguna dapat mencari
informasi yang mereka butuhkan. Footer terletak di
sisi bawah halaman dan berwarna biru sehingga
pengguna kurang dapat membedakan karena sebagian
besar warna di website adalah biru. Whitespace dalam
halaman website cukup banyak namun belum dikelola
dengan balance dan unity.
c. Grid Theory
Grid sudah digunakan dengan baik dalam
website ini. Hal ini dapat dilihat dari the rule of thirds
5
yang sudah terpenuhi. Tiga kolom utama ini yaitu
navigasi, konten, dan footer dari atas ke bawah.
d. Balance
Halaman website ini menggunakan asymmetrical
balance. Hal ini dapat dilihat dari sisi kanan dan kiri
yang seimbang satu sama lain, sehingga website ini
terlihat rapi. Komposisi terlihat lebih abstrak namun
belum bisa membuat tampilan website lebih menarik
karena bagian bawah website cenderung masih
kosong.
e. Unity
Pada variabel ini menggunakan pendekatan
proximity yang dapat menyatukan seluruh isi website.
Hal ini dapat dilihat dari tulisan huruf kapital di
konten. Bagian header dan footer yang tulisan
cenderung lebih kecil, sehingga belum dapat
menyatukan isi dari website ini
f. Bread and Butter Layouts
Bread and butter layouts pada website ini sudah
digunakan dengan baik, three column navigation
digunakan dalam desain website ini yang artinya
layout tiga kolom ini memiliki kolom tengah yang
luas dan diapit oleh dua kolom navigasi kecil yaitu
navigasi dan footer.
g. Fresh Trends
Desain website ini belum menggunakan
expansive footer navigation, namun menggunakan
three column with content first yang terdapat pada
konten yang diapit navigasi dan footer.
3. Matahari Departemet Store
a. Defining Good Design
Informasi yang disajikan dalam website ini
efektif dan efisien. Efektif karena website yang dibuat
sesuai dengan tujuan awal yaitu penjualan produk
kepada para konsumen. Efektif karena dengan website
ini konsumen dapat menghemat waktu dan tenaga
tanpa harus datang langsung ke toko fisik.
1) Users are pleased by the design but drawn to the
content
Pada halaman website di menu beranda, waktu
yang digunakan konsumen dalam memindai halaman
untuk informasi yang mereka inginkan di desain
sangat baik. Link ke halaman lain dipisah secara baik
tanpa mengganggu atau mengahalangi antara
pengguna dan informasi. Grafis yang warna warni
membimbing mata untuk kembali ke informasi tanpa
mengganggu pembaca atau dalam pengorganisasian
halaman.
2) Users can move about easily via intuitive
navigator
Pada penempatan navigasi, blok navigasi sudah
terlihat jelas pada halaman dan tiap link sudah
memiliki judul deskriptif yang berisi informasi yang
dibutuhkan. Ketika pengguna mengarahkan mouse ke
 menu navigasi maka akan terlihat perunbahan warna
menu navigasi mana yang aktif dan pengguna akan
mengetahui informasi mana yang mereka perlukan.
Navigasi dalam desain website ini mudah untuk
ditemukan dan dipisahkan secara visual dari konten,
sehingga pengguna dapat fokus pada informasi dan
mereka akan tahu di mana mencarinya ketika mereka
siap untuk beralih ke konten lainnya.
3) Users recognize each page as belonging to the
site.
Blok konten pada halaman website ini dibagi
secara berbeda dan memungkinkan pengguna
mengetahui bahwa ini adalah halaman dari situs yang
sama. Hal ini ditunjukkan dari bagian atas halaman
website yang masih sama dan latar belakang halaman
website yang masih sama.
b. Web Page Anatomy
Anatomi dalam halaman website ini sudah
dikelola dengan baik. Hal ini dapat dilihat pada
containing block yang terletak di tengah tanpa ada
ruang kosong, namun membuat presisi sangat
seimbang antara tulisan dengan tampilan. Logo sangat
jelas terlihat karena terletak di tengah halaman
website. Navigation mudah untuk ditemukan dan
digunakan karena telah dikelola dengan baik sehingga
membantu pengguna. Navigasi berisi produk-produk
yang dipisah berdasar kategori sehingga sangat
membantu pengguna. Content terdapat di tengah
tampilan website sehingga pengguna dapat mencari
informasi yang mereka butuhkan. Footer terletak di
sisi bawah halaman dan berwarna putih sehingga
pengguna mudah untuk membedakan. Whitespace
dalam halaman website sangat sedikit namun dikelola
dengan balance dan unity.
c. Grid Theory
Grid sudah digunakan dengan baik dalam
website ini. Hal ini dapat dilihat dari the rule of thirds
yang sudah terpenuhi. Tiga kolom utama ini yaitu
navigasi, konten, dan footer dari atas ke bawah.
d. Balance
Halaman website ini menggunakan asymmetrical
balance. Hal ini dapat dilihat dari sisi kanan dan kiri
yang seimbang satu sama lain, sehingga website ini
terlihat rapi. Komposisi gambar dan tulisan terlihat
lebih abstrak namun bisa membuat tampilan website
lebih menarik.
e. Unity
Pada variabel ini menggunakan pendekatan
repetition yang dapat menyatukan seluruh isi website.
Batas warna yang digunakan sangat kontras terlihat
antar header, konten dan footer. Namun kontras
warna ini dipadukan dengan baik sehingga dapat
menyatukan isi dari website.
6
f. Bread and Butter Layouts
Bread and butter layouts pada website ini sudah
digunakan dengan baik, three column navigation
digunakan dalam desain website ini yang artinya
layout tiga kolom ini memiliki kolom tengah yang
luas dan diapit oleh dua kolom navigasi kecil yaitu
navigasi dan footer.
g. Fresh Trends
Desain website ini belum menggunakan
expansive footer navigation, namun menggunakan
three column with content first yang terdapat pada
konten yang diapit navigasi dan footer.
4. MatahariMall.com
a. Defining Good Design
Informasi yang disajikan dalam website ini
efektif dan efisien. Efektif karena website yang dibuat
sesuai dengan tujuan awal yaitu penjualan produk
kepada para konsumen. Efektif karena dengan website
ini konsumen dapat menghemat waktu dan tenaga
tanpa harus datang langsung ke toko, karena
pemesanan dan pembelian dilakukan secara online.
1) Users are pleased by the design but drawn to the
content
Pada halaman website di menu beranda, waktu
yang digunakan konsumen dalam memindai halaman
untuk informasi yang mereka inginkan di desain
cukup baik. Link ke halaman lain dipisah secara baik
tanpa mengganggu atau menghalangi antara pengguna
dan informasi. Grafis yang warna warni membimbing
mata untuk kembali ke informasi tanpa mengganggu
pembaca atau dalam pengorganisasian halaman.
Namun dalam pencarian produk, pembeli harus
srool ke bawah untuk mencari produk yang
diinginkan atau dengan cara menu navigasi produk
yang pindah ke halaman lain.
2) Users can move about easily via intuitive
navigator
Pada penempatan navigasi, blok navigasi sudah
terlihat jelas pada halaman dan tiap link sudah
memiliki judul deskriptif yang berisi informasi yang
dibutuhkan. Ketika pengguna mengarahkan mouse ke
menu navigasi tidak terlihat perubahan warna menu
navigasi mana yang aktif sehingga pengguna merasa
kesulitasn dalam mencari informasi yang mereka
perlukan.
3) Users recognize each page as belonging to the
site.
Blok konten pada halaman website ini dibagi
secara berbeda dan memungkinkan pengguna
mengetahui bahwa ini adalah halaman dari situs yang
sama. Hal ini ditunjukkan dari bagian atas halaman
website yang masih sama dan latar belakang halaman
website yang masih sama.
b. Web Page Anatomy menggunakan three column with content first yang
Anatomi dalam halaman website ini sudah terdapat pada konten yang diapit navigasi dan footer.
dikelola dengan cukup baik. Hal ini dapat dilihat pada
containing block yang terletak di tengah tanpa ada Tabel 1. Perbandingan Website Perbankan
ruang kosong, namun membuat presisi sangat (Website BRI dengan Website BRI Syariah)
seimbang antara tulisan dengan tampilan. Logo sangat Website BRI
jelas terlihat karena terletak di bagian kiri pada No Variabel Website BRI
Syariah
halaman website. Navigation mudah untuk ditemukan Defining Kurang Baik Baik
1.
dan digunakan karena telah dikelola dengan baik Good Design
sehingga membantu pengguna. Navigasi berisi Web Page Sudah Sedikit
2.
produk-produk yang dipisah berdasar kategori Anatomy Memenuhi Memenuhi
sehingga sangat membantu pengguna. Content Digunakan Digunakan
3. Grid Theory
dengan Baik dengan Baik
terdapat di tengah tampilan website sehingga
Asymmetrical Asymmetrical
pengguna dapat mencari informasi yang mereka 4. Balance
Balance Balance
butuhkan. Konten ini berisi produk-produk berdasar 5. Unity Repetition Proximity
kategori. Footer terletak di sisi bawah halaman dan Bread and Three-column Three-column
berwarna merah sehingga pengguna mudah untuk 6. Butter navigation navigation
membedakan. Whitespace dalam halaman website Layouts
sangat sedikit namun dikelola dengan balance dan Menggunakan Menggunakan
unity. three column three column
7. Fresh Trends
with content with content
c. Grid Theory first first
Grid sudah digunakan dengan baik dalam
website ini. Hal ini dapat dilihat dari the rule of thirds Dapat disimpulkan bahwa desain tampilan website
yang sudah terpenuhi. Tiga kolom utama ini yaitu BRI cenderung lebih baik dibandingkan website BRI
navigasi, konten, dan footer dari atas ke bawah. Syariah. Dikarenakan pada Website BRI kurang baik
d. Balance dalam variabel Defining Good Design, sedangakan pada
Halaman website ini menggunakan asymmetrical website BRI Syariah belum memenuhi Web Page
balance. Hal ini dapat dilihat dari sisi kanan dan kiri Anatomy.
yang seimbang satu sama lain, sehingga website ini
terlihat rapi. Komposisi gambar dan tulisan terlihat Tabel 2. Perbandingan Website Penjualan Produk
lebih abstrak namun bisa membuat tampilan website (Website MDS dengan Website MatahariMall.com)
lebih menarik. Website
e. Unity No Variabel Website MDS
MatahariMall.com
Pada variabel ini menggunakan pendekatan Defining Baik Cukup Baik
repetition yang dapat menyatukan seluruh isi website. 1. Good
Batas warna yang digunakan sangat kontras terlihat Design
antar header, konten dan footer. Namun kontras Web Sudah Sudah Memenuhi
2. Page Memenuhi
warna ini dipadukan dengan baik sehingga dapat
Anatomy
menyatukan isi dari website. Kontras warna ini juga
Grid Digunakan Digunakan dengan
digunakan di halaman beranda, pada kategori produk 3.
Theory dengan Baik Baik
yang berbeda digunakan warna berbeda sehingga Asymmetrical Asymmetrical
4. Balance
sangat membatu pelanggan. Balance Balance
f. Bread and Butter Layouts 5. Unity Repetition Repetition
Bread and butter layouts pada website ini sudah Bread Three-column Three-column
digunakan dengan baik, three column navigation and navigation navigation
6.
Butter
digunakan dalam desain website ini yang artinya
Layouts
layout tiga kolom ini memiliki kolom tengah yang Ada Ada menggunakan
luas yang berisi konten dari kategori prosuk dan diapit menggunakan three column with
oleh dua kolom yaitu navigasi dan footer. Fresh
7. three column content first dan
Trends
g. Fresh Trends with content expansive footer
Desain website ini menggunakan expansive first navigation
footer navigation karena footer terdiri dari informasi
tentang layanan pelanggan, info, dan tawaran lainnya
dalam proses pembelian. Website ini juga

7
 Dapat disimpulkan bahwa sebenarnya kedua website
tersebut yaitu website Matahari Departement Store dan
website MatahariMall.com sudah dapat dikatakan sebagai
desain tampilan website yang baik. Masing-masing desain
web memiliki kelebihan dan kekurangan. Dikarenakan
pada website Matahari Departement Store baik dalam hal
Defining Good Design dan hanya menggunakan Fresh
Trends: three column with content first. Namun di
mataharimall cukup baik dalam hal Defining Good
Design dan memiliki kelebihan pada variabel Fresh
Trends: expansive footer navigation dan three column
with content first.
Website perbankan dengan Website Penjualan Produk
Dapat disimpulkan bahwa Website Penjualan
Produk sedikit lebih baik dalam hal desain tampilan
websitenya dibandingkan website perbankan. Karena
sesuai dengan tujuan dari website tersebut, website
produk penjualan memiliki tujuan untuk menarik
perhatian pelanggan untuk membeli prouk-prosuk yang
ditawarkan. Maka dari itu dalam mendesain tampilan
website, hampir seluruh variabel menjadi dasar dalam
mendesain tampilan website.
IV. KESIMPULAN
Kesimpulan dari analisis desain website dengan
pendakatan The Principle of Beautiful Web Design adalah
sebagai berikut :
1. Website BRI kurang baik pada variabel Defining
Good Design.
2. Website BRI Syariah hanya sedikit memenuhi sub
variabel di variabel Web Page Anatomy.
3. Website Matahari Departement Store memenuhi
seluruh variabel.
4. Website MatahariMall.com cukup baik di variabel
Defining Good Design, namun kuat di variabel
Fresh Trends.
5. Website Perbankan dalam desain tampilan, tampilan
website BRI cenderung lebih baik dibandingkan
website BRI Syariah.
6. Website Penjualan Produk dalam desain tampilan
website sudah baik.
7. Website Penjualan Produk memiliki desain tampilan
lebih baik dibanding Website Perbankan.
8. Website Penjualan Produk dan Website Perbankan
walaupun sama-sama dari perusahaan yang sama
namun memiliki tampilan desain website yang
berbeda.
V. REFERENSI
[1] Abidi, F. dan Ramadhani, R. (2012). Perancangan
Website Promosi Wisata Jawa Timur dengan
Konsep the Guide to the Bold Diversity. Jurnal
Teknik Pomits Vol 13, No 13, 1–5.
[2] Beaird, J. (2010). The Principles of Beautiful Web
Design. Canada: SitePoint.
[3] Merriam-Webster’s online dictionary
[4] R. Rahmidani, “Penggunaan E-Commerce dalam
Bisnis sebagai Sumber Keunggulan Bersaing
Perusahaan”, Book of Proceedings published by
UNP, 2015, ISBN: 978-602-17129-5-5.