Events

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.

Artikel ini ditulis oleh Langit Amaravati :
Blog : https://www.langitamaravati.com/
Instagram : https://www.instagram.com/langitamaravati/

23 thoughts on “Prinsip-Prinsip Desain Blog”

  1. Wah banyak ilmu baru nih dari artikel ini. Untung segera meluncur ke sini abis nonton live IGnya Uchan.

    Saya pengen belajar ngebenerin blog yang berantakan strukturnya nih. Selama ini suka asal nulis aja. Blog kok ya malah kaya keranjang sampah yang berantakan.

    Mau banget dong ikutan kelas blogger Hangout bersama blogger favoritku ini. Ilmunya jaminan mutu banget. Mungkin karena pengalaman praktis selama bertahun-tahun ya. Sekalian melepas kangen kita.

    Reply
    • MasyaAllah, pencerahan banget sharing ilmunya ini buatku. Blog saya stuktur dan penataannya berantakan banget. Kesannya seperti rumah indah tapi kurang terawat. Pengen banget ikutan di blogger hangoutnya biar dapet ilmu dan tahu bagaimana mendesign blog lebih ciamik dan eye catching. Akan langsung saya terapkan. Biar berkah bagi pemateri dan fasilitator, serta saya juga. Aamiin

      Reply
    • Optimasi SEO, sumpah…klo udah nyerempet kata SEO makin galau.. “Apa udah pas nih blog aye?” Kadang suka tergoda liat template ciamik, tp mau ngerubah takut makin banyak yg salah…buahaha…. *Ketwa miris :p

      Belm lagi urusan html 🙁 berasa rieweh lihat (davincicod) —*fiuhh…

      Tambahan kebanyakan temen pake platform WP. Aku yg pake blogger jd berasa makin galau mau curcol kemana…hwhwhw…

      Aku harus belajar lgi sepertinya :(( semoga semakin tercerahkan nantinya sama mbk langit :))

      Reply
  2. Ini kali pertama ikutan ig tv materi tentang blogger, saya adalah orang tidak sengaja dan memberanikan nyemplung di blog, nggak ada yang mentorin.

    Semua saya pelajari dari google dari mulai, tempale, Google console, adsense, dan sekarang yang belum saya biasa adalah goole analytyc, masih nyoba belum ketemu juga solusinya gagal terus hehe.

    Pengen deh ikutan webinar bareng teh langit, apalagi terinspirasi bisa blogging karena bantuan goole juga

    Semoga saya bisa terpilih, bisa belajar bareng teh langit, pengen deh bisa menang kalau ikutan kompetisi blog. Pengen tahu tips trik supaya menang lomba

    Reply
  3. Membaca prinsip desain ini ibarat diajarkan cara mendesain rumah sendiri. Terima kasih atas tulisannya yang sangat mencerahkan ini. Otak langsung diajak begerilya ke kode-kode blog . Seakan diajak berpetualang. Jadi makin penasaran rasanya di mentoring untuk lay out blog karena selama ini hanya asal aja mendesain lay out. Padahal ada estetikanya.

    Reply
    • Hai mbak, terima kasih sudah berbagi ilmu mengenai desain blog.
      Saya jadi benar-benar belajar dan sekaligus membandingkan layout blog saya sekarang. Ada beberapa yang perlu diperbaiki nih… tapi sebagai blogger yang awam, saya kadang rada takut buat otak-atik layout karena khawatir ngaruh ke performance blog.

      Semoga bisa ikutan BloggerHangout agar bisa tau guideline dan diajarin sama ahlinya. Aamiin.

      Reply
    • Masih punya kendala nih di pagespeed, karena ukuran gambar, disarankan JPEG 2000, apa ada plugin ya untuk mengatasinya, masih belum paham secara dalam tentang pagespeed

      Reply
  4. Bergelut di dunia blogging selama 10 tahun ternyata kemampuan utak-atik script template baru mengusikku awal 2020 ini

    Hal ini dikarenakan diskusi sama suami. Ya, selama ini urusan template kuserahkan pada beliau.

    Namun, pas diskusi entah kenapa suami bilang gini: “Kalau Ayah ga ada, Bunda gimana jadinya blogmu? Konten sih Ayah udah ga meragukan Bunda, tetapi kalau urusan utak-atik script harus Bunda kuasai juga.”

    Makdeg! Kalimatnya benar tetapi juga bikin aku sedih. Namun akhirnya saya bilang: “Iya, nanti Bunda belajar.”

    Eh dapat informasi ini jadi rasanya gayung bersambut. Semoga jodoh ikutan belajar. Karena hidup memang seharusnya tak berhenti

    Reply
  5. Pengen banget belajar langsung dengan Mbk Langit. Nama beliau sudah terkenal sejak dulu pintar bikin template. Jujur aku maju mundur buat ganti template blogku. Takut ini dan itu, bahkan pernah edit html eh header jadi gak bisa melebar lagi. Oow, rasanya sedih banget. Nah, jadi aku tuh pengen ikut webinar ini karena pengen tahu lebih banyak design rumah sendiri eh design blog. Biar makin dicintai pembaca dan Google. Rasanya pengen otak-atik tapi gak ada mentornya. Aku harap Mbk Langit bisa membantuku dan menjawab rasa penasaranku dalam design design blog. Terima kasih.

    Reply
  6. Suka liat blog mbak Langit selalu keren. Saya blognya masih berantakan. Kepingin banget punya blog cakep yang nyaman dibaca dan informatif.
    Tapi saya gaptek jadi banyakkan puyengnya kalau mau utak-atik blog. Pun takut makin kacau..hehehe..

    Reply
    • Wah, aku baru tau semua 6 tips di atas. Karena selama ini aku hanya pakai desain dari provider nya langsung (wordpress), yang free pulak hehee. Nggak diutak-atik lagi.

      Makanya pengen banget ikut kelas bareng Kak Langit nanti. Pengen naik level dikit, supaya lebih banyak pembaca yang berkunjung ke blog ku. Semoga aku bisa terpilih ya aamiinn..

      Reply
    • Yang belum saya utak atik selama ini masalah font.

      Font yang saya pakai masih bawaan dari template. Pernah coba Plug in Da Font tapi ngga berhasil nerapinnya ke blog.

      Sebaiknya pakai Plug In Font apa ya teh yang mudah diterapin?

      Moga rezeki bisa ikutan Blogger Hang Out Layout bareng Teh Langit supaya bisa mempercantik isi Blog supaya pembaca betah lama-lama disana. Hihi

      Reply
  7. Ilmunya bermanfaat sekali kakak. Selama ini, saya menulis di blog ya sekedar menulis. Tidak memperhatikan desain dan layout. semoga dengan ikut mendengar dan belajar lebih dalam bisa memperbaiki dan mengembangkan diri.

    Reply
  8. Dulu aku kalau buat kategori banyak banget, tapi dari tahun kemarin mulai bersih-bersih. Memfokuskan tulisan ke kategori tertentu saja. Tapi, baru tahu juga kategori sebaiknya lebih dari 10. Siap, perbaiki lagi dan memang betul Teh Langit tulisan ini bukan untuk di hafal tapi ini menjadi panduan saat memperbaiki layout blog. Seru deh, kalau bisa belajar langsung sama Teh Langit.

    Reply
  9. Selama ini aku gak begitu paham layout karena biasanya pake jasa template tapi kalau di cocokan sama yang dijabarin di atas beberapa hal masih gak cocok. Aku jadi tertantang untuk bisa ngutik-ngutik layout blog ku sendiri. Supaya hasilnya gak cuma bagus buatku tapi nyaman buat yang nongkrong. Semoga bisa ikutan kelas bcc bareng mbak langit

    Reply
  10. Artikel yang sangat bermanfaat. Kebetulan banget aku lagi cari-cari tips gimana caranya bikin website agar terlihar menarik dan friendly. Sudah cari-cari tips, tapi tips dari Kak Langit yang paling “ngena”. Bahasanya mudah dipahami dan penjelasannya lengkap serta jelas. Makasih banyak Kak Langit untuk tipsnya. Bakal lebih joss lagi nih kalau bisa dimentoring sama Kak Langit. Semoga aku yang terpilih untuk mengikuti pelatihan besok Jum’at.

    Reply
  11. Teh Langit, baru kali ini saya mengetahui pentingnya design blog. Tapi karena saya belum bisa mengimplementasikan sendiri, terutama struktur silo, konten, fungsi & navigasi, saya sangat pengin sekali belajar punya blog yang bukan hanya perhatikan konten tapi juga benar-benar memperhatikan design yang tersturuktur.

    Mudah-mudahan keinginan ini dapat terkabul. Terima kasih sebelumnya Teh Langit dan BCC atas kesediaan berbagi ilmunya.

    Reply

Leave a Comment