Oleh
: Badar Kumeira
"Informasi tidak
dapat dibiarkan hanya untuk menyebar disekitar layar. Informasi haruslah
diletakkan dalam konteks yang telah dibingkai pada windows dan panel yang terintegrasi secara konsisten dan jelas ke
jaringan yang mendasarinya. "
Tata letak halaman semestinya
harus mampu mengakomodir kepentingan estetika. Seperti masalah teknis termasuk
seberapa besar file kita gunakan.
Dalam mengatur
artistik media yang baik, kita semestinya memperhatikan bagaimana kita mengatur
teks, gambar dan ruang kosong pada halaman untuk membuat area fokus. Untuk mendesain
sebuah Web masalah teknis dan estetika secara khusus erat digabungkan. Kita tidak
bisa merancang sebuah Web yang menarik tampa memahami bagaimana mengatur tata
letak halaman dan urusan teknis lainnya.
Oleh karena itu, pada
bagian ini kita akan membahas terlebih dahulu tentang masalah teknis dan setelah
itu barulah kemudian kita akan membahas tentang masalah estetika.
A.
Pertimbangan
Teknis
Untuk mengatasi masalah teknis, kita harus
menentukan terlebih dahulu segala sesuatu yang kita ketahui tentang calon
pengunjung kita seperti yang telah dibahas dalam Bab 2 yaitu sebagai berikut :
·
Seberapa cepat kemampuan komputer pengunjung kita
dan koneksi internet yang dimilikinya, serta seberapa cepat server yang kita miliki?
·
Apa resolusi layar yang pengunjung kita
gunakan?
Faktor-faktor ini akan sangat menentukan
seberapa besar file yang bisa diterima dengan baik oleh situs yang kita buat
untuk menampilkan ukuran dan resolusi yang kita gunakan dalam situs yang kita
buat.
1. Batasan ukuran file
Semakin besar ukuran total sebuah file, maka
akan semakin lama halaman yang diperlukan untuk men-download dan menampilkannya.
Perlu diingat bahwa jumlah ukuran file mengacu pada semua file yang membentuk
sebuah halaman web, termasuk HTML, CSS eksternal, eksternal JavaScript, gambar,
suara dan video. Dari jumlah file tersebut, file HTML, CSS dan Java Script
hanya berupa bentuk teks, oleh karena itu file-file tersebut biasanya cukup
kompak. Biasanya file seperti gambar, suara dan video yang cukup besar dapat
menyebabkan kegiatan mendownload menjadi bermasalah.
Secara luas para ahli tidak setuju dengan
aturan tentang seberapa besar ukuran total halaman yang ditetapkan, yaitu
kurang dari 20 K perhalaman (termasuk semua file grafis) untuk situs web
publik. Aturan 20K hampir tidak mungkin untuk diikuti jika kita memerlukan
sebuah situs yang berkualitas grafis yang profesional.
Ketika mempertimbangkan apakah memungkinkan
atau tidak untuk menggunakan lebih besar file, kita harus mengetahui seberapa
besar pengaruh hal tersebut terhadap audiens kita. Hal ini dikarenakan oleh adanya
perbedaan kapasitas komputer dan akses jaringan yang digunakan oleh setiap
audiens kita.
2. Perencanaan untuk Batasan Ukuran File
Berkaitan dengan masalah tentang bagaimana cara
mengoptimalkan grafis, pada bagian berikutnya kita akan membahas tentang
beberapa petunjuk yang dapat membantu pada awal proyek pembuatan Web, yaitu
sebagai berikut :
v
Tarik keluar sebagian besar CSS dan
JavaScript ke eksternal file.
v
Gunakan kembali grafis, audio dan video dari
halaman satu ke halaman berikutnya.
v
Jangan sembarangan menggunakan grafis,
animasi atau suara. Setiap file harus memiliki alasan yang jelas untuk berada
di situs.
v
Bila memungkinkan gunakan gambar yang
memiliki kapasitas lebih kecil, karna men-download gambar yang lebih kecil akan
lebih cepat daripada gambar yang mempunyai kapasitas lebih besar.
3. Ukuran dan Resolusi Tampilan
Salah satu aspek yang lebih menantang adalah
bagaimana merancang halaman web yang membutuhkan perhitungan yang matang dalam
menentukan ukuran dan resolusi layar. Resolusi layar diukur dalam satuan pixel.
Meski begitu Istilah "resolusi" dapat merujuk pada dua ukuran yang
sangat berbeda yaitu sebagai berikut :
Ø
Ketinggian dan lebar dimensi layar tampilan secara
keseluruhan diukur dalam satuan pixel. merupakan
dimensi standar untuk menampilkan komputer, seperti resolusi 800 x 600 atau Resolusi
1280 x 1024.
Ø
PPI (pixel per inch, analog dengan DPI /
titik per inci untuk media cetak).
Berikut ini adalah ringkasan dari interaksi
umum untuk resolusi dan ukuran layar :
ü
Rendahnya sistem resolusi dan/atau besarnya
layar yang ditampilkan menghasilkan teks dan gambar yang lebih besar.
ü
Tingginya sistem resolusi dan/atau kecilnya yang
ditampilkan menghasilkan teks dan gambar yang lebih kecil.
4. Ukuran Halaman
Kita telah melihat bahwa ukuran layar dan
ukuran elemen pada halaman sangat bervariasi, tergantung pada sistem
pengunjung. Meskipun demikian, kita masih harus memutuskan ukuran standar untuk
halaman di situs kita. Sebuah layar dengan lebar 800 pixel adalah ukuran yang
paling aman untuk sebagian besar publik dalam mengakses situs web.
Untuk saat ini sebaiknya kita menggunakan ukuran
800 pixel sebagai ukuran karena alasan berikut:
v
Ukuran 800 pixel adalah ukuran halaman yang
paling umum di situs web saat ini.
v
Ukuran 800 pixel dapat diakses oleh hampir
semua orang.
v
Ukuran 800 pixel dapat melayani pengguna yang
ingin memiliki beberapa jendela terbuka secara bersamaan.
5. Halaman untuk dicetak
Jika kita ingin memastikan bahwa pengunjung dapat
dengan aman mencetak seluruh halaman di browser orientasi potret, maka kita
harus mengurangi ukuran halaman menjadi lebih kecil yaitu dengan ukuran 535 pixel
horizontal. Sayangnya ukuran 535 pixel hanya meninggalkan sangat sedikit ruang
untuk kita.
6. Peralatan dalam Tata Letak Halaman
a. Frames (Bingkai)
Penggunaan frame (bingkai) harus dihindari kecuali jika kita memiliki beberapa
alasan yang luar biasa untuk menggunakannya. Kita telah melihat frame dalam bab
Navigasi, jadi kita tidak akan meninjau masalah frame terlalu jauh di sini.
b. Tabel
Sebuah tabel tidak lebih dari grid dua
dimensi di mana kita dapat mengatur elemen.
Berikut adalah beberapa petunjuk tentang bagaimana
bangunan sebuah tabel :
Ø
Sel ditumpuk satu di atas sel yang yang lain
sehingga membentuk sebuah kolom.
Ø
Sebuah baris tabel atau sel tidak dapat
menjadi ukuran lebih kecil daripada elemen terbesar yang dikandungnya.
Ø
Jika kita mengalami kesulitan dan berusaha
untuk mendapatkan satu tabel untuk mengakomodir tata letak untuk keseluruh
halamannya. Maka kita bisa menggunakan tabel independen sebagai gantinya dengan
mengakhiri salah satu sebelum memulai yang berikutnya, dengan masing-masing tabel
mengelola bagian tata letak yang berbeda.
Ø
Tabel yang bersarang dalam tabel sering
menjadi sebuah masalah yang membingungkan para pemula, untuk memecahkan masalah
tersebut. Maka kita dapat gunakan Tabel
Nest jika memang sudah tidak ada cara yang lebih mudah untuk mengerjakannya.
Ø
Tempatkan lebar sel hanya pada satu baris
dari tabel.
c. Tag <div>
Sebuah tag <div> hanyalah sebuah kotak
yang mengelilingi konten sehingga kita dapat menjadikan konten tersebut sebagai
sebuah unit untuk alasan penempatan dan format. Misalnya kita bisa membungkus gambar
dan teks yang menyertainya di <div> dalam rangka untuk mengelilingi unit
dengan perbatasan umum dan warna latar belakang yang sama, atau untuk
menempatkan seluruh kontainer di lokasi c spesifik pada halaman. Lihat sidebar
untuk meninjau tag <div> dan atributnya.
Contoh
tag <div>
d. Tabel vs <div> s
Hambatan utama sekarang untuk mengganti tabel
dengan <div> s adalah bahwa kadang-kadang membuat berbagai browser dan
posisi mereka sedikit berbeda. Sebaik-baiknya <div> s bagaimanapun kita tidak bisa mengabaikan tabel hanya karena
<div> s merupakan alat baru yang menyenangkan. Tabel hampir anti peluru
di semua browser, Selain itu ada beberapa masalah yang pada dasarnya lebih
mudah untuk dipecahkan dengan tabel dibandingkan dengan <div> s.
Misalnya, gambar irisan sangat mudah untuk berkumpul kembali dalam sebuah
tabel, tetapi tidak begitu mudah dengan <div> s. Intinya adalah dengan
menggunakan kedua-duanya secara bersamaan yaitu tabel dan <div> s adalah
merupakan solusi cerdas dalam menata sebuah situs web.
e. Adobe Flash
Adobe Flash dapat digunakan untuk membuat
seluruh situs, bukan hanya untuk animasi. Sekilas situs menggunakan HTML hanya
cukup untuk menanamkan file Flash. Flash membuat segala sesuatu yang lain yaitu
dari gambar ke teks ke link navigasi ke data ditarik keluar dari database
server-side.
B. Masalah Estetika
1. Mengisi Tampilan Windows (jendela)
Secara
umum ada dua komponen yang mesti diperhatikan dalam mengisi tampilan Windows dalam menata halaman dari sebuah
Web, dua komponen tersebut adalah Tata letak solid dan Tata letak liquid, berikut
adalah penjelasan dari keduanya.
a. Tata Letak Solid (padat)
Dengan tata letak yang solid (kadang-kadang
juga disebut dengan tata letak es), kita bisa merancang halaman agar sesuai
dengan ukuran jendela terkecil yang kita harapkan pengunjung tetap bisa menampilkannya,
disamping itu kita juga bisa mengisi latar belakang jendela yang lebih besar dengan
warna atau gambar.
b. Tata Letak Liquid (cair)
Dengan Tata letak Liquid (cair) kita bisa merancang halaman secara otomatis untuk
mengembang dalam mengisi semua yang tersedia dalam Layar luas, tata letak Liquid (cair) menggunakan <div> s
diupgrade atau <table> s.
2.
Membangun
Blok Tata Letak Halaman
a. Garis (Line)
Garis dapat membagi, menghubungkan, menghias,
mengatur dan mengisi blok tata letak halaman. Misalnya, horisontal dan aturan
vertikal (garis) dapat membagi halaman atau menghubungkan dua bagian halaman
bersama-sama. Garis dapat membedakan dan menggambarkan suatu objek, seperti bentuk
garis yang terlihat (dengan warna yang berbeda dari objek) atau tersirat (dengan
warna yang sama seperti objek).
b. Shape
Shape yang
digunakan dalam sebuah halaman berupa blok elemen yang biasanya berisi
warna-warna kabur yang kemudian menjadi latar teks adalah merupakan salah satu unsur
yang penting diperhatikan dalam membangun blok tata letak halaman. Hal ini
dikarenakan begitu pentingnya fungsi shape dalam memberikan penekanan terhadap
informasi-informasi penting yang disediakan dalam halaman situs web yang kita
buat. Melalui penggunaan shape yang baik setiap informasi penting akan lebih
mudah ditemukan dalam halaman web yang kita sajikan sehingga informasi penting
yang ingin kita sampaikan bisa diserap dengan sempurna oleh para pengunjung
situs web kita.
c. Warna
Warna adalah alat yang paling kuat untuk
menyampaikan informasi secara khusus. Ada perberbedaan suasana hati yang
terjadi akibat warna yang digunakan.
Tak dapat disangkal, skema warna
membangkitkan suasana hati yang berbeda, sehingga penggunaan warna secara
terampil merupakan hal yang sangat penting. Permasalahan tentang warna tidak
akan kita bahas terlalu jauh pada pembahasan kali ini, karna masalah warna akan
dibahas pada pembahasan berikutnya.
3. Harmonisasi Visual
a. Teknik untuk Memberikan Harmony Visual
Berikut
ini adalah beberapa teknik yang bisa digunakan dalam memberikan Harmonisasi
Visual.
·
Batasi
jumlah elemen pada halaman.
Hilangkan teks dan grafis yang tidak mempunyai
kontribusi penting terhadap tujuan situs. hindari terlalu banyak informasi pada
halaman karna hal tersebut dapat mengganggu kenyamanan dan membuat pengunjung
situs kita menjadi bosan.
· Pengulangan elemen.
Pengulangan elemen seperti bentuk, ukuran,
proporsi, warna atau tata letak mempunyai peran yang tak kalah penting, karna
dengan melakukan pengulangan elemen kita bisa menciptakan kesinambungan visual
dalam sebuah situs.
· Ulangi tata letak halaman standar di
seluruh situs.
Untuk memfasilitasi kontinuitas, pengulangan
tata letak halaman standar mesti harus tetap digunakan, hal ini berkenaan
dengan kenyamanan dan kemudahan pengunjung untuk mengakses setiap informasi
yang kita sediakan dalam situs yang telah kita buat.
· Sejajarkan berbagai elemen.
·
Potongan
informasi yang berhubungan.
Mengorganisir berbagai elemen halaman yang
berhubungan menjadi sebuah potongan adalah merupakan salah satu harmonisasi
visual yang akan disukai oleh pengunjung. Kemudahan dan kenyamanan pengunjung
dalam mengakses informasi yang terkait dengan topik yang sedang dikunjungi
adalah alasan kuat tentang perlunya membuat potongan informasi yang berhubungan
dalam sebuah situs.
· Memanipulasi kontras untuk membuat
hirarki visual.
Kontras merupakan alat utama untuk
menciptakan stimulasi visual dan menciptakan penekanan informasi sehingga
melalui penekanannya akan tampak sebuah hirarki secara visual dalam sebuah
situs yang kita buat.
· Menyediakan Ruang Putih (Tidak yang
tidak terpakai).
Sediakan cukup ruang putih (ruang yang tidak
terpakai, juga disebut ruang negatif) dalam menata halaman situs. Ruang putih sangat
memberikan pengaruh terhadap pandangan mata, karna melalui adanya ruang putih
yang disediakan pengunjung akan semakin
nyaman dalam memperhatikan halaman yang kita sediakan karna ketersediaan ruang
putih tidak ubahnya seperti sebuah "ruang bernapas" dalam sebuah
halaman sehingga halaman yang kita buat tidak akan terlihat menyesakkan dan
sempit. Disamping itu ruang putih juga berfungsi untuk membuat fokus perhatian
pengunjung terhadap informasi dalam halaman yang kita buat menjadi lebih baik.
· Memanipulasi keseimbangan visual.
Keseimbangan visual mengacu pada penempatan
item pada halaman. Kecerdasan kita dalam menempatkan item dalam sebuah halaman
baik itu teks, gambar dan warna dalam komposisi yang tepat akan membuat sebuah
harmonisasi visual yang seimbang, sehingga tampilan halaman yang kita buat akan
menjadi lebih menarik.
· Memilih pusat komposisi.
Memilih pusat komposisi yang tepat dalam
menata halaman adalah salah satu teknik yang cerdas untuk membuat sebuah halaman
menjadi menarik. Pemusatan posisi terhadap sebuah informasi penting dalam
sebuah halaman akan menjadi sebuah harmonisasi yang kuat dan menarik untuk
diperhatikan.
Contoh
gambar dengan menggunakan pemusatan posisi
· Menggunakan ukuran persegi panjang golden-mean.
Sebuah persegi panjang golden-mean memiliki lebar dengan perkiraan rasio 1 dan panjang 1,6.
Membentuk halaman dengan ukuran rasio seperti persegi panjang golden-mean akan membuat halaman menjadi
lebih menyenangkan dan mempunyai fokus yang baik.
· Melengkapi tata letak (hanya untuk tampilan dengan bentuk persegi
panjang).
Seperti yang sebelumnya kita bahas tentang halaman
dengan bentuk persegi panjang dengan ukuran rasio golden-mean, maka kita akan menemukan beberapa ruang yang perlu
dilengkapi agar tampilan halaman bisa menjadi lebih menarik. Hal ini bisa kita
lakukan dengan mengatur kecerahan warna latar dan penempatan gambar atau fitur
yang tepat pada bagian yang akan dilengkapi.
b. Menyeimbangkan hal-hal yang mencolok
Kontinuitas memang penting untuk
memperlihatkan identitas dan keseragaman sebuah situs namun jika terlalu banyak
yang monoton, maka hal tersebut akan menjadi sesuatu yang mencolok dan akan
membuat pengunjung menjadi bosan, begitupun dengan penggunaan kontras yang
berlebihan dan lain sebagainya.
Untuk itu menata penggunaan beberapa teknik
dengan baik adalah hal penting demi mendapatkan harmonisasi visual yang lebih
maksimal, salah satu cara menyeimbangkan hal tersebut adalah dengan
mengkreasikan beberapa fitur yang menarik dalam menata sebuah halaman pada
situs yang kita buat, begitupun dengan penggunaan warna dan kontras yang sesuai
serta tidak berlebihan.
4. Memposisikan Elemen Halaman
Pengunjung web telah menjadi terbiasa dengan konvensi
tata letak tertentu, khususnya, pengaturan dengan navigasi utama horizontal di
bagian atas halaman dan/atau vertikal di sisi kiri yang dengan pengaturan dalam
bentuk huruf "L" terbalik.
Ada beberapa alasan tentang penggunaan posisi
tersebut yang diantaranya adalah :
Ø
Daerah atas dan kiri merupakan daerah yang
paling sering bahkan selalu ditampilkan beberapa fitur pada layar setiap pengguna, artinya, daerah
ini adalah daerah yang paling berharga dan
merupakan tempat yang paling konsisten terlihat sebagai posisi halaman-halaman
penting seperti komponen navigasi dan lain sebagainya. Jika unsur-unsur yang sama berada dibawah sisi
kanan jendela, maka akan lebih baik jika komponen tersebut dipindahkan atau
dihilangkan.
Ø
Kita telah terbiasa membaca dari kiri ke kanan
dan dari atas ke bawah karna penggunaan huruf alfabet sehingga mata kita telah
terlatih untuk melihat terlebih dulu dari pojok kiri.
Penggunaan tampilan tradisional yang
membentuk huruf “L” terbalik memang lebih disukai oleh para pengunjung secara
umum, khususnya yang telah terbiasa menggunakan penulisan dengan huruf alfabet,
namun bukan artinya kita tidak bisa melanggar kebiasaan tersebut, hanya saja
kita harus punya cukup keahlian untuk mengkondisikannya dengan baik,karna jika
kita melanggar kebiasaan tersebut maka kita harus cukup bisa membuat fitur yang
lebih menarik dan menonjol, tentu saja dengan mempertimbangkan berbagai masalah
yang dapat mempengaruhinya.
5. Unsur-unsur yang wajib diperhatikan pada
halaman
Tata letak halaman adalah kerangka visual dimana
kita meletakkan konten dan grafis. Untuk itu kerangka visual haruslah mencakup
unsur-unsur berikut pada setiap halaman :
§
Logo dan Identitas Perusahaan atau individu
pemilik situs.
§
Identitas halaman atau judul.
§
Navigasi utama, termasuk link ke home page (beranda).
§
Navigasi lokal (jika diperlukan) untuk membuka
sub-halaman.
§
Sebuah footer standar, jika sesuai. Sebuah
footer mungkin memberikan informasi hak cipta, tanggal update terakhir, atau
link ke privasi dan pemberitahuan hukum.
6. Home
Page
(Beranda)
Home
page (Beranda) adalah merupakan halaman yang paling penting
dan berharga dalam sebuah situs, beranda harus berfungsi sebagai daftar isi
untuk situs secara keseluruhan,
serta menunjukkan bagaimana caranya untuk mengakses konten yang ada dalam situs
yang kita buat. Beranda tidak boleh mengandung unsur-unsur yang tidak memiliki
relevansi dengan situs secara keseluruhan.
C.
Storyboard:
Sketsa layout
Sebelum masuk pada proses digital yang
kemudian disebut Storyboard, maka terlebih dahulu kita harus merancang sketsa
layout dengan tulisan tangan diatas kertas dan setelah rancangan telah mencapai
final barulah kita masuk pada proses digital yang penetapan tata letak,
pewarnaan dan lain sebagainya. Berikut ini adalah beberapa metode yang bisa
digunakan dalam proses Storyboard.
1. Menggunakan program editing gambar untuk
Membuat sebuah Comp
Secara umum desainer web biasanya lebih
memilih sketsa comp dalam program editing gambar, daripada menciptakan suatu
kerangka HTML halaman. Sketsa cara ini seringkali lebih cepat daripada menulis
HTML, dan menyediakan lebih banyak kebebasan.
2. Menggunakan HTML untuk Membuat sebuah
Comp
Meskipun agak lebih memakan waktu daripada
membuat sketsa dalam program editing gambar, namun metode ini biasanya
dilakukan oleh para desainer web berdasarkan pada realitas apakah HTML bisa
bekerja dengan baik atau tidak dalam membuat sebuah comp.
3. Halaman Template
Ada
dua cara untuk membangun template:
§ Membuat
dan menyimpan halaman HTML standar yang mengandung unsur-unsur tata letak,
tetapi tidak ada konten dan secara manual copy halaman kosong ke dalam editor
HTML setiap kali Anda menambahkan halaman baru ke situs.
§ Gunakan
template-creation yaitu fitur yang dibangun untuk pengembangan pada lingkungan
yang lebih luas seperti Dreamweaver. Pembuatan template dimulai seperti halaman
web biasa, namun kita bisa tentukan beberapa daerah dari halaman template untuk
diproteksi (modifikasi hanya mampu dilakukan dari dalam template).
D. Page
Layout dan
Aksesibilitasnya
Membangun tata letak halaman sehingga halaman
dapat diakses adalah salah satu hal yang sangat menantang bagi para desainer
web. Beragamnya calon pengunjung yang akan mendatangi situs yang akan dibuat,
mengharuskan para desainer harus mempunyai keahlian tinggi. Minsalnya seperti
masalah perbedaan komputer dan akses jaringan antara setiap pengunjung dan juga
desainer yang akan mempengaruhi aksesibilitas pengunjung terhadap situs, belum
lagi permasalahan tata letak seperti tabel yang sulit dibaca oleh pengunjung
tunanetra yang biasa mengakses dengan menggunakan layar baca.
Setiap permasalahan tersebut harus mampu
dipecahkan oleh para desainer web agar aksesibilitas situs web tetap bisa
terbaca dengan baik oleh para pengunjung. Tentu saja melalui beberapa keahlian
yang memadai.
DAFTAR
PUSTAKA
Penny
McIntire. 2008. Visual Design for the
Modern Web. USA : New Riders
ccad kk
BalasHapus