Technology

Membuat Desain Banner Ads yang Elegan dengan Prinsip “Rule Of Third”

 

   

Bagi Anda yang sudah mengenal fotografi, pasti sudah mengenal istilah “Rule of Third” atau Aturan 1/3 bagian. Yaitu petunjuk bagaimana caranya memposisikan obyek di 1/3 bagian foto agar lebih enak dilihat.

1-rule-of-third

Anda dapat menggunakan 2/3 bagian dari frame foto untuk object utama, dan menyisakan 1/3 nya sebagai object pendukung.

Rupanya, “Rule of third” juga dapat diterapkan seorang designer ketika mendesign sebuah banner ads untuk website. “Rule of third” akan jauh memudahkan mereka melakukan layouting pada banner ads di website kita. Di sini, kita akan belajar bagaimana mengaplikasikannya, terutama untuk banner ads berbentuk landscape yang sangat cocok menggunakan panduan rule of third.

1. Siapkan foto dengan panduan Rule Of third. Misalnya disini, saya menggunakan foto Fashion.

2-rule-of-third

2. Sesuaikan ukuran banner website dengan ukuran banner yang akan kita buat. agar ketika kita upload dan diterapkan di website kita, banner yang kita buat tidak mengalami stretch dan merusak tampilan banner. Misalnya ukuran yang digunakan oleh website tester saya adalah 1000 x 372 pixel.

3-rule-of-third

3. Anda akan memiliki sebuah lembar kerja berukuran 1000 x 372 pixel di Photoshop anda. Sekarang buka foto product anda dan masukkan ke lembar kerja kosong Photoshop anda. Apabila foto product anda terlalu besar atau terlalu kecil dan anda ingin resize, jangan lupa aktifkan fitur “convert to smart object” dulu agar foto product anda tidak rusak (ngeblur/pecah).

4-rule-of-third

4. Atur sedemikian rupa agar foto tetap mematuhi panduan Rule of Third.

5-rule-of-third

5. Tambahkan deskripsi atau Informasi lain seputar product anda, misalnya discount, atau promo lainya. Sesuaikan tipografi dengan style website anda.

6. Apabila ada object dalam foto yang mengganggu keterbacaan (readability) informasi yang ingin anda sampaikan, anda bisa memblok informasi tersebut. Misalnya beri warna lebih gelap atau anda bisa memilih menggunakan warna solid atau transparancy. Di sini, saya menggunakan warna ungu (#b0047e) dengan transparancy 50%.

7. Tambahkan kalimat “Call To Action”, yaitu apa yang ingin dilakukan customer terhadap product anda. Misalnya “Shop Now!”, “Beli Sekarang!”, “Lihat Selengkapnya”, dan lain-lain.

6-rule-of-third

8. Mari kita uji dengan diterapkan di website kita.

7-rule-of-third

Selamat mencoba :-)

Dapatkan Segera! Video Marketplace Domination: Cara Sukses Jualan di Tokopedia dan Bukalapak. Download Now!


Artikel Terkait

2 komentar

  • 10 April 2014 - pukul 3:00

    Semua info yang ada di blog ini sangat bermanfaat untuk saya sebagai seorang yang awam di dunia bisnis online. Oia mas, kapan-kapan share dong ” template toko online paling elegan di dunia ” atau ” cara membuat template toko online agar elegan “.

    hehe saya selalu pantengin blog ini mas, salam kenal :D

    • Administrator
      10 April 2014 - pukul 6:06

      Oke Pak, kami akan coba angkat tentang materi yang Bapak butuhkan :) Terimakasih sudah setia membaca Mebiso :) Semoga Bermanfaat :D

Berikan Komentar

Your email address will not be published. Required fields are marked *