ELEMEN DESAIN TEMPLATE

Saya sangat tertarik dengan desain Envanto untuk tema tema mobile yang dikhuskan buat ponsel, mereka mampu membuat homepage yang responsive dan memukau, warna warni gradasi yang indah dan mengikuti standar estiteka yang sederhana. Disana mereka juga menjual apa yang mereka sebut sebagai "Envanto Element" yang dapat mempercantik tampilan blog secara drastis. Fokus mereka adalah mobile dan mobile template yang mereka jual juga lebih banyak AMP disamping HTML klasik.

Envanto hanyalah bahan referensi saya disamping desainer dunia lainnya, untuk Indonesia saya mengidolakan mas Sugeng, kang Ismet dan Arlina, namun tentu saja kita harus memiliki teknik dan seni kita sendiri, disini jelas pengaruh envanto sangat kuat pada saat saya mencoba mendesain sebuah tema:
  • Bersih, simple
  • Tidak ada kode kotor script yang mengarah kepada directlink
  • Stabil dan dukungan update.
Prinsipnya mendesain tema itu sederhana saja, buat rencana dengan mengikuti standar pengkodean, saya biasa mencorat coret buku harian kerja di perusahaan disela sela jam istirihat jika saya bosan kepada tema yang telah saya pergunakan buat blog, atau menyuruh seseorang membuat temanya. Misalnya saya akan membuat gambar baku seperi ini: (Hanya gambaran sederhananya)
Saya jelaskan apa maksudnya:

1. Header Wrapper
Header wrapper umumnya berisi judul dan keterangan blog. Letaknya pada bagian paling atas blog, pada beberapa desainer bisa saja elemen ini dipindah asal masih sesuai dengan ketentuan kode

2. Outer Wrapper
Outer wrapper mencakupi semua elemen dalam blog. Sesungguhnya semua elemen-elemen dalam blog disusun di dalam sebuah outer wrapper ini.

3. Header Wrapper
Header wrapper umumnya terdiri dari judul dan deskripsi blog. Letaknya pada bagian paling atas blog.

4. Content Wrapper
Content wrapper meliputi main wrapper dan sidebar wrapper. Letaknya tepat di bawah header.

5. Main Wrapper
Main wrapper berisi konten atau isi blog dan dikemas dalam bentuk posting, sering utak atik data:post.body ya letaknya di situ situ saja.

6. Sidebar Wrapper
Sidebar wrapper berfungsi sebagai tempatnya dari widget blog, merupakan penunjang sekaligus pelengkap sebuah blog. Widget widget yang membuat blog menjadi lengkap dan juga indah.

7. Footer Wrapper
Footer wrapper umumnya, berisi informasi-informasi tambahan misalnya desainer template yang digunakan, kapan blog tersebut dibuat, dan pada beberapa blog juga dapat memasang widget pada footer wrapper.

DESAIN DAN REDESAIN
a. Desain
Desain berarti mendesain dari awal, dan akan memakan waktu yang lama, saya tidak berpikir orang akan melakukan desain tanpa memiliki librari pribadi terlebih dahulu. Menulis koding dengan bantuan tool online saja bisa memakan waktu berhari hari sampai 3 hari. Walaupun banyak kode css cantik tersedia secara online namun kadang ktia harus mengeditnya terlebih dahulu agar sesuai dengan rancangan kita.

"Librari" yang saya maksud adalah kumpulan - yang bisa berupa: widget, tool tool dan elemen dasar desainer yang telah  kita simpan dan siap di modifikasi untuk pembuatan sebuah template yang benar benar berbeda. Semua itu saya simpan dengan cara teratur di dalam laptop.

Saya menyimpan tool tool lazyload dan tinyPNG untuk kecepatan blog misalnya, dan menyimpan ribuan widget yang sewaktu waktu bisa saya pakai atau untuk dimodifikasi ke dalam template blog buatan saya. Semua itu gratis, bahkan kode css Meyer paling sering saya pakai kedalam template.

Membuat template juga sama dengan membuat hal lain, membuat rumah misalnya kita butuh bahan semen dan pasir yang sama, atap dan kayu yang sama dengan para desainer lain. Jadi jika masuk kedalam hutan  web dan memakai tool yang sama, apakah kita meniru? Tidak, kita hanya melakukan hal yang memang seharusnya kita lakukan, dan mereka lebih dahulu melakukannya.

