Cara-Membuat-Tampilan-Blog-Website-Menarik-Nyekrip

Membuat tampilan blog menarik atau desain blog agar menarik adalah salah satu bagian yang paling penting untuk mengatur antarmuka website/blog kita. Dengan semakin menarik tampilan blog kita, maka akan semakin menambah kesan positif kepada pengguna (pembaca).

Pengalaman pengguna (user experience) adalah bagian yang penting untuk menjaga pembaca terlibat dalam optimasi mesin pencari yang baik karena bounce rate yang tinggi akan mengakibatkan efek negatif terhadap SEO. Buatlah blog dengan tampilan yang sederhana dan jangan terlalu mencolok atau berlebihan, maka dari itu nyekrip disini akan membahas tentang apa saja poin yang perlu diperhatikan dalam cara membuat tampilan blog agar semakin menarik, tetap sederhana dan yang paling penting adalah membuat nyaman pengunjung.

Jika belum mempunyai blog, silahkan mengunjugi tutorial ” Cara Membuat Blog di Blogspot Lengkap Gambar ” untuk blogspot atau blogger dan ” Cara Membuat Blog di WordPress Gratis Lengkap ” untuk wordpress.

Kebanyakan dari kita hanya disibukkan dengan mencari dan ganti template ketika berurusan tentang tata letak blog (layout blog), sebenarnya tata letak dan desain itu lebih dari sekedar ganti tema/template. Kita juga harus mempertimbangkan warna tema/template, navigasi, penempatan iklan, header, footer dan font. Kita juga harus mempertimbangkan tata letak untuk pengguna mobile atau smartphone, karena pengguna dengan perangkat ini juga merupakan bagian besar lalu lintas (trafik) blog.

Membuat Tampilan Blog Menarik: Warna Template dan Pengunjung Blog

Kita mungkin meremehkan tentang masalah warna, sebenarnya itu merupakan bagian penting ketika kita mempertimbangkan kenyamanan pengunjung. Setiap blog yang baik akan memiliki desain yang khas dan unik. Misalnya, jika kita memiliki sebuah blog tentang game, maka secara otomatis pembaca kita adalah gamer.

Gamer akan suka dengan latar belakang warna hitam dengan warna neon di bagian depan. Namun, jika blog kita mengenai kesehatan atau kecantikan, maka kombinasi warna ini tidak cocok untuk pembaca. Jika blog kita campur atau gado-gado maka carilah warna yang umum karena pengunjung kita juga orang umum. Untuk itu kita perlu mencari ide tentang desain blog dengan mengunjungi blog yang sudah populer dibidang-nya.

flat-ui-color-picker-nyekrip

Flat UI Color Picker

Jika kita fokus pada desain flat maka pemilihan warna pada desain flat tidak boleh dipilih secara sembarangan, jika bingung dalam memilih warna yang pas, kita bisa menggunakan kumpulan warna untuk desain flat di halaman web Flat UI Colors.

Desain Tampilan Blog Menarik: Header dan footer

Bagian header adalah bagian atas dari blog kita yang berisi logo dan beberapa navigasi. Biasanya pengguna atau pengunjung akan melihat ke bagian atas untuk akses navigasi karena ingin menggali lebih dalam tentang blog yang dikunjungi-nya. Jika kita tidak mengatur header semaksimal mungkin (misalnya kita melepas navigasi pada bagian header), maka kita dapat membingungkan pengguna dan menyebabkan mereka untuk segera meninggalkan blog.

Footer memang tidak sepenting header pada situs, tetapi footer adalah bagian pelengkap blog. Footer bisa berisi halaman disclaimer dan beberapa link yang berguna bagi pengguna untuk menemukan informasi tambahan tentang blog seperti halaman ” About ” atau halaman ” Kontak “. Biasanya blogger atau pemilik blog akan menjejali footer dengan berbagai badge seperti pagerank atau lainnya (padahal pagerank sudah tewas), itu malah membuat footer kita jadi penuh. Ingat, pengunjung hanya akan membaca artikel atau tutorial anda bukan untuk melihat segala pernak-pernik blog anda, jadi fokuskan pada artikel atau tutorial bagi pembaca.

