in Like, web design

Memperhatikan konsep “Above the Fold” dalam membuat desain web.

Apa maksud dari “Above the Fold“?
kalau diartika sari halah… diartikan langsung mungkin dalam bahasa indonesia akan menjadi “Diatas Lipatan” arhg! nggak cool! Let just keep it that way… “Above the fold”
Istilah ini berarti penempatan materi-materi menarik atau materi-materi penting dibagian atas sebuah desain web saat ditampilkan di web browser (tanpa harus melakukan mouse scrooling).

Seberapa tinggi “Above the fold“?
Berhubung beragamnya resolusi monitor pengguna internet maka dapat dipastikan hal ini bersifat relatif. Tetapi menurut browser statistik bahwa pengguna internet sekarang ini kebanyakan (hampir 54%) memakai resolusi 1024×768 pixel. Jadi marilah kemari hey…hey… halah! kita jadikan hal tersebut sebagai acuan untuk menentukan tinggi “Above the fold“.

Hal lain yang perlu diperhatikan adalah jenis browser yang digunakan oleh pengguna Internet juga mempengaruhi ukuran ini. maksudnya jenis? pria atau wanita? otakmu kelamin tok! hahahaha maksudnya jenis apakah Microsoft Internet Explorer atau Firefox atau browser merk lain. Kita ambil contoh dua browser terpopuler tadi saja, perhatikan gambar berikut :
firefox with no toolbar above the fold
Firefox 1.5.x.x tanpa toolbar.

above the fold firefox with toolbar
Firefox 1.5.x.x dengan Google toolbar.

Apa belum punya firefox? HAREEE GENEEE… gih download dulu hihihihi


above the fold ie 6 with no toolbar
Internet Explorer 6.0 tanpa toolbar.

above the fold ie 6 with Yahoo! oolbar
Internet Explorer 6.0 dengan Yahoo! toolbar.

Kemungkinan lain yang mengakibatkan besarnya “Above the fold” akan berkurang adalah kebiasaan user/pengguna browser yang menambahkan toolbar lain selain toolbar Yahoo atau Google. Katakanlah di warnet biasanya browser sudah dalam keadaan semrawut dengan toolbar-toolbar yang nggak penting yang diinstall langsung/asal klik ketika user ngebokep lihat yang bogel bugil di internet hihihihi, atau faktor lain bagi yang nggak nge-bokep biasanya ada tambahan developer toolbar, alexa toolbar, digg toolbar atau toolbar-toolbar lain yang bermanfaat dengan kebutuhan pengguna browser.

Menjadikan 4 kemungkinan dari 2 browser terpopuler diatas sebagai acuan adalah cara terbaik.

Bagaimana melakukan pengecekan atau preview apakah design sudah “Above the fold”? saat proses design menggunakan :

1. Macromedia Firework
Di Macromedia Firework dengan hanya menekan F12 pada keyboard maka design akan ditampilkan langsung di web browser default pada komputer dan kita akan bisa melihat apakah sudah “Above the fold”.

2. Adobe Photoshop
Pilih File > Save for Web, kemudian pilih browser dari menu pilihan browser yang berada di bawah window Save for Web.

Materi apa saja yang harus ditampilkan di area “Above the fold”?
Hal ini sangat tergantung dari website apa yang kita desain. OK, kita ambil contoh sebuah website e-commerce.

1. Perhatikan penggunaan banner.
Usahakan didalam banner menampilkan sebuah images yang secara visual menginformasikan “barang” apa yang dijual di website tersebut. Katakanlah lingerie…ohhh… I love Lingerie e-commerce website hihihi selalu inspiring hahaha. Jadi kita pasanglah gambar simpanse yang memakai lingerie kedodoran, kemudian menambahkan Typografi dengan quote yang menarik seperti “Salah Ukuran Membuat Si Dia Ngedrop” atau “Mencukurnya Terlebih Dahulu Akan Sangat Membantu” dan ditutup dengan pernyataan “Kami Mengerti Ukuran Anda” hahaha.
Mengenai tinggi banner please use your considerations, “But sir my considerations is fcuk’up!” “OK than,please your opportunity to check-up to the nearest mental institutions” hahaha.

2. Tampilkan menu-menu penting.
Memutuskan memakai side-menu dengan menampilkan menu category lengkap dengan sub-category sangatlah bijaksana. Sehingga pengunjung langsung dapat melihat category product yang ditawarkan. Tampilkan juga info penting lain seperti ‘how to order“, “payment info“, “contact” dan lain-lain.

3. Tampilkan product terbaru (latest product) atau featured products.
Hal ini juga bisa membuat pengunjung untuk tetap melanjutkan browsingnya di dalam website karena mereka mendapatkan informasi tentang produk terbaru. Apalagi dengan quote-quote promo, discount, sales dan lain-lain.

Tiga materi tersebut akan mendukung tujuan dibuatnya website tersebut yaitu “mulai menjual“. Jadi mari teriakan bersama-sama dengan tangan terkepal “KEEP IT ABOVE THE FOLD” (*LSM banget…)

Write a Comment

Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  1. walaupun otakku belum nyampai, tapi enak baca tutorialnya, bli.

    eh, selamat merayakan hari raya nyepi ya…
    tahun berapa caka ya, saya lupa…
    kalau pas nyepi, gak usah posting dulu gpp kok.
    kita semua sabar menanti hari berikutnya.
    hehe.

  2. Katakanlah di warnet biasanya browser sudah dalam keadaan semrawut dengan toolbar-toolbar yang nggak penting yang diinstall langsung/asal klik ketika user ngebokep lihat yang bogel bugil di internet hihihihi

    pengalaman pribadi jaga warnet? 😛