Anda bisa memanfaatkan dasbor blog dengan masuk ke Edit HTML dan hapus semua kode html didalam template bawaan, dan lalu mulailah menulis rancangan anda sendiri. Keuntungan memanfaatkan dasbor blogger adalah anda dapat mengkompile langsung hasil kerja proyek desain tema anda dengan mudah, jika dia sudah benar dan tidak lagi eror berarti anda sukses menulis kode kode anda sendiri.

Google tidak melarang kita melakukan itu, dia menganjurkannya.

b. Re-desain
Kita bisa juga melakukan redesain template yang sudah ada dengan cara yang sama namun lebih cepat dan terjamin keamanannya. Hanya tinggal memperbaiki, menambah dan atau mendesain ulang beberapa aspek daripada template yang sudah ada. Perhatikan empat tema bawaan blogger pada gambar di bawah ini:
Anda sangat mengenalnya bukan?

Dan tema tema itu telah tersedia di blogger. Walaupun terbatas jumlahnya namun dapat di desain ulang sehingga benar benar tampil beda! Pilihan tema atau template juga tergantung selera masing masing orang, namun perlu diperhatikan, semakin awal urutannya, semakin baru usianya. Dan tema yang terbaru selalu membawa update yang disesuaikan dengan masa terkini. Sebaliknya semakin kebawah temanya semakin tua usianya, semakin jauh gapnya dengan masa kekinian.

Tema tema seperti: Contempo, Soho, Emperio dan Terkemuka adalah template yang dibuat mengikuti perkembangan zaman, tema tema ini sangat responsive dan mobile friendly. Dapat di buktikan melalui opsi mobile friendly tema ini berjalan paralel antara versi desktop dengan mobilenya, tidak ada setting mobile diperlukan untuk tampilan ponsel, keempat tema ini sudah otomatis menyesuaikan ukuran tampilannya disegala layar gagdet anda.

Tidak seperti tema tema yang lebih tua yang memerlukan opsi pilihan setting tema mobile, custom, atau desktop, Ke empat tema tema diatas sudah sangat responsive dan sangat mobile friendly.

Namun kalau kita tidak atau kurang menyukai tampilan monoton bawaa tema, dan ingin memeberikan sentuhan desain, tentu saja kita dapat melakukannya. Kita dapat menambahkan tool elemen font awsome kedalam template, kita dapat memberikan sentuhan yang lebih baik. Saya meberikan contoh re-desain template yang sedang kami kerjakan di dalam video dibawah ini:
Itu adalah Contempo yang satunya tampilan pada layar iPad dengan sistem operasi iOS sedangkan yang lainnya jika dia tampil pada hape Android dengan layar yang lebih kecil.
Dan saya juga merombak tampilan tema "SOHO" seperti contoh pada demo:
DEMO TEMPLATE TERKEMUKA"
Struktur kode css pada 4 template bawaan diatas sangat bersih dan ringan, salut buat pembuatnya, yang saya lakukan hanya menggunting, menambah, dan mengedit elemen kode yang telah ada, lalu menambahkan tool dan widget yang dapat menopang tampilan plus kecepatan.



Comments

  1. Template yang dipake bagiin dong

    ReplyDelete
    Replies
    1. Pakudin tapi bukan tema AMP yo..dan linknya harus dibersihkan sendiri he he he ...minta ijin Anissa dulu

      Delete
  2. Sobat jika ingin belajar tentang hal-hal seperti ini (templete, HTML, bahasa Program dan lain-lain); adakah tempat kursus yang terpercaya dan kredibel?

    ReplyDelete
    Replies
    1. Kalau belajar harus percaya pada diri sendiri. Kami banyakan belajar sendiri dengan Tekat Dan kemauan. Insyaallah zaman sekarang bisa, dicoba dulu mas

      Delete
  3. setting main wrappernya gimana mz.. masih bingung di situ

    ReplyDelete
    Replies
    1. Risna baiknya belajar gunakan bootstrap deh. Dengan bantuan tool spt ini sepertinya kita bisa "short cut" membuat desain Dan mempersingkat Waktu. Aku percaya kalau Risna pasti bisa.

      Delete

Post a Comment