Advertisement
  1. Web Design
  2. Adobe Photoshop
Webdesign

Mendesain sebuah Aplikasi Landing Page di Photoshop

by
Difficulty:BeginnerLength:MediumLanguages:

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

Final product image
What You'll Be Creating

Dalam tutorial ini saya akan memandu Anda melalui proses desain landing page sederhana dan berorientasi konversi app. Kita akan menggunakan Tuts + Android app untuk demo, menekankan fitur-fiturnya dan manfaat, dan mempekerjakan panggilan untuk bertindak seluruh.

Esensi konversi tinggi

Ketika merancang landing pages yang ada beberapa hal yang Anda butuhkan untuk mendapatkan hak untuk menikmati tarif konversi tinggi.

Menurut pertumbuhan hacker Neil Patel, untuk menghancurkan kompetisi landing page Anda perlu:

  • Pembunuh utama
  • Persuasif subheadlines
  • Gambar
  • Penjelasan
  • Proposisi nilai atau manfaat
  • Logis aliran
  • Testimonial yang dapat dipercaya
  • Kuat panggilan untuk bertindak

Kita akan melaksanakan semua unsur-unsur di atas untuk membuat landing page kami seefektif mungkin.

AIDA Model

Saya sangat menyarankan Anda mengambil Employing AIDA Principles dalam Web Design oleh Shaun Cronin. AIDA berdiri untuk Perhatian, Interest, Desire dan Action; dan prinsip-prinsip ini dapat diterapkan untuk situasi yang berbeda yang melibatkan menjual produk atau jasa.

Penelitian menunjukkan bahwa orang tidak keberatan scrolling, sehingga setelah Anda membuat awal bunga di bagian atas halaman Anda seharusnya tidak khawatir tentang membuat halaman arahan Anda lagi. Hal ini diperlukan untuk menceritakan kisah yang hebat dan menambahkan elemen persuasif.

A/B Testing

Halaman arahan yang efektif tidak hanya dirancang sekali dan melakukan dengan baik. Anda harus menjaga pengujian dengan berbagai kombinasi dari salinan, warna, ajakan untuk bertindak dan elemen lainnya untuk mencapai hasil terbaik.

Untuk informasi lebih lanjut tentang check this out A Web Designer's pengenalan ke A/B Testing oleh Siddharth Deswan.

Tutorial aset

Untuk mengikuti sepanjang Anda akan memerlukan beberapa aset (tersedia secara bebas):

Persiapkan Dokumen

Langkah 1

Mulailah dengan membuat dokumen Photoshop baru (File >  New...) menggunakan pengaturan yang ditunjukkan di bawah ini. Anda bebas untuk menggunakan kanvas dimensi apa pun yang Anda inginkan.

Langkah 2

Mari kita menetapkan beberapa panduan sehingga tata letak kami memiliki cukup ruang dan terlihat seimbang. Menetapkan beberapa pedoman akan memastikan kerapian dan akan membantu untuk menentukan lebar situs web kami untuk tujuan desain ini. Pergi ke View > New Guide... dan menetapkan beberapa panduan. Saya biasanya memilih 1000px sebagai titik awal dan menambahkan beberapa panduan dari sudut-sudut sehingga memiliki ruang untuk bernapas.

Catatan: Pedoman digunakan untuk tutorial ini: vertikal di 100px, 600px dan 1100px.

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

Merancang daerah Header

Header atau daerah "di atas flip" memainkan peran yang sangat penting dalam terlibat dengan pengguna dan memastikan bahwa pengunjung tinggal di situs web.

Aplikasi kami mendarat halaman fungsi utamanya adalah untuk meyakinkan pengunjung untuk men-download aplikasi. Untuk alasan itu kita akan fokus pada manfaat dari mencoba app dan membuatnya mudah untuk men-download.

Langkah 1

Pertama-tama, buat grup yang disebut "Header" dengan mengklik Layer > New > Group... atau menekan ikon kecil di bagian bawah panel lapisan. Setelah itu ambil Horizontal Type Tool (T), memilih PT Sans (Bold) 18px ukuran font, mengatur warna hitam #000000 dan masukkan nama aplikasi Anda untuk melayani sebagai logo, menempatkannya di sudut kiri atas tepat di samping pedoman vertikal pertama. Berikan beberapa ruang di atas sehingga tidak terlihat sempit.

