AdelinaSasa

Privacy Perihal kami Coba Template kami
×
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

  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

Popular Minggu ini:

TAHUKAH KAMU BEDANYA iPhone BEKAS JEPANG DENGAN SINGAPORE?

Pernah dengar Rumor iPhone rakitan Jepang dan Singapore?
Terutama anda yang domisili di batam yang masih sebagai "sorganya" elektronik, kali ini khusus seken. Dari hasil pantauan saya dilapangan peminat ponsel pintar bekas semakin meningkat terutama iPhone. Well, anda datang ketempat yang benar: BATAM.

Harga sebuah iPhone 5, 5c seken sekarang hanya berkisar 900 - satu jutaan disini. Kualitas tentu saja dijamin oleh toko penjual.

Mengapa batam? Karena Batam begitu dekat dengan singapore, hanya berjarak 45 menit (aktualnya hanya 25 menit, namun karena ada peraturan kecepatan di laut perbatasan dalam kecepatan tertentu maka dipatoklah 45 menit) perjalanan santai naik ferry laut, banyak celah dan peluang bisnis, salah satunya adalah bisnis ponsel bekas ini. Jangan anda remehkan ya, omsetnya bisa mencapai ratusan juta rupiah perbulan.  Kembali kepada topik: Perbedaan iPhone seken asal Jepang dan singapore.
Secara fisik, fitur dan kemampuan tidak ada perbedaan yang essensial. Nam…

APA BEDA SONY XPERIA ZR DOCOMO DENGAN GLOBAL?

Di Indonesia terutama di Batam sedang diserbu oleh produk hape bekas besutan sony keluarga xperia, saya juga tidak mengerti mengapa seken hape ini bisa sampai banjir di negara kita yang seluas ini, kalau mau dibilang produk hape ini sudah terbilang lawas di rilis dikisaran waktu 2013 - 2015, namun speknya masih terbilang bagus, dengan kamera beresolusi 13 - 20,7 Megapixel RAM 2GB, ruang simpan yang cukup lega dikisaran 8 - 32GB, tentu sangat menarik apalagi (kalau di Batam) harganya sangat murah berkisar antara RP. 550.000,- hingga RP.800ribuan, sangat terjangkau. Dan penjualnya memberikan garansi toko, bisa juga dibeli secara online, (kamu bisa mencari nama nama toko di Facebook seperti: Putra siregar seken singapore, atau bang Juju karena nama nama ini sudah terjamin kredibilitas bisnis mereka di Batam, Putra siregar bahkan telah memiliki beberapa cabang, Pekanbaru, Jakarta, Bali dll)

Satu hal yang kamu harus tahu: baik docomo maupun global keduanya sama sama asli besutan Sony, sama…

5 SIGNS WHY YOU ARE GENIUS

IF YOU CAN USE YOUR SMARTPHONE BY RIGHT when you confuse what shall be bought a laptop or a smartphone? Just consider the bugdet that you have for now, then I guess you will buying a phone, Am I right?  But why? Because with a smarthphone you can call your mom by dial her number, or you can texting your friends and send them some messages, so many fun in just one hand. Further more a phone does have networking capacity as laptop does have, so you can also chat with your friends through the internet.
Oh yes! I can't count how many times you can use it for get pictures with your friends and send them into social media like Facebook, IG, and GPlus? That are the ordinary people way to use their phones.

Why we call you are genius one is when you can use your smartphone more than a phone. You can use it for some productivity work such as: Blogging, support working, support learning, and for some excercises. When you so curious, here we go:

Signs 1. BLOGGING
You can use your smartphone fo…