Prinsip-Prinsip Desain Blog

Hal utama dalam blog memang tulisan atau konten. Namun, tidak dapat dipungkiri bahwa manusia adalah makhluk visual sehingga desain blog juga penting.

Ngobrol-ngobrol soal desain blog, ini bukan tentang tampilan yang canggih dengan berbagai animasi atau efek. Bukan pula tentang platform. Apa pun platform yang kita gunakan, pada prinsipnya, desain blog yang baik mengacu pada tiga hal:

1. Memiliki struktur yang baik.
2. Fungsional dan mudah digunakan (usabaility).
3. Kelengkapan elemen.

Untuk lebih detailnya, mari kita bahas prinsip-prinsip dasar dalam desain blog.

1. Struktur Silo

Struktur mengacu pada kerangka sebuah blog, yaitu bagaimana satu laman ditautkan ke laman lainnya sehingga baik manusia maupun crawler mudah menemukan laman yang dicari.

Struktur konten dan web secara keseluruhan akan berpengaruh terhadap performa, berfungsi untuk:

• Memudahkan pengindeksan oleh mesin pencari.
• Optimasi SEO.
• Memudahkan pengguna ketika berselancar di blog Anda.
• Pengorganisasian data.

Ada beberapa jenis struktur web, tergantung dari seberapa besar dan sekompleks apa datanya. Struktur web yang paling familiar, ramah SEO, dan paling cocok untuk blog adalah struktur Silo atau Silo architecture.

Silo struktur adalah sistem pengorganisasian konten web, dikelompokkan berdasarkan informasi yang paling umum sampai ke yang paling spesifik.

Selain dari faktor SEO, mengenali dan memahami struktur blog kita dengan baik bermanfaat agar kita tahu fungsi setiap elemen yang kita gunakan. Juga akan tahu konten mana disimpan di mana. Misalnya, Anda jadi tahu kenapa biografi atau about me disimpan di page, bukan di post. Atau Anda jadi tahu kenapa mengelompokkan blog post berdasarkan kategori/label yang relevan itu penting.

Jika divisualisasikan, bentuknya mirip dengan struktur organisasi seperti pada gambar:

2. Struktur Konten

Web atau blog tidak hanya dikunjungi dan dibaca oleh manusia, 65%-nya adalah bot atau crawler mesin pencari, ada juga bot-nya para spammer dan cracker.  Selain itu, ada juga manusia yang membaca blog kita melalui mesin, contohnya orang dengan disabilitas yang membaca web dibantu screen reader.

Pengunjung manusia dan mesin menggunakan bahasa yang berbeda. Manusia membaca huruf, kata per kata (visual), sedangkan mesin membaca melalui elemen tag. Misalnya:

Judul

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Anda tentu tahu bahwa huruf yang besar dan tebal adalah judul, sedangkan kalimat-kalimat di bawahnya adalah paragraf. Nah, crawler dan screen reader tidak begitu. Mesin tidak bisa “membaca” elemen konten hanya dari besar kecil huruf atau dari warna. Mesin hanya tahu itu judul kalau kata judul diberi elemen tag <h1>Judul</h1>. Mesin akan tahu bahwa itu paragraf (bukan subjudul atau nomor) karena diberi elemen tag <p>Lorem ipsum dst.</p>.

Dengan memberi elemen tag yang tepat, mesin dapat membaca informasi di artikel kita dengan benar. Barangkali terlihat sepele, tapi justru struktur konten inilah yang sedikit banyak berpengaruh terhadap optimasi SEO blog kita. Optimasi blog yang baik artinya pengunjung yang lebih banyak, dan pengunjung yang lebih banyak artinya blog kita semakin berkembang.

Jangan khawatir, elemen-elemen tag itu biasanya otomatis, kok. Kita hanya perlu memastikan beberapa hal:

• Hanya ada satu <h1></h1> di dalam satu artikel.
• Ketika menambahkan subjudul, jangan mengeditnya secara visual seperti memperbesar ukuran huruf, mempertebal, atau memberi warna. Gunakan fasilitas yang ada di text editor blog. H2 untuk subjudul, h3 untuk subsubjudul, dst. Kalau di Blogspot heading, subheading, dst.
• Jika membuat list atau numbering, gunakan tag elemen yang benar.
• Membuat judul atau subjudul memakai gambar tidak disarankan karena tidak bagus juga untuk SEO dan readability.

3. Fungsi dan Navigasi

Tampilan blog yang sederhana tapi mudah digunakan oleh pembaca masih lebih baik daripada blog yang bermewah-mewah tapi tidak user friendly.

Agar blog kita berfungsi dengan baik, berikut beberapa hal yang perlu ada di blog kita:

a. Header

Header berfungsi sebagai identitas blog. Ini hal pertama yang akan dilihat oleh pembaca ketika sampai di blog kita.

• Gunakan nama asli atau nama pena. Untuk personal branding, hindari menggunakan jargon atau kata-kata mutiara sebagai header.
• Kita juga bisa menambahkan tagline (di bawah header) yang singkat, padat, jelas, dan menggambarkan siapa diri kita. Maksimal 7 kata.
  • Yes: Travel Blogger | Akuntan | Ibu dari 2 Anak
  • No: Hallo, nama saya Anu bin Anu. Saya seorang blogger sekaligus bla bla bla. Selain senang menulis, saya juga senang menjahit dan membuat apalah bla bla bla.

Contoh kedua disebut bio atau deskripsi. Bisa dipasang jika template blog Anda memungkinkan, jika tidak, simpan di bio.

