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…)

Dilema Desainer ketika Mendesain Website Sendiri.

Dari baru mulai pertama kali bisa membuat desain web ketika membuat desain website untuk pribadi atau website perusahaan sendiri selalu lebih susah, butuh waktu lama dan akhirnya merasa tidak puas.

saylows.com screenshoot

Menentukan titik “Aku Bilang Cukup!?“.
Batasan kepuasan ada ditangan kita, dan karena kita tahu kemampuan kita maka ini akan membuat tidak adanya kata “cukup”. Seperti halnya untuk desain wesbite saylows.com yang sekarang sedang dalam proses converting the design into template, yang pada awalnya menurut gw ya-ok-lah tapi ketika berjalan dalam proses desain selalu merasa ada yang kurang “I just want add sometin more, more and more“. Keinginan untuk menampilkan semua effect yang gw tahu kedalam website membuat desain website ini menjadi sangat hectic.

Menuju web standards.

Dental aku berikan screenshoot dari desain ini memberikan komentar “sangat graphis sekali” and I say “ok”, gw pikir tujuan untuk menunjukan bahwa website ini adalah blog seseorang yang memilih the works of the capital-D sebagai profesinya mungkin sedikit mengena. Tapi lagi ketika berbicara tentang “a good designthis is not what I call a good design.
Karena desain web yang bagus (web standards) harus mempertimbangkan banyak aspek. Apa saja yang ada dalam web standard? Gw akan menjabarkan web standards hanya dalam aspek desain dan meminimalisasikan hubungannya dengan coding, bukan berarti coding tidak penting dalam web standard tapi sangat penting karena desain dan coding adalah dua aspek yang tidak bisa dipisahkan. Tetapi pendekatan akan gw lakukan dalam sisi design usability jadi apa yang harus diperhatikan? Ladies and gentleman pay attantion please…

1. Pemisahan antara materi dan presentasi.
Desain harus berpihak kepada CSS, pemisahan yang jelas antara materi dan presentasi harus dipertegas hal ini dilakukan dengan menggunakan font, warna, padding (jarak antara), border (garis pinggir).

