panduan kualitas konten dan gambar produk - advance · ukuran dan komposisi background 1 warna foto...

52
Panduan Kualitas Konten dan Gambar Produk - Advance Penting : Hanya dapat dibuka pada komputer & laptop (tidak pada Ipad dan HP) Browser : Google Chrome (Disarankan) Mohon mengikuti pelatihan sampai selesai agar tidak kehilangan informasi penting.

Upload: dokiet

Post on 10-Mar-2019

230 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Panduan Kualitas Konten dan Gambar Produk - Advance · Ukuran dan Komposisi Background 1 warna Foto menggunakan model ... Anda akan melihat kode HTML deskripsi produk Anda. Klik CTRL

Panduan Kualitas Konten dan Gambar Produk - Advance

• Penting : Hanya dapat dibuka pada komputer & laptop (tidak pada Ipad dan HP)

• Browser : Google Chrome (Disarankan)

Mohon mengikuti pelatihan sampai selesai agar tidak kehilangan informasi penting.

Page 2: Panduan Kualitas Konten dan Gambar Produk - Advance · Ukuran dan Komposisi Background 1 warna Foto menggunakan model ... Anda akan melihat kode HTML deskripsi produk Anda. Klik CTRL

Agen

Agenda

Panduan Gambar

Panduan Deskripsi

Agenda Pelatihan

Page 3: Panduan Kualitas Konten dan Gambar Produk - Advance · Ukuran dan Komposisi Background 1 warna Foto menggunakan model ... Anda akan melihat kode HTML deskripsi produk Anda. Klik CTRL

Ukuran dan

Komposisi

Spesifikasi dan

Pemosisian GambarFungsi dan

Fitur

Syarat Gambar yang

Baik

Perjelas Fitur

Utama Produk

Panduan Gambar

Page 4: Panduan Kualitas Konten dan Gambar Produk - Advance · Ukuran dan Komposisi Background 1 warna Foto menggunakan model ... Anda akan melihat kode HTML deskripsi produk Anda. Klik CTRL

Gambar yang baik tentunya akan

merepresentasikan produk yang lebih efektif.

Page 5: Panduan Kualitas Konten dan Gambar Produk - Advance · Ukuran dan Komposisi Background 1 warna Foto menggunakan model ... Anda akan melihat kode HTML deskripsi produk Anda. Klik CTRL

Peran Gambar Produk dalam Online Marketing

1. Menarik perhatian pelanggan secara visual

2. Mempengaruhi keputusan pelanggan untuk membeli

3. Menunjukkan dedikasi dan profesionalisme seller

4. Memberikan kesan yang baik kepada pelanggan

Page 6: Panduan Kualitas Konten dan Gambar Produk - Advance · Ukuran dan Komposisi Background 1 warna Foto menggunakan model ... Anda akan melihat kode HTML deskripsi produk Anda. Klik CTRL

= ×

Deskripsi ProdukGambar

Nama Produk

Harga

PENJUALANTAMPILAN PRODUK

CONVERSION RATE

Page 7: Panduan Kualitas Konten dan Gambar Produk - Advance · Ukuran dan Komposisi Background 1 warna Foto menggunakan model ... Anda akan melihat kode HTML deskripsi produk Anda. Klik CTRL

1. Fungsi dan Fitur

Gambar yang tampil di hadapan pelanggan adalahgambar utama dari produk Anda

• Tampilkan foto terbaik Anda sebagai gambar pertama

• Gambar yang baik dapat menarik perhatian pelangganpada halaman pencarian

• Semakin banyak pelanggan yang melihat, tentunyasemakin besar kemungkinan pelanggan membeli.

Page 8: Panduan Kualitas Konten dan Gambar Produk - Advance · Ukuran dan Komposisi Background 1 warna Foto menggunakan model ... Anda akan melihat kode HTML deskripsi produk Anda. Klik CTRL

Ukuran dan

Komposisi

Spesifikasi dan

Pemosisian Gambar

Fungsi dan

Fitur

Syarat Gambar yang

Baik

Perjelas Fitur

Utama Produk

Agenda

Page 9: Panduan Kualitas Konten dan Gambar Produk - Advance · Ukuran dan Komposisi Background 1 warna Foto menggunakan model ... Anda akan melihat kode HTML deskripsi produk Anda. Klik CTRL

2. Ukuran dan Komposisi

• Gambar tidak kurang dari 500 x 500 px dantidak lebih dari 2000 x 2000 px, sesuaidengan standar ketentuan Lazada.

• Format yang diterima adalah JPG, PNG, atau GIF.

• Berbentuk persegi tanpa bingkai.

• Buat proporsi rasio 1:1

• Warna background satu saja

Page 10: Panduan Kualitas Konten dan Gambar Produk - Advance · Ukuran dan Komposisi Background 1 warna Foto menggunakan model ... Anda akan melihat kode HTML deskripsi produk Anda. Klik CTRL

2. Ukuran dan Komposisi

Background 1 warna Foto menggunakan model

agar lebih menarik Produk yang ditampilkan jelas

Mana yang lebih menarik?

Page 11: Panduan Kualitas Konten dan Gambar Produk - Advance · Ukuran dan Komposisi Background 1 warna Foto menggunakan model ... Anda akan melihat kode HTML deskripsi produk Anda. Klik CTRL

2. Ukuran dan Komposisi

Objek yang terlalubanyak

Tulisan yang menutupgambar

Gambarterpotong

Potret yang tidak

menyeluruh

H I N D A R I!

Page 12: Panduan Kualitas Konten dan Gambar Produk - Advance · Ukuran dan Komposisi Background 1 warna Foto menggunakan model ... Anda akan melihat kode HTML deskripsi produk Anda. Klik CTRL

Ukuran dan

Komposisi

Spesifikasi dan

Pemosisian

Gambar

Fungsi dan

Fitur

Syarat Gambar yang

Baik

Perjelas Fitur

Utama Produk

Agenda

Page 13: Panduan Kualitas Konten dan Gambar Produk - Advance · Ukuran dan Komposisi Background 1 warna Foto menggunakan model ... Anda akan melihat kode HTML deskripsi produk Anda. Klik CTRL

3. Spesifikasi dan Pemosisian Gambar

LINEAR

Page 14: Panduan Kualitas Konten dan Gambar Produk - Advance · Ukuran dan Komposisi Background 1 warna Foto menggunakan model ... Anda akan melihat kode HTML deskripsi produk Anda. Klik CTRL

3. Spesifikasi dan Pemosisian Gambar

TRIANGULAR

Page 15: Panduan Kualitas Konten dan Gambar Produk - Advance · Ukuran dan Komposisi Background 1 warna Foto menggunakan model ... Anda akan melihat kode HTML deskripsi produk Anda. Klik CTRL

3. Spesifikasi dan Pemosisian Gambar

DIAGONAL

Page 16: Panduan Kualitas Konten dan Gambar Produk - Advance · Ukuran dan Komposisi Background 1 warna Foto menggunakan model ... Anda akan melihat kode HTML deskripsi produk Anda. Klik CTRL

3. Spesifikasi dan Pemosisian Gambar

FADE OUT

Page 17: Panduan Kualitas Konten dan Gambar Produk - Advance · Ukuran dan Komposisi Background 1 warna Foto menggunakan model ... Anda akan melihat kode HTML deskripsi produk Anda. Klik CTRL

3. Spesifikasi dan Pemosisian Gambar

FAN SHAPE

Page 18: Panduan Kualitas Konten dan Gambar Produk - Advance · Ukuran dan Komposisi Background 1 warna Foto menggunakan model ... Anda akan melihat kode HTML deskripsi produk Anda. Klik CTRL

3. Spesifikasi dan Pemosisian Gambar

FRAME

Page 19: Panduan Kualitas Konten dan Gambar Produk - Advance · Ukuran dan Komposisi Background 1 warna Foto menggunakan model ... Anda akan melihat kode HTML deskripsi produk Anda. Klik CTRL

3. Spesifikasi dan Pemosisian Gambar

CIRCULAR

Page 20: Panduan Kualitas Konten dan Gambar Produk - Advance · Ukuran dan Komposisi Background 1 warna Foto menggunakan model ... Anda akan melihat kode HTML deskripsi produk Anda. Klik CTRL

3. Spesifikasi dan Pemosisian Gambar

LAINNYA

Page 21: Panduan Kualitas Konten dan Gambar Produk - Advance · Ukuran dan Komposisi Background 1 warna Foto menggunakan model ... Anda akan melihat kode HTML deskripsi produk Anda. Klik CTRL

Ukuran dan

Komposisi

Spesifikasi dan

Pemosisian Gambar

Fungsi dan

Fitur

Syarat Gambar

yang Baik

Perjelas Fitur

Utama Produk

Agenda

Page 22: Panduan Kualitas Konten dan Gambar Produk - Advance · Ukuran dan Komposisi Background 1 warna Foto menggunakan model ... Anda akan melihat kode HTML deskripsi produk Anda. Klik CTRL

4. Syarat Gambar yang Baik

Pastikan gambarterlihat jelas dan

tajam danmemenuhi minimum

resolusi yang diharuskan

Page 23: Panduan Kualitas Konten dan Gambar Produk - Advance · Ukuran dan Komposisi Background 1 warna Foto menggunakan model ... Anda akan melihat kode HTML deskripsi produk Anda. Klik CTRL

4. Syarat Gambar yang Baik

Gambar yang kurang terekspos, atau yang terlalu terekspos sebaiknya dieditkembali agar memiliki komposisi yang pas

Page 24: Panduan Kualitas Konten dan Gambar Produk - Advance · Ukuran dan Komposisi Background 1 warna Foto menggunakan model ... Anda akan melihat kode HTML deskripsi produk Anda. Klik CTRL

4. Syarat Gambar yang Baik

Tampilkan produk dari berbagai sudut

× √

Page 25: Panduan Kualitas Konten dan Gambar Produk - Advance · Ukuran dan Komposisi Background 1 warna Foto menggunakan model ... Anda akan melihat kode HTML deskripsi produk Anda. Klik CTRL

Ukuran dan

Komposisi

Spesifikasi dan

Pemosisian Gambar

Fungsi dan

Fitur

Syarat Gambar yang

Baik

Perjelas Fitur

Utama Produk

Agenda

Page 26: Panduan Kualitas Konten dan Gambar Produk - Advance · Ukuran dan Komposisi Background 1 warna Foto menggunakan model ... Anda akan melihat kode HTML deskripsi produk Anda. Klik CTRL

5. Perjelas Fitur Utama Produk

Page 27: Panduan Kualitas Konten dan Gambar Produk - Advance · Ukuran dan Komposisi Background 1 warna Foto menggunakan model ... Anda akan melihat kode HTML deskripsi produk Anda. Klik CTRL

Agen

Agenda

Panduan Gambar

Panduan Deskripsi

Agenda Pelatihan

Page 28: Panduan Kualitas Konten dan Gambar Produk - Advance · Ukuran dan Komposisi Background 1 warna Foto menggunakan model ... Anda akan melihat kode HTML deskripsi produk Anda. Klik CTRL

• Menjelaskan spesifikasi produk lebih

detail

• Mempercantik halaman produk Anda

• Menarik pelanggan

Pengaruh Deskripsi Produk

Page 29: Panduan Kualitas Konten dan Gambar Produk - Advance · Ukuran dan Komposisi Background 1 warna Foto menggunakan model ... Anda akan melihat kode HTML deskripsi produk Anda. Klik CTRL

Pentingnya Deskripsi Produk

Page 30: Panduan Kualitas Konten dan Gambar Produk - Advance · Ukuran dan Komposisi Background 1 warna Foto menggunakan model ... Anda akan melihat kode HTML deskripsi produk Anda. Klik CTRL

Contoh Deskripsi Produk Standar

Page 31: Panduan Kualitas Konten dan Gambar Produk - Advance · Ukuran dan Komposisi Background 1 warna Foto menggunakan model ... Anda akan melihat kode HTML deskripsi produk Anda. Klik CTRL

Contoh Deskripsi Produk Superstar

Page 32: Panduan Kualitas Konten dan Gambar Produk - Advance · Ukuran dan Komposisi Background 1 warna Foto menggunakan model ... Anda akan melihat kode HTML deskripsi produk Anda. Klik CTRL
Page 33: Panduan Kualitas Konten dan Gambar Produk - Advance · Ukuran dan Komposisi Background 1 warna Foto menggunakan model ... Anda akan melihat kode HTML deskripsi produk Anda. Klik CTRL

Berdasarkan Pola Belanja Pelanggan

Pengaturan Informasi pada Deskripsi Anda

Tahap 1 – PemasaranInformasikan spesifikasi dan keunggulan produk Anda secara detail. Tampilkan pula manfaat danperkuat dengan survey pelanggan.

Tahap 2 – Konsep dan DesainTambahkan pemanis seperti video dan gambar yang mampu menjelaskan produk Anda lebih detail. Tentunya, hal ini akan membuat pelanggan menjadi lebih tertarik untuk membeli.

Tahap 3 – Informasi LainnyaInformasikan kepada pelanggan mengenai garansi produk dan dimana pelanggan dapat mengklaimgaransi.

Page 34: Panduan Kualitas Konten dan Gambar Produk - Advance · Ukuran dan Komposisi Background 1 warna Foto menggunakan model ... Anda akan melihat kode HTML deskripsi produk Anda. Klik CTRL

Bagaimana Caranya?

• Spesifikasi Produk: warna, fitur, keunggulan, manfaat.

• Instruksi Pembelian: informasi garansi, promosi, dan informasi

service center.

• Instruksi Penggunaan: berikan istruksi cara-cara menggunakan

produk.

Masukkan Informasi Dasar dalam Deskripsi1

Page 35: Panduan Kualitas Konten dan Gambar Produk - Advance · Ukuran dan Komposisi Background 1 warna Foto menggunakan model ... Anda akan melihat kode HTML deskripsi produk Anda. Klik CTRL

Bagaimana Caranya?

Percantik dengan menggunakan video dan gambar! Aturkonten deskripsi, berapa banyak fitur produk dan gambar serta

video yang dapat Anda gunakan?

Komposisi Model Deskripsi2

Page 36: Panduan Kualitas Konten dan Gambar Produk - Advance · Ukuran dan Komposisi Background 1 warna Foto menggunakan model ... Anda akan melihat kode HTML deskripsi produk Anda. Klik CTRL

Buat permainan dengan warna untuk foto deskripsi Anda

Warna logo atau warna

produk

Warna gambar

pada deskripsi

Standar Deskripsi – Komposisi Warna

Page 37: Panduan Kualitas Konten dan Gambar Produk - Advance · Ukuran dan Komposisi Background 1 warna Foto menggunakan model ... Anda akan melihat kode HTML deskripsi produk Anda. Klik CTRL

Deskripsi Produk

Masukkan topik yang

dikeluhkan oleh

pelanggan. Perkuat

dengan survey.

Solusi yang ditawarkan

oleh brand

Masalah yang

dihadapi

pelanggan

Page 38: Panduan Kualitas Konten dan Gambar Produk - Advance · Ukuran dan Komposisi Background 1 warna Foto menggunakan model ... Anda akan melihat kode HTML deskripsi produk Anda. Klik CTRL

Deskripsi Produk

Keunggulan

produk

Pembuktian bahwa

produk aman

dikonsumsi

Page 39: Panduan Kualitas Konten dan Gambar Produk - Advance · Ukuran dan Komposisi Background 1 warna Foto menggunakan model ... Anda akan melihat kode HTML deskripsi produk Anda. Klik CTRL

Ukuran Pada website Lazada, maksimal lebar gambar adalah 900 piksel.

Resolusi Berikan resolusi yang jelas agar gambar tidak pecah.

Standar Deskripsi – Gambar

Image Hosting Pastikan Anda menggunakan layanan image hosting gratis atau

berbayar yang tepat agar gambar bisa selalu tayang.

Page 40: Panduan Kualitas Konten dan Gambar Produk - Advance · Ukuran dan Komposisi Background 1 warna Foto menggunakan model ... Anda akan melihat kode HTML deskripsi produk Anda. Klik CTRL

Gunakan huruf kapital yang tepat

Gunakan margin yang rapi dan sesuai

Maksimalkan fitur bold untuk menonjolkan poin-poin

penting

Standar Deskripsi – Teks

Page 41: Panduan Kualitas Konten dan Gambar Produk - Advance · Ukuran dan Komposisi Background 1 warna Foto menggunakan model ... Anda akan melihat kode HTML deskripsi produk Anda. Klik CTRL

Kesalahan Umum Terkait Pengaturan Informasi

Apakah deskripsi produk yang lebih panjang lebih baik?

Jika pelanggan tidak sepenuhnya tertarik, sebaiknya jangan membuat deskripsi panjang

dengan begitu saja. Apabila fitur-fitur produk bisa dijelaskan dengan padat, deskripsi yang

pendek namun kuat lebih baik.

Apakah semua informasi harus dicantumkan?

Banyaknya porsi informasi yang digunakan tergantung pada perlu atau tidaknya produk

tersebut dibuat menjadi lebih progresif.

Pengaturan Informasi pada Deskripsi Anda

Page 42: Panduan Kualitas Konten dan Gambar Produk - Advance · Ukuran dan Komposisi Background 1 warna Foto menggunakan model ... Anda akan melihat kode HTML deskripsi produk Anda. Klik CTRL

Cara Input Gambar pada Deskripsi

Tools

Browser: Mozilla Firefox

Cloud: Google Photo

HTML Editor: http://htmleditor.in/index.html

Sebelum mengunggah foto, kami merekomendasikan Anda untuk

menggunakan Mozilla Firefox ketika melakukkan proses penambahan

gambar ataupun video untuk menghindari kesalahan HTML yang biasa

terjadi jika menggunakan Google Chrome.

Page 43: Panduan Kualitas Konten dan Gambar Produk - Advance · Ukuran dan Komposisi Background 1 warna Foto menggunakan model ... Anda akan melihat kode HTML deskripsi produk Anda. Klik CTRL

Langkah 1

Buka dan masuk ke https://photos.google.com/

Ketika sudah terbuka dan sudah masuk, akan tampak halaman berikut di browser Anda:

Page 44: Panduan Kualitas Konten dan Gambar Produk - Advance · Ukuran dan Komposisi Background 1 warna Foto menggunakan model ... Anda akan melihat kode HTML deskripsi produk Anda. Klik CTRL

Langkah 2

Klik ikon awan pada bagian atas.

Page 45: Panduan Kualitas Konten dan Gambar Produk - Advance · Ukuran dan Komposisi Background 1 warna Foto menggunakan model ... Anda akan melihat kode HTML deskripsi produk Anda. Klik CTRL

Langkah 3

Pilih foto yang ingin Anda unggah. Kemudian tunggu hingga semua foto berhasil terunggah. Setelah Anda mengklik tanda (X), Anda dapat menemukan gambar yang Anda unggah pada album yang Anda pilih.

Page 46: Panduan Kualitas Konten dan Gambar Produk - Advance · Ukuran dan Komposisi Background 1 warna Foto menggunakan model ... Anda akan melihat kode HTML deskripsi produk Anda. Klik CTRL

Langkah 4

Siapkan deskripsi produk Anda. Salin pada online HTML Editor. Anda dapat menggunakan http://htmleditor.in/index.html. Kemudian, posisikan sesuai dengan kebutuhan dan selera Anda. Pada contoh, gambar akan ditaruh di posisi tengah yang ditandai dengan kotak merah.

Page 47: Panduan Kualitas Konten dan Gambar Produk - Advance · Ukuran dan Komposisi Background 1 warna Foto menggunakan model ... Anda akan melihat kode HTML deskripsi produk Anda. Klik CTRL

Langkah 5

Kembali ke Google Photo dan pilih foto yang akan dimasukkan ke dalam deskripsi produk. Setelah dibuka (akan tampak background berwarna hitam), klik kanan dan pilih Copy Image Address.

Page 48: Panduan Kualitas Konten dan Gambar Produk - Advance · Ukuran dan Komposisi Background 1 warna Foto menggunakan model ... Anda akan melihat kode HTML deskripsi produk Anda. Klik CTRL

Langkah 6

Kembali ke HTML Editor. Lalu, foto yang sudah di-copy, di-paste di HTML Editor pada posisi sesuai dengan selera dan kebutuhan Anda. Klik ikon Image pada tab:

Lalu akan muncul box:

Setelah muncul box, paste URL yang telah Anda copy ke

box URL. Pastikan lebar foto tidak lebih dari 800 piksel

(diisi pada boks Width atau sesuaikan kolom Height

apabila gambar Anda memiliki ukuran yang cukup

panjang). Hal ini dikarenakan standar layout website

Lazada mampu memuat lebar maksimal 850 piksel.

Kemudian, klik OK.

Page 49: Panduan Kualitas Konten dan Gambar Produk - Advance · Ukuran dan Komposisi Background 1 warna Foto menggunakan model ... Anda akan melihat kode HTML deskripsi produk Anda. Klik CTRL

Langkah 7

Kini, foto tersebut telah tertera pada deskripsi produk Anda seperti gambar di bawah ini:

Page 50: Panduan Kualitas Konten dan Gambar Produk - Advance · Ukuran dan Komposisi Background 1 warna Foto menggunakan model ... Anda akan melihat kode HTML deskripsi produk Anda. Klik CTRL

Langkah 8

Kemudian, salin seluruh HTML yang telah Anda buat dengan cara klik tombol Source pada bagian pojok kiri atas:

Kemudian, Anda akan melihat kode HTML deskripsi produk Anda. Klik CTRL + A untuk memblok seluruh kode, lalu copy dan paste pada deskripsi produk Seller Center

Page 51: Panduan Kualitas Konten dan Gambar Produk - Advance · Ukuran dan Komposisi Background 1 warna Foto menggunakan model ... Anda akan melihat kode HTML deskripsi produk Anda. Klik CTRL

Langkah 9

Untuk paste ke Seller Center, pada kotak Product Description, klik kotak berwarna biru dengan tulisan HTML pada bagian pojok kiri atas.

Lalu, akan terlihat kode HTML seperti ini:

Hapus semua lalu paste HTML yang telah Anda copy dari HTML Editor ke box pada Seller Center seperti gambar di atas. Kemudian, klik Finish Editing.

Page 52: Panduan Kualitas Konten dan Gambar Produk - Advance · Ukuran dan Komposisi Background 1 warna Foto menggunakan model ... Anda akan melihat kode HTML deskripsi produk Anda. Klik CTRL

Terima kasih

• Mohon mengisi formulir feedback setelah pelatihan berakhir