Anda di halaman 1dari 30

DESAIN WEB

Typografi
Typografi adalah sebuah seni. Dan adalah
sebuah seni yang cukup rumit, apalagi
kerumitannya ditambah dengan medium
design web yang terbatas. Huruf di Web
dapat dibuat sebagai bagian dari grafik
(image), atau dengan cara HTML, atau
dengan Style Sheets
Typografi
Dengan cara HTML dan StyleSheet, kadang akan
didapakan hasil yang kurang memuaskan atau
kurang bagus karena TypeFace (Bentuk Huruf)
yang kita gunakan, mungkin tidak akan tersedia
di komputer si pengunjung. Jika komputer si
pengunjung tidak mempunya Bentuk Huruf
yang telah di-set oleh designer web, maka yang
akan digunakan adalah tampilan menggunakan
Bentuk Huruf alternatif atau Bentuk Huruf
standard (default).
Typografi
Designer dapat menentukan pilihan
tentang huruf yang mereka buat secara
Grafik (image), dan juga TypeFace umum
yang dipakai pada isi text. Begitu banyak
bentuk huruf, sampai susah untuk
mengatakan berapa banyak bentuk huruf
yang ada di dunia ini.
Typografi
Sehingga agak susah untuk
menentukan efek/pengaruh apa yang
bisa ditimbulkan kepada pengunjung.
Akan tetapi, huruf dibagi dalam
beberapa kategori umum, dan
biasanya kategori umum ini memiliki
gaya tersendiri , sebagai berikut:
Serif
• Jenis huruf (Typefaces) dengan
strokes/ekor, dinamakan serifs, menghiasi
Jenis Huruf ini. Contoh paling umum
adalah Times.
• Bentuk huruf yang formal. Serif
mengekspresikan organisasi dan
intelektualitas. Sangat anggun dan
konservatif.
Sans-serif
• Jenis Huruf yang tidak memiliki stroke/ekor.
Ujungnya bisa berbentuk tumpul (rounded
corner) atau tajam. Bentuk Huruf Sans-Serif
yang paling polular adalah : Helvetica dan Arial
• Kurang formal, lebih hangat, dan bersahabat.
San-Serif biasanya sangat cocok sebagai screen-
font (untuk tampilan di layar monitor) karena
tajam dan gampang untuk dibaca.
Monospace
• Setiap huruf yang berjenis Monospace mempunyai
jarak/lebar yang sama setiap hurufnya. Huruf W
dan I akan mempunyai ruang yang sama.
Contoh huruf monospace adalah Courier.
Huruf pada Mesin Tik juga adalah contoh huruf
Monospace.
• Berdasarkan pada dasar mesin ketik. Jenis
Monospace banyak digunakan oleh programmer
untuk coding, dan juga untuk preformatted text.
Belakangan ini, bentuk monospace banyak dipakai
oleh designer designer yang beraliran "grunge"
alternative.
Decorative
• Bentuk huruf yang sangat rumit designnya.
Bentuk huruf ini akan sangat memusingkan jika
dipakai sebagai body text, dan hanya cocok
untuk dipakai (secara terbatas) untuk Headline.
• Karena jenis yang banyak, font Decorative bisa
membuat efek respon yang berbeda. Jenis
Decorative biasanya paling sip digunakan untuk
Judul, dan lebih baik jagan digunakan sebagai
body text.
Script
• Bentuk huruf yang menyerupai tulisan
tangan. Jenis huruf ini juga sering di sebut
jenis Kursif (Cursive).
• Memberikan kesan keanggunan,
sophistication, dan sentuhan pribadi.
Pemakaiannya jangan sampai terlalu
banyak (sama seperti Decorative)
Typografi
Biasanya, designer akan menggunakan
beberapa macam style hurup dalam
sebuah halaman. Judul dan Point Penting
biasanya menggunakan jenis Decoratif
dan Scrip, dan isi text hampir selalu harus
menggunakan jenis Serif atau San-Serif
(atau kadang menggunakan Monospace).
Typografi
Untuk mempengaruhi pengunjung secara
psikologi, bisa dengan penggunaan Jenis Huruf
yang sesuai dengan tujuan yang hendak dicapai
dengan penggunaan Warna dan Bentuk.
Misalnya, untuk sebuah situs yang konservatif,
lebih baik menggunakan bentuk Serif, San-Serif
yang sederhana, dan mungkin jenis Dekoratif
yang bersih. Situs yang lebih aktif bisa
menggunakan jenis Dekoratif yang lebih rumit,
dan juga Monospace.
Bentuk dasar
Bentuk juga bisa digunakan untuk
menarik respon dari pengunjung.
Penggunaan Bentuk yang efektif akan
secara psikologi mengmotivasi
pengunjung, menginspirasi pengunjung
dan memberikan tantangan kepada
pengunjung, kadang tanpa si pengunjung
menyadari kenapa bisa termotivasi,dsb.
Lingkaran
• Koneksi, Komunitas, Keseluruhan,
Ketahanan, Pergerakan, Keamanan.

