Progress 1 - Desain Layout Web Template Menggunakan Photoshop

My personal blog template design, but still in PSD, or you may say it as Photoshop

Just a minute, guys. Artikel ini membahas tentang teknik mendesain template website bertema blog. Tentunya, dirancang khusus bloggers.

Walaupun tempat eksekusi template-nya masih saya rahasiakan, apakah dirancang untuk blogger dengan platform Blogspot, Wordpress, atau Tumblr, artikel ini berisi simple tutorial bagi anda yang ingin ikut belajar mendesain template website bersama saya.

Selain itu, saya mengulasnya dengan penuh perhatian dan kasih sayang tercurah pada setiap detail kalimat dan susunan paragraph. So, nantikan dan ikuti terus progress pembuatannya step by step...

Okay?!

After The Prologue

Assalamu'alaikum warahmatullah, sohib Mew da Vinci Official.

Sahabatku, kita jumpa lagi dalam artikel terbaru di blog Finally, It's Solved. Bahasan hari ini, merupakan lanjutan dari artikel berjudul, "Build A Landing Page With Skeleton", yaitu tentang cara mendesain mendesain template menggunakan HTML, CSS, dan framework Skeleton, untuk pemula.

Kabar baiknya adalah saya sudah memiliki mentor untuk membantu saya menyelesaikan permasalahan ketika merancang blog template, based on case.

Dahulukan Sketch Template Atau Memilih Framework?

Ketika saya menginformasikan bahwa saya ingin mempelajari cara pembuatan desain website atau blog template, dua pertanyaan yang diajukan kepada saya pertama kali adalah (1) sudah bisa HTML?; Dan, (2) sudah bisa CSS?

Jawaban saya adalah Ya untuk kedua pertanyaan tersebut.

Selanjutnya, saya memaparkan kendala yang kerap kali terjadi saat mendesain layout template website, yaitu hasil akhir yang tidak sesuai dengan tampilan yang saya inginkan. Artinya, permasalahan utama saya ada pada positioning dan griding.

Terdapat dua anjuran agar saya mudah memahami pelajaran membuat layout desain website template. Yaitu, pertama, saya disarankan untuk belajar nge-grid menggunakan framework populer, seperti foundation, bootstrap, atau skeleton. Anjuran lainnya, adalah dengan mengonsep terlebih dahulu tampilan website yang akan dibuat.

Langkah Pertama

Saya memulainya dari melihat-lihat tampilan template website yang telah jadi dan telah beredar di internet, seperti fonticon.com, envato.com, colorlib.com, dan ouo.io.

Website-website tersebut dikunjungi sebagai referensi, menambah kekayaan intelektual, dan mengestimasi hasil akhir yang akan diperoleh.


Langkah Kedua

Saya mencari dokumentasi framework dari beberapa pilihan yang mudah dipelajari dan mudah diterapkan.

Ada yang mengatakan bahwa, saat ini terdapat 2 frameworks populer di kalangan web developers, yaitu Bootstrap dan Foundation. Walaupun, kedua frameworks tersebut, memiliki pesaing baru yang perkembangannya cukup pesat, yaitu Skeleton. Akan tetapi, Skeleton tidak bisa melakukan nested column.


Langkah Ketiga

Akhirnya saya membuat desain layout website template dalam bentuk PSD atau Photoshop. Gambar di bawah ini merupakan desain template website bergaya news atau blog :



Homepage layout template design oleh Mew da Vinci



Nah! Sahabatku, segini dulu ya artikelnya.

Jika anda mempunyai ide desain layout template yang ingin dibagikan kepada saya dan teman-teman pembaca lainnya, silakan langsung upload gambar anda melalui kolom komentar di bawah ini, atau mention @mewdavinci di Twitter atau Instagram.

Jangan lupa subscribe atau berlangganan artikel Finally, It's Solved! untuk mendapatkan notifikasi artikel terbaru langsung ke email anda. Caranya, klik link ini, untuk registrasi email.

Oh ya, tolong bantu saya share artikel "Progress 1 - Desain Layout Web Template Menggunakan Photoshop" kepada orang-orang yang anda sayangi, melalui akun media sosial anda seperti Facebook, Twitter, Pinterest, Tumblr, dan Google Plus, karena artikel ini bermanfaat dan anda pun menyukainya.

Terima kasih telah membaca hingga akhir, dan sampai jumpa lagi ya, pada artikel selanjutnya. Wassalamu'alaikum warahmatullah!

Komentar

  1. oiya kalau stock image untuk product biasanya dapat darimana ? beli ? seperti headermu. Karena kalau asal comot, lalu dijual templatenya kan bisa jadi masalah... info2 ya, karena saya lagi nyari stock image sebagai product buat template yang saya buat...tp pake opencart... btw keren desainnya

    BalasHapus
    Balasan
    1. Stock image ya...? Hmmm... Coba cari di maxpixel. Saya belum pernah coba jualan template. Tapi, sepegalaman saya, pada template (premium), mereka gak menyertai gambar asli seperti yang ada di preview.

      Maksudnya, gini... Pas lagi preview kan, ada images yang cantik-cantik. Nah, begitu tempate itu dibeli, gambarnya diganti sama images lain. Kalau ada penggunaan ikon yang memang imagesnya harus berbayar, mereka sertakan link untuk beli ikonnya itu.

      Hapus
    2. Nah iya, yang preview itu kan tetap butuh image buat sample product biar kelihatan posisi layoutnya... itu biasanya beli imagenya kayaknya ya ? masih lagi nyari-nyari info yang buat preview-nya itu, soalnya takut asal ambil dipersoalkan pihak yang punya... nanti coba cari di maxpixel deh... thanks yo... kalau km biasanya bagian apanya ? desain mentahnya gitu ya a.k.a format psd nya

      Hapus
    3. Iya, gan... Dilihat aja lisensinya... Lewat Google Image Search juga bisa diatur preferensi lisensi gambarnya... Tinggal di-set ke Free for modifying atau no license.

      Kalau yang saya pakai buat contoh di artikel ini, saya ngambilnya dari adsense banner image sources yang saya ikuti, jadi bebas pakai.

      Aah~ saya bagian tester aja gan, karena saya gak mahir bikin template blog...

      Hapus

Posting Komentar

Apa yang Anda pikirkan setelah membaca tulisan ini?