Warna
Pemilihan Warna adalah satu hal yang sangat penting dalam menentukan respon dari pengunjung. Warna adalah hal yang pertama dilihat oleh seorang pengunjung (terutama warna background), dan Anda bisa membuat situs anda untuk menampilkan warna dulu sementara content yang lain (text dan image) masih dalam proses download. Cara ini akan membuat kesan atau mood untuk seluruh situs itu.
Untuk mencapai design warna yang efektif, bisa dimulai dengan memilih warna yang bisa merepresentasikan tujuan dari situs Anda. Pallet warna yang anda buat sebaiknya cocok dengan pribadi dan tujuan dari situs Anda. Jika misalnya situs Anda adalah untuk situs komunitas, maka sebaiknya Anda memilih warna warna hangat untuk membuat suasana lebih santai. Jika situs Anda adalah untuk situs Informasi, dimana contentsimple dan tidak mengganggu (misalnya jangan menggunakan background kembang-kembang dengan warna menyolok). akan mendominasi, maka warna sebaiknya
Anda bisa melihat di Tabel 1 dibawah, untuk korelasi secara umum secara psikologis antara warna dan orang.
| WARNA | Respon Psikologi | Catatan |
| Merah | Power, Energi, Kehangatan, Cinta, Nafsu, Agresi, Bahaya, Api, Panas, Kemarahan, Darah dan Revolusi | Warna Merah kadang berubah arti jika dikombinasikan dengan warna lain. Merah dikombinakan dengan Hijau, maka akan menjadi simbol Natal. Merah jika dikombinasikan denga Putih, akan mempunyai arti 'bahagia' di budaya Oriental. |
| Biru | Kepercayaan, Konservatif, Keamanan, Tehnologi, Kebersihan, Keteraturan, Kesunyian, Kesejukan, Kejujuran, Keseriusan, Ketenangan dan Stabilitas Hubungannya dengan Langit dan Air. | Banyak digunakan sebagai warna pada logo Bank di Amerika Serikat untuk memberikan kesan 'kepercayaan'. |
| Hijau | Alami, Kesegaran, Kesehatan, Kejelasan Keberuntungan, Pembaharuan, Relaksasi. | Warna Hijau tidak terlalu 'sukses' untuk ukuran Global. Di Cina dan Perancis, kemasan dengan warna Hijau tidak begitu mendapat sambutan. Tetapi di Timur Tengah, warna Hijau sangat disukai. |
| Yellow | Optimis, Harapan, Filosofi, Ketidak jujuran, Pengecut (untuk budaya Barat), pengkhianatan. Mewakili Matahari, Warna Cahaya Kehidupan, Kesehatan, Kesegaran Brightness, Kekayaan, Spiritualitas. | Kuning adalah warna keramat dalam agama Hindu. |
| Ungu/Jingga | Spiritual, Misteri, Kebangsawanan, Transformasi, Kekasaran, Keangkuhan, Kemurungan. | Warna Ungu sangat jarang ditemui di alam. Paduan warna merah dan biru. |
| Oranye | Energy, Keseimbangan, Kehangantan, Simbol Pengetahuan, Juga Mewakili Kebahagiaan, Kesegaran, Patriotisme. | Menekankan sebuah produk yang tidak mahal. |
| Coklat | Tanah/Bumi, Reliability, Comfort, Daya Tahan. | Kemasan makanan di Amerika sering memakai warna Coklat dan sangat sukses, tetapi di Kolumbia, warna Coklat untuk kemasan kurang begitu membawa hasil. |
| Abu Abu | Intelek, Masa Depan (mirip warna Milenium), Kesederhanaan, Kesedihan | Warna Abu abu adalah warna yang paling gampang/mudah dilihat oleh mata. |
| Putih | Kesucian, Kebersihan, Ketepatan, Ketidak bersalahan, Kemurnian, Penuh Kejujuran, Setril dan Kematian. | Di Amerika, Putih melambangkan perkawinan (gaun pengantin berwarna putih), tapi di banyak budaya Timur (terutama India dan Cina), warna Putih melambangkan kematian. |
| Hitam | Power, Seksualitas, Kecanggihan, Kematian, Misteri, Ketakutan, Kesedihan, Keanggunan, Kegelapan, Represent Inauspicious Events | Melambangkan kematian dan kesedihan di budaya Barat. Sebagai warna Kemasan, Hitam melambangakan Keanggunan (Elegance), Kemakmuran (Wealth) dan Kecanggihan (Sopiscated) |
Tidak hanya palet WARNA anda match dengan isi situs, tapi Anda juga harus memilih warna yang sesuai dengan budaya pengunjung anda. Beberapa penelitian menujukkan bahwa respon setiap orang dari budaya yang berbeda akan berbeda.
Misalnya warna Oranye, secara universal, akan merepresentasikan produk yang tidak mahal, dan perayaan Halloween.
Di Amerika, warna Biru Tua merepresentasikan Kepercayaan (TRUST), tapi di Korea, Kepercayaan lebih direpresentasikan oleh warna warna Pastel, terutama Pink.
Jadi penggunaan WARNA yang cocok, juga harus didukung oleh pemahaman tentang apa arti WARNA tersebut di demografi pengunjung yang kita tuju. (Misalnya, situs dengan warna Kuning Terang di Indonesia, mungkin akan dikaitkan dengan sebuah parpol tertentu).
Sekarang kita coba untuk bereksperiment dengan 2 situs fiktif.
Yang pertama, adalah Bank Obral Kredit, adalah sebuah situs Bank yang tujuannya memberikan informasi mengenai Bank Palet warna yang akan dipakai termasuk Biru, Merah Tua, dan Putih (Lihat tabel di bawah)
Objektifnya adalah membangun kesan Konservatif dan Kepercayaan (dengan warna Biru), Kekuatannya (Merah), dan etos kerja dan disiplin (Putih). Secara global, warna warna ini akan cukup untuk membangun sebuah image tentang sebuah perusahaan yang kokoh dan bisa dipercaya.
Situs fiktif yang kedua adalah TK Senayan, yang adalah sebuah Taman Kanak Kanak. Dengan target 'Tidak Serius', dan Ceria,
Sekarang bandingkan keduanya :
| Palet warna di sebelah kiri melambangkan konservativ dan kepercayaan, kekuasaan, presisi, dan keteraturan | sedangkan palet warna disebelah kanan melambangkan kehangatan, energi, alam, dan kesehatan. |
| Red:0; Green:51; Blue:102; | Red:25; Green:103; Blue:0; |
| Red:153; Green:0; Blue:0; | Red:102; Green:204; Blue:0; |
| Red, Green, Blue : 255 | Red:0; Green:102; Blue:204; |
| Note: Warna-warna ini bisa lain keliatannya di monitor Macintosh ataupun PC. | |
Walaupun penggunaan warna tidak terbatas hanya di warna warna utama, tapi warna warna utama inilah yang meng-ekspresikan secara cepat 'objektif' dari situs ini.
Typografi adalah sebuah seni. Dan adalah sebuah seni yang cukup rumit, apalagi kerumitannya ditambah dengan medium design web yang terbatas.
Typografi dan Penutup
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.
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).
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.
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 , seperti pada Tabel Berikut:
| JENIS.HURUF | KETERANGAN | CATATAN |
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) |
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).
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.
Pada Gambar di atas, anda akan melihat design dari Bank Obral Kredit, dengan warna, bentuk dan Jenis Huruf konservatif. Penggunaan Jenis Huruf Times secara keseluruhan, memberikan kesan keseragaman dan tanpa basa basi. Bersih, simple dan serius.
Sedangkan pada Gambar di bawah, Anda akan melihat design yang berwarna warni untuk TK Senayan. Situs ini menggunakan jenis huruf FirstGrader -- sebuah jenis yang mirip tulisan anak kecil -- untuk Judul dan Navigasinya. Arial digunakan untuk isi text.
Hasilnya adalah design yang tidak formal tapi juga tidak susah untuk dibaca.
TUKAR GULING
Sekarang kita lihat, apakah dengan 'Tukar Guling' akan mencapai efek/hasil yang sama? Design Warna, Bentuk dan Huruf ditukar antara Bank Obral Kredit dengan TK Senayan.
TUKAR GULING
Sekarang kita lihat, apakah dengan 'Tukar Guling' akan mencapai efek/hasil yang sama? Design Warna, Bentuk dan Huruf ditukar antara Bank Obral Kredit dengan TK Senayan.
Hasilnya? Gambar-gambar diatas, akan menunjukan betapa pentingnya Warna, Bentuk dan Jenis Huruf untuk memberikan pengunjung situs anda 'kepuasan' sehingga mereka tidak malu-malu untuk 'berpartisipasi' terhadap apapun tujuan dari situs Anda. (Misalnya menggali informasi lebih lama, atau memesan produk Anda, atau mendaftarkan diri ke situs Anda, dll).
Trade-off Format File Grafis
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 Depth (bit).
| Jumlah warna | bit |
| 2 | 1 |
| 16 | 4 |
| 256 | 8 |
| 32 768 atau 65 536 | 16 |
| 16 777 216 | 24 atau 32 |
Color Model
- RGB = Red, Green, Blue
- HLS = Hue, Lightness, Saturation
- CMYK = Cyan, Magenta, Yellow, balcK
Format Penulisan
Format | Keterangan |
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 Experts 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 | Graphics 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. |
Trade-off Format File Grafis
| Parameter | BMP | JPG | GIF | PNG |
| Ukuran | >> | << | << | << |
| Warna | >256 | >256 | 256 | >256 |
| OS | Windows | All | All | All |
| Dukungan | Windows | 100% | 100% | 50:50 |
| Transparan | No | No | Yes | Yes |
| Animasi | No | No | Yes | -- |