Langkah 2

Mari kita membuat panggilan ke tombol tindakan yang kita akan menggunakan kembali seluruh desain kami untuk memastikan bahwa pengunjung mengambil tindakan. Membuat grup baru yang disebut "CTA btn" dan memilih Rounded Rectangle Tool (U), mengatur Radius 2px, mengubah warna latar depan kapur hijau #17e594 dan menggambar bentuk persegi panjang berukuran 206x38px.

Sekarang klik tombol mouse sebelah kanan pada layer, pilih Blending Options... dan periksa opsi Stroke. Setelah itu oleskan #09ba74 hijau gelap.

Memilih Horizontal Type Tool (T) lagi dan masukkan salinan untuk tombol kami. Saya telah menggunakan PT Sans 12px (Bold) dan warna putih #FFFFFF.

Langkah 3

Sekarang memilih Rectangle Tool (T) dan menarik 1200x600px (warna) bentuk persegi panjang dan tempat itu tepat di bawah navigasi atas kami minimal. Aku sudah meninggalkan celah 25px antara logo dan bentuk seperti yang saya lakukan untuk logo di atas sangat konsisten.

Sekarang ambil foto Toolkit dari Unsplash dan letakkan di atas lapisan bentuk persegi panjang. Setelah yang terus tombol Alt dan mouse atas lapisan gambar sampai Anda melihat sedikit panah menunjuk ke bawah, kemudian lepaskan mouse untuk membuat Clipping Mask sehingga gambar hanya terlihat di daerah persegi panjang.

Tekan CMD+T untuk mengubah ukuran foto, memastikan Anda menahan tombol Shift sehingga Anda mengubah ukurannya secara proporsional.

Langkah 4

Mari kita tambahkan lapisan filter abu-abu sehingga kita membuat latar belakang kami siap untuk menyalin dan app screenshot.

Mengubah warna latar depan ke abu-abu gelap #222325 dan buat layer baru, kemudian tempat itu di atas lapisan foto dan sekali lagi membuat Clipping Mask. Setelah itu tekan Alt+Backspace untuk mengisi lapisan abu-abu. Akhirnya, mengurangi Opacity atas lapisan untuk 80%.

Langkah 5

Ambil Horizontal Type Tool (T) lagi, mengubah warna putih #FFFFFF dan menggunakan PT Sans (Bold) 48px ukuran masukkan pesan utama. Pastikan Anda memberikan banyak ruang di atas.

Langkah 6

Sekarang mengurangi ukuran font ke 21px, pilih Normal font berat, memasukkan pesan lebih deskriptif dan menempatkannya di bawah pesan utama. Untuk membuat garis terlihat seimbang dan mudah dibaca meningkatkan tinggi baris untuk setidaknya 30px. Tempatkan keterangan di bawah judul utama, dalam kasus saya saya bergerak 40px turun.

Langkah 7

Mari kita ulangi kami panggilan untuk tindakan (CTA) tombol jadi jelas bagi pengunjung apa yang harus dilakukan berikutnya setelah membaca salinan. Cari Grup "CTA btn" dan duplikat dengan menekan CMD+J, setelah yang berlangsung di bawah pesan sekunder.

Langkah 8

Kami selesai dengan copy dan utama ajakan untuk bertindak, jadi mari kita menempatkan sebenarnya app pratinjau untuk menunjukkan bagaimana app terlihat sebelum orang memutuskan untuk men-download.

Download mockup Samsung Galaxy S5 gratis oleh Martin Adamko dan tempat ke dalam dokumen Anda. Setelah itu, tahan tombol CMD, klik pada semua lapisan yang milik maket tersebut dan klik kanan untuk memilih mengkonversi ke Smart Object. Menggunakan CMD+T untuk mengubah ukurannya dan bergerak ke kanan dari salinan utama kami dan deskripsi.

Setelah itu, tempat layar app Anda pada maket smartphone oleh memukul pada lapisan smart objek dan menyimpannya. Saya telah menggunakan screenshot dari baru Tuts + Courses Android app.

Merancang daerah manfaat

Kami selesai dengan header. Meminimalkan kelompok dan membuat satu lagi yang disebut "Benefits".

Langkah 1

Setelah itu, memilih Horizontal Type Tool (T) lagi, mengubah warna untuk sama abu-abu gelap #222325 kami digunakan untuk filter (membuat desain Anda konsisten dan kohesif alih-alih membawa lebih warna) dan menggunakan 30px Sans PT (Bold) masukkan pernyataan yang kuat dan menempatkannya di bawah ini daerah header, meninggalkan banyak ruang di atasnya.

Langkah 2

Sekarang kita memiliki kesempatan untuk meyakinkan pengunjung kami mengapa kami app ini layak download. Memikirkan manfaat atas fitur sehingga orang dapat memvisualisasikan diri menggunakannya. Mengubah warna halus abu-abu biru #6a7588 dan masukkan beberapa baris yang menjelaskan mengapa orang harus menggunakan aplikasi Anda. Aku sudah untuk PT Sans 21px (reguler) dengan ketinggian baris untuk 32px, pengaturan yang sama seperti yang digunakan untuk pesan sekunder di daerah header.

Perhatikan jarak antara blok teks, meninggalkan ruang yang cukup untuk memberikan cahaya itu merasa untuk desain Anda.

Langkah 3

Sekali lagi, mari kita ulangi panggilan untuk tindakan (CTA) tombol sehingga pengunjung yang tidak yakin sebelumnya dapat mengambil tindakan yang tepat setelah membaca salinan manfaat. Duplikat kelompok "CTA btn" dengan menekan CMD+J dan menempatkannya di bawah copy manfaat. Memindahkannya ke dalam kelompok "Manfaat" untuk membuat dokumen Anda lebih terorganisasi.

Merancang daerah fitur

Kami selesai dengan daerah manfaat, sehingga meminimalkan kelompok dan membuat yang baru bernama "Fitur". Di sini kita akan menyoroti beberapa fitur aplikasi sehingga pengunjung yang ingin tahu lebih banyak dan sudah tertarik dapat mengetahui lebih lanjut tentang app.

Langkah 1

Mengubah warna latar depan cahaya abu-abu #fbfbfb, kita akan menggunakan warna latar belakang yang berbeda untuk bagian fitur untuk memisahkan dari sisanya. Setelah itu pilih Rectangle Tool (U) dan menggambar bentuk 1200x700px ukuran yang akan berfungsi sebagai latar belakang. Pastikan untuk memberi ruang bagian di atas.

Langkah 2

Untuk set terpisah daerah fitur bahkan lebih Mari kita menempatkan garis horizontal 1px antara latar belakang. Memilih Line Tool (U), mengatur Weight untuk 1px dan mengubah warna untuk #eeeeee abu-abu gelap.

Tip: Tahan tombol Shift untuk menggambar garis horizontal sempurna.

Langkah 3

Membuka grup "Benefits" dan menemukan lapisan utama, tekan CMD+J untuk menduplikasi itu dan bergerak ke dalam kelompok "Features". Menyuntingnya agar sesuai dengan kebutuhan Anda dan meletakkannya di dalam background abu-abu telah dibuat sebelumnya.

Langkah 4

Kami akan membuat tiga blok fitur dengan ikon, judul dan deskripsi singkat. Membuat grup baru dan menyebutnya "Feature 1" atau sesuatu yang lebih deskriptif. Kepala ke Iconfinder dan download 48x48 px ikon user. Klik tombol mouse sebelah kanan pada nama layer dan menerapkan pilihan berikut.

Anda mungkin menyadari bahwa kita benar-benar sedang meniru gaya tombol jadi semuanya konsisten.

Langkah 5

Sekali lagi, menduplikasi lapisan judul, tempat di dalam kelompok "Feature 1" dan menggunakan Horizontal Type Tool (T) mengurangi ukuran font 16px dan tinggi baris untuk 22px.

Langkah 6

Menggunakan sama Horizontal Type Tool (T) tuliskan tiga jalur pendek yang menjelaskan fitur Anda. Pastikan untuk mengubah jenis warna untuk digunakan sebelumnya abu-abu biru #6a7588. Tempat di bawah ikon dan judul.

Langkah 7

Sekarang meminimalkan kelompok dan duplikat ini dua kali dengan menekan CMD+J. Setelah itu menyesuaikan kelompok digandakan agar sesuai dengan aplikasi Anda. Untuk tutorial ini saya telah menggunakan marker dan clock ikon dari Iconfinder. Pastikan untuk meninggalkan ruang yang cukup antara blok sehingga terlihat seimbang.

Langkah 8

Semakin Anda menunjukkan bagaimana produk yang sebenarnya terlihat lebih baik, kita akan menggunakan perspektif yang berbeda dari mockup smartphone kami. Saya telah membalik mockup Samsung Galaxy S5 yang digunakan sebelumnya dan diganti dengan screenshot yang ditemukan di Google Play. Klik kanan pada lapisan mockup di bagian atas dan pilih objek Smart baru melalui salinan untuk membuat salinan independen.

Untuk menyesuaikan smartphone mockup, klik dua kali pada layer thumbnail dan tempat layar app sana.

Merancang daerah testimonial

Kami akan menambahkan beberapa kredibilitas sosial untuk aplikasi kami dengan menunjukkan beberapa testimonial dari pengguna app.

Langkah 1

Meminimalkan semua kelompok dan membuat yang baru bernama "Testimonial". Masukkan judul seperti yang kami lakukan sebelumnya dan letakkan di background "Features" grup meninggalkan jumlah ruang yang konsisten.

Langkah 2

Sekarang buka grup "Features", gandakan salah satunya dan pindahkan ke dalam grup "Testimonials". Kami akan  menggunakan grup untuk testimonials kami. Edit salinnan, mengubah judul ke nama dan deskripsi seseorang ke salinan testimonial.

Hapus ikon dan, menggunakan Ellipse Tool (U), gambar bentuk lingkaran. Setelah itu letakkan foto profil orang tersebut di atas lapisan bentuk lingkaran dan buat Clipping Mask. Saya sudah menggunakan wajah dari User Inter Faces.

Langkah 3

Akhirnya, gandakan kelompok kesaksian yang baru dibuat dan sesuaikan dengan nama, kesaksian, dan foto profil yang berbeda.

Merancang Area Footer

Minimalkan grup "Testimonials" dan buat yang lain disebut Kami akan menempatkan tombol ajakan bertindak akhir (CTA) divsini dan beberapa tautan ke laman situs web dalam

Langkah 1

Head ke grup "Header" dan tahan tombol Shift , pilih bentuk persegi panjang dan lapisan filter abu-abu. Setelah itu tekan CDM+J untuk menduplikasinya dan pindahkan ke grup "Footer" Kemudian tempatkan foto pilihan Anda di antara bentuk persegi panjang dan lapisan filter abu-abu menciptakan Clipping Mask.

Langkah 2

Tambahkan judul lain yang mendorong orang untuk bertindak dan mengunduh aplikasi Anda. Jadikan putih #FFFFFF sehingga sangat terlihat pada back ground yang lebih gelap. Setelah itu, gandakan tombol ajakan bertindak (CTA) dan letakkan di bawah judul.

Langkah 3

Pilih Horizontal Type Tool (T) lagi dan masukkan beberapa tautan Saya telah menggunakan putih #FFFFFF PT Sans (Reguler) 16px dan tinggi faris 29px.

Langkah 4

Gandakan layer teks Anda dan sesuaikan agar sesuai dengan Setelah itu, tempatkan baris copyright di bagian paling bawah footer Anda meninggalkan banyak ruang di atas dan di bawahnya.

Selamat!

Itu dia! Kami sudah selesai dengan desain theme, sekarang periksa lapisan dokumen Anda, hapus yang tidak di perlukan dan serahkan ke devoloper, atau, lebih baik lagi, untuk kode 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.