Merancang Website Pribadi
Merancang
sebuah website pribadi dengan mempertimbangkan beberapa aspek seperti Layout,
Warna, Ukuran File, dan Font sehingga website yang telah dibangun memiliki
desain yang baik, Professional, efisien, dan efektif. Tugas ini untuk
pemenuhan projek tengah semester mata kuliah desain web.
1. LAYOUT Konsep desain web diatas menggunakan bentuk model “Layout Left Index”. Pnegunjung terbiasa dengan tampilan menu bagian kiri karena mereka akrab dengan tampilan menu system operasi. Dokumen rancangan web diatas memeiliki elemen – elemen sebagai berikut :
1. LAYOUT Konsep desain web diatas menggunakan bentuk model “Layout Left Index”. Pnegunjung terbiasa dengan tampilan menu bagian kiri karena mereka akrab dengan tampilan menu system operasi. Dokumen rancangan web diatas memeiliki elemen – elemen sebagai berikut :
- Header.
Berisi informasi website. Disini diletakan meu (Navigation). Juga terdapat image slide show.
- Slideshow Image.
Untuk menampilkan poto slide.
- Sidebar.
Untuk menampilkan menu/navigasi web dan komentar terakhir. - Konten
Berisi semua konten web (Informasi Website). - Ekstra
Tambahan seperti sponsored, galeri, atau special link. - Footer.
Berisi informasi hak cipta website (Copyright/Copyleft).
- It Work (Mencapai Tujuan)
- It Organizes (Ditata dengan Baik)
- It Attract (Menarik bagi pengguna)
2. WARNA
WARNA
|
MAKNA
POSITIF
|
MAKNA
NEGATIF
|
KETERANGAN
|
Hijau
|
Alam,
lingkungan, hidup, pertumbuhan, stabil, santai, harapan, segar, simpati,
sehat.
|
Kecemburuan,
nasib buruk, iri hari, dengki
|
Warna
hijau tidak terlalu sukses untuk ukuran global.
|
Biru
|
Kepercayaan,
kesetiaan, pengabdian, ketenangan, kedamaian, ketulusan, kesejukan,
konservatif, percaya diri, penyembuhan, adil, berpikir, konsisten
|
Kesedihan,
kedinginan, depresi, basi, keraguan
|
Banyak
digunakan sebagai warna logo bank di Amerika Serikat untuk memberikan kesan
‘kepercayaan’.
|
Abu
–Abu
|
Modern,
cerdas/intelektual, bersih, kokoh, tenang, seimbang, masa depan, bijaksana
|
Umur
tua, kesedihan, bosan, kuno, lamban, lemah.
|
Warna
abu – abu adalah warna yang paling gambang/mudah dilihat oleh mata.
|
Coklat
|
Tanah,
bumi, alam, natural, netral, hangat, keamanan, perlindungan.
|
Tumpul,
kotor, tandus, miskin, membosankan.
|
Kemasan
makanan di Amerika sering memakai warna coklat dan sangat sukses.
|
Hitam
|
Kekuatan,
keanggunan, kemewahan, misteri, kecanggihan, kemakmuran, kepuasan,
pengalaman, keras, kokoh, sangat kuat.
|
Kematian,
takut, jahat, dosa, kesedihan, duka cita, marah, anonym, penyesalan.
|
Melambangkan
kematian dan kesdihan dibudaya barat. Sebagai warna kemasan, hitam
melambangkan keanggunan, kemakmuran dan kecanggihan.
|
Putih
|
Kesucian,
kebersihan, steril, jujur, kemurnian, kesederhanaan, damai, kebaikan,
disiplin, musim
|
Hampa,
klinik, steril
|
Warna
putih melambangkan kematian di cina dan india.
|
4. FONT
San-Serif adalah jenis
huruf yag tidak memiliki stroke/ekor. Ujungnya bisa berbentuk tumpul (rounded
corner) atau tajam. Contoh jenis huruf ini yang digunakan pada web pribadi ini
adalah Open Sans. Jenis huruf yang banyak digunakan. Font ini sangat cocok
untuk web dan mobile, sangat mudah untuk dibaca oleh pengunjung. Jenis font
yang kita pilih menentukan ketertarikan pengunjung untuk melihat website kita.
Typografi sangat penting. Typografi memberikan bentuk dari konten kita.
Bila ingin mendapatkan
kesan sederhana atau simple, huruf jenis ini cocok digunakan dengan panduan
garis tipis dengan warna yang tidak terlalu mencolok. Untuk menagaskan kata
atau judul dari sebuah desain title, huruf ini dapat ditebalkan. Jika ingin
menggunakan jenis ini untuk teks utama, imbangi dengan memberikan spasi yang
agak lebar pada teks. Huruf sans serif lebih banyak dipergunakan pada layar
computer karena sederhana (Tidak mempunyai kait) dan lebih mudah dibaca pada
ukuran yang lebih kecil. Tipe font yang digunakan juga mempengaruhi kecepatan
load sebuah halaman (Page Load) jika kita banyak menggunakan style dari font
maka semakin berat proses load sebuah halaman. Untuk itu perlu pertimbangan
dalam menggunakan font.
15. UKURAN FILE
Untuk grapik sangat diperlukan dalam sebuah website,
karena memiliki beberapa fungsi. Namun jika terlalu banyak menggunakan grafik,
bisa jadi website kita akan menimbulkan berbagai masalah. Untuk mengatasi
berbagai hal yang tidak diinginkan ketika mendesain web, perlu memerptimbangkan
berbagai sudut pandang dalam penggunaan grafik diantaranya :
a.
Menambahkan
seperlunya grafik karena bisa menambah waktu ketika pengguna mendownload
artikel yang diinginkan.
b.
Mengambil yang
terkecil dala hal ukuran fisik dan file.
c.
Tidak
menggunakan navigasi dalam bentuk grafik.
d.
Mencantumkan spesifikasi
tinggi dan lebar dalam tag.
e.
Mencantumkan
nilai border dalam tag.
f.
Menetapkan teks
alternative dalam tag.
g.
Menggunakan
format png dan jpg untuk poto.
File gambar yang digunakan dalam konsep web pribadi
ini menggunakan file gambar berekstensi png dan jpeg. File dan Ukuran gambar
tersebut sudah di compress untuk keperluan website.
6. LOADING TIME
Menurut Jeffrey Veen
dari webmonkey.com : “kita hanya memiliki 3 detik untuk meyakinkan user untuk
tidak menutup window atau pergi ke situs lain. Untuk itu pada website pribadi
ini diletakan sesuatu dilayar dalam waktu 3 detik dan membuat sesuatu itu
menarik”. Aturan ini diperlunak oleh webpreview, yaitu dengan 8 detik, jika
situs web ini mempunyai sebuah image bukan fotografi atau artwork (Dalam artian
sebenarnya) yang besarnya 40 kb (satu image).
Asumsi, misalnya kita
pilih seting kecepatan koneksi modem pada dreamweaver 56,0 Kilobits per Second.
Kecepatan modem dalam satuan kilobits. 8 bits sama dengan 1 Byte. Jadi bila modem memilki kecepatan
transfer 56,0 Kbps. Maka besar transfer file :
Besar
Transfer File = 56000 bits : 8 = 7000 Byte atau 7 Kbps
Jadi halaman web yang sebesar 229 kb akan memakan
waktu untuk tampil utuh di browser (Menggunakan modem 56,0 kbps)
Waktu Untuk Tampil = 229 Kb : 7
Kbps = 33 Second
Untuk itu agar kecepatan loading time lebih baik dan
tidak memiliki waktu tunggu yang lama perlu memperhatikan :
·
Menguji coba
untuk berbagai kecepatan koneksi.
·
Menggunakan
grafik yang berukuran kecil dan menggunakan fasilitas optimize pada program
pengolah grafik.
·
Melakukan
slicing pada image secara efektif.
·
Menggunakan
attribute pada image. Misalnya, width dan height dalam tag <img>. Hal ini
akan mempercepat akses karena browser tidak perlu mendeteksi lagi ukuran grafik
yang akan ditampilkan dan browser dapat melanjutkan dengan me-load elemen lain
sambil menunggu grafik itu tampil.
·
Memanajemen
table dengan baik.
·
Menggunakan
animasi dan suara sekecil mungkin.
Sebuah situs web yang tampil lebih cepat
kemungkinan besar akan kembali dikunjungi, apalagi dengan konten dan tampilan
yang menarik. Waktu download memang tidak hanya dipengaruhi oleh desain tapi
juga koneksi, server, dll. Namun demikian kita mempertimbangkan desain yang
dibuat oleh para desainer.
3 7. SCREENSHOT
Subscribe to:
Post Comments
(
Atom
)
No comments :
Post a Comment