2. Pemilihan warna yang cukup terang dan cukup kontras.
Karena desain web berhubungan dengan indera penglihatan, tentunya pemilihan warna materi dan presentasi haruslah membuat pengguna merasa nyaman dan betah untuk berlama-lama membaca/melihat website kita. Pemilihan warna yang menyolok untuk materi penting yang ingin ditonjolkan juga harus diperhatikan sehingga materi penting tersebut dapat segera ditangkap oleh penglihatan user. Panduan tentang lama untuk lebih jelasnya silahkan baca artikel gw “Web Design yang Lucu (episode #2)“.

3. Tingkatan heading (penjudulan) yang jelas.
Menentukan bagaimana suatu judul dapat dipisahkan dengan jelas dengan paragraf, sub-paragraf, gambar, komponen lain (tanggal, kategori, author (nama penulis), link. Apa saja yang dapat dilakukan untuk membuat penjudulan memiliki karakter yang berbeda?
– Pemilihan jenis font yang berbeda tapi masih dalam satu keluarga.
– Permainan ukuran font yang lebih besar.
– Pengunaan underline dan warna background mouse over ketika heading merupakan sebuah link.
– Memisahkan box heading dengan materi lainnya dengan padding dan border.

4. Konsistensi Navigasi/Menu.
Dalam setiap halaman baik itu halaman home ataupun interior sangatlah penting untuk mempertahankan tampilan navigasi baik itu hirarki, posisi, warna. Hal ini akan mempermudah user untuk melakukan navigasi anatara halaman satu ke halaman lainnya untuk mendapatkan informasi yang diinginkan. Dan penempatan menu “home” menjadi keharusan di setiap halaman website. Menu “contact“, suatu kesalahan besar ketika sebuah website untuk kepentingan publikasi tidak menempatkan halaman contact. Setidaknya ada info email yang dapat dihubungi oleh user. Bahkan website HOAX pun menampilkan halaman contact kenapa musti takut sama spam kalau bisa nyepam balik hahahaha…hail hail ID-GMAIL.

5. Antara tata rias dan fungsi.
Hal-hal lain yang mengisi kekosongan dalam desain tapi juga sangat penting dalam sebuah web desain seperti banner header sebagai ciri khas dari wesbite, banner header yang “nendang” selalu akan tertanam dalam benak user dengan menampilkan logo, tags ataupun ilustrasi/photo. Footer, dengan ilustrasi atau tanpa ilustrasi untuk menyeimbangkan desain sehingga tidak membuatnya menjadi timpang atau berat sebelah. Penempatan Icon untuk blog reader/rss,community badges, counter atau apalah aku lebih suka menyebutnya “blog tong” yupe seperti tali g-string antara penting dan nggak penting gitu deh. Credit (thanks to), selalu hormati setiap inspirasi, bantuan, penggunaan open source cms atau info tidak penting seperti nama pacar/istri/ttm kamu yang selalu membuatmu merokok sambil tiduran merayakan kepuasan, hihihi.

My self, me and I.
Poin-poin diatas selalu gw jadikan pertimbangan ketika mendesain sebuah a client website, sebuah desain yang bagus hanya ketika dia baru keluar dari dapur desainer. Tetapi ketika sudah berpatokan pada revisi client yang berpura-pura paham betul tentang sebuah kata “estetika‘, sebuah desain akan menjadi sebuah bencana. Tapi ketika kita mampu meng-edukasi client “how was the desain work for them” sebuah cita-cita mulia “win win solution” menjadi hadiah. Tapi untuk desain web saylows.com it’s realy so fcukin hard to do couse I’m dealing with my self.

Coding bisa jadi adalah neraka.

It’s even worse ketika masuk dapur coding/converting, membayangkan saja bagaimana Mr. Nice Gay eh Guy ding (*baca : didat) melakukan proses ini sangat membuat gw merinding. “How on earth he gonna do this?“. Tapi gw yakin this is gonna happen, dia selalu bisa menemukan solusi untuk hampir semua bagaimana desain gw menjadi sebuah kenyataan.

How to kick-ass your blog fans.

Dolores :

Dulu pernah punya blog, aku posting hampir tiap hari. Isinya tentang personal kuliner sex-life sport ajojing gitu deh. Komentar tiap kali posting rata-rata 30-an ke atas. Jadi rajin posting bukan karena “I want to” tapi karena kalimat-kalimat “Kok lama nggak posting?” Tiba-tiba sadar, and I just stop.

Hey jangan berhenti ngeblog! Jika kamu merasa sudah mulai dikontrol oleh komentartoris itu here some tips… Sebelum melakukan tip-tips berikut pastikan kamu yakin akan melakukannya dan yang jelas apa apa kamu berani? Do you have the ball?

How to kick ass your blog fan.”

1. Mulailah menulis apa yang kamu suka, bukan apa yang mereka suka misalnya don’t be to common and major. Kamu mecium bau stand Bread Talk aja udah bikin mual apalagi makan rotinya. YUKE! (*dasar anak singkong!)
2. Mulailah membalas komentar blog fan dengan “ANJING TAIK BABI KAMU!“.
3. Buat postingan pengakuan bahwa kamu gay (HOMOK!), ini paling gampang dan efektif.
4. Kirimkan email ke komentatoris2x itu bikin HOAX bilang yang serius “Pinjem duit dong buat nambahin beli pelek spinner 21 inch untuk mobilku”
5. Postinglah hal-hal yang berbau mengeluh, bilang kalau kamu lemah syahwat, tulis tentang kamu barusan dipecat di kantor dan duit di dompet tinggal Rp. 1.300,- , mertua yang sekarat, istri yang sudah dua hari nggak pulang, anakmu yang paling kecil baru bisa bicara satu kata “ngentot” dan hubungkan segala kegagalan hidupmu karena garis telapak tanganmu yang tidak beraturan intinya bilang kalau hidup kamu membosankan and suck!
6. Cabut shotbox kamu.
7. Matikan system comment di blog kamu.
8. Ganti URL (alamat) blog kamu (jangan blog archivenya yang dihapus).
9. Ganti warna background blog kamu dengan #00FF00 dan text color #CCFF00.
10. Ganti banner blog kamu dengan gambar kotoran manusia yang masih segar.

Semoga berguna, jangan berhenti nge-blog!

Web Design yang Lucu (episode #3)

baca juga : episode #1, episode #2

Ingat jaman SD dulu ketika menulis tegak kita memakai kertas kotak-kotak untuk membantu kita membuat tulisan yang rapi atau membuat bentuk. Se-ingat gwe itu adalah penggunaan grid (garis bantu) pertama kali yang kita kenal. Grid dibuat dari jaman kambing masih pake tanduk, mungkin berasal dari alam bawah sadar manusia. Karena dengan adanya grid kita sangat-sangat dimudahkan, misalnya pemasangan susunan batubata pada tembok, coba bentuk batu batanya kayak krupuk udang apa kaga pegel tuh tukang masangnya…hihihihi….

Pembaca Budiman : “Soooompeee looooo?!”
Pembaca Budiman : “Kata pengantar yang basi sekali Bapak designer muda?!”
Designer Jumawa : “Udah baca aja, saya lagi sensitib ini…nanti muka kamu saya kotak’in!”
Pembaca Budiman : “Kenapa Grid begitu penting dalam desain website?”

Karena eh karena…
Continue reading