Membuat Sketsa Theme

cara membuat theme blogger

Desain/sketsa adalah sebuah permulaan penting dalam membuat theme blogger. Tanpa sketsa kita akan meraba-raba dan kebingungan untuk memulai dari mana saat memasukan HTML dan CSS nanti.

Sketsa ini akan menjadi panduan kita dalam mengatur letak dan bahkan jika detail bisa memperlihatkan tampilan akhir theme.

Nah sudah mengerti kan, maksud dan tujuan dari membuat sketsa…

Ok, kita boleh berkreasi sebebas mungkin, apalagi memang tidak ada ketentuan khusus dalam sketching theme yang akan dibuat.

Tools atau alat apa yang bisa kita gunakan untuk membuat sketsa?

Jika memang menguasai perangkat lunak kamu bisa menggunakan Corel, Photoshop, Office bahkan secara manual dengan menggunakan pensil dan kertas.

Loh kok boleh di kertas?

Saya tidak akan membebani pikiran teman-teman dengan hal yang bisa bikin ribet dan jelimet, karena yang akan kita buat bukanlah sebuah mockup atau desain mendetail dari sebuah tampilan blog, melainkan hanya panduan sederhana, seperti tujuan awal sketsa ini.

Pada umumnya sebuah blog sederhana terdiri dari elemen standar berikut:

  • Header
    Bagian untuk menyimpan judul atau logo blog
  • Menu Navigasi (opsional)
    Bagian untuk menyimpan daftar tautan penting yang ada di dalam blog
  • Post
    Bagian untuk menyimpan konten utama atau postingan blog
  • Sidebar (opsional)
    Bagian untuk menyimpan konten yang berasal dari gadget
  • Footer
    Bagian untuk menyimpan konten yang berasal dari gadget dan kredit blog

Nah kebetulan format standar diatas tadi akan kita adopsi pada pembuatan theme ini.

Let’s get started

Body & Main Wrapper

body & main wrapper

Buatlah sebuah kotak dengan posisi landscapememanjang ke samping, Anggap saja kotak tersebut adalah layar peramban—browser, dimana nantinya seluruh bagian blog akan kita simpan di dalam kotak tersebut.

Supaya tidak bingung mari kita namakan kotak tersebut sebagai body.

Elemen paling dasar yang akan disimpan dalam kotak tersebut adalah main wrapper, yaitu sebuah blok yang posisinya tepat berada di tengah body tadi.

Sudah terlihat kan kegunaan main wrapper… yaitu sebagai pembungkus konten utama.

Sebagai panduan pada sesi berikutnya kita akan memberikan ukuran dari setiap elemen yang ada pada sketsa ini. Nah sekarang mari tentukan ukuran kedua elemen tadi.

Catatan

Fyi, selain % satuan yang akan kita gunakan adalah px atau pixel.

Karena ukuran body akan menyesuaikan lebar dan tinggi alat peramban maka kita apan menggunakan % sebagai satuan ukurannya, ok beri catatan pada sketsa tadi bahwa ukuran body adalah 100%.

Untuk main-wrapper kita akan membuat lebarnya sekitar 80% dari ruang yang ada dalam body, nah jika peramban sebuah layar browser laptop sekitar 1366px maka ukuran yang pas untuk main-wrapper adalah 1200px.

Header & Menu Navigasi

header & menu nav

Elemen pertama yang akan disimpan dalam main-wrapper adalah header, yaitu ruang yang nantinya akan kita gunakan untuk menyimpan judul atau logo blog.

Buatlah sebuah kotak memanjang pada bagian dalam teratas main-wrapper, beri catatan sebagai header.

Karena lebar header ini akan dibuat penuh, maka ukurannya akan menyamai ukuran pembungkusnya (main-wrapper), yaitu 1200px.

Selanjutnya tambahkan satu lagi kotak memanjang  tepat dibawah header, yaitu kotak yang nantinya akan menyimpan elemen menu navigasi.

Untuk penamaan mari kita panggil elemen ini sebagai nav. Ukurannya kurang lebih akan dibuat sama, 1200px.

Post & Sidebar

article & aside

Berbeda dengan elemen sebelumnya yang bertumpukan, dua elemen berikut ini mempunyai posisi sejajar.

Untuk bagian posting akan kita beri nama article, sedangkan sidebar sebagai aside.

Posisikan article berada di sebelah kiri. Karena fungsinya menyimpan konten utama maka lebarnya akan dibuat lebih besar dari elemen aside yang berada disampingnya.

Komposisi yang pas biasanya 70:30, nah karena ruang yang tersedia sebanyak 1200px maka kita kira-kirakan saja bahwa 70% dari ruang kosong tersebut adalah 750px, dan 30%-nya adalah 400px.

Artinya  kita akan memberikan ruang untuk article sebesar 750px, sedangkan aside 400px.

Footer

Last but not least, kita akan menentukan elemen paling bontot yaitu footer.

Posisikan berada dipaling bawah  dari semua elemen yang ada, untuk ukurannya footer akan menyesuaikan dengan lebar ruang yang tersedia, yaitu 1200px.

gambar lengkap sketsa

Akhirnya kita sudah memiliki gambaran besar dari struktur theme yang akan kita buat, dimana posisi/letak dan ukuran elemen-elemen tersebut bisa kita jadikan panduan pada sesi berikutnya yaitu membuat layout dasar.

 

 

 

 

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *