Penyederhanaan Tampilan Blog, Apa dan Bagaimana?
Perlukah membedakan tampilan blog dan situs portal? Apa perbedaan utama antara blog dan situs jenis lainnya dari sisi tampilan? Mengapa blog sebaiknya diatur agar tidak terkesan terlalu ramai?
Untuk menjawab pertanyaan di atas, sebaiknya kita kembalikan pada tujuan utama sebuah blog dibuat. Apa cuma untuk diary online, sekadar untuk menyalurkan hobi menulis, semata untuk berbagi informasi, atau mungkin demi kepentingan publik secara luas?
Apa pun alasannya, penyederhanaan tampilan blog (mungkin) perlu dilakukan terlebih dahulu.
Dengan tampilan yang sederhana, diharapkan pengunjung akan lebih mudah untuk singgah (lebih lama). Diharapkan pula, kecepatan muat (loading speed) halaman menjadi tidak terlalu bermasalah. Upaya untuk menyederhanakan tampilan blog bisa dimulai dengan mengurangi detail-detail pada setiap ‘section’. Mulai dari header, area konten, sidebar, hingga footer.
Mari kita fokuskan pada ‘detail’. Blog yang minimalis atau sederhana umumnya tidak terlalu banyak detail. Wujudnya bisa berupa :
- penggunaan warna yang minim,
- tidak banyak memasang link navigasi, dan
- memasang fitur seperlunya saja.
Mari kita kupas satu per satu 3 poin tersebut.
- Masalah penggunaan warna. Terlalu banyak permainan warna atau terlalu banyak kombinasi warna bisa menimbulkan efek ‘pusing’ bagi pengunjung. Oleh sebab itulah, belakangan ini saya berusaha meminimalisir warna pada theme yang saya gunakan di blog ini.
Berapa jumlah warna ideal yang masih bisa ditoleransi? Menurut saya, 3 saja sudah cukup. Terutama untuk bagian-bagian utama blog. Contohnya pada blog ini, di mana warna dominan yang ada yaitu biru cerah (pada latar konten dan sidebar), hitam lembut (pada latar header dan footer), serta biru agak gelap (pada latar utama). Untuk warna lain sebatas dekorasi pendukung saja yang tidak begitu dominan.
- Masalah link navigasi. Terlalu banyak navigasi juga berpotensi membuat pusing pengunjung. Contoh konkretnya, saya pernah beberapa kali menemukan blog/situs dengan jumlah link navigasi yang mencapai belasan pada bagian headernya. Terlalu banyak, bukan? Mungkin maksud sang pemilik blog/situs tersebut agar pengunjung bisa lebih mudah dan cepat memperoleh referensi yang spesifik. Tapi apakah itu efektif?
Lalu, berapa jumlah link navigasi ideal yang bisa ditoleransi? Tidak ada patokan khusus. Namun untuk navigasi pada bagian header, menurut saya kurang dari 10 sudah cukup. Tapi poin ini mungkin tidak berlaku pada situs-situs besar yang sudah sangat terkenal. Semisal portal-portal berita, di mana pada bagian headernya terdapat banyak sekali link navigasi (tidak termasuk link dalam dropdown list).
Untuk navigasi pada sidebar/footer – semisal menu recent post, random post, ataupun popular post – sebaiknya per itemnya maksimal berisi 10 buah link saja. Terutama jika ketiganya atau dua di antaranya digunakan sekaligus. Misalnya Anda memasang ‘recent post’ dan ‘random post’ pada sidebar/footer, maka jumlah link per menu navigasi tersebut maksimal 10 buah saja. Jika Anda tambahkan dengan menu random post lagi, mungkin jumlah link per menu dikurangi saja. Misalnya menjadi masing-masing berisi 5 link.
Jika masih ingin mengisi setiap menu dengan link lebih dari 10, sebaiknya gunakan efek scrolling untuk lebih menghemat area. Contohnya bisa dilihat pada menu blogroll blog ini.
- Masalah fitur. Kuncinya, hanya memasang fitur-fitur yang sekiranya penting bagi pengunjung, terutama untuk mempermudah serta mempercepat mereka dalam menelusuri konten blog Anda. ‘Related post’ di setiap akhir tulisan/posting mungkin akan sangat berguna. ‘Recent post’ pun mungkin akan sangat sering digunakan jika pengunjung berada pada halaman posting.
Bagaimana dengan ‘popular post’ atau ‘random post’? Tetap akan sangat berguna menurut saya (sebagai referensi alternatif) untuk memudahkan pencarian/penelusuran konten. Mungkin termasuk pula kotak pencarian, menu kategori/tags, dan yang terpenting yaitu menu arsip (daftar isi).
Catatan :
Tidak perlu memasang semua fitur tersebut sekaligus. Cukup pilih maksimal 3 saja di antaranya (tidak termasuk daftar isi). Jika sudah ada random post, masih perlukah memasang popular post? Jika sudah ada kategori, masih perlukah memasang tags menu? Pun jika sudah ada related post, masih perlukah memang fitur kategori?Kebanyakan fitur/menu malah akan membuat pusing pengunjung
Jadi, pertimbangkan baik-baik pilihan fitur/menu yang akan dipasang.
Kesimpulannya, penyederhanaan tampilan blog ialah untuk mendukung kemudahan akses dan kebergunaan blog. Silakan koreksi jika ada pendapat saya yang dinilai kurang tepat.
Tautan Cepat »» Beri Komentar | Baca Ulang Posting
Baca Komentar | Daftar Posting Terbaru
Tambah KafeGue di Facebook
Ikuti KafeGue di Twitter
Menu Lainnya »» Atas » Beranda » Arsip » Profil » Kontak » Bawah
Langganan KafeGue.com melalui Email
Langganan melalui Pembaca RSS



WordPress 3.2.1
[...] dan tujuan di balik perubahan di atas yaitu penyederhanaan tampilan. Terlalu banyak detail berpotensi membuat pusing. Inilah alasan utama saya menghilangkan beberapa [...]
WordPress 3.0.4
[...] Penyederhanaan Tampilan Blog, Apa dan Bagaimana? [...]
WordPress 3.0.1
[...] dari penyederhanaan tampilan halaman depan tersebut berimbas pada ukuran berkasnya yang cuma 5 Kb ketika saya akses dari ponsel [...]
Firefox 3.6.8 | Windows XP
Wah mantap mas, blog saya memang berat banget loadingnya dan perlu dirampingkan terutama widget yang tidak perlu, mkasih pencerahannya mas :)
Google Chrome 6.0.408.1 | Windows XP
@Tembang Lawas, sama-sama mas. Widget yang tidak perlu itu berarti yang kurang dibutuhkan oleh pengunjung blog kita.
WordPress 3.0.1
[...] begitu, masihkah berguna upaya-upaya optimasi kecepatan loading blog? Masihkah bermanfaat mendesain tampilan blog seramah dan sebaik mungkin? Masihkah bernilai desain unik yang ingin ditonjolkan? Apakah tidak [...]
WordPress 3.0.1
[...] lain yaitu untuk penyederhanaan tampilan dan meringankan loading blog ini. Juga untuk mengurangi ukuran berkas halaman ketika akan dimuat. [...]
Firefox 3.6.8 | Windows XP
Sepertinya sekarang lagi musim meminimalisir tampilan nih, berarti kalo satrya buat template lagi yg 2 kolom gak bakalan laku nih :D
Pasti setiap pribadi akan mempunyai selera berbeda, satrya tetap setia dengan 2 kolom yang lebih mirip situs berita, sana sini banyak link ke postingan mas Is :D
Sedikit masukan mas Is, widget blogrollnya mungkin lebih baik di jadikan 2 kolom agar lebih rapi keliatannya :)
Google Chrome 5.0.375.99 | GNU/Linux
@satrya, 2 kolom untuk blogroll? Bisa sih. Tinggal ubah lebarnya jadi lebih besar ☺ Makasih masukannya Sat.
Firefox 3.5.3 | Windows XP
@iskandaria, tapi mas is bukannya lebih rapi dengan membuat tabview seperti tutornya dari indam ni urlnya http://www.indaam.com/widget-pertama-tab-view-4-tombol-serta-proses-instalasi/
maaf kalau nyepam
Google Chrome 6.0.408.1 | Windows XP
@Gus Ikhwan, makasih atas referensinya Gus. Tabview dulu pernah saya gunakan sih. Tapi berhubung menggunakan jQuery, jadi agak memberatkan loading. Sedangkan saat ini saya berusaha meringankan loading blog ini.
Google Chrome 5.0.375.125 | Windows 7
saya malah nyaris seratus persen mengambil tampilan portal dengan segala aneka warnanya. Tapi justru sepertinya pengunjung malah lebih banyak membaca dan stay dengan tampilan yang sekarang. Tapi memang saya sangat memperhatikan kecepatan loadingnya… :)
Google Chrome 5.0.375.99 | GNU/Linux
@bukan detikcom, yang penting pengunjung merasa mudah mengakses dan menelusuri konten saya sih. Sekilas, blog Anda mirip detik yach ☺
Firefox 3.6.8 | Arch Linux
Hihihi masih bahas ini juga ya… :D
Dalam bahasa singkat saya, penyederhanaan blog itu bisa berarti revisi bunuh diri atau hidup kembali.
Safari 5.0 | Windows XP
@dani, saya juga merasa de-javu. :D
Google Chrome 5.0.375.99 | GNU/Linux
@dani dan ganda, walau de-javu, saya membahas dari sisi yang agak berbeda (nyombong dikit) ☺
Safari 5.0 | Windows XP
@iskandaria, Hahaha… Kayaknya komentar begini juga de-javu ya? Hihihihi… Kabur sebelum ditimpuk XHTML tag oleh Bro Iskandar.
@Ardianzzz, :D Ada juga web flash yang minimalis :p
Firefox 3.6.8 | Arch Linux
@ganda,
Flash diributin. Sana coba RaphaelJs+SVG (animasi) saja!
Safari 5.0 | Windows XP
@dani, Masih enakan pakai Flash. :razz:
Firefox 3.5.11 | Windows XP
Terima kasih sekali tips nya, and salam kenal
Opera 10.60 | Windows XP
Hehehe.. kalo target buat pengunjung memang wajah blog lebih baik seperti yang Mas Is paparkan. Namun, kalo saya sendiri kadang “egois” Mas, mau gimana pun yang penting asyik sendiri melihat tampilan blog sendiri. Orang lain mau lihat monggo, nggak juga ya silahkan hahaha…. Gimana Mas Is? Saya egois buanget kan? :D
Google Chrome 5.0.375.99 | GNU/Linux
@Erdien, gak juga kok Pak. Kalo emang egois, Pak Erdien gak akan masang beberapa menu navigasi untuk mempermudah pengunjung dalam menelusuri konten blog Sundagasik :lol:
Firefox 3.6.8 | Windows XP
Saya ini relatif ya, karena tipe pengunjung juga berbeda-beda. Tapi saya setuju dominan pengunjung lebih suka tampilan blog yang terkesan sederhana, karena yang terpenting adalah konten.
Opera 10.60 | GNU/Linux
Sederhana tampilan atau sederhana fitur?
Sederhana tampilan tetapi kaya fitur, menurut saya baik. Lebih baik lagi kaya tampilan kaya fitur, loading cepat.
Jangan sederhana tampilan trus sederhana fitur, bisa sesat Mas :(
Google Chrome 5.0.375.99 | GNU/Linux
@aldy,
Menurut saya, sederhana tampilan juga mencakup sederhana fitur. Sebab keberadaan fitur juga menjadi bagian dari tampilan sebuah blog/situs. Contoh saja, keberadaan widget-widget atau menu navigasi pada header/sidebar/footer kan juga turut mempengaruhi kesan tampilan? Tampilan (visual) sebuah blog bukan semata persoalan desain theme, tapi juga mencakup isinya (widget, menu navigasi, link-link, dsb).
Firefox 3.6.6 | Windows 7
@iskandaria, ada perbedaan pandangan disini. IMO,
tampilan yang sederhana tidak dengan sendirinya minim fitur, fitur bisa saja tidak kasat mata. Sudut pandang saya, yang dimaksud dengan fitur bukan hanya semacam widget yang kelihatan saja. Blog ini tampilan sederhana, tapi miskin fitur? saya kira tidak seperti itu. Saya bisa meluncur dari atas langsung ke kontent, komentar juga merupakan fitur.
Mungkin didalamnya ada fasilitas, auto pingback, comment auto responder, notifikasi via email, spam blok dan lain-lain. CMIIW.
Google Chrome 5.0.375.99 | GNU/Linux
@aldy,
Makasih atas koreksi dan tambahannya Pak. Kalau yang dimaksudkan dengan fitur yang tak kasat mata seperti itu, saya rasa juga tak kalah penting dengan yang kelihatan. Cuma mungkin tetap ada skala prioritas saat akan memilih yang mana yang akan dipasang.
Opera 10.60 | Windows Vista
@aldy,
Apakah fitur blog begitu penting?
Firefox 3.6.6 | Windows 7
@Cahya, kalau tidak penting tentu tidak perlu dicantumkan :D, penting atau tidak admin blog yang memutuskan, atau jika dianggap perlu kompromi dengan user (make money blog). Beda dengan blog yang unimportant, hanya sebuah catatan atau acak kadut seperti personfield, adminnya bisa bebas karena tidak memiliki target user ;)
Opera 10.60 | Windows Vista
@aldy,
Ha ha, jadi pingin masang adsense untuk dijadikan fitur blog :D.
Google Chrome 5.0.375.125 | Windows XP
@Cahya, Hahaha… btw adsesn tampilannya jelek banget :) Pengennya sih buy sell ads. :P
Mengenai sederhana fitur, apa jadinya website tanpa javascript? seperti sayur tanpa garam. :P
Opera 10.60 | Windows Vista
@ArdianZzZ,
Apaan tuh buy sell ads, jual beli iklan ya? Sayuran tanpa garam ada penggemarnya lho Mas Ardianzzz :D.
Google Chrome 5.0.375.125 | Windows XP
@ArdianZzZ, ada kok. Website dengan full-flash. Malah garamnya jauh lebih banyak dari Javascript. :razz:
Google Chrome 5.0.375.125 | Windows XP
@ganda, Wkakaka… masih menganggap flash adalah website?
Safari 5.0 | Windows XP
@ardianzzz, mengapa tidak?
dari Wikipedia
Saya rasa flash tidak melanggar apapun dari situ? Nah, masih menggangap flash tidak bisa dibuat web? :p
Masih banyak yang dilakukan flash, belum bisa dilakukan html5. :p Jadi, sory-sory aja. *halah*
Safari 5.0 | Windows XP
@ardianzzz, Lagipula, kenapa harus membatasi diri? :p
WordPress 3.0.1
[...] Kuotasi diatas saya ambil dari blog Kafegue.com yang membahas tentang Penyederhanaan Tampilan Blog, Apa & Bagaimana. [...]
Internet Explorer 8.0 | Windows XP
tampilan sederhana kadang membosankan juga Mas, tidak semua narablog menyukai tampilan seperti itu.
konsep sederhana tidak harus mengurangi fitur juga kan?
penggunaan warna juga saya masih ada masalah pada blog saya, karena masih banyak warna yang terkesan tabrakan dengan konsep secara keseluruhan.
Google Chrome 5.0.375.99 | GNU/Linux
@Rudy Azhar,
KOnsep sederhana intinya mengurangi/memangkas fitur yang dirasa kurang begitu penting. Jadi, ada skala prioritas dalam memutuskan mana menu/fitur yang wajib dipasang, mana yang bisa dikesampingkan dulu, serta mana yang benar-benar kurang penting bagi pengunjung. Itu saja sih simpelnya.
Firefox 3.6.8 | Windows XP
betul, mas! blogku dulu tll lelet akibat kebanyakkan widget krn mw tampil keren. skrg blog ku tampilannya sederhana & loading time-nya wuzz .. wuzz! thanks ya wat pencerahannya ..
Firefox 3.6.8 | Windows 7
Blog yang kaya fitur sebenarnya sangat usabel menurut saya. Adanya navigasi kategori, tag, posting terakhir, popular post, related post, daftar isi, sangat membantu pengunjung untuk menjelajahi isi blog. Masalahnya adalah letak dan ruang yang digunakan. Bila terlalu berhimpitan, maka keterbacaannya kurang.
Google Chrome 5.0.375.99 | GNU/Linux
@rismaka,
Nah, berhimpitan itu bisa disebabkan karena masalah tipografi juga menurut saya. Bisa berupa terlalu rapatnya jarak antar list link, tidak menggunakan
list-style-type, atau kombinasi warna link dan warna latar yang kurang serasi (sehingga kurang bisa terbaca dengan baik). Saya pernah menulis tips meningkatkan keterbacaan daftar link pada sidebar dalam tulisan membuat tampilan sidebar lebih rapi.Firefox 3.5.11 | Windows XP
@rismaka, setuju om!!
Opera 10.60 | Windows XP
Ada juga blog yang mengaku portal. :D
Firefox 3.6.8 | Windows 7
@ganda,
Ada juga portal yang mengaku blog. :D
Google Chrome 5.0.375.99 | GNU/Linux
@rismaka,
Walah, kok mau ya ngaku gitu. Kan bisa menurunkan derajat situsnya. Portal kan umumnya lebih bergengsi ketimbang blog. Definisi portal menurut saya yaitu situs yang konten utamanya berupa news/berita atau dibuat untuk kepentingan organisasi (bukan milik pribadi seperti halnya blog).
Opera 10.60 | Windows XP
@rismaka, kalau blog mengaku portal itu namanya apa ya? sombong kah? atau tidak tahu batasan-batasan portal?
Definisi dari webopedia
Kira-kira, portal seperti apa yang mengaku sebagai blog? Hanya karena tampilan? Bukan karena layanan?
Google Chrome 5.0.375.125 | Windows XP
@ganda, SmashinMagazine sekarang menjadi portal… Kita tahu sebelumnya SM adalah blog. Mesinnya saja WordPress. :D
Yeh, sebuah blog yang memiliki konten yang sangat kaya/banyak dapat dirombak menjadi portal hanya dalam beberapa jam saja… :D
Safari 5.0 | Windows XP
@ardianzzz, masalahnya bukan mesinnya. tapi layanan yang diberikan oleh web tersebut?
Nah, sekarang saya tanya? Katakan blog saya kontennya ribuan. Apa hanya merombak tampilannya bisa dikatakan portal? Tidak?!! Banyak elemen2 pendukung lainnya, seperti komunitas, jenis berita yang diberikan, layanan, forum dsb. Baru bisa dikatakan portal. Klo kontennya pun jarang update, portal yang gigit jari tuh. :D
Google Chrome 5.0.375.99 | GNU/Linux
@ganda,
Setuju. Portal lebih kepada jenis konten dan layanannya. Plus kepemilikan. Simpelnya, blog itu sejatinya cuma milik seseorang (pribadi) dan dikelola secara individual saja. Sedangkan portal itu milik sebuah organisasi atau sekelompok orang. Oya, contoh blog yang bermetamorfosis menjadi portal yaitu gugling dot com :)
Firefox 3.6.7 | Windows Vista
Simple is power. Konsep simplicity web termasuk yang terdepan dipakai di online. Salam ACTION!
Firefox 3.6.8 | Windows XP
Mas saya mau tanya cara membuat daftar isi / TOC seperti di blog ini. yang disini aksesnya cepat sekali tapi saya memasang daftar isi buatan mas abufarhan terkesan lambat, mungkin bisa share mas cara membuat daftar isi atau TOC di postingan supaya lebih cepat di aksesnya. trimakasih.
Google Chrome 5.0.375.99 | GNU/Linux
@cHugy gOgOg,
Saya menggunakan plugin archive mas. Tidak cocok untuk blogspot kayaknya (hanya untuk wordpress). Jadi mohon maaf nih, saya tidak bisa bantu ya mas.
Google Chrome 5.0.375.125 | Windows XP
@cHugy gOgOg, Bisa, Mas. Coba lihat tutorialnya di Blog Kang Rohman (kolom-tutorial[dot]blogspot[dot]com) dengan judul “Buat Daftar Isi Blog”. Cuma, jika ingin meletakkan menunya di navigasi (header) perlu sedikit improvisasi, namun tidak terlalu susah jika mau. Saya pernah menerapkannya sewaktu masih di blogspot…
Google Chrome 5.0.375.99 | GNU/Linux
@Khery Sudeska, makasih ya sudah memberi solusi. Mohon maaf sekalian nih, soalnya saya sampai sekarang belum ngasih penilaian untuk blog mas Sudes. Tapi kalau saya lihat sih, tidak ada masalah dari sisi tampilan maupun menu yang ada.
Google Chrome 5.0.375.125 | Windows XP
@iskandaria,
Ok, Mas Is. No problem! Kita lakukan saja nantinya sambil berjalan… :)
Firefox 3.6.8 | Windows XP
Betul sekali mas membuat tampilan lebih simple memang sangat berguna untuk akses blog supaya lebih cepat…!!!
Kalau saya memasang navigasi di bawah header karena saya memasang setiap label pada posting hanya satu label, jadi kalu tidak memasang navigasi kayanya label yang dimaksud tidak akan terlihat…!!!
Trimakasih sudah sharing tipsnya…Blognya keren saya suka simple dan cepat dalam aksesnya…
Salam blogger.
Google Chrome 5.0.375.125 | Windows XP
Setuju. Blog itu fungsi utamanya adalah untuk meningkatkan image kita di hadapan konsumen dan calon konsumen. Sebaiknya di blog jangan terlalu banyak jualan. Kalau mau jualan, mending bikin website lain.
Firefox 3.5.11 | Windows XP
@Wibowo Tunardy,
lha apa bedanya kalo bikin website lain orientasinya “untuk meningkatkan image kita di hadapan konsumen dan calon konsumen” ????
Google Chrome 5.0.375.125 | Windows XP
Jadi lebih simple nih. I like it…! Jadi lebih fokus ke content.
Firefox 3.5.3 | Windows XP
@Agus Siswoyo, mas is saya izin save dulu ya artikel ini karena saya sudah resmi tutup Blog dan saya sudah update conten kalau saya akan tutup blog
tapi saya suka dengan desain yang sekarang karena simple dan tidak membingungkan visitors untuk front page jadi ingat blognya bli dani
Google Chrome 6.0.408.1 | Windows XP
@Gus Ikhwan, silakan saja Gus. Saya memang terinspirasi dengan tampilan halaman depan blog bli Dani. Tapi coding yang saya gunakan beda sih.
Firefox 3.6.8 | Windows 7
Setuju mas. Saya masih dalam tahap berbenah. Baik dari segi load dan kemudahan pengunjung dalam mencari informasi di blog saya.
Firefox 3.0.15 | Windows XP
@Dunia Komputer, ya saya setuju, blog adalah juga bisa dikatakan dapat menjadilkan upaya branding kita dan sebagai media penyumbang berita, kita tengok saja dan googling dengan berbagai keyword, tentunya blog masih sebagai engine-nya dalam penyebaran media informasi