Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. Complete Websites
Webdesign

Mendesain Landing Page Startup Travel Menggunakan Photoshop

by
Difficulty:BeginnerLength: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 ini saya akan menggunakan Photoshop CS6 untuk mendesain landing page yang sederhana dan bersih untuk startup travel rekaan.  Selama proses ini kita akan melihat bagaimana membuat grid yang diatur sendiri menggunakan garis bantu, membuat model jenis huruf, menggunakan banyak ruan warna putih dan membuat konten website kita dengan cara yang sangat bersoh dan professional.  File PSD yang telah selesai akan siap untuk kemudian diserahkan pada developer untuk pemberian kode.

Properti Tutorial

Untuk mengkuti tutorial ini Anda akan membutuhkan beberapa property (tersedia gratis):

Mempersiapkan Dokumen

Langkah 1

Mulai dengan membuat dokumen baru (File > New…) menggunakan pengaturan yang sama seperti yang terlihat di bawah ini.

Pastikan resolusinya diatur menjadi 72pixel/inci

Langkah 2

Mari mengatur beberapa pedoman sehingga tata letak kita memiliki jarak yang cukup dan terlihat seimbang.  Saya tidak selalu menggunakan grid, tetapi mengatur beberapa garis bantu akan memastikan kesempurnaan pixel dan akan membantu untuk menentukan luas website kita. Bagilah kanvas menjadi dua bagian secara vertikal sehingga Anda dapat membuat komposisi yang pas terletak di tengah. Pergi ke View > New Guide… dan atur beberapa garis bantu. Saya biasanya memilih 1000px sebagai luas website dan menambahkan beberapa garis bantu dari sudut-sudut sehingga ada ruang untuk bernapas.

Catatan: Garis bantu yang digunakan pada tutorial ini: vertikal pada 200px, 260px, 700px, 1140px dan 1200px.

Tip: Anda juga dapat menggunakan plugin GuideGuide Photoshop untuk membuatnya lebih cepat.

Langkah 3

Kita akan menjaga dokumen kita terorganisir dengan baik sedari awal. Sehingga mari mulai dengan membuat tiga kelompok layer bernama Header, Features, Social Proof, Final CTA dan Footer.  Berpegangan pada pada Etiket Photoshop akan membuat hal-hal menjadi lebih terorganisir dan lebih mudah untuk dinavigasikan atau disunting.  Untuk membuat grup/kelompok pergi ke Layer > New > Group… dab berikan masing-masing judul seperti yang telah disebutkan sebelumnya. Untuk membuat grup/kelompok pergi ke Layer > New > Group… dab berikan masing-masing judul seperti yang telah disebutkan sebelumnya.

Mendesain Area Header

Header adalah bagian penting dari setiap website karena merupakan kesempatan pertama untuk meyakinkan pengunjung baru bahwa akan sangat berguna untuk bertahan dengan website kita. Ini adalah di mana ketika kita, desainer, perlu untuk menggunakan penggambaran yang luar biasa dan mengantarkan pesan yang jelas dengan beberapa tindakan yang dapat diambil oleh pengunjung.

Langkah 1

Mari lebih dahulu ubah warna latar belakang menjadi sesuatu yang sangat-sangat ringan untuk mata, dalam kasus saya, saya menggunakan abu-abu muda #ebebeb. Setelah itu, bukalah grup Header dan menggunakan Rectangle Tool (U) gambarlah persegi 1000x600px dan letakkan di antara garis bantu vertikal. Demudian unduh Bike traveler photo, seret pada dokumen Photoshop dan letakkan di atas layer persegi tadi. Setelah itu tahan tombol Alt dan mouse pada layer foto hingga Anda melihat panah kecil menghadap ke bawah, kemudian lepaskan.  Anda baru saja membuat Clipping Mask.

Sekarang tekan CMD+T dan atur ulang ukuran foto untuk memenuhi kebutuhan Anda.

Tip: Tahan tombol Shift untuk mengubahnya menjadi proporsional.

Langkah 2

Sekarang kita perlu menambahakan layer warna transparan untuk menggelapkan gambar sehingga bagian gambar yang cerah menjadi lebih gelap dan teks putih akan lebih terbaca. Buatlah layer baru di atas gambar dan buat Clipping Mask untuk layer ini juga. Kemudian isi layer ini dengan warna solid yang gelap dan ubah Opacity (Kegelapan) menjadi sekitar 20% sehingga kita masih dapat melihat gambarnya dengan jelas.

Langkah 3

