Penyederhanaan Tampilan Blog, Apa dan Bagaimana?

webhosting Indonesia

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.

Maaf, karena alasan tertentu, kotak komentar ditutup!

  1. [...] dan tujuan di balik perubahan di atas yaitu penyederhanaan tampilan. Terlalu banyak detail berpotensi membuat pusing. Inilah alasan utama saya menghilangkan beberapa [...]

  2. [...] Penyederhanaan Tampilan Blog, Apa dan Bagaimana? [...]

  3. [...] dari penyederhanaan tampilan halaman depan tersebut berimbas pada ukuran berkasnya yang cuma 5 Kb ketika saya akses dari ponsel [...]

  4. Tembang Lawas
    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 :)

    iskandaria
    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.

  5. [...] 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 [...]

  6. [...] lain yaitu untuk penyederhanaan tampilan dan meringankan loading blog ini. Juga untuk mengurangi ukuran berkas halaman ketika akan dimuat. [...]

  7. satrya
    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 :)

    iskandaria
    Google Chrome 5.0.375.99 | GNU/Linux

    @satrya, 2 kolom untuk blogroll? Bisa sih. Tinggal ubah lebarnya jadi lebih besar ☺ Makasih masukannya Sat.

    Gus Ikhwan
    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

    iskandaria
    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.

  8. bukan detikcom
    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… :)

    iskandaria
    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 ☺

  9. dani
    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.

    ganda
    Safari 5.0 | Windows XP

    @dani, saya juga merasa de-javu. :D

    iskandaria
    Google Chrome 5.0.375.99 | GNU/Linux

    @dani dan ganda, walau de-javu, saya membahas dari sisi yang agak berbeda (nyombong dikit) ☺

    ganda
    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

    dani
    Firefox 3.6.8 | Arch Linux

    @ganda,
    Flash diributin. Sana coba RaphaelJs+SVG (animasi) saja!

    ganda
    Safari 5.0 | Windows XP

    @dani, Masih enakan pakai Flash. :razz:

  10. teguhsasmitosdp1
    Firefox 3.5.11 | Windows XP

    Terima kasih sekali tips nya, and salam kenal

  11. Erdien
    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

    iskandaria
    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:

  12. imadewira
    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.

  13. aldy
    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 :(

    iskandaria
    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).

    aldy
    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.

    iskandaria
    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.

    Cahya
    Opera 10.60 | Windows Vista

    @aldy,

    Apakah fitur blog begitu penting?

    aldy
    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 ;)

    Cahya
    Opera 10.60 | Windows Vista

    @aldy,

    Ha ha, jadi pingin masang adsense untuk dijadikan fitur blog :D.

    ArdianZzZ
    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

    Cahya
    Opera 10.60 | Windows Vista

    @ArdianZzZ,

    Apaan tuh buy sell ads, jual beli iklan ya? Sayuran tanpa garam ada penggemarnya lho Mas Ardianzzz :D.

    ganda
    Google Chrome 5.0.375.125 | Windows XP

    @ArdianZzZ, ada kok. Website dengan full-flash. Malah garamnya jauh lebih banyak dari Javascript. :razz:

    ardianzzz
    Google Chrome 5.0.375.125 | Windows XP

    @ganda, Wkakaka… masih menganggap flash adalah website?

    ganda
    Safari 5.0 | Windows XP

    @ardianzzz, mengapa tidak?
    dari Wikipedia

    A website is a collection of related web pages, images, videos or other digital assets that are addressed relative to a common Uniform Resource Locator (URL), often consisting of only the domain name, or the IP address, and the root path (‘/’) in an Internet Protocol-based network.

    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*

    ganda
    Safari 5.0 | Windows XP

    @ardianzzz, Lagipula, kenapa harus membatasi diri? :p

  14. [...] Kuotasi diatas saya ambil dari blog Kafegue.com yang mem­bahas ten­tang Penyeder­hanaan Tam­pilan Blog, Apa & Bagaimana. [...]

  15. Rudy Azhar
    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.

    iskandaria
    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.

  16. Ridwan
    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 ..

  17. rismaka
    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.

    iskandaria
    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.

    m-iccank
    Firefox 3.5.11 | Windows XP

    @rismaka, setuju om!!

  18. ganda
    Opera 10.60 | Windows XP

    Ada juga blog yang mengaku portal. :D

    rismaka
    Firefox 3.6.8 | Windows 7

    @ganda,
    Ada juga portal yang mengaku blog. :D

    iskandaria
    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).

    ganda
    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

    A Web portal or public portal refers to a Web site or service that offers a broad array of resources and services, such as e-mail, forums, search engines, and online shopping malls. The first Web portals were online services, such as AOL, that provided access to the Web, but by now most of the traditional search engines have transformed themselves into Web portals to attract and keep a larger audience.

    Kira-kira, portal seperti apa yang mengaku sebagai blog? Hanya karena tampilan? Bukan karena layanan?

    ardianzzz
    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

    ganda
    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

    iskandaria
    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 :)

  19. Joko Susilo
    Firefox 3.6.7 | Windows Vista

    Simple is power. Konsep simplicity web termasuk yang terdepan dipakai di online. Salam ACTION!

  20. cHugy gOgOg
    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.

    iskandaria
    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.

    Khery Sudeska
    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…

    iskandaria
    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.

    Khery Sudeska
    Google Chrome 5.0.375.125 | Windows XP

    @iskandaria,
    Ok, Mas Is. No problem! Kita lakukan saja nantinya sambil berjalan… :)

  21. cHugy gOgOg
    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.

  22. Wibowo Tunardy
    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.

    Pradna
    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” ????

  23. Agus Siswoyo
    Google Chrome 5.0.375.125 | Windows XP

    Jadi lebih simple nih. I like it…! Jadi lebih fokus ke content.

    Gus Ikhwan
    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

    iskandaria
    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.

  24. Dunia Komputer
    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.

    AMALIA
    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

Blogroll :