Fungsi sebuah blog sudah bergeser dari yang tadinya hanya sebatas tempat curhatan sang penulis, sekarang menjadi media publikasi bagi orang banyak (istilah keren nya, Citizen Journalism). Pada posting ini kita akan membahas beberapa elemen visual yang menjadikan desain sebuah blog menjadi efektif.
Sinergi Desain & Konten
Inti dari blog memang ada pada konten blog itu sendiri, tetapi seperti diskusi kita terdahulu, konten yang bagus jika tidak didukung dengan desain yang efektif maka tidak akan berhasil. Sebagian mungkin bisa bertahan karena faktor senioritas atau konten yang tidak dapat di temukan di blog lain. Tapi bagaimana dengan blogger junior yang walaupun mempunyai konten yang bagus tetapi kurang/belum memperhatikan desain blognya sendiri?
Lagipula, apa salahnya memanjakan pembaca dengan presentasi desain yang nikmat di mata? Selain membuat pembaca lebih betah berlama-lama di blog kita, manfaat lain tentu membuat pesan yang ingin kita sampaikan lebih mudah di tangkap.
Berikut adalah beberapa poin/tips yang bisa di gunakan untuk membuat desain blog menjadi lebih efektif.
Tata Letak Kolom Konten
Dari hasil pengamatan saya, ada 5 macam jenis tata letak kolom yang sering digunakan pada desain blog. Masing-masing tata letak mempunyai kelebihan dan kekurangan, namun kita bisa menentukan yang terbaik bagi keperluan blog yang akan kita desain.
1. Menurun Single (1 kolom)
Jenis ini merupakan tata letak yang standard dan hampir semua blog menggunakan metode ini. Dikarenakan sistem dokumentasi dan penanggalan blog yang berdasarkan hari, maka posting terbaru akan di letakkan di paling atas.
Kelebihan :
- Pembaca sudah familiar dengan tata letak ini
- Mudah menemukan posting terbaru
- Ruang untuk konten lumayan luas
Kekurangan :
- Dari segi visual terlihat biasa saja
- Pembaca akan mengalami sedikit kesulitan bila ingin melihat posting terdahulu
2. Menurun Paralel (2 kolom)
Sama dengan tipe menurun yang pertama, perbedaannya hanya pada kolom konten yang di bagi menjadi 2, sehingga dapat memuat lebih banyak konten di dalam satu halaman.
Kelebihan :
- Pembaca dapat dengan mudah melihat beberapa posting terbaru
- Memberikan pilihan kepada pembaca
- Blog terasa lebih kaya akan konten
Kekurangan :
- Layout secara keseluruhan akan terlihat penuh
- Kalau pengaturan masing-masing kolom tidak di perhatikan (tinggi kolom), akan terlihat berantakan
- Beberapa pembaca akan bingung mana yang mau di baca terlebih dulu
3. Grid (4-6 kolom)
Sesuai dengan namanya, tata letak ini menggunakan sistem grid untuk mengatur tata letak kolom kontennya. Desainer bebas menentukan akan menggunakan berapa kolom, tergantung dengan kebutuhan dan jenis konten (lebih banyak gambar atau tulisan).
Kelebihan :
- Secara visual terlihat menarik
- Semua posting dapat tampil dalam satu halaman
Kekurangan :
- Akan membingungkan pembaca
- Dari sisi layout ada kemungkinan akan terlihat berantakan
4. Full Width
Tipe yang satu ini tidak menggunakan kolom, tetapi menggunakan seluruh lebar halaman yang ada. Bahkan bagian sidebar kanan atau kiri tidak di gunakan, namun ada juga beberapa yang tetap menggunakan sidebar tetapi dengan porsi yang sangat minim.
Kelebihan :
- Konten menjadi sorotan utama
- Terlihat unik karena belum banyak yang menggunakan
- Lebih nyaman di baca
- Pembaca akan fokus kepada posting tanpa ada gangguan banner atau widget lain
Kekurangan :
- Terlihat “sepi”
- Agak sulit menampilkan posting-posting sebelumnya
- Butuh strategi khusus untuk menempatkan banner iklan atau widget lain
5. Custom Posting
Kalau kamu mempunyai keahlian di bidang coding, pilihan ini mungkin bisa kamu pertimbangkan. Tipe ini merupakan tipe “break the rules” karena sama sekali tidak menggunakan template yang sama pada setiap posting. Melainkan menyesuaikan desain dengan konten dalam arti yang sebenarnya. Konsep nya sama seperti majalah yang melayout setiap artikel nya secara personal.
Kelebihan :
- Sudah pasti terlihat unik
- Sinergi konten dan desain sangat dapat dirasakan
- Pembaca akan melihat seluruh posting karena penasaran akan tampilan visualnya
Kekurangan :
- Butuh waktu yang lumayan lama untuk membuat 1 posting saja
- Tidak semua orang menguasai coding
Pengaturan Font
Konten adalah jiwa dari sebuah blog karenanya kita harus memperhatikan cara kita menggunakan dan menampilkan text dengan baik. Tujuannya tak lain adalah agar nyaman di baca. Berikut ini beberapa hal yang harus di perhatikan,
1. Jenis Font
Di dalam blog pasti ada 2 jenis font yang harus di gunakan, yang satu sebagai heading, dan yang lain sebagai body text. Untuk bagian heading kita bisa menggunakan font yang jarang di pakai oleh desainer lain atau disesuaikan dengan kebutuhan dasar headline itu sendiri, yaitu untuk menjadi pusat perhatian.
Pada bagian heading kamu bisa menggunakan font yang tebal atau mencari font dengan bentuk yang unik (namun tetap terbaca). Penggunaan font yang tidak biasa pada heading juga bisa menjadi pembetukan karakter desain sebuah blog.
Yang kedua adalah font untuk body text. Di bagian ini sebaiknya kita menggunakan font standard yang memang di fungsikan untuk body text, alasan utamanya adalah agar text dapat di tampilkan dengan baik di semua monitor pembaca.
2. Ukuran Font
Yang akan lebih di bahas di sini adalah ukuran font pada body text. Karena perkembangan resolusi monitor saat ini, ukuran 12 point adalah ukuran standard. Tapi kalau kamu mau lebih meningkatkan kenyamanan dalam membaca bisa menggunakan 14 – 16 point, ukuran ini tergantung kepada jenis font yang kamu gunakan.
3. Line Spacing
Bagian ini sangat kecil, namun penting untuk menjaga kenyamanan saat kita membaca artikel. Rumus yang biasa di gunakan adalah besar font yang di gunakan, di tambah 4 point. Misalnya, kamu menggunakan font 14 point, maka line spacing yang ideal adalah 18 point.
Namun pengaturan line spacing harus di coba secara langsung, terkadang bisa juga line spacing 20 point (dengan besar font 14 point) lebih nyaman di baca karena bentuk dan jenis font juga mempengaruhi.
Desain Header & Logo
Sesimpel apapun desain header dan logo yang kamu buat haruslah menarik. Ibaratnya, header dan logo adalah wajah seseorang. Karena ini desain untuk blog, maka logo mungkin tidak menjadi keharusan, tetapi akan lebih baik jika kamu mempunyai logo walaupun hanya berbentuk tipografi (logotype). Desain logo yang unik akan menjadi identitas blog.
Desain header dapat disesuaikan dengan “feel” keseluruhan blog yang ingin kamu dapatkan. Kamu bisa bereksplorasi dengan ilustrasi, texture, atau bahkan bermain dengan white space.
Inspirasi Desain Header Blog
Styling Image
Sebenarnya trik ini sangat simpel, hanya menambahkan border di sekitar image/photo yang kita gunakan pada posting. Dengan cara ini image akan tampil lebih menarik walaupun efek nya tidak terlalu terlihat. Akan terasa perbedaanya antara yang menggunakan dan tidak menggunakan styling image.
Contoh Penerapan Border Pada Gambar
Optimasi Sidebar
Mayoritas blog mempunyai sidebar, tapi terkadang kita suka bingung ingin menaruh fitur/widget apa di bagian ini. Sebelum kamu menambahkan widget dengan membabi buta, lebih baik pikirkan dulu hal selain konten yang ingin kamu sampaikan kepada pembaca.
Untuk optimasi sidebar ini tidak ada tips yang baku, semuanya kembali lagi kepada kamu. Dari hasil pengamatan saya, sidebar pada blog biasanya di gunakan untuk,
- Komentar Terkini
- Posting Pilihan (Featured)
- Posting Terpopuler
- Banner Iklan
- Twitter / Facebook Page stream
- Icon Social Media
- Flickr Gallery
- Kategori Posting
- Archives
- Voting Widget (menampilkan voting atau hasil voting)
- Peringkat Komentator
- ( Kemungkinan lain, silakan beritahu saya melalui kolom komentar
)
Inspirasi Sidebar
Kolom Komentar
Bagian yang ini memang sudah menjadi default dari semua blog engine yang ada dan tujuan nya semua sama, yaitu untuk menciptakan komunikasi 2 arah antara penulis dan pembaca.
Banyak cara untuk menjadikan kolom komentar menjadi menarik, selain dari segi visual, penggunaan kata-kata yang unik juga menjadi faktor tambahan supaya pembaca mau menulis komentarnya. Agar pembaca nyaman menulis komentar, sebaiknya bagian field komentar di buat lebih lebar dan agak tinggi, ini akan berguna bagi pembaca yang ingin menulis komentar yang lumayan panjang.
Inspirasi Kolom Komentar
Optimasi Footer
Trend Big Footer sepertinya masih akan berlangsung lama karena fungsinya sebagai area pemberhentian kedua setelah area konten yang berada di paling atas.
Ada 2 tujuan dasar mendesain big footer pada blog,
- Untuk meletakan fitur tambahan yang tidak cocok (tidak muat) di letakan di sidebar atas.
- Membuat pembaca lebih mendalami konten blog (misalnya, dengan menaruh widget “Most Discussed Articles”)
Yang pasti footer bukan lagi ruang yang di anak-tiri kan lagi, malah bisa mendukung keseluruhan konten blog.
Inspirasi Footer Efektif
Kesimpulan
Blog dengan konten yang bagus akan menjadi lebih bagus lagi jika menggunakan desain yang efektif dan cantik. Konten dan desain tidak lagi menjadi hal yang terpisah, melainkan bersinergi menghasilkan suatu blog yang memukau dan berguna bagi banyak orang.
Sudah siap mendesain (atau me-redesain) kamu? Atau ada elemen yang tertinggal? Mari berkomentar! 
benar2 mantab postingannya. udh lama saya nungguin postingan terbarunya nih..
postingan2nya banyak memberikan pengetahuan baru buat saya yg masih harus belajar tentang desain nih. terima kasih ya om..
*map udh banyak bca tapi baru komentar disini. hehe…
Tulisannya benar-benar sesuai dengan target pembacanya, “blogger junior yang walaupun mempunyai konten yang bagus tetapi kurang/belum memperhatikan desain blognya sendiri”.
Tidak terlalu mengedepankan unsur teknis, tapi lebih kepada konsep desain. Thumbs up!
Dan seperti biasa, saya membaca semua post disini karena ilustrasinya yang bagus-bagus
Well, artikel ini memberikan manfaat bagi mereka (saya juga
) yang ingin mendesain blognya secara struktural dan rapih. Tapi disini saya masih bingung terhadap blogazine, yang poisisinya secara acak, tetapi mampu terlihat enak dimata.
Ada teori atau penjelasan untuk menyiapkan blogazine yang temanya setiap post berbeda-beda kak? Dan hal apa saja yang perlu di lakukan pada setiap post blogazine? *mungkin request XD* Thanks in advance kak
Thanks guys!
@Nafi _ blogazine boleh tuh, tapi mungkin dari sisi perancangan desain dan konsep nya ya hehehe soalnya harus bisa coding juga untuk tipe itu
Saya memilih full width (900px) dengan sedikit sentuhan custom post. Karena Menggunakan Textpattern hal itu cukup mudah dilakukan :p
Sangat menarik karena tidak hanya membahas tentang layout blog yang “standard” seperti kita ketahui, 2 kolom dengan 125px kotak iklan hehe… Mungkin kita memang harus mengikuti trend yang beredar.
Saya sendiri sangat terinspirasi dengan desain dari Markboulton.co.uk, 52weeksofux.com, drawar.com (sebelum redesign), Jasonsantamaria (tentunya
Mungkin besok lagi bisa melakuka bedah desain secara spesifik, maksudnya membedah desain blognya siapa gitu. Saya pikir akan membuka diskusi yang menarik di kolom komentar
boleh juga tuh, blog nya siapa yah hehe
Saya menjumpai banyaknya aktivitas review blog di blogosfer Indonesia. Tetapi yang menyoroti dari sisi desain(interface) masih sangat kurang. Kebanyakan sih konten, aksesibilitas, dan usabilitas.
Blog ini cukup populer, saya rasa jika anda membuka semacam “lowongan” untuk review sebuah blog(pendaftaran via email misalnya) akan mendapat respon yang baik, terutama dari komunitas webdesainer tentunya. Selain itu juga merupakan bahan artikel yang cukup menarik untuk didiskusikan bukan?
btw, blog siapa? Sepertinya blog saya ngarep.. hehe… tapi jangan dululah… hehe ada saatnya nanti blog saya menjadi hebat, tetapi bukan sekarang, belum saatnya
klo blog lokal ada saran ga? hehe
klo blog nya Ardian mah udah bagus, no comment hahaha
Justru yang bagus-bagus itu wajib dikomentari
Kalau yang direviewnya situs yang biasa-biasa saja, saya pikir akan lebih banyak membongkar keburukannya saja. Saran saya blog ardianzzz saja selain itu dengan blognya bisa lebih fokus ke tema minimalis dan tipografinya.
Saya masih bingung dengan konsep minimalis.
Kalau blognya http://www.jauhari.net/ gimana?
@Mas Jeprie
Jangan dululah mas Jeprie.. masih banyak keburukannya hehe
Bagaimana dengan blog-blog terkenal? Mungki sebagai awalah bisa juga blog luar negeri. Setahu saya selama ini yag dilakukan hanya semacam showcase dan kita melihatnya sekedar untuk inspirasi.
Contoh kasus dapat kita lihat pada kritik websitenya drawar
http://www.drawar.com/crits/
sangat menarik
[...] This post was mentioned on Twitter by Angels, Udnhz Edwin, Richard Fang, rully oktario edison, Qori Hafiz and others. Qori Hafiz said: RT @jurusgrafis: Posting Terbaru! – Bedah Desain: Struktur Blog & Penerapannya http://ow.ly/1UTkm [...]
wew..
mamtabs dah postingannya..
saya tunggu-tunggu artikel yang kyk gini..
Kalau masalah desain saya lebih memilih tipe psdtuts+ dan abduzeedo. Walaupun seperti kata Ardianzzz terlalu konvensional (125 px iklan, dst…) layout itu memang terbukti efektif.
Satu lagi yang perlu disebutkan saya pikir detail-detail kecil pada desain situs memberi dampak yang signifikan. Contoh: garis highlight satu pixel di bagian atas navigasi situs ini memperlihatkan kejelian pemilik situs. Juga detail-detail di tombol navigasi tutorial9.net yang menurut saya sangat wah! Tekstur grunge di pvmgarage.com. Hal ini banyak dilewatkan para desainer situs.
yup bener, walupun layout 1 kolom terlihat biasa, tapi memang pembaca udah familiar
untuk masalah detil 1 pixel udah pernah di bahas
http://jurusgrafis.com/tutorial/optimasi-garis-1-pixel-pada-desain-website/
Haha, sepertinya saya terlalu terprovokasi dengan tulisannya Scrivs (http://drawar.com). Memang sejauh pengalaman saya dalam berinternet, layout “konvensional” 2 kolom tersebut sangat efektif (da efisien) untuk menyajikan konten (dan mencari uang tentunya :p).
Saya sangat tertarik memperhatikan iklan-iklan tersebut. Kita dapat melihat berapa jumlah iklan yang terdapat di smashingmagazine? banyak. ketika kita melihat Alistapart.com, Coudal.com, hicksdesign, hanya memajang satu buah iklan saja (via the deck atau fusionads).
Meskipun masih sangat sedikit, sepertinya trend dalam dunia periklanan di Internet akan mulai bergeser dengan iklan-iklan premium. 1 iklan per halaman dengan konten teks agar lebih aksesibel.
Saya terinspirasi denga tulisan Scrivs, bahwa manajemen iklan yang buruk dapat membunuh website dan desain tentunya
http://www.drawar.com/articles/dont-let-ads-kill-your-site/61/
Terima kasih referensinya, saya jadi membaca beberapa artikel bagus, termasuk kritik pada redesain SM. http://www.awayback.com/smashing-magazine-realigned/. Satu hal menarik, dari beberapa artikel ternyata banyak yang menyebutkan Psdtuts sebagai salah satu contoh management iklan yang cukup baik. Psdtuts kali ini (yang ini sudah redesain) menggunakan lebar iklan lebih dari 125 px tapi masih dengan standar konvensional 2 kolom.
Dibandingkan SM, Psdtuts lebih profitable, apalagi bayaran penulis cukup mahal dengan konten baru tiap hari. Masih ingat kasus ebook SM? http://www.smashingmagazine.com/2010/03/22/smashing-magazine-needs-your-help/
Tentang layout iklan premium, saya tidak yakin itu bisa berkembang, setidaknya untuk sekarang. Saya sudah lihat beberapa situs referensinya dan ternyata saya tidak bisa membedakan iklan dan konten. Jadi, menurut saya trend iklan buysellads akan cenderung bertahan.
wah….Artikelnya bagus….walau artikelnya terlalu panjang….
kalau saya pilih yang no. 1 aja…yang mana kontent gak terlalu banyak yang muncul…kalau kontent yang muncul terlalu banyak kan bisa memberatkan blog..sedang mbah google suka yang ringan-ringan
Review blognya Matt Mullenweg aja http://ma.tt/ kan desainnya abis2an tuh hehehe… Semua elemennya layak dapet jempol
Trims untuk berbaginya. benar-benar menarik
sip..mantap!! tambah ilmu lagi ne bg, thx
makasih atas inspirasinya mas,
kalau pada blog saya menyuguhkan konten saja dan widget saya pasang pada single post, biar pemabca tidak pusing dengan postingan terbaru dan saya memprioriyaskan elegan dan minimalis
sebenarnya saya terinspirasi pada theme jurus grafis ini, tapi apa daya penguasaan kode masih kurang dan pas²an saja
kalau untuk theme saya, emms aya terinspirasi dari uxmag.com pada bagian navigasi dan tanggalnya saja
oia saya minta saran dan kritikan terhadap blog saya ya baik desain dan Typographynya
terimakasih
ahirnya posting juga
nice artikel bang
jadi lebih paham mengenai desain dan konten blog
pada halaman detail artikel di bagian sidebar mungkin bisa di tambah kan related post..
btw, nice article boss..
waw…
mantap sangat ne web’s…
gag kalah mas sama tutorial9.net…
maju terus web design indonesia…
wah///suka sama artikel ini…
mantap om sharenya…. nmbah lgi deh ilmu saya… thank’s
… tipsnya sangat detail, makasih sekali !
sebagai blogger pemula, saya harus banyak belajar di sini !
salam kenal buat yg empunya dan semua !
kunjungi blog saya ya………………
makasi
di Sidebar ada yang ketinggalan, RSS belum
koq website sendiri ampe dilupain wkwkwk
[...] Sepintas sepertinya struktur blog tampak rumit. Namun jika Anda mencobanya, lama kelamaan Anda akan terbiasa dan Andapun akan mendapatkan benang merahnya. Yang perlu diingat, teknologi software blogging ini terus berkembang dari hari-hari dan perkembangannya sangat cepat. Meskipun begitu ada satu alasan yang membuat kenapa blogging begitu menjadi epidemi saat ini, blogging itu mudah. Begitu mudahnya sehingga setiap hari ada blog baru yang bermunculan. Artikel ini terkesan singkat dan tidak spesifik menerangkan tentang Struktur Blog, jika Anda masih ingin mengetahui secara detail tentang Struktur Blog Anda bisa berkunjung ke blog jurus grafis yang membahas tentang Bedah Desain. [...]
kalau untuk memperlebar kolom konten dan komentar agar lebih besar dan lebar gimana caranya mas??? salam kenal sebelumnya
wow! keren bgt bro,..
nais share!
Mantap Boss tutorialnya!!! inspirasi buat lebih getol bikin themes atau templates he he!
Salam..
mas bagaimana tentang blog saya? apakah terlalu rame??? tolong masukannya
http://www.ganangkharisman.co.cc
yah walaupun thema masih “minjam” ma om google…maklum belum sempet ngolah htmlnya….
wah kapan ya… aku masih nggak da modal nih buat expresikan ideku
mantep banget nih penjelasannya, memang saya akui, jika blog punya desain yang bagus, itu dapat memberikan sugesti sehingga kontennya terasa bagus juga,
thx buat tutornya om. sangat membantu buat nyubi seperti saya
[...] Artikel ketiga yang dibaca adalah: Membahas struktur blog tautan: http://jurusgrafis.com/tutorial/bedah-desain-struktur-blog-penerapannya/ [...]
Lebih suka tampilan desain yang simpel
bagus bnget, jd pngin tau membuat menu tag blog nich
sumpe keren abiz gan blognya….
like this………….!!!
gmn caranya agar ane bisa bikin yg kayak gini ye…
salam kenal juga buat semua yg sudah berkomentar di artikel ini….
Infonya keren, Bang… Kebetulan saya blogger pemula. Jadi harus banyak belajar nih kayaknya. Thanks.
bos, qw kn baru belajar buat blog, blog-nya udah jadi tapi qw g bisa menata dan menjalankannya
mohon bimbingannya
Wah, terima kasih yah atas sarannya
Membantu sekali bagi para pemula seperti saya!
haduch…
jmpol 2 dech buad mas fang..!!
bgus2 artikelx..
wah, nambah ilmu lagi nih gan.
thanks infonya,,
sangat sangat sangat butuh belajar lagi nih.
><
keren gan blognya,,
makasih bro Fang.. atas infonya…
ingin memperbaiki design blog.. tapi ga tahu mulainya gimana..
selalu membuat artikel yang menarik untuk jd pelajaran dengan bahasa yg ringan .. terima kasih kak
Tutorial inilah yang saya cari-cari,konten tutorialnya komplit.
Salut buat yang punya blog ini, tapi aku manusia baru belajar blog.
Tolong bagi ilmunya dong buat manusia yang baru belajar bikin blog.
Bagus sekali artikelnya!!!
Kalo bisa, mau minta tutorial bikin template blog nya.
Terima kasih!