CARA MEMBUAT TAMPILAN BLOG YANG ESTETIS

“Web design is not just about creating pretty layouts. It’s about understanding the marketing challenge behind your business.”
― Mohamed Saad

Si Blogger Pemula

Tiga tahun lalu, ketika “hijrah” dari penulis konvensional (baca: cerpenis koran) ke ranah digital, saya bahkan tidak tahu Klout Score itu apa. Saya tidak tahu bahwa blog bisa dimonetisasi. Tidak tahu ada fasilitas bernama Google Analytics. Saya hanyalah kanvas kosong, blogger pemula yang hanya punya satu senjata untuk survive: haus akan ilmu.

Berkat bimbingan dari para punggawa di komunitas Fun Blogging dan para blogger senior yang tabah membagikan tip dan trik blogging, hari ini saya bisa dengan bangga mengaku sebagai blogger.

Sama seperti blogger lain, saya pun berproses dari yang tadinya cuma keren menjadi keren banget, eh, dari yang tadinya tidak tahu apa-apa menjadi sedikit lebih tahu. Progres yang paling mudah dilihat adalah pemahaman saya tentang estetika atau tampilan blog. Meskipun punya basic skill sebagai desainer grafis, bukan berarti mudah bagi saya untuk bebenah tampilan blog sendiri. Tapi proses yang tidak mudah itu menampakkan hasil yang sepadan. Pembaca mulai berdatangan, sesekali menang lomba, dan beberapa brand mulai menawarkan kerja sama.

Saya lupa sudah berapa puluh kali berganti template blog, metamorfosisnya bisa Anda saksikan melalui gambar di bawah ini. Gambar nomor empat akan membuat Anda tercengang.

2015

Header gelap, background gelap, masonry grid yang image-nya garinjul. Jangankan Anda, saya aja sakit mata melihatnya.

2017

Agak lebih baik, meski memakai nama Pandora Box yang membuat pengunjung bertanya, “Jadi lo siapa sih?”

2018

Tampilan lumayan, a la landing page, dan mengikuti tren custom illustration. Tapi ke bawahnya masih harus dibenahi.

Pilar Utama Blogging

Menurut Internetlivestats.com,  hingga Juni 2018 ada 1.888.198.554 situs web di seluruh dunia dan 1.037.702 blog post ditulis per hari ini (23 Juni 2018). Satu juta blog post per hari, bukan lagi puluhan atau ratusan ribu, dan angka itu terus bertambah SETIAP DETIK.

Dengan jutaan artikel yang ada di dunia per harinya,  bagaimana blog kita bisa stand out in a crowd? Bagaimana blog kita terus bertahan di tengah “amuk badai” perkembangan dunia digital? IMO, kita tidak punya pilihan selain terus berevolusi dan berinovasi. Terus mengembangkan kualitas konten, kualitas blog, dan -tentu saja- kita sendiri sebagai pemiliknya. Itulah yang saya lakukan selama tiga tahun ini. 

Menurut C2live, ada tiga pilar utama yang mesti dipegang teguh oleh para blogger:

  1. Estetika a.k.a tampilan blog.
  2. Fokus editorial (segmentasi pasar atau untuk siapa tulisan dibuat).
  3. Konten berbasis data (topik artikel yang dipilih berdasarkan analisis data dari tools seperti Google Analytics, Google Keyword Planner, Google Trends, dll.).

Saya sangat setuju dengan poin-poin yang disebutkan. Tapi, apa, sih, pentingnya ketiga aspek tersebut? Apa pengaruhnya terhadap pembaca dan performa blog kita secara keseluruhan?

Fokus Editorial
  • Menetapkan segmentasi pembaca artinya “menjual” produk yang tepat kepada pasar yang tepat.
  • Dengan mengetahui target pembaca, kita bisa memilih topik yang paling pas dan gaya bahasa sehingga konten blog kita lebih mudah dicerna.
Konten Berbasis Data
Di poin ini saya akan mengutip apa yang ditulis Yusuf Noer Arifin tentang pentingnya validitas data dalam penulisan blog:

  • Mengubah opini menjadi sesuatu yang sifatnya ilmiah.
  • Menguatkan kebenaran suatu opini.
  • Memberikan informasi yang kredibel, akurat, dan dapat dipertanggungjawabkan.
  • Mendukung kampanye anti informasi HOAX.
  • Menarik perhatian pembaca.
  • Membangun citra dan kepercayaan di mata pembaca.

