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
    GAMBAR 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).
Setidaknya ada 3 kriteria dasar untuk sebuah layout yang baik, yaitu.
  • It Work (Mencapai Tujuan)
  • It Organizes (Ditata dengan Baik) 
  • It Attract (Menarik bagi pengguna)
Sebuah layout yang baik menyusun elemen-elemen halaman dengan rapi dan mudah diprediksi. Kemudahan prediksi penting agar pembaca / pengguna web tidak perlu berpikir dalam menggunakan web kita. “Don’t Make Me Think” merupakan salah satu prinsip dasar dalam pembuatan antarmuka web dan aplikasi secara general. Salah satu cara untuk membuat halaman lebih mudah diprediksi ialah dengan menggunakan garis pembantu penyusunan elemen, yang dikenal dengan nama “Grid” pada dunia web. Sebagai garis pembantu dalam menyusun elemen, Grid dibuat dalam berbagai bentuk dan ukuran, sesuai dengan keperluan. Penempatan elemen dilakukan di dalam sebuah Grid, ataupun di dalam beberapa Grid. Pemakaian Grid umumnya dilakukan untuk menyusun elemen secara merata. Pada konsep web pribadi ini menggunakan framework 960 grid system untuk mempermudah dalam membangun web.
 
 
 
2. WARNA
     
 
   Warna membantu kita untuk mengenali suatu objek tertentu. Wara membantu memahami sesuatu. Warna dapat membuat perhatian, menarik, menolak, menggemaskan, bahkan bisa mempengaruhi emosi. Warna dapat menimbulkan kesan pertama kepada pengunjung ketika menjelajahi sebuah situs web karena warna adalah hal yang pertama dilihat (terutama warna background). Warna memiliki emosi yang melekat. Gambar diatas adalah konsep warna dari sebuah website pribadi yang terdiri dari beberapa warna. Berikut penjelasan aspek psikologi warna yang diterapkan pada website pribadi ini :


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

       
No comments

No comments :

Post a Comment