Sekarang mari letakkan logo berbasis tipografi dan navigasi pada bagian atas.  GUnakan Horizontal Type Tool (T) dan tulis judul startup  Anda pada bagian kiri. Pastikan ini merupakan konvinsi yang terbaca dan seperti apa yang pengunjung harapkan. Logo kami berada di pojok kiri atas karena ini adalah konvensi web umum dan berapa banyak pengunjung yang akan mengharapkannya.

Saya menggunakan font Aller untuk judul dan Open Sans untuk item navigasi.

Langkah 4

Sekarang mari kita bermain dengan pesan utama. Anda harus selalu membatasi baris kata menjadi hanya satu atau dua kalimat saja dan pastikan pendek dan mudah dibaca.  Saya menggunakan Open Sans untuk menuliskan pesan utama, menempatkan penekanan pada “perjalanan Anda” dengan membuatnya tercetak tebal.

Baris kedua jauh lebih kecil, untuk itu akan membuat baris ini dipahami sebagai hal penting kedua, sehingga orang-orang akan membacanya setelah mereka telah selesai dengan pesan utama. Saya membuat model dengan jarak yang lebih lebar antar huruf, tetapi membuat setiap hurufnya kapital.

Perhatikan di mana saya meletakkan pesannya, selalu pikirkan kontras dan di mana untuk meletakkan salinan Anda agar mudah dibaca oleh pengunjung.

Langkah 5

Buatlah satu kalimat call to action (ajakan untuk bertindak) yang menginformasikan pengunjung apa yang harus mereka lakukan.  Dalam web saya, saya menyuguhkan pesan sederhana yang menyarankan pengunjung untuk berlangganan pada newsletter.  Saya menggunakan font PT Serif (Italic) ukuran 14px.

Langkah 6

Mari buat formulir email sederhana yang memungkinkan pengunjung Anda untuk memasukkan alamat email mereka dan berlangganan.  Buatlah sebuahgrup baru dengan judul formulir Email.  Gunakan Rounded Rectangle Tool (U) dengan ukuran 3px untuk membuat warna input putih sederhana (#FFFFFF).

Langkah 7

Tambahkan teks hint untuk orang-orang agar memahami di mana untuk memasukkan alam email mereja dan buatlah tombol call to action.  Saya menggunakan 13px Open Sans (semibold) warna abu-abu (#bdbdbd) untuk teks input dan 13px Open Sans (Bold) warna putih (#FFFFFF) untuk teks tombol.  Pilihlah warna yang menarik pada call to action sehingga terlihat mencolok dan mendorong untuk bertindak.

Saya menggunakan (#51a200) untuk call to action utama. Gunakan Rectangle Tool (U) dan gambarlah bentuk persegi, kemudian letakkan di atas input berwrna putih. Kemudian tahan tombol Alt dan mouse pada persegi berwarna hijau hingga Anda melihat ikon panah mengarah ke bawah, lepaskan tombol dan Anda telah membuat Clipping Mask.

Mendesain Area Fitur

Ini merupakan bagian utama badan/body terletak tepat di atas area lipatan. Jika orang-orang tertarik pada apa yang Anda tawarkan mereka akan bergulir ke bawah untuk melihat apa yang Anda miliki pada detail lebih lanjut.

Langkah 1

Runtuhkan grup Header dengan meng-klik panah kecil di samping nama grup.  Sekarang kita perlu membuat latar belakang yang sedikit berbeda utnuk area badan website kita.  Saya menggunakan Rounded Rectangle Tool (U) dengan radius 5x dan warna putih #FFFFFF.

Letakkan bentuk yang baru saja Anda buat di atas leyer latar belakang utama.

Langkah 2

Luaskan grup Features dan mulai mengetik salinan Anda.  Saya menambahkan baris pesan utama dan dua kolom fitur dengan judul dan paragraph singkat.

Ketika membuat salinan yang menjanjikan pastikan hal ini terbaca dan tidak terlalu panjang,  , gunakan ketebalan font yang berbeda, ukuran, dan warna untuk menciptakan hirarki visual.  Terakhir, tetapi yang sangat penting; gunakan banyak area putih.  Saya menggunakan varian font Open Sans berwarna abu-abu gelap #545454 dan abu-abu muda #a2a2a2 untuk salinan saya.

Mendesain Area Bukti Sosial

Langkah 1

`Langkah 1 Sekarang waktunya untuk endesain area kedua badan website yang akan membantu pengunjung untuk membuat mereka berpikir untuk bertindak.  Kita akan mendesain area bukti sosial yang menunjukkan beberapa testimonial.

Pertama kita perlu untuk memisahkan area sebelumnya dengan cara yang halus.  Saya menggunakan Line Tool (U) atur menjadi 1px dengan warna diubah menjadi abu-abu muda #e8e8e8.

Langkah 2

Kecilakn grop Features dan luaskan grup Bukti Sosial.  Sekali lagi tulislah judul dengan menjaga ukuran yang sama dengan yang telah Anda gunakan sebelumnya.  Kunci dari desain yang rapi adalah kosntensi, sehingga sekali Anda menggunakan suatu warna dan ukuran, pastikan untuk terus menggunakan yang sama.

Untuk area bukti sosial saya telah menggunakan dua testimoni tidak nyata dari orang-orang yang tidak nyata juga.  Font yang digunakan untuk kutipan adalah PT Serif dan sisanya menggunakan Open Sans yang telah digunakan dengan ukuran yang berbeda dan variasi ketebalan.

Langkah 3

Seperti yang Anda lihat saya memberikan beberapa ruang di depan nama-nama.  Pergilah ke User Inter Faces untuk mendapatkan avatar. Setelah itu gunakan Ellipse Tool (U) dan tahan tombol Shift kemudian gambarlah sebuah lingkaran.  Akhirnya salin dan temple avatar Anda di atas layer lingkaran dan mouse pada layer avatar sembari menahan tombol Alt sehingga Anda akan menciptakan Clipping Mask.

Untuk membuat semakin terorganisir buatkah dua grup di dalam grup bukti sosial dan letakkan layer testimonial pada grup terpisah.

Mendesain Area Calling To Action 

Berdasarkan GoodUI Anda harus selalu mengulang call to action utama Anda sehingga orang-orang yang belum terpikir untuk membeli/menggunakan jasa Anda akan melakukannya setelah melihat lebih banyak website Anda.

Langkah 1

Mari pisahkan area sebelumnya menggunakan baris yang sama. Temukan layer baris tersebut dan cukup menekan CMD+J untuk menggandakan dan kemudian pindakan pada bagian bawah testimonial dengan memberikan jarak secukupnya.

Setalah itu, tulislah headline utama dari section ini dan sub-headline sederhana untuk memberikan informasi atau petunjuk. Seperti yang Anda lihat saya menggunakan style, ketebalan, dan ukuran font yang sama dengan yang telah digunakan sebelumnya. Bertahan dengan satu style untuk semua salinan Anda.

Langkah 2

Pergilah ke grup Header dan temukan grup formulir Anda, kemudian gandakan (CMD+J)  dan pindahlah pada grup CTA terakhir.  Letakkan di bawah pesan dan atur sedikit dengan menambahkan corak hijau di sekitar kolom input.

Klik kanan tombol mouse pada layer input dan pilih Blending Options… kemudian terapkan efek Stroke seperti yang terlihat di bawah ini. Warna yang saya gunakan adalah #51a200.

Mendesain Footer

Kita telah selesai dengan grup akhir CTA, sehingga kecilkan dan perluas grup Footer.  Akhirnya mari kita masukkan beberapa link pada halaman internal dari website Anda dan letakkan teks hak cipta yang sederhana pada baris baru. Saya menggunakan font Open Sans (Semibold) untuk link.

Perhatikan bagaimana ini diletakkan di luar latar belakang badan untu membedakannya dari konten utama. Pastikan Anda menggunakan jarak yang konsisten antara bagian atas dan bawah salinan sehingga terlihat seimbang.

Dan kita telah selesai dengan tata letak. Selamat! Selamat!

Kesimpulan

Pada tutorial kali ini saya telah mengarahkan Anda pada proses pembuatan landing page website travel termasuk beberapa bagian penting yang akan membantu Anda mendapatkan perhatian pengunjung, mendorong mereka untuk mengambil tindakan.

Hasilnya adalah tata letak yang seimbang dan ringan dengan fokus kuat pada penggambaran pada bagian area atas dan tipografi yang rapi pada area badan.  Jika Anda memiliki pertanyaan atau ide, silakan beritahukan kami pada kolom komentar!

Sumber Tambahan

Jika Anda baru dengan desain Landing Page, kami merekomendasikan beberapa tutorial pengenalan untuk membantu Anda cepat memahami dasar-dasarnya:

Jika Anda tertarik untuk mendapatkan beberapa bantuan dengan desain Landing Page Anda, Envanto Studio memiliki koleksi yang banyak jasa Desain dan Pengembangan Landing Page yang mungkin Anda tertarik untuk pelajari lebih lanjut. Anda juga dapat melihat-lihat pada Tema Landing Page di Envato Market.

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.