• Logo? Ya, boleh kalau ada.

b. Navigasi/Menu

Navigasi merupakan salah satu elemen yang akan membuat blog kita lebih user friendly.

• Letakkan navigasi di bagian atas halaman, sebelum atau sesudah header.
• Anda juga bisa menambahkan navigasi di footer.
• Jika menggunakan dropdown menu, usahakan level child menu-nya jangan terlalu banyak.
• Navigasi hanya SATU BARIS.
• Apa saja yang perlu dipasang di navigasi? Yang utama: home, about me, kategori blog.

c. Kategori/Label

Kategori (WordPress) atau label (Blogspot) ibarat folder yang mengklasifikasikan setiap artikel blog ke dalam topik yang lebih spesifik. Sebagaimana folder, kategori/label bertujuan agar artikel blog Anda mudah ditemukan oleh pembaca.

Ada beberapa tip mengenai kategori di dalam blog:

• Usahakan kategori di dalam blog tidak lebih dari 10.
• Namai kategori/label sesuai niche blog Anda atau setidaknya relevan.
• Hindari melabeli artikel dengan label yang sangat spesifik. Misal: nama brand.
• Pasang kategori-kategori “unggulan” di menu navigasi, yang lebih lengkap bisa dipasang di widget sidebar atau footer.
• Kategori di WordPress tidak sama dengan tag.
• Di Blogspot, tidak ada fungsi tag, hanya ada label.

d. Arsip

Widget arsip berguna agar pembaca bisa menemukan konten-konten Anda sebelumnya.

• Letakkan di sidebar dan atau di footer.
• Gunakan arsip yang dropdown supaya tidak terlalu panjang membentang.

e. Search Button

Letakkan search button di tempat yang mudah ditemukan. Bisa di menu navigasi, di atasnya, di sidebar paling atas, atau di footer.

4. Layout

Layout atau tata letak blog berhubungan dengan hierarki visual dan struktur blog secara keseluruhan. Secara umum, manusia melihat sesuatu dari atas ke bawah, dari kiri ke kanan. Selain itu, mata kita terbiasa mengurutkan informasi berdasarkan ukuran dan warna. Pola ini pulalah yang digunakan desainer untuk menyusun elemen demi elemen desain, termasuk elemen dalam web/blog.

Maka, susun elemen-elemen blog berdasarkan aliran informasi dari yang penting sekali ke yang tidak begitu penting.

Secara sederhana, layout blog tampak seperti ini:

Dalam contoh di atas, bisa Anda lihat bahwa header dan navigasi termasuk bagian penting sehingga diletakkan di paling atas. Konten di bagian kiri sedangkan sidebar ada di kanan karena mata manusia memindai dari kiri ke kanan. Footer, sesuai namanya merupakan bagian yang tidak terlalu penting dibandingkan elemen-elemen lainnya sehingga diletakkan di paling bawah.

5. Warna

Harap diingat bahwa blog dibaca di layar. Daya konsentrasi manusia ketika membaca tulisan dalam layar cenderung rendah jika dibandingkan dengan ketika membaca di buku atau media konvensional lainnya.

Pemilihan warna yang kurang tepat akan membuat mata pembaca lekas lelah. Ini tentu akan memengaruhi durasi pembaca “nongkrong” di blog kita. Lebih jauh lagi, akan berpengaruh terhadap bounch rate.

Ada beberapa tip saat memilih warna untuk blog:

• Gunakan background putih, broken white atau abu-abu muda.
• Jika perlu menggunakan background gelap atau warna lain, hanya gunakan untuk bagian yang tidak terlalu luas. Misal: navigasi atau footer.
• Untuk tulisan, gunakan warna gelap. Tidak harus hitam, Anda bisa menggunakan warna #333 atau #1a1a1a.
• Untuk link dan aksen, Anda bisa memilih warna favorit. Tapi, perhatikan kontras dan keselarasan.

6. Tipografi/Huruf

Memilih jenis huruf untuk blog memang bukan perkara mudah, tapi juga tidak terlalu sulit. Syaratnya hanya satu: mudah dibaca. Agar pilihan jenis huruf kita tidak membuat pengunjung sakit mata, ada beberapa tip:

• Gunakan maksimal 3 jenis huruf, 2 jenis huruf lebih baik. Mengapa? Karena huruf/webfont adalah yang pertama “dipanggil” ketika blog kita loading. Semakin banyak jenis huruf akan membuat blog semakin berat.
• Kombinasikan jenis huruf dengan rumus:
  • Sans Serif (heading) + Serif (konten)
    
  • Serif (heading) + Sans Serif (konten)
    
  • Dekoratif (heading) + Sans Serif (konten)
    
  • Script (heading) + Sans Serif (konten)
    
• Jika Anda terbiasa membuat judul artikel panjang-panjang, hindari menggunakan jenis huruf dekoratif atau script karena kedua jenis huruf ini sulit dibaca untuk tulisan yang terlalu panjang.
• Perhatikan ukuran huruf karena huruf yang terlalu besar dan terlalu kecil sama-sama sulit dibaca. Untuk konten, mulai dari 14-18 pt. Untuk judul, mulai dari 18-30 pt.
• Untuk elemen-elemen yang kecil seperti navigasi atau meta, sebaiknya gunakan huruf Sans Serif.

—

Prinsip-prinsip desain blog di atas tentu bukan untuk dihafal, melainkan bisa dijadikan panduan ketika Anda mendesain atau mengatur tampilan blog. 

Demikian ngobrol-ngobrol kita kali ini, selamat praktik.