Estetika

  • Sama seperti ketika kita bertemu seseorang untuk kali pertama, tampilan blog adalah hal pertama yang akan dinilai oleh pembaca. Baik kesan yang ditimbulkannya, semakin tinggi pula kans konten Anda dibaca. Sebaliknya, buruk kesan yang ditimbulkan, bukan tidak mungkin blog Anda akan langsung ditinggalkan.
  • Tampilan blog yang lebih baik artinya struktur yang lebih baik. Dan struktur blog yang baik merupakan salah satu ranking factors, berpengaruh terhadap performa blog Anda di mesin pencari.

Daftar Isi

Nah, menyesuaikan dengan prorofesi dan bidang yang saya tekuni, kali ini saya ingin mengajak Anda untuk ngobrol-ngobrol sekaligus berbagi pengalaman tentang satu pilar saja: estetika atau penampilan blog.

5 Prinsip Desain Blog
Elemen Penting Desain
Cara Memilih Template

5 Prinsip desain blog

Blog memang kanvas digital, tapi mengatur tampilan blog bukan hanya tentang menghiasnya dengan jutaan ilustrasi dan animasi yang berlari-lari. Bukan pula tentang platform mana yang lebih Anda sukai.

Apa pun platform yang Anda gunakan, entah itu Blogspot, WordPress, atau web-web seperti Wix, Shopify, dan lain sebagainya, pada prinsipnya desain blog yang baik bermuara kepada 3 hal:

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

Ini pembahasan panjang dan teoritis dan barangkali akan membuat Anda bertanya-tanya, “Saya blogger, bukan desainer. Kenapa saya harus belajar semua hal ini?”

Well, percaya sama saya, tak peduli berapa ratus plugin yang Anda gunakan, tak peduli berapa banyak software desain yang Anda kuasai, tak peduli secanggih apa pun page builder yang Anda pasang di blog, hal-hal elementer dan fundamental inilah yang kelak menentukan akan seperti apa tampilan blog Anda.

Bacaan lanjutan: Kursus Desain Online Gratis

 

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:

  1. Memudahkan pengindeksan oleh mesin pencari.
  2. Optimasi SEO.
  3. Memudahkan pengguna ketika berselancar di blog Anda.
  4. Pengorganisasian data.
Ada beberapa jenis struktur web, tergantung dari seberapa besar dan sekompleks apa datanya. IMHO, 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 (klik untuk memperbesar).

Latihan:
Anggaplah blog Anda ber-niche travelling, tapi Anda juga menulis puisi dan ingin mempublikasikannya di blog. Selain itu, Anda juga perlu laman/page about me, contact, achievement, privacy policy, dan portfolio untuk buku-buku puisi Anda. Bagaimana cara membuat struktur blog yang paling baik?
  1. Kategorikan konten berdasarkan sifatnya
    • Post >> konten dinamis yang diperbaharui secara berkala >> travelling dan puisi.
    • Pege >> konten statis >> about me, contact, achievement, privacy policy.
    • Project >> untuk portfolio buku.
    •  Catatan: Anda yang menggunakan Blogspot bisa memasukkan portfolio ke dalam page.
  2. Buat kategori untuk setiap topik utama blog post.
  3. Satukan dan buat hierarki untuk page-page yang relevan.  Misalnya, untuk about me, bio, achievement.

Struktur blog Anda akan tampak seperti ini:

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. Anda mungkin tidak memerhatikan, tapi kalau Anda pakai plugin Wordfence, coba lihat deh, siapa saja yang “bertamu” ke blog kita.

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 tahu, kan, kalau kata yang paling besar itu judul dan kalimat-kalimat di bawahnya adalah paragraf? Nah, crawler dan screen reader tidak begitu. Mereka 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 dan asa haroream, terutama bagi pengguna page builder seperti saya, 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.

Contoh (klik untuk memperbesar):

3. Fungsi dan Navigasi

Harap diingat bahwa sesuatu yang indah tapi tidak berguna sama dengan kesia-siaan. Begitu juga dengan cinta (eh kok cinta?) maksud saya dengan tampilan blog. Tampilan blog yang sederhana tapi mudah digunakan oleh pembaca masih lebih baik daripada blog yang bermewah-mewah tapi membuat pembacanya tersesat. Jujur, saya pun sedang merapikan blog agar lebih fungsional, kok.