• Referensi untuk perasaan kewanitaan :


Kehangatan, Kenyamanan, Sensualiatas,
dan Cinta
Kotak
• Keteraturan, Logis, Keamangan.

• Kotak juga adalah dasar dari


objek 3 dimensi yang berarti
Berat, Massa, dan Kepadatan
Segitiga
• Energi, Power, Keseimbangan,
Hukum, Ilmu Pasti, Agama.

• Juga sebagai referensi untuk


perasaan maskulin : Kekuatan,
Agresi, dan Pergerakan yang dinamik.
Bentuk, biasanya bisa digabungkan untuk
membuat kesan yang lebih kuat. Misalnya
penggunaan sebuah Lingkaran dan
sebuah SegiTiga, akan menghasilkan
kesan energetik, dan dinamik. Atau
penggunakan sebuah Lingkaran dan
sebuah Persegi untuk kehangatan dan
perasaan aman.
Kekuatan dari Bentuk dan kombinasi
Bentuk telah ditujukan di berbagai
bidang, seperti Automotif,
Bangungan, Kemasan Produk, dan
Logo Perusahaan.
Kekuatan dari Bentuk yang paling banyak
diimplementasikan mungkina adalah sewaktu
membuat Logo Perusahaan. Salah satu contoh
dari kekuatan yang dihasilkan dari
penggabungan Bentuk adalah Logo dari FedEx.
Gambar #2 menunjukan situs dari FedEx.
Perhatikan Logo yang terletak di pojok kiri atas.
Perhatikan bentuk yang terbentuk oleh ruang
antar 'E' dan 'x' adalah sebuah tanda panah ke
arah kanan. Kebanyakan dari kita tidak akan
menyadari akan adanya tanda panah tersebut,
tapi ini bukanlah sebuah kebetulan. Sekarang
kita lihat bentuk yang membentuk tanda panah
itu, yaitu sebuah persegi dan sebuah segitiga,
yang berarti : Keamanan.
Grafis
Grafis adalah salah satu bagian penting
dalam sebuah halaman web. Penampilan
efek-efek grafi biasanya dilakukan dengan
bantuan beberapa file gambar. Untuk
lebih memahami pemanfaatan file-file
gambar dalam desain sebuah halaman
web, diperlukan pemahaman tentang
property sebuah file gambar.
Berikut ini beberapa property sebuah file
gambar
• Ukuran panjang dan lebar (pixel)
• Color Depth (bit)
• Color Model
• Resolusi (dpi)
• Format penulisan
Color Model
• RGB = Red, Green, Blue
• HLS = Hue, Lightness, Saturation
• CMYK = Cyan, Magenta, Yellow,
blacK
BMP (bitmap image)
• Format grafis ini adalah format yang sangat
fleksibel bila digunakan di lingkungan kerja
dengan OS Windows, artinya dapat dibaca oleh
program grafis manapun. Format ini dapat
menyimpan informasi grafis mulai dari 1 bit
sampai 24 bit.
Salah satu kelemahan format ini adalah belum
mendukung cross platform dan ukuran file yang
sangat besar.
TIFF (tagged image file format)
• Format ini mampu menyimpan informasi grafis
hingga 32 bit dan dapat digunakan di beberapa
platform OS yaitu PC (windows), Macintosh,
Silicon Graphics. Format ini banyak digunakan
oleh para perancang grafis terutama yang
berorientasi pada proses cetak. Hampir semua
program yang mampu membaca format BMP
dapat membaca format TIFF ini.
JPG/JPEG (joint photographic expert
group)
• Format ini mampu mengkompres obyek dengan
tingkat kualitas sesuai dengan pilhan. Selain
sering digunakan untuk menyimpan gambar
yang akan digunakan untuk keperluan desain
halaman web, multimedia dan elektornic
publishing, format ini mampu menyimpan mode
warna RGB, CMYK dan Grayscale. Informasi
yang dapat disimpan dapat lebh dari 8 bit.
GIF (graphic interchange format)
• Format ini hanya dapat menyimpan gambar
dalam 8 bit atau kurang, yaitu hanya untuk
mode Grayscale, Bitmap dan Indexed Color.
Format ini adalah format standar yang sering
digunakan untuk internet dan electronic
publihing. Format ini mampu menyimpan
animasi dua dimensi. Kelebihan lainnya adalah
mampu menampilkan gambar transparan dan
ukuran file yang sangat kecil.
PNG (portable network graphic)
• Format ini diciptakan sebagai alternatif pilihan
selain format GIF. sama seperti format GIF,
format ini mampu menampilkan background
transparan dengan ukuran file yang juga kecil.
Salah satu kelebihannya adalah informasi grafis
yang dapat disimpan mencapai 24 bit.
Kelemahannya adalah belum banyak didukung
oleh web browser yang ada.