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!