Jadi, selain artikel (nya eunya atuh), apa saja yang wajib ada di blog kita? Berikut daftarnya:

E

Header

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

  • Gunakan nama asli atau nama pena. Untuk personal branding, hindari menggunakan jargon atau kata-kata mutiara atau entah apalah.
    Yes: Anindita Anastasia.
    No: Si Gadis Penjual Bunga
  • Gunakan tagline (di bawah header) yang singkat, padat, jelas, dan menggambarkan siapa diri Anda. 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.
E

Navigasi/Menu

Sebuah blog tanpa navigasi ibarat berlayar di lautan lepas tanpa kompas, I’ll be lost without you.

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

Referensi lanjutan: Cara Membuat Label dan Memasang Navigasi di Blog

E

Search Button

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

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

Kategori

  • Jika Anda punya 500 kategori/label dan tidak semuanya bisa dimuat di navigasi, pastikan Anda memasang widget kategori di sidebar atau footer.
E

Privacy Policy

  • Privacy policy diletakkan di bottom footer.
  • Di navigasi, boleh? Nggg … atas nama hierarki visual dan aliran informasi, di footer aja, deh.
  • Oh, ingatkan saya untuk mengedit footer dan privacy policy.
E

Laman About Me

  • Laman about me berguna agar para pencari bakat brand dan agensi mengetahui siapa Anda sesungguhnya.
  • Kontennya terserah kepada bagaimana Anda merepresentasikan diri Anda sendiri.
E

Kontak

  • Kontak di sini adalah kontak yang tersurat, bukan formulir contact me.
  • Sebutkan alamat email dan nomor telepon yang bisa dihubungi.
  • Letakkan di footer dan sidebar.
E

Media Sosial

  • Link media sosial sebetulnya tergantung dari cara Anda mengoptimasi blog. Bagi sebagian blogger perlu, bagi sebagiannya tidak.
E

Tombol Share

  • Agar konten Anda lebih mudah dibagikan dan mendapat social signal.

4. Hierarki Visual

Hierarki visual berhubungan dengan tata letak dan struktur blog Anda. Susun elemen-elemen berdasarkan aliran informasi dari yang penting banget ke yang penting-penting aja.

Ketika berhadapan dengan layar, mata manusia memindai membentuk pola yang dikenal dengan sebutan “F-Pattern” dan “Z-Pattern”.

Untuk blog yang notabene penuh dengan tulisan, pola paling baik adalah “F-Pattern”. Untuk static page/home/landing page, Anda bisa menggunakan “Z-Pattern” atau kombinasi keduanya.

5. Whitespace

Anda yang mengerti desain pasti tahulah whitespace itu fungsinya apa. Anda yang baru kali ini mendengar istilah whitespace, mari saya ajak kenalan.

Whitespace merupakan ruang kosong di antara kita (Lu serius enggak, sih, nuli tutorial, Chan?). Oke, oke. Whitespace merupakan ruang kosong atau negative space atau jarak antar elemen-elemen di blog kita.

Whitespace berfungsi untuk memberikan jeda visual kepada pembaca agar aliran informasi lebih mudah diterima dan dicerna.

Apakah whitespace adalah jarak yang sengaja dibuat oleh desainer-desainer kesepian? No, kami tidak seiseng itu. Jeda visual digunakan karena mengikuti cara otak manusia mengolah informasi. Mari saya berikan contoh sederhana.

DENGAN WHITESPACE

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Subjudul

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using ‘Content here, content here’, making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for ‘lorem ipsum’ will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).

TANPA WHITESPACE 2

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Subjudul

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using ‘Content here, content here’, making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for ‘lorem ipsum’ will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like). Lorem Ipsum as their default model text, and a search for ‘lorem ipsum’ will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).Lorem Ipsum as their default model text, and a search for ‘lorem ipsum’ will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).Lorem Ipsum as their default model text, and a search for ‘lorem ipsum’ will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident.

Anda bisa membedakan keduanya? Mana yang membuat mata Anda lebih nyaman? Iya, contoh pertama membuat mata pembaca mudah mengolah informasi, membedakan satu paragraf dengan paragaraf lainnya karena jarak antarbaris (line height/leading) dan antarparagraf diberi ruang yang cukup.  Ruang ini disebut juga whitespace.

