Chapter 8

Chapter 8
Desain Web
A. Layout Web
1. CSS Layout
• Fakta menggunakan CSS :
• Telah didukung oleh kebanyakan browser versi baru, tetapi tidak didukung
oleh browser-browser versi lama.
• Lebih fleksibel dalam penempatan posisi layout. Dalam layout CSS, kita
mengenal Z-index untuk menempatkan objek dalam posisi yang sama.
• Menjaga HTML dalam penggunaan tag yang minimal, hal ini berpengaruh
terhadap ukuran file dan kecepatan downloading.
• Dapat menampilkan konten utama terlebih dahulu, sementara gambar
dapat ditampilkan sesudahnya.
• Penerjemahan CSS setiap browser berbeda, tata letak akan berubah jika
dilihat di berbagai browser.
• CSS adalah layouting ”masa depan” dengan penggabungan bersama
XHTML
2. Tabel Layout
• Fakta Penggunaan Tabel :
– Lebih mudah digunakan dibanding dengan CS
layout
– Proses desain tabel lebih mudah menggunakan
editor WYSIWYG
– Tabel dapat ”rusak” dalam beberapa browser yang
biasa kita gunakan, yang menyebabkan perubahan
posisi dalam layout
– Meningkatkan jumlah tag HTML yang tidak perlu,
hingga akan menaikkan ukuran file
B. Resolusi Monitor dan Gambar
• Sebuah gambar yang diolah dan ditampilkan secara digital memiliki ukuran
tertentu.
• alat ukur dalam menentukan dimensi atau resolusi seperti satuan pixel
atau dot. satuan dpi (dot per inch) atau ppi (pixel per inch) yang
merupakan satuan resolusi dari sebuah gambar digital.
• pixel bisa dikaitkan dengan resolusi yang diberi nama resolution
dependent.
• Sebuah monitor hanya mampu menampilkan gambar pada resolusi
tertentu, ukuran standar gambar yang ditampilkan dalam layar monitor
umumnya adalah 7 ppi atau 96 ppi. Jadi dalam panjang 1 inch, terdapat 72
pixel yang menyusun gambar di layar monitor. Secara default pada Adobe
Photoshop ketika kita membuat dokumen baru, resolusi yang digunakan
adalah 72 ppi.
• Memperbesar resolusi gambar, otomatis akan memperbesar ukuran dan
besar file gambar, namun tidak ada perbedaan pada layar monitor karena
keterbatasan monitor itu sendiri, yaitu hanya mendukung resolusi 72 ppi.
Resolusi Monitor......(cont)
• Dalam dunia web, ukuran 72 ppi dianggap
resolusi standar untuk menampilkan gambar.
Menggunakan resolusi di atas 72 ppi untuk suatu
gambar hanya akan meningkatkan besar dan
ukuran file, tanpa ada perubahan dalam kualitas
tampilan.
• Pertimbangan lainnya jika anda menggunakan
resolusi gambar 72 ppi adalah kesamaan ukuran
gambar yang dibuat dengan tampilan resolusi
grafis pada umumnya, sehingga perbandingannya
adalah 1 : 1.
C. Whitespace
• Whitespace atau negative space dapat diartikan
sebagai ruang kosong yang sangat besar pengruhnya
dalam sebuah layout.
• Ruang kosong bagaikan ruang yang disediakan untuk
bernafas atau beristirahat, yaitu dengan cara memberi
jarak antara gambar dengan tulisan, border dengan isi,
judul dengan teks dan lain-lain sehingga semua
isi/konten sebuah situs web dapat dinikmati dan dibaca
dengan lebih nyaman.
• Pada desain web, ruang kosong digunakan untuk lebih
memfokuskan mata pengunjung pada suatu bagian
• Ada beberapa tip dalam menggunakan
whitespace pada halaman web, yaitu :
– Beri jarak antar elemen dalam web
– Jangan mengurung whitespace di antara elemen
desain
– Hati-hati dengan
”rivers of white”
dalam
paragraf
– Tidak ada aturan dalam whitespace
D. Slicing
• Menampilkan image atau gambar dalam sebuah halaman
web merupakan tantangan tersendiri bagi seorang desainer
web. Terlebih jika ukuran image cukup besar, baik dalam
dimensi maupun ukuran file. Desainer harus
mempertimbangkan kecepatan downloading situs dan
keindahan (grafis) dalam situs web yang dibuat.
• Salah satu jalan keluar adalah menggunakan slicing. Slicing
adalah metode memecah gambar berukuran (dimensi dan
file) besar menjadi gambar-gambar dengan ukuran yang
lebih kecil. Kemudian gambar-gambar tersebut disatukan
kembali menjadi sebuah gambar utuh seperti sebelum dislice dengan bantuan tabel.
E. Image
• Peran image tentunya tidak kalah dengan teks.
Adapun peran tersebut adalah sebagai berikut
:
– Image sebagai pengenal
– Image sebagai penarik perhatian
– Image sebagai penyampai pesan
– Image sebagai pendukung konten
F. Tipografi
• Tulisan mengandung unsur yang tidak
dideskripsikan secara langsung, namun
memiliki pengaruh terhadap pembaca
• Untuk dapat menampilkan tulisan atau huruf
dengan baik diperlukan strategi tertentu,
antara lain :
– Mengenal tipe huruf; serif, san-serif, decoratif,
script
– Manfaat setiap tipe