Merubah Tampilan Blog: Ukuran, Warna, Jenis atau Gaya Huruf (Font)

Ukuran font dan karakteristik-nya terus mengalami perubahan. Desain blog itu ibarat seperti busana, yang akan terus berubah dengan desain terbaru mulai dari tampilan kaku yang kuno sampai tampilan yang flat yang lebih modern. Begitu juga dengan desain font yang dulunya sering menampilkan dengan ukuran yang kecil, sekarang lebih trend menampilkan dengan ukuran besar dan menonjol sehingga mudah dibaca oleh pembaca. Font yang lebih besar membuat konten kita lebih mudah dibaca, meskipun demikian atur ukuran font jangan sampai terlalu besar.

Pemilihan gaya huruf (font style) juga bisa membuat blog lebih mudah atau malahan lebih sulit dibaca. Jika anda bingung untuk memilih, pilihlah font yang umum seperti ” Open Sans “. Di luaran sana terdapat ribuan font yang dapat dipilih, tetapi jika kita sampai memilih font yang salah dan sulit untuk dibaca oleh pembaca, itu bisa menjadi bencana bagi blog.

Berikut beberapa pilihan font yang bagus dan gratis tentunya. Jika ada font dalam daftar dibawah ini berbayar atau tidak bisa di-download, mungkin sang pengembang sudah merubah kebijakan-nya.

Cara_Membuat_Tampilan_Blog_Menarik_Lato_Google_Font_Nyekrip

Lato Google Font

Hallo_Sans_Free_typeface_Nyekrip

Hallo Sans

Cara_Membuat_Tampilan_Blog_Menarik_Open_Sans_Google_Font_Nyekrip

Open Sans Google Font

aller_font_nyekrip

Aller Font

Cara_Membuat_Tampilan_Blog_Menarik_KIDOT_Font_Nyekrip

KIDOT Font

Membuat Tampilan Website Menarik: Mobile Desain dan Responsif Template

Mobile desain dan template web yang responsif harus dimiliki bagi pemilik blog, apalagi dengan munculnya algoritma google yang tebaru  yang disebut mobilegeddon. Tablet dan smartphone merupakan sumber trafik yang terus meningkat, bukan tidak mungkin jika kedepannya akan mengalahkan pengguna desktop.

Desain yang responsif akan mengatur tata letak dan ukuran gambar sesuai dengan ukuran halaman browser, sekarang sudah semakin bertambah-nya peredaran smartphone dengan layar berbagai ukuran sehingga membutuhkan tingkat adaptasi yang lebih tinggi. Gunakan teknik media queries pada CSS dan jangan lupa untuk mengurangi size gambar.

Cara_Membuat_Tampilan_Website_Menarik_Bootstrap_Nyekrip

Bootstrap

Kita dapat menggunakan Twitter Bootstrap yang merupakan perangkat gratis yang menyediakan CSS dan JavaScript untuk desain blog dan membuat query responsif. Meskipun bernama Twitter Bootstrap, perangkat ini tidak melibatkan Twitter, diberi nama Twitter karena diciptakan oleh pengembang Twitter. Twitter bootstrap dengan cepat menjadi cara yang populer untuk merancang tema blog dan layout. Untuk download, silahkan kunjungi halaman Getbootstrap.com.

Dengan memperhatikan poin-poin diatas, kita bisa memulai atau merubah tampilan blog agar menarik. Kita bisa menggunakan pedoman diatas ketika kita memilih template untuk blog atau website, jika tidak menemukan kriteria diatas, kita harus merubah atau mendesain sendiri template atau juga bisa menggunakan jasa desain website/blog.

Happy Nyekrip!

About The Author

Comments

  1. Mas Hitler

    Keren, warna untuk blog sepertinya perlu saya rubah menjadi lebih anggun dan menarik pengunjung. ^^d

    Jangan lupa follow blogku ya. 🙂

  2. Pingback: Cara Membuat Template Web Responsive HTML 5 | novarizakhairani

  3. Pingback: Daftar CMS Website Terbaik dan Gratis HTML5 | novarizakhairani

  4. java harmony

    Sukurlah saya sudah melakukan seperti yang ada dalam artikel diatas…tapi soal font tidak banyak melakukan perubahan…tetep bawaan template yang saya unduh. Dan kebetulan juga templatenya dah responsive…hanya warna yg saya ubah sesuai saran diatas. Trimakasih.

  5. Sandi Mulyadi

    Udah baca beberapa artikel di blog ini bikin saya jadi betah sekaligus makin menggebu-gebu untuk bikin template sendiri 😀

    1. Admin Article Author

      Halo faqih, saya sudah berkunjung ke web wordpress-nya, jika ingin saran, jangan sungkan untuk email di nyekripweb@gmail ya. 🙂

  6. indoblazer

    terima kasih untuk informasinya gan, tapi saya sedang mengembangkan template untuk blog saya, nah menu bootstrap sedang saya cari untuk dipasang di blog saya.

  7. template blog keren

    terimakasih atas informasinya gan, template blog keren dapat membuat pengunjung blog betah berlama-lama
    .

  8. Nebula Salnia

    Terima kasih tutorial nya 🙂 ini membantu sekali. Saya masih cukup kebingungan buat nentuin warna apa yang cocok untuk blog saya, jadi supaya aman saya pilih warna black and white aja, atau admin ada saran gak? hehe 😀

  9. Ainun Massalindri

    Oh, ternyata cukup banyak ya langkah-langkah yang harus diterapkan. Btw informasinya kurang greget min, ditambah praktek donk.. hehe

  10. Imam Hambali

    gan, saya membuat pilihan menu seperti “konsultasi”, “sekolah ekonomi”, “ebook” dll, tapi saat di click kok gak ada linknya ya,,,mohon arahanya………imam hambali

  11. Andre Fillophy

    Saya admin dari Duniainformasikesehatan.com berterima kasih atas informasi yang anda berikan.. sangat bermanfaat sekali, saya memang sedang mencari cara bagaimana supaya tampilan blog saya terlihat lebih cantik dan fast loading pastinya..

    Jika ada saran lain mohon share lagi.. thanks..

  12. intekomnet

    admin nyekrip,, kalo biar bisa kliatan profesionalnya gimana ya tuh blog.. apa sesuai template ya?

    1. Admin Article Author

      kelihatan profesional itu tergantung anda membangun kepercayaan dengan pembaca anda.. 🙂 keep original 🙂 kalau download template, usahakan kasih sesuatu biar unik

  13. Duan

    Saya senang sekali membaca artikel ini, namun karena saya sedang belajar membuat blog jadi agak bingung. Saya sudah membuat 2 blog dengan blogspot .

    Yang ingin sy tanyakan, untuk membuat blog dari blogspot apakah bisa tampilannya seperti web jual beli yang online contohnya kaya lazada atau mungkin mataharimall itu??

  14. Tri Haryono

    Sangat bermanfaat. ini dia cara yang paling banyak dicari master bllogger. dengan tampilan website yang menarik. pastinya akan membuat pengunjung betah berlama-lama di dalam website kita. btw… saya juga punya 1 artikel yang menarik “cara mengganti template blogger agar mobile friendly” agar bisa di akses di smartphone dgn tampilan responsive. di tunggu kunjungan agan2 dan sista

  15. Vikar Adie

    Thanks Admin atas sharing nya, cara menggunakan font di website kita boleh tlg di share caranya? begini saya pernah baca kadang font bergantung pada OS oleh karena itu saya ingin menyediakan font nya dari web saya sendiri saya pernah baca ttg menggunakan css untuk meload font nya tapi krg jelas, mungkin Admin bisa share caranya.

    Thanks,
    Best & Regrads.

  16. indowebtravel.com

    Menarik dari segi warna dan tulisan juga gak mudah buat pemula jadi lebih sering ikut ama bawaan thema yang digunakan. apalagi kalau terlalu banyak gambar malah semakin memberatkan akses.

Tinggalkan Balasan

Alamat surel Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *