Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Adobe Photoshop
Webdesign

Desain Tema Shopify untuk Barang-barang Kerajinan Tangan pada Photoshop

by
Difficulty:IntermediateLength:MediumLanguages:

Indonesian (Bahasa Indonesia) translation by Wasmia Mia (you can also view the original English article)

Final product image
What You'll Be Creating

Pada tutorial kali ini kita akan membuat tata letak untuk toko barang-barang kerajinan tangan.  Saya tidak akan berbicara banyak tentang ukuran font spesifik atau kode-kode warna, tetapi saya akan lebih berfokus dalam menjelaskan pilihan font, warna, proporsi, dan lain-lain.

Properti Tutorial

Untuk mengikuti tutorial ini Anda akan membutuhkan beberapa properti (tersedia secara gratis):

Mendefinisikan Tujuan Bisnis

Sebelum memulai untuk mendesain tata letak Anda, Anda perlu lebih dulu mengenali tujuan bisnis dari latihan ini.  Apakah prioritas teratas Anda untuk menambahkan kesadaran terhadap merk dagang Anda?  Apakah untuk menjual produk pada pelanggan baru, atau menyediakan mereka nilai terlebih dahulu, mendapatkan detail, dan menjualnya kemudian? Anda harus berpikir tentang pemasaran, tujuan bisnis dan kebutuhan pengguna untuk mendesain tata letak yang dapat meyakinkan target audiens Anda agar mereka melakukan apa yang Anda inginkan.

Mulailah dengan mempertanyakan hal-hal di bawah ini:

  • Apa yang kita jual?
  • Siapa yang akan tertarik membeli produk kita?
  • Mengapa mereka harus membeli pada kita?
  • Bagaimana kita dapat memberikan harga?

Untuk tutorial ini saya telah memutuskan untuk fokus pada perumpamaan yang kuat dan banyaknya penggunaan kata-kata negative untuk menciptakan perasaan bebas dan jelas. Saya ingin desainnya terlihat berkelas dan menggoda untuk mereka yang peduli pada gambaran mereka.

Persiapan

Sebelum kita melompat ke Adobe Photoshop dan mendapatkan desainnya, mari kita tentukan variabel seperti warna, style, dan petunjuk umum.

Langkah 1

Mulailah dengan mengumpulkan gambar yang Anda sukai untuk moodboard dan palet warna Anda.  Saya biasanya menggunakan Pinterest, tetapi gomoodboard.com sangatlah berguna dan didesain murni untuk membuat moodboards.

gomoodboard.com adalah tool yang sederhana dan mudah untuk penggunaan moodboarding. 

Langkah 2

Selanjutnya mari bentuk skema warna untuk desain Anda; satu yang relevan terhadap brand Anda dan akan menarik target audiens Anda.  Seringkali menggunakan generator palet warna seperti Adobe Color CC (sebelumnya Kuler) merupakan latihan yang baik, hal ini dapat mempersingkat waktu Anda dalam memilih warna.

Unggah sebuah gambar dari moodboard Anda dan lihat warna apa yang dihasilkan. Sesuaikan coraknya sesuai kebutuhan Anda dan simpan warna-warna ini untuk referensi ke depan.

Adobe Color CC memungkinkan Anda untuk membuat palet warna dari sebuah gambar.

Memilih Jenis Huruf

Terinspirasi oleh beberapa item pada moddboard kita, maka kita akan menggunakan kelompok font Source Pro, termasuk versi sans dan serif dari font.  Perpaduan keduanya akan menambahkan keseimbangan rasa dan headline yang tegas.

Menyiapkan Dokumen

Sebelum kita memulai proses kreatif menggunakan Adobe Photoshop, mari sortir beberapa pembenahan, seperti membuat dokumen baru dan mengatur beberapa guidelines (garis bantu).

Langkah 1

Bukalah Adobe Photoshop dan buat dokumen baru CMD+N. Tentukan dimensi yang menurut Anda akan cocok dengan kebutuhan desain Anda—pada kasus saya, saya memilih 1400x3564px.

Langkah 2

Setelah itu aturlah beberapa bantuan sehingga tata letak Anda memiliki ruang yang cukup dan terlihat seimbang.  Mengatur beberapa garis bantu akan memastikan kerapian dan akan membantu Anda untuk mengetahui luas website kita untuk keperluan desain.  Pergi ke View > New Guide… dan atur beberapa garis bantu,  saya biasanya memilih 1000px sebagai titik awal dan menambahkan beberapa garis bantu dari sudut sehingga ada ruang untuk bernapas.

Catatan: Garis bantu yang digunakan pada tutorial ini: vertikal pada 200px, 500px, 550px, 700px, 850px, 900px dan 1200px.

Tip: Anda juga dapat menggunakan plugin GuideGuide Photoshop untuk membuat proses ini lebih cepat.

Menyambut Pelanggan Baru

Kita akan mulai desain toko kita dengan membuat area bagian atas yang menarik untuk menangkap perhatian pelanggan dan mengirimkan pesan singkat tentang apakah situs ini.

Langkah 1

Buatlah grup baru yang disebut “Navigasi” dan atur garis bantu baru horizontal pada 130px.  Di sini adalah lokasi logo kita, link navigasi, dan pencarian akan diletakkan. Letakkan logo Anda pada bagian kiri. Jika Anda tidak memilikinya, buatlah bentuk persegi dan letakkan teks di dalamnya.

Langkah 2

Sekarang letakkan item navigasi Anda berupa teks murni. Dari tahap perencanaan Anda harus telah mengetahui apa yang perlu Anda masukkan pada navigasi Anda sehingga calon pelanggan akan mendapatkan kebermanfaatan.  Gunakan Horizontal Type Tool (T) untuk menuliskan judul link Anda dan letakkan di sebelah logo Anda dengan meninggalkan ruang yang cukup untuk jarak.

Langkah 3

Pencarian merupakan fungsi yang sangat penting yang sangat diperhatikan oleh ecommerce.  Buat kolom pencarian Anda mencolok dan dapat diakses dengan meletakkannya pada bagian kanan dari navigasi teratas Anda.  Untuk membuatnya gunakan Rectangle Tool (U) dan Horizontal Type Tool (T).  perhatikan bagaimana warna terbuat dari gambar yang telah kita gunakan dengan Adobe Color CC.

Langkah 4

Sekarang waktunya untuk meletakkan gambar yang istimewa yang akan menjadi titik fokus dari keseluruhan website ketika pengunjung pertama kali melihat situs ini.  Seperti yang akan Anda lihat cukup umum belakangan ini, kita akan memilih gambar dengan kualitas tinggi dengan fokus yang tegas dan jelas, memungkinkan teks dan elemen UI menjadi tertutup.

Menggunakan Rectangle Tool (T) gambar 1400x700px (warna apa saja) bentuk persegi dan letakkan pada bagian kanan di bawah navigasi (ingat garis bantu horizontal 130px?  Itu untuk bentuk ini). Kemudian seret sebuah gambar yang Anda pilih dan letakkan layer-nya di atas layer persegi.

Setelah itu tahan tombol Alt dan mouse pada layer gambar hingga Anda melihat panah kecil mengarah ke bawah, kemudian lepaskan mouse dan buatlah Clipping Mask sehingga gambar hanya akan terlihat di dalam area persegi.

Tekan Cmd+T untuk mengubah ukuran foto, pastikan Anda menahan tombol Shift sehingga Anda dapat mengatur ukuran dengan proporsional.

Langkah 5

Untuk membantu gambar kita membawa perhatian pada lini horizontal tengah, mari tambahkan gradient yag akan menjadi berubah dari transparan menjadi hitam pada bagian bawah. Ambil Gradient Tool (G) dan atur menjadi hitam #000000 menjadi transparan. Setelah itu, tahan tombol Shift dan seret dengan mouse Anda dari bawah gambar menjadi di sekitar lini tengah untuk membuat gradien. Kemudian buatlah menjadi Clipping Mask dan kurangi kegelapannya (Opacity) menjadi 50% sehingga tidak terlihat terlalu tebal. Ubah nama layer menjadi “Bayangan”/”Shadow” sehingga lebih mudah untuk diketahui.

Langkah 6

Sekarang adalah waktu untuk menggunakan headline yang kuat untuk menarik perhatian para pengunjung dan mendorong mereka mencari tahu lebih jauh.  Gunakan font yang besar dan tebal Source Sans Pro dan tulislah headline yang pendek.  Saya telah menggunakan Source Sans Proo (Black) ukuran 70px dan huruf tracking.

Langkah 7

Anda telah mendapatkan perhatian pengguna, sekarang sediakan pesan kedua dan yang paling penting, sebuah panggilan untuk bertindak (disebut juga CTA-Call to Action). Saya telah menggunakan Source Serif Pro ukuran 28px (Regular) untuk sub-headline dan menggunakan ulang tombol pencarian untuk menjaga UI tetap konsisten. 

Perhatikan jarak yang saya terapkan. Saya selalu meninggalkan jarak yang cukup di antara elemen sehingga masing-masing dapat dilihat lebih cepat dan terlihat lebih terorganisir. Juga, jika Anda lihat lebih dekat Anda akan melihat bahwa layer teks terlihat lebih rapat satu sama lain. Hal ini merujuk pada hukum jarak kedekatan Gestalt.

“Berdasarkan hukum kedekatan, hal-hal yang berdekatan akan terlihat seolah berada pada kelompok yang sama.”

Membangun Kepercayaan

Dan kita telah selesai dengan “menyambut pelanggan baru”, atau header, area.  Setelah kita memiliki perhatian pengunjung dan ketertarikan mereka, sekarang waktunya untuk menunjukkan pada mereka beberapa keuntungan lain yang dimiliki oleh toko kita yang bisa kita tawarkan.

Langkah 1

Karena kita telah menjaga area atas website kita lumayan minimal, maka kita akan melanjutkan dengan tata letak yang bersih dan sederhana secara estetik untuk sisanya.

Letakkan sebuah headline yang mungkin menarik pengunjung Anda dan deskripsi singkta yang akan mendorong mereka lebih jauh. Saya menggunakan Source San Pro (Semibold) 24px dan warna abu-abu tua #282723. Pastikan untuk menyisakan jarak yang cukup di atas headline sehingga akan terlihat konsisten dengan area atas.

Untuk deskripsi gunakan sesuatu yang lebih cerah sehingga secara visual akan terlihat lebih lemah dan dapat dengan mudah diterima sebagai kepentingan sekunder. Saya menggunakan 16px Source Serif Pro (Regular) dan warnanya adalah abu-abu #adadad.

Langkah 2

Salah satu langkah efektif untuk memabangun kepercayaan adalah dengan menggunakan penggambaran yang berkualitas tinggi. Yang akan memicu otak, menciptakan hasrat. Pastikan untuk mengalokasi waktu yang cukup banyak untuk mengambil foto dari produk Anda atau mendapatkan fotografer professional untuk mengerjakannya. Untuk tutorial ini saya akan menggunakan produk fiktif sehingga saya tidak perlu mengambil foto sendiri- melainkan menggunakan foto dari Unsplash dan Stock Up.

Ambil Rectangle Tool (U) dan gambarlah bentuk persegi. Setelah itu seret foto produk Anda pada Photoshop, letakkan di atas persegi kemudaian buatlah Clipping Mask. Ubah ukuran gambar jika perlu dengan menekan CMD+T.

letakkan persegi Anda di antara garis bantu vertikal pertama dan kedua seperti yang kita telah ketahui area yang sama untuk gambar produk pada permulaan.

Langkah 3

Untuk membuah hal-hal tetap sederhana kita mungkin memerkuan beberapa informasi dasar tentang produk termasuk judul dan harga (yang mungkin Anda ingin membuat pengguna terpacu untuk mengetahui lebih jauh).

Ambil font yang sama dari Source Serif Pro dan masukkan judul menggunakan warna abu-abu yang lebih gelap seperti yang digunakan pada bagian headline.  Setelah itu gunakan warna abu-abu yang lebih muda untuk tag harga, seperti informasi sekunder dan tidak memerlukan kekuatan visua yang terlalu berlebihan.  Satu hal lagi yang perlu diingat adalah elemen toko kita seperti judul, tombol panggilan untuk bertindak, dan blok deskripsi haruslah rata tengah.

Langkah 4

Sekarang letakkan semua layer produk pada satu kelompok dan gandakan dengan menekan CMD+J, letakkan di antara garis bantu yang telah ada dengan memberikan jarak pada masing-masingnya.

Langkah 5

Kita telah selesai dengan bagian “Trending” dikombinasi dengan tiga produk.  Berdasarkan Paul Seys, tiga pilihan adalah angka yang optimal untuk membuat penawaran Anda lebih menarik.

“Teknik seperti itu disebut juga “Efek Goldilocks (atau Goldilock Pricing).  Frase ini berasal dari cerita Grimm Bersaudara (Brothers Grimm) yang mana Goldilocks memakan tiga mangkuk bubur; yang pertama terlalu panas, yang kedua terlalu dingin, tetapi yang terakhir ‘pas’.” 

Sekarang mari meletakkan sedikit pembagi sehingga dapat memisahkan tata letak menjadi bagian-bagian.  Saya elah menggunakan Line Tool (U) 1px warna abu-abu muda #e6e6e6 sehingga ia terlihat, tetapi tidak terlalu mencolok.