Pada contoh kedua jarak antabaris sangat rapat, pun mepet dengan tepi layar. Ini akan membuat mata pembaca cepat lelah juga membuat otak manusia lebih sulit mengolah aliran informasi.

Coba perhatikan juga perbedaan text aligment-nya. Contoh pertama menggunakan left align, sedangkan yang kedua menggunakan justified. Justified memang terlihat rapi dan simetris, tapi sangat tergantung kepada jumlah kata dalam satu paragraf. Sebaliknya, jika jumlah katanya tidak pas, maka akan terbentuk ruang-ruang kosong yang membentuk aliran sungai.

Di dunia desain grafis, ruang kosong yang membentuk aliran sungai itu disebut  dengan istilah “river”. Dan “river” adalah “dosa besar” bagi kami para layouter. Justified juga mengurangi readability yang –sekali lagi- mempersulit pengolahan informasi.

Jadi berapa atuh line height yang paling pas? Tergantung berapa besar huruf dan lebar layar. Kalau ukuran huruf 18px, line height yang paling ideal 30-31px (tapi saya lebih suka memakai em).

Gimana kalau diberi jarak antarbaris yang lebih besar, Teh? Kan bagus atuh jadi banyak whitespace-nya. Begini, long distance relationship itu menyakitkan, jadi yang sedang-sedang saja.

Elemen-elemen penting tampilan blog

Gimana, sudah habis berapa gelas kopi? Please, jangan bosan dulu, perjalanan kita masih panjang. 😀

Elemen-elemen desain web sama seperti elemen desain pada umumnya. Tapi Anda tidak harus hafal teori-teori desain, kok. Cukup perhatikan beberapa hal ini ketika memperbaiki tampilan di blog:

1. Image (Foto, Ilustrasi)

Foto dan ilustrasi dalam blog atau konten tidak semata-mata dipasang hanya agar blog kita tampak indah dan menawan atau hanya untuk menunjukkan bahwa kita bisa desain. Keduanya memiliki fungsi:

  • Sebagai pelengkap informasi.
  • Content booster.
  • Thumbnail.
  • Pembatas antarteks.
  • Pagerank.
  • Menyederhanakan ide yang kompleks ke dalam bentuk visual yang lebih mudah dimengerti.

Sebelum memasukkan foto atau ilustrasi, ada beberapa hal yang sebaiknya kita pertimbangkan:

E

Penting atau Tidak?

  • Memborbardir blog atau blog post dengan image yang tidak perlu hanya akan membuat blog kita menjadi sampah visual. Jadi pertimbangkan betul-betul.
  • Terus terang, ini juga PR besar bagi saya.
E

Relevansi

  • Hanya masukkan foto dan ilustrasi yang memang relevan dengan konten. Misalnya: subbab tentang tentang cara menulis judul yang benar, tapi foto yang digunakan sebagai pembatas antarbab adalah foto kereta api. Nanaonan? Ada gitu blogger yang gitu? Ada, banyak.
E

Kualitas Image & Skala

  • Gunakan foto berkualitas baik, setidaknya tidak nge-blur. Cukup masa depan kisah percintaan kita saja yang blur, Mas. Featured image mah jangan.
  • Perhatikan juga skala foto.
E

Watermark

  • Watermark bisa menjadi identitas si empunya foto, identitas blog, tapi juga bisa menghancurkan tampilan foto tersebut.

Do

Don't

2. Warna

Warna berkaitan erat dengan psikologi dan readability (keterbacaan). Ketika memilih warna untuk blog/theme, pilih warna dengan saksama. Atau jika Anda tidak tahu apa yang Anda lakukan, pilih warna-warna “aman” seperti hitam putih dan warna-warna pastel.  

3. Tipografi

Saya tidak akan membahas cara memilih font terlalu jauh, poin Cara Memilih Font Agar Blog Lebih Enak Dibaca sudah pernah ditulis oleh Almazia Pratita, saya persilakan Anda untuk jalan-jalan ke sana. Pesan saya hanya satu: jangan pakai Comic Sans, pokoknya jangan.

4. Blog Grid

 

Sebagai referensi, berikut ini beberapa blog feed style, Anda bisa memilih yang paling sesuai dengan kebutuhan blog Anda. Dengan atau tanpa sidebar? Topik itu akan kita bahas di subbab lain, pada ilustrasi di bawah ini saya sengaja menghilangkan sidebar untuk kepentingan visual. Oh ya, apa yang saya tulis di keterangan setiap grid tentu bukan sebuah patokan yang absolut. Anda bebas menentukan yang sekiranya cocok dengan konsep blog Anda.

1. List Style

Cocok untuk Anda yang lebih ingin menonjolkan konten, terutama blog-blog yang memiliki banyak topik. Contoh: lifetsyle, parenting.

Berapa banyak post terbaru yang tampil di blog feed? Idealnya, sih, 3-7, lebih dari itu akan membuat blog Anda tampak seperti tol Cipali.

2. Classic Style

Ini tipe yang paling sering digunakan karena cocok untuk semua niche. Selain konten, Anda juga bisa menonjolkan featured image sebagai daya tarik.

Jumlah post di blog feed: 3-5.

3. Masonry Grid

Feed dibagi per kolom, jumlah kolom bervariasi. Untuk blog, sebaiknya maksimal 3 kolom.

Masonry cocok untuk blog yang ingin menonjolkan aspek visual. Contoh: beauty, travel, dan food blogger.

Tip: pastikan semua featured image skalanya sama agar feed tetap rapi.

4. Gallery Style

Nah, ini cocok banget untuk beauty atau travel blogger. Gallery style mengedepankan aspek visual, terutama foto-foto yang kece.

5. Slider Style

Saya jarang menemukan blog feed yang menggunakan slider style. Biasanya slider digunakan untuk featured post.

6. Carousel Style

Sama seperti slider, carousel biasanya jarang digunakan untuk blog feed, hanya untuk featured post.

ELEMEN LAIN: EFEK DAN ANIMASI

Untuk membuat konten lebih menarik dan dinamis, kita juga bisa memanfaatkan efek-efek bergerak. Tapi, harap diingat bahwa semua efek ini adalah tool yang mesti digunakan dengan bijaksana sebab jika terlalu banyak dan terlalu cepat akan membuat blog kita tampak seperti arena Moto GP.

Hover Effect
Animated Efffect

Contoh parallax effect

Parallax Effect

Cara memilih template blog

Hal yang paling lumrah dan sering dilakukan oleh blogger ketika memilih template adalah: sesuai dengan selera, warna favorit, atau pertimbangan lain yang kadang tidak ada hubungannya dengan estetika, prinsip desain, atau fungsi blog itu sendiri. Saya tidak mengatakan bahwa itu salah karena walau bagaimanapun, blog adalah representasi penulisnya.

Oke, karena ngobrol tentang memilih template blog berdasarkan selera akan menghabiskan waktu seribu tahun dan tiga kali reinkarnasi, maka saya akan fokus kepada prinsip-prinsip desain dan branding-nya saja.

1. Free atau Premium?

Ayo jujur, ini kan yang sering terlintas di benak Anda? Begini, biaya yang kita keluarkan untuk ngeblog, jangan dianggap sebagai pengeluaran semata. Anggap itu sebagai investasi. Kelak akan ada timbal baliknya.

So, free atau premium? Saran saya, sih, pakai yang premium atau berbayar. Ini alasannya:

  • Template premium dilengkapi dengan support dan update, juga bisa diskustomisasi. Dengan begini kita bisa menyesuaikan template dengan “napas” blog kita.
  • Kita bebas menentukan apakah akan memasang kredit ke desainernya atau tidak. Lumayanlah, ya, mengurangi link keluar.
  • Prestise.

Kisaran harga template:

  • Blogspot: 85-450 ribu.
  • WordPress: 350 ribu – 1,7 juta per tahun.

Blogspot

Gratis:

 

  1. Gooyaabitemplates.

 

Berbayar:

 

  1. Etsy.
  2. Envato Market.
  3. Colorlib.

WordPress

Gratis:

  1. WordPress.com.
  2. WordPress.org.

Berbayar:

  1. Envato Market.
  2. Colorlib.
  3. Elegant Themes.
  4. Elementor.

2. Responsif

Selalu pilih template blog yang responsif karena 70% pengguna mengakses blog Anda melalui mobile device atau smartphone, di saya malah 82%. Untuk lebih yakin, coba cek tab Audience di Google Analytics.

