Skip to main content

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

Popular posts from this blog

INI DIA 9 SITUS TEMPAT BELAJAR KODING TERBAIK

Selagi kalian masih muda, dan kalian terbiasa mengoperasikan komputer: Laptop, Desktop, iPad, Tablet dan bahkan Smart-phone, maka sesungguhnya kalian memiliki kesempatan yang sangat besar untuk tetap bisa belajar layaknya sekolah formal namun melalui jalan online!
Belajar Online? Mengapa tidak? Tidak ada yang salah dengan belajar online. Kalau bisnis online terbukti sukses, belanja online juga bisa, mengapa harus tertutup kesempatan belajar online? Tidak banyak alasan untuk menolaknya, sekalipun masih ada orang berpikirnya begini: Tidak afdol kalau belajar online, harus melalui guru langsung.

Itu namanya paradigma lama, saya belajar secara online, tanpa guru dan walaupun belum terlalu menguasai pelajaran koding seperti yang telah saya targetkan, namun saya telah menguasai beberapa bahasa program web tanpa keluar uang sepeserpun selain hanya waktu dan quota internet. Saran saya jangan mempersulit diri kita sendiri dengan banyak alasan untuk tidak belajar. Hari segini bisnis saja tanpa at…

MENGAPA POWERED BY BLOGGER ITU PENTING BAGI GOOGLE?

Blogger menggunakan ikon, ikon yang dipergunakannya adalah tipe SVG, sebenarnya banyak jenis jenis ikon yang bisa kita pergunakan, misalnya yang paling populer adalah ikon font awsome, namun jika memilih menggunakan font awsome kita harus memasang script link eksternal ke dalam template blogger kita. Hal ini akan membebani loading atau kecepatan halaman blog saat dijalankan di internet.

Nah itulah sebabnya mengapa blogger secara default tidak menggunakan font awsome yang cantik dan memiliki banyak ikon tersebut. Blogger secara default menggunakan SVG yang jauh lebih ringan, dapat berjalan pada semua browser utama.

Ikon pada atribusi dan kredit blogger adalah "trademark" special platform blogger, jadi tidaklah bijaksana menghapus ikon tersebut (walaupun Google tidak secara jelas melarangnya atau memperbolehkannya, meskipun template anda buat dari NOL. Mengapa? Alasannya adalah:
Anda tidak akan membuat template blogger kalau platform blogger itu sendiri tidak ada. Platform Blogge…

QUORA: PEKERJAAN PALING ENAK DAN SANTAI NAMUN GAJINYA BESAR

Quora adalah sebuah situs tempat bertanya dan menjawab: Dari sekian ton pertanyaan dan jawaban saya menemukan jawaban menggelitik seputar profesi anggota DPR dan Pegawai negeri, panasaran? Simak saja:

1. ANGGOTA DPR
Jawaban terbaik untuk pertanyaan ini tentu saja adalah pekerjaan mulia yang digawangi oleh para wakil rakyat Indonesia di gedung DPR-RI. Pekerjaan sebagai anggota DPR. Saya (Anissa) tergoda untuk mencontek langsung tulisan yang bersumber dari quora ini:

Gaji dan tunjangan tetap Gaji Pokok = Rp 4.200.000 Tunjangan Istri (10% GP) = Rp 420.000 Tunjangan Anak (2 anak x 2% GP) = Rp 168.000 Uang sidang / Paket = Rp 2.000.000 Tunjangan Jabatan = Rp 9.700.000 Tunjangan Beras Rp 30.090 per jiwa per bulan Tunjangan PPH pasal 21= Rp 2.699.813 Penerimaan lain:
Penerimaan lain Tunjangan Kehormatan: Rp 5.580.000 Tunjangan Komunikasi Intensif = Rp. 15.554.000 Tunjangan Peningkatan Fungsi Pengawasan dan Anggaran = Rp 3.750.000 Bantuan Langganan Listrik dan Telepon = Rp 7.700.000 Asisten Anggo…