Tip: Tahan tombol Shift untuk menggambar garis horizontal yang sempurna.

Langkah 6

Sekarang mari membuat bagian lain yang menunjukkan lebih banyak produk dan menyebutnya “Populer”.  Manusia selalu mencari validasi dan menunjukkan produk paling populer yang dinikmati oang lain membaerikan mereka bukti sosial bahwa produk-produk ini pantas mendapatkan uang mereka.

Gandakan dengan CMD+J dan atur headline-nya, deskripsi dan produk dari bagian “Trending”.  Gandakan lebih banyak produk dan buatlah baris 3x3 dari produk-produk terbaik Anda.

Menangkap Petunjuk

Setelah mengekspos kebanyakan visual untuk menarik minat dan hasrat, sekarang waktunya untuk menangkap informasi pengunjung jika mereka merasa belum akan membelinya pada saat ini, sehingga Anda dapat menghubungi mereka lagi nanti.

Langkah 1

Kita akan memasukkan sedikit bagian blog menggunakan headline yan sama dan format deskripsi dan beberapa kutipan dari posting blog untuk mengarahkan pengguna pada konten yang mungkin menarik perhatian mereka. 

Ambillah Rectangle Tool (U) dan gambar persegi yang besar yang akan berfungsi sebagai latar belakang dari section baru ini.  Gunakan warna abu-abu lembut untuk membuat pembatas dari produk.  Saya menggunakan #fbfafa . Sekarang gandakan judul dan deskripsi dari bagian sebelumnya dan letakkan pada bagian atas dari latar belakang baru.

Langkah 2

Sekarang gunakan Horizontal Type Tool (T) dan masukkan judul, tanggal, dan kutipan pendek dari posting blog Anda.  Saya sekali lagi menggunakan Source Serif Pro untuk judul dan deskripsi kemudian Source Sans Pro untuk tanggal.

Walaupun pada blok ini Anda akan melihat hirariki visual yang jelas, judulnya akan terlihat paling gelap dan paling besar sedangkan elemen lain lebih kecil dan lebih muda warnanya. Selalu terapkan hirarki visual untuk mendapatkan alur logis.  Untuk menjaga konsistensi buatlah posingan blog ini sebesar blok produk.

Langkah 3

Sekarang letakkan semua layer postingan blog pada sebuah grup kemudian gandakan dua kali menggunakan CDM+J, letakkan di antara garis bantu vertikal dengan memberikan jarak antar produk.

Langkah 4

Setelah menunjukkan beberapa produk yang istimewa dan postingan blog yang berharga, sekarang waktunya untuk sedikit mendorong pengunjung Anda dan menyediakan mereka formulir dengan ajakan untuk beraksi untuk berlangganan.

Sekali lagi, gunakan Rectangle Tool (U), pilih warna yang lebih gelap seperti #282723 dan gambarlah latar belakanguntuk formulir berlangganan kita. Dengan menggunakan latar belakang yang lebih gelap dan terlihat, Anda akan membuat kontras yang secara totomatis membawa perhatian pengunjung.

Langkah 5

Sekarang tulislah uraian singkat menjelaskan mengapa orang-orang harus berlangganan; tunjukkan keuntungan dari fitur.  Setelah itu navigasikan pada navigasi desain kita dan gandakan kolom pencarian termasuk tombonya, kita akan kembali menggunakannya untuk formulir berlangganan.

Seret dan gandakan layer kemudian letakkan pada bagian atas dari latar belakang kita yang baru kemudian atur kolom input dan tombol panggilan untuk bertindak.

Langkah 6

Akhirnya setiap template harus memiliki footer dengan link dimasukkan sehingga orang-orang dapat bergulir ke bawah dan menemukan navigasi pada halaman kunci, seperti bantuan pelanggan, info kontak, social network atau jejaring sosial, dan lain-lain.

Sekali lagi, gandakan layer teks postingan blog kita dan atur untuk menunjukkan link yang kita inginkan. Pisakhan kelompok link yang berbeda dan kolom formulir  yang masing-masing baris diberi jarak yang sama.

Sentuhan akhir: tambahkan baris hak cipta pada bagian tata letak paling bawah.

Selamat!

Selesai!  Kita akhirnya selesai dengan desain tema untuk toko yang dipersembahkan oleh Shopify, sekarang pergilah dan ulas layer dokumen Anda, buang hal-hal yang tidak diperlukan kemudian serahkan pada pengembang Anda, atau lebih baik lagi, kerjakan selanjutnya sendiri!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.