Google Analytics >> dashboard >> Audience >> Mobile >> Overview.
Coba cek apakah template yang Anda gunakan atau yang Anda beli responsif atau tidak.

3. Clean and Simple

Pada dasarnya tampilan blog yang bersih dan simpel lebih mengacu kepada fungsi. Goal-nya adalah kemudahan pembaca mendapatkan informasi ketika berinteraksi dengan blog Anda. Hindari menambahkan elemen-elemen yang tidak penting hanya karena Anda menyukainya.

4. Sesuai Niche Penting Tapi Tidak Begitu Penting

Beberapa blogger selalu terobsesi memilih template blog berdasarkan niche-nya. Padahal yang terpenting adalah fungsi dan hal apa yang ingin ditonjolkan dari blog kita. Membuat tampilan yang sesuai niche itu bisa dikustomisasi, kok.

5. Fullwidth atau dengan Sidebar?

Untuk single post saya sendiri lebih suka menggunakan fullwidth karena space-nya lebih luas, juga agar pembaca yang mengakes blog via desktop tidak terdistrasksi dengan elemen lain. Terus bounce rate gimana Teh? Semua informasi yang biasanya ada di sidebar sudah ada di footer. Lagi pula, 82% pembaca mengakses blog saya via smartphone yang notabene sidebar akan tampi di bawah post, jadi nya sarua keneh weh rek make sidebar atawa heunteu ge.

6. Homepage: Static Page atau Blog Feed?

Sebelum membahas topik ini, mari kita samakan dulu frekuensi. Landing page tidak sama dengan homepage. Dari kacamata digital marketing, landing page adalah halaman berisi link yang tampil ketika pengunjung mengklik iklan yang disebar di berbagai media. Landing page bisa saja halaman khusus yang sengaja dibuat, bisa saja homepage, bisa jadi langsung ke display produk.

Google Analytics sendiri menganggap landing page sebagai halaman pertama yang diakses pembaca. Sumbernya bisa jadi macam-macam, ada dari organic traffic, referral, media sosial, bisa juga dari iklan.

Kembali lagi ke homepage/home/beranda. Anda yang memakai WordPress punya pilihan untuk home: static page dan blog feed, sedangkan Anda yang memakai Blogspot hanya punya satu pilihan: blog feed. Ah, kata siapa? Blogspot bisa, kok, pakai homepage a la static page/landing page. Kata saya barusan.

Iya, Blogspot bisa memakai template portfolio yang menyerupai static page, tapi dengan kode yang berantakan, sulit dimodifikasi di dashboard, dan poor user experience.

Untuk Blogspot, saya menyarankan agar Anda tetap menggunakan blog feed sebagai home karena walau bagaimanapun platformnya memang tidak mendukung untuk static page seperti WordPress. Optimalkan saja tampilan dan fungsi-fungsinya. Kalau masih memaksa, barangkali sudah waktunya Anda migrasi ke WordPress.

Untuk yang menggunakan WordPress, coba, deh sesekali keluar dari zona nyaman. Banyak hal yang bisa Anda lakukan dan optimalkan, baik dari sisi fungsi maupun tampilan.

STUDI KASUS: MAKEOVER TEMPLATE BLOG

Beberapa waktu lalu saya melakukan makeover blog dua orang klien. Yang satu Blogspot, ganti domain dari free domain ke TLD sekaligus ganti template. Yang satu lagi migrasi dari Blogspot ke WordPress self hosted (domain sama) sekaligus ganti template juga. Anda bisa lihat perubahannya, melihat bagaimana tampilan bisa berpengaruh terhadap “napas” blog secara keseluruhan.

Blogspot: before
Blogspot: after
WordPress: before
WordPress: after

7. Page Builder

Nah, ini nih topik yang paling seru. Ada yang pernah bertanya bagaimana cara membuat blog post dengan layout macam-macam tanpa menyentuh satu baris kode pun? Iya, jawabannya adalah pakai page builder. Meski ya, pengetahuan tentang CSS, PHP, dan koding lainnya akan sangat membantu. P.S. Blogspot tidak bisa memakai page builder.

Blog saya? Dulu pakai Elementor, sekarang pakai Divi. Ada banyak sekali page builder yang bisa Anda gunakan di WordPress, yang gratis maupun berbayar, di antaranya:

  • Divi (USD 89 per tahun)
  • Elementor (Free version dan USD 49 per tahun)
  • Beaver (USD 99 per tahun)
  • Site Origin (Free version dan USD 38 per tahun)

8. Perhatikan Tren

Desain blog sama seperti fesyen, ada trennya. Tapi bukan hanya itu alasan memilih template blog berdasarkan tren, ada alasan lain yang lebih esensial:

Visual yang Lebih baik - UI & UX

Desain web terus berkembang. Riset demi riset dilakukan demi tampilan dan fungsi yang lebih baik. Misalnya: awal tahun 2000-an web dengan background berwarna gelap banyak digemari, bahkan web dengan pattern yang aduhai ramainya.

Kemudian diketahui bahwa tampilan web seperti itu lebih cepat membuat mata pembaca lelah yang artinya kontraproduktif. Maka semua desain web berubah mengikuti hasil riset tersebut.

Update Fungsi dan Teknologi

Tahun 2009 ketika saya punya blog untuk pertama kalinya, tidak ada yang namanya tombol share ke media sosial, yang ada hanya share via email dan re-blog. Seiring perkembangan teknologi, sekarang semua template blog dilengkapi dengan tombol share ke berbagai media sosial, bahkan ke aplikasi chatting.

Dulu juga responsif tidak begitu penting karena tidak ada yang mengakses blog via smartphone, berbeda dengan sekarang. Kalau sekarang, template yang tidak responsif sudah kena penalti oleh Google.

Nah, template blog yang terus diperbaharui selaras dengan fungsi dan perkembangan teknologi lainnya.

~

Sekuriti & Bug

WordPress terkenal rentan terhadap peretasan. Perkembangan brute force attack atau serangan terhadap platform-platform seperti WordPress sama cepatnya dengan teknologi pengamanannya sendiri. Misalnya, hari ini satu baris kode tak berarti apa-apa, besok bisa jadi backdoor yang membuat web Anda menghilang dari jagad internet.

Atau, misalnya begini. Satu fitur di dalam template ternyata conflict dengan plugin lain atau tidak bisa digunakan di browser tertentu. Setelah mengetahui ini, si web developer memperbaikinya dan merilis update template ke versi yang baru.

Itu sebabnya mengapa template WordPress harus selalu update. Atau kalau Anda sudah menggunakan template sejak zaman purba dan tidak ada update dari developer-nya, pertimbangkan untuk ganti template.

Penutup

Ada satu nasihat yang terus saya ingat, bahwa untuk menjadi blogger yang berdedikasi diperlukan kerja keras yang tidak sebentar. Menjadi blogger bukan hanya tentang seberapa besar kita dibayar, bukan pula tentang berapa puluh kali kita menang lomba blog. Menjadi blogger adalah bagaimana kita bermanfaat bagi pembaca, bagi keluarga, bagi lingkungan sekitar.

Apa yang saya tulis di sini, tutorial yang panjang ini, barangkali hanya akan Anda baca lalu lupa. Sebab walau bagaimanapun, Andalah sendiri yang menentukan akan menjadi blogger seperti apa. Tapi beginilah ikhtiar saya dalam rangka menjadi bermanfaat itu tadi, agar apa yang saya tahu dan pahami tidak hanya berhenti sampai di saya, melainkan menyebar juga ke blogger-blogger lain. Apabila ada koreksian atau tambahan, mohon layangkan di kolom komentar atau bisa hubungi saya langsung. Apabila ada yang kurang Anda pahami, please feel free to contact me.

Jadi mari, kita berkembang bersama-sama. Menjadi blogger yang lebih baik lagi, baik dari sisi tulisan, tampilan blog, ataupun jumlah invoice. #eh 😀

Cheers,

~eL

Disclaimer:

Blog post ini diikustsertakan dalam C2Live Creator Contest.

Copyright:

  • Ilustrasi: Langit Amaravati
  • Foto: Pixabay, Unsplash, 123RF
  • Teks: Langit Amaravati

 

Sumber Referensi:

  • Sihombing, MFA, Danton. 2001. Tipografi dalam Desai Grafis. Jakarta: Gramedia Pustaka Utama.
  • Rustan, S.Sn., Surianto. 2009. Layout, Dasar & Penerapannya. Jakarta: Gramedia Pustaka Utama.
  • internetlivestats.com
  • www.almazia.co
  • www.asymmetricalife.com
  • www.hubspot.com
  • tutplus.com

 

 

Share This