Kopdar Kopi Susu Warung Blogger (Web Design)

Artikel ini sebetulnya lanjutan dari seri yang pertama. Hehehe maklum, saya (sok) sibuk banget jadi baru sempet nulis. Karena kangen banget pengen nulis, akhirnya saya sempatkan waktu untuk sekedar buat catatan. Lumayan kan buat yang ngga bisa hadir, atau mau buat sekedar baca-baca juga bisa 🙂

Blog desain yang sampaikan di sini adalah materi yang memang saya kuasai dan saya pelajari secara khusus. Karena masih jarang sekali blogger yang mengerti pemahaman tentang blog desain, apalagi menuliskannya di blog jadinya ngga papa deh saya yang nulis hehehe. Harapannya sih, siapa tau bisa jadi semacam acuan buat temen-temen blogger untuk mulai memperhatikan penampilan dari template blognya. Yah gosipnya sih, ada yang bilang “gimana mau dapet job review, lah blognya aja berantakan tampilannya” :p

Yang disebut blog berantakan tampilannya itu kaya gimana sih? Sebetulnya ngga melulu banyak widget dan pernak-pernik aneh. Tapi sesederhana, punya blog dengan latar belakang hitam pekat (kode warna #000) lalu memiliki font yang warnanya putih atau kuning. Saya jamin, tulisannya akan ngga akan dibaca dan ditutup windownya dalam hitungan detik. Kalo saya butuh infonya, biasanya saya kopas isinya dan dipindahkan ke word supaya membacanya lebih nyaman. Besoknya, saya ngga mau balik lagi walaupun dia nongol di mbah gugle. Sayang mata saya dong ah.

Nah supaya bikin betah pengunjung dan bikin nyaman yang baca, ada beberapa guideline yang biasanya saya pakai dalam pembuatan layout. Beberapa hal ini semoga bisa jadi perhatian temen-temen dalam mengatur layout atau bahkan mulai mencoba mendesain sendiri blognya. Toh, yang tau selera juga kita sendiri kan ya 🙂

Mengenali Bagian Blog

Ngga ada yang susah sebetulnya bagian blog ini. Tapi karena saya biasanya lebih perlu untuk kepentingan kodingnya, pembagiannya saya petakan secara detail. Karena tiap segmen tentunya perlu penamaan kode khusus kan. Tapi buat informasi aja, ngga papa lah ya untuk tau bagian blog itu apa saja sebetulnya. Secara sederhananya, bagian blog bisa dilihat di gambar ini :

sample

sample2Bagiannya ngga susah kan untuk dikenali 🙂

Prinsip Desain Blog

Dalam pembuatan sebuah desain, saya memegang beberapa prinsip yang selalu saya gunakan dalam pakem layout atau desainnya. Bagian yang selalu menjadi highlight saya ada beberapa item. Diantaranya :

1. Lisensi

Yah ini sebenernya lebih kepada edukasi aja. Kembali ke masing-masing aja yaa, apa emang beneran bisa peduli dengan masalah lisensi atau mau cuek. Saya ngga ambil pusing hehehe. Tapi di sini saya mau bilang, lisensi ini mau tidak mau harus diperhatikan. Terutama kalau saya, karena bergerak di bidang kreatif dan membuat dari yang sudah ada, lisensi menjadi nomor satu buat saya.

Dalam dunia digital, terutama yang beredar di internet, harus diperhatikan kalau tidak semuanya bersifat gratis. Apalagi sembarangan ngambil gambar atau ilustrasi. Kenali dulu dan baca baik-baik seperti apa jenis lisensi yang diberikan pemiliknya. Pada dasarnya ada beberapa lisensi umum yang beredar di internat. Antara lain : Free Personal Use, Free Commercial Use, Commercial License, Creative Commons, Standard License, dan Extended License.

Untuk yang free, jelas bisa kita gunakan tapi kalau personal saja artinya hanya dipakai sendiri. Kalau free commercial, artinya bisa kita pakai dan bisa kita gunakan untuk kebutuhan komersil. Sedangkan Creative commons, pilihlah yang CC0 yaitu tanpa perlu memberikan atribusi lagi kepada pembuatnya. Dan ini bisa digunakan untuk sendiri ataupun komersil. Yang terakhir, standard dan extended license biasanya tercantum dalam terms situs penyedia digital file komersil seperti iStockPhoto, Deposit Photo, dan lain-lain.

2. Layout

Masih suka galau sama layout? Well, saya kasih bocoran ya. Apa yang sebaiknya dilakukan dalam pengaturan layout. Ada beberapa hal yang erat kaitannya dalam layout ini. Sebelumnya, saya kenali dulu beberapa layout yang umum dipakai. Dan sepertinya juga beberapa udah tau lah ya hehehe. Secara umum ada 4 jenis layout seperti yang terlihat di gambar berikut ini.

sample3

Nah layout manakan yang cocok untuk digunakan. Kalau saya, akan memilih yang pertama. Yaitu konten di kiri dan sidebar di kanan. Kenapa? yang pertama karena kita sebagai manusia memiliki tipikal membaca dari kiri ke kanan. Jadi lebih nyaman membaca dari kiri, tanpa ada distraksi apapun. Dan ternyata, perlakuan mba gugle juga sama. Dia akan membaca dari atas ke bawah, kanan ke kiri.

Lebih baik lagi kalau layout kita desain dengan tipe minimalis dan bersih. Ini akan sangat membantu kenyamanan dalam membaca dan membuat betah yang mampir ke blog. Jangan lupa, untuk sangat fokus ke konten dengan memberikan warna putih sebagai background. Biasanya sebelum saya suka mendraft lebih dahulu layoutnya sebelum mengaplikasikannya ke template. Dan beginilah contoh layout yang biasanya saya buat.

sample4

Mulai dari header yang kurang lebih tingginya hanya sekitar 250px. Kemudian tulisan header pun dari kiri ke kanan. Konten selalu ada di kiri dan sidebar di kanan. Biasanya sekalian full saya desainkan mulai dari date header, post title, sampai fontnya pun yang saya pakai akan bisa digunakan saat live di web. Ukurannya pun saya buat persis seperti saat melihat layar jika dilihat secara 100%.

3. Font

Tentunya font menjadi salah satu hal yang terpenting, karena yang dibaca adalah tulisan kita yang berbentuk font ini kan. Prinsipnya sih, jangan menggunakan font script untuk badan tulisan. Yang dimaksud dengan font latin adalah font yang berbentuk seperti ini :

sample6

Hehehe pusing kan kalo bacanya begitu. Bisa-bisa ikutan keriting yang baca. Tapi untuk judul masih bisa dipakai ya. Jadi sangat disarankan menggunakan font keluarga Serif atau Sans Serif. Untuk mengganti font di blog, kita menggunakan web font. Ada yang gratis dan ada juga yang berbayar. Salah satu yang gratis dan bisa didownload adalah Google Webfont. Yang lainnya ada Dafont, Font Squirell, My Fonts, dan sumber lainnya. Jangan lupa untuk perhatikan lisensi sebelum memakai ya.

sample5

Baca : Cara mengganti font dengan Google Webfonts

4. Warna

Pemilihan warna juga menjadi salah satu hal yang penting buat saya. Apalagi perempuan ya. Kombinasi warna yang baik tentunya akan menambah keserasian. Biasanya kombinasi yang saya pakai tidak lebih dari tiga macam dengan 80% bidangnya adalah putih. Maka warna hanya menjadi pemanis yang sederhana tapi penting 🙂

sample7

Baca : Inspirasi warna untuk blog

HTML dan CSS

Dua hal ini seringnya ditakuti karena sudah pusing lihat kodenya. Tapi pada dasarnya, kalau ingin merubah beberapa hal, yang kita gunakan adalah CSS. Jadi kalau bisa dianalogikan, HTML adalah badan, CSS adalah pakaian yang meliputi warna baju, jenis baju, bahan kain dan sebagainya. Dan untuk merubah beberapa template blog, kalau sudah ada struktur HTML nya, maka yang kita lakukan hanyalan merubah CSSnya saja untuk tampilannya.

Dua hal ini agak panjang penjelasannya, mungkin lain waktu saya bahas lebih dalam lagi yaa.

Advertisements

25 thoughts on “Kopdar Kopi Susu Warung Blogger (Web Design)

  1. untuk layout sejak konsultasi di twitter itu (ceileeee) saya udah terapin mbak
    tadinya blog saya terdiri dari sidebar 1, content, siderbar 2.
    tapi setelah dapat wejangan (uhuk-uhuk) saya ubah deh 🙂

    efeknya lumayan ngena, dan juga lebih simplicity & enak dipandang mata…
    keren euy, artikelnya, inspiratif banget…

    *wajib bookmark

  2. Sukaaa…. aku tunggu soal html & css ya. Pengen ganti warna, tapi parno ma kode2 gak jelas gitu…*newbie banget

    Btw, salam kenal ya, Mba Shinta ^ ^

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s