Behind the scene of www.popurialbumdesign.com

Akhir minggu ini makeover website album design saya jadi salah satu fokus kerjaan. Jadi gini, sebagian dari pekerjaan freelance saya adalah sebagai album designer. Klien saya adalah fotografer yang perlu didesainkan album untuk klien mereka. Untuk menunjang eksistensi saya sebagai album designer (uhuk!) saya maintain sebuah business website www.popurialbumdesign.com.

Sebenarnya website ini sudah ada sejak (agak) lama, tapi beberapa bulan belakangan agak tidak terurus.

Salah satu sebabnya adalah karena saya sadar business website design ini perlu re-design dan secara bisnis-nya sendiri juga ada sedikit perubahan, jadi perlu makeover baik dari sisi desain maupun konten tapi saya belum yakin mau digimanain itu website 😀 Jadilah diset ke maintenance mode terus. Sayang juga sebenarnya karena pasti traffic jadi drop kalo maintenance terlalu lama.

Alhamdulillah minggu ini dapat ide dan bisa segera dilaksanakan. Dan kemarin sudah bisa live kembali websitenya, horeeee ^_^ Nah di post kali ini saya mau cerita sedikit mengenai makeover website ini.

Website www.popurialbumdesign.com berbasis self-hosted WordPress; domainnya dulu beli di IDWebhost dan hostingnya di Bigscoots.com. Untuk parent theme saya pakai Genesis Framework, dan child theme-nya Modern Portfolio Pro.

Kenapa pakai premade theme, ngga custom design aja?

Simpel sih, karena ada premade theme yang overall saya suka desain-nya, sehingga bisa sangat menghemat waktu development. Karena untuk membangun business website (apalagi untuk diri sendiri) banyak yang harus diurusi; dari sisi desain, development, konten, copywriting dan lain-lain.

Dan menurut pengalaman saya sendiri, building website from scratch itu mudah kena analysis paralysis; maksudnya saking banyaknya opsi malah jadi bingung mau pakai warna apa, font yang mana, layout seperti apa dll dan akhirnya website-nya ngga selesai-selesai.

Jadi dalam hal ini saya membatasi opsi yang tersedia dengan child theme yang saya pilih. Font-nya cocok, warna oke cuma perlu di-tweak sedikit, layout homepage sudah cakep. Waktu development jadi lebih singkat.

Aneka plugin yang digunakan

Plugin yang saya gunakan di website ini antara lain :

1. WordPress SEO by Yoast.
2. Genesis Extender. Buat saya yang non-coder, plugin ini sudah seperti swiss army knife untuk kustomisasi Genesis. Bisa untuk membuat widgetized homepage, custom function (jadi menambahkan code snippet di functions.php bisa lewat admin WordPress secara aman ngga perlu lewat FTP), front-end css editor (jadi efek perubahan css bisa langsung dilihat secara live). Banyak deh manfaatnya buat saya, kalau dijabarkan semua bisa jadi postingan tersendiri.
3. Beaver Builder. Ini satu lagi plugin kesayangan selain Genesis Extender. Powerful banget untuk mengatur layout baik di Post maupun Pages. Contohnya bisa dilihat di laman About, Album Design Service, dan Free Design Trial saya buat pakai Beaver Builder. Sekali lagi, untuk non-coder seperti saya plugin ini membantu banget. Bisa lebih cepat membuat layout yang diinginkan dengan drag and drop saja tanpa coding. Tanpa coding!

   

   

   

    

4. Ninja Forms. Saya pakai plugin ini untuk membuat 3 form yang ada di website; yaitu Contact Form (untuk general enquiry), Free Design Trial, dan Become A Client Form.
5. WP Canvas Gallery. Sampai saat ini, inilah gallery plugin pilihan saya. Gambar-gambar layout / desain album di postingan saya buat pakai plugin ini. Baca tutorialnya di sini.
6. Genesis Simple Share. Sharing plugin dari Studiopress yang saya pasang di bawah setiap post.
7. Genesis Simple Edits. Plugin untuk memodifikasi post info dan footer credit di Genesis tanpa coding.

Selebihnya plugin-plugin standar : Akismet (penangkal spam comments), Black Studio TinyMCE Widget, EWWW Image Optimizer (baca di sini), Genesis Sandbox Featured Content Widget, Regenerate Thumbnails, WP-Optimize. Banyak ya hehehe…

Ga takut jadi lambat karena kebanyakan plugin?

Insya Allah kalo pake plugin original dan berkualitas ngga akan memberatkan server.

Kecuali mungkin yang  memang perlu resource besar seperti plugin WooCommerce untuk jualan; pasti ada impact juga ke server. Makanya perlu hosting yang bagus :D. Yang penting dijaga agar selalu update dan kalau ada plugin ngga dipakai ya dihapus saja.

Apa saja yang di-tweak dari child theme Modern Portfolio Pro?

Styling Ninja Forms
Untuk styling Ninja Forms, saya ngga cocok sama styling bawaan child theme Modern Portfolio Pro jadi saya copy css-nya dari Modern Studio Pro (yang saya pakai di almazia.co).

Background color untuk #About dan #Services di homepage.
Aslinya backgroundnya warna hitam. Supaya agak cantik sedikit saya ganti jadi warna teal.

Ukuran font, character dan line spacing
Saya sudah suka dengan pilihan font-nya yaitu Lato; font sans serif untuk body dan Merriweather; font serif untuk headings. Tapi buat saya body font-nya terlalu besar (aslinya 18px) jadi saya kecilin dan saya tambahkan space antar karakter dan antar baris supaya terlihat lebih light dan enak dibaca.

Pakai apa? Pakai fitur front-end css editor dari plugin Genesis Extender, ditambah fungsi Inspect Element dari browser Chrome untuk mengetahui selector yang harus dipakai di css-nya.

Footer Widget
Di sini footer widget-nya nggak saya pakai

Footer credit
Footer credit original terlalu standar. Saya ubah sedikit pakai plugin Genesis Simple Edit. Karena mau pakai icon “heart” jadinya perlu tambahan loading dashicons; dan dijadikan warna merah dengan penambahan kode css. Terima kasih om Brian Gardner untuk tutorial-nya.

Yak kira-kira seperti itulah behind the scene website popurialbumdesign yang baru. Peer selanjutnya adalah mendatangkan traffic (potential client) ke website tersebut.