Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Complete Websites
Webdesign

Rancang sebuah Situs Aplikasi Mobile yang Ramping dan Gelap

by
Length:LongLanguages:

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

Dalam tutorial ini kita akan menggunakan Adobe Photoshop untuk mendesain antarmuka web yang ramping yang bisa digunakan untuk situs aplikasi mobile manapun. Kita akan membahas berbagai teknik termasuk bentuk, tekstur, mask, ikon khusus, tipografi dan banyak lagi yang dapat disesuaikan dan diterapkan dengan mudah pada desain web Anda sendiri.

Publikasi Ulang Tutorial

Setiap beberapa minggu, kami mengunjungi beberapa posts favorit pembaca kami dari seluruh histori situs ini. Tutorial ini pertama kali terbit pada bulan Januari tahun 2011.


Tentang Desain Ini

Tutorial ini didasarkan pada desain situs web yang gelap dan bersih untuk Leaflet, sebuah aplikasi iPhone yang dirancang untuk penerbit pasar Envato. Eric Alli dari Trilab Media membantu merancang dan mengkodekan situs ini, jadi dia akan membimbing kita melalui langkah demi langkah tutorial. Apakah Anda ingin menggunakan desain serupa untuk proyek Anda sendiri atau hanya ingin melihat bagaimana hal itu dibuat, ada banyak trik dan teknik yang bagus dalam tutorial ini yang dapat Anda ikuti. Nikmati!


Langkah 1

Mari kita mulai dengan membuat dokumen Photoshop baru dengan memilih File > New.

Setel Lebar kanvas dan Tinggi ke 1100px, Resolusi ke 72, dan Isi Latar Belakang Putih.

Sleek Mobile App Website Tutorial

Selanjutnya, kita perlu membuat dua panduan yang akan bertindak sebagai wadah untuk halaman kita.

Pilih View > New Guide...

Untuk panduan pertama, atur Orientasi ke Vertikal dan Posisi menjadi 70 px.

Untuk panduan kedua, pilih View > New Guide... lagi dan buat panduan Vertikal lain dengan Posisi di atur pada 1030 px.

Sleek Mobile App Website Tutorial

Kita sekarang harus memiliki outlined space yang lebar 960px untuk halaman kita.


Langkah 2

Langkah selanjutnya adalah latar belakang. Pilih Paint Bucket Tool (G) dan atur Foreground Color Swatch menjadi "1e1e1e". Kemudian, klik di manapun pada kanvas untuk menerapkan warna pada Background layer kita.

Sleek Mobile App Website Tutorial

Mari kita juga menambahkan sedikit tekstur ke latar belakang kita dengan memilih Filter > Noise > Add Noise...

Tetapkan ukuran ke 2.5 dan klik OK.

Sleek Mobile App Website Tutorial

Langkah 3

Selanjutnya kita akan membuat spotlight yang akan membantu menambahkan fokus ke area teratas halaman kita.

Pilih Brush Tool (B) dan ubah Master Diameter menjadi 400px dan setel Hardness menjadi 0%.

Sleek Mobile App Website Tutorial

Buat layer baru dengan memilih Layer > New > Layer... dan beri nama "Spotlight".

Sleek Mobile App Website Tutorial

Ubah warna Foreground Colour Anda menjadi "FFFFFF" (putih) dan buat lingkaran di dekat bagian atas kanvas menggunakan Brush tool.

Sleek Mobile App Website Tutorial

Untuk membantu memadukan spotlight ke latar belakang, mari kita tambahkan beberapa noise ke lapisan spotlight dengan memilih noise...

Atur Jumlah ke 20, centang Monochromatic dan klik OK.

Sleek Mobile App Website Tutorial

Untuk memperlancar spotlight kita, pilih Filter > Blur > Gaussian Blur...

Atur Radius ke 50.0 dan klik OK.

Sleek Mobile App Website Tutorial

Akhirnya atur Opacity pada layer Spotlight menjadi sekitar 25%.

Sleek Mobile App Website Tutorial

Langkah 4

Selanjutnya kita akan menambahkan grafis telepon kita. Untuk tutorial ini saya akan menggunakan grafis iPhone dari Vector iPhone 4 PSD yang luar biasa dari Psdtuts+ yang bisa diunduh secara gratis  disini. Ingat juga, Anda dapat menggunakan grafik telepon yang sesuai dengan kebutuhan khusus Anda (Android, Blackberry, dll ...).

Setelah diunduh, buka PSD di Photoshop. Perluas folder "Phones" di panel Layers, klik kanan folder "FRONT" dan pilih Duplicate Group... Di sini, beri nama yang mudah dikenal(saya menggunakan "iPhone"), tetapkan tujuan ke "Leaflet" (atau apapun itu yang anda berikan nama PSD anda untuk tutorial ini), dan klik OK. Setelah selesai, tutup PSD ini.

Sleek Mobile App Website Tutorial

Posisikan iPhone pertama kita menyentuh pemandu kiri dan sekitar 100px dari atas kanvas.

Sleek Mobile App Website Tutorial

Ini juga merupakan saat yang tepat untuk menyesuaikan screenshot dalam iPhone.

Cara mudah untuk melakukannya adalah dengan memperluas folder "iPhone" di panel layers kita lalu klik pada folder "SCREEN CONTENTS".  Sekarang pilih File > Place, pilih screenshot anda dari browser, lalu klik Place.

Tarik layer  yang ditempatkan di atas iPhone dan ubah ukuran agar sesuai dengan layar.  Setelah selesai, klik Enter untuk menyimpan perubahan.

Sleek Mobile App Website Tutorial

Duplikat grup "iPhone" dengan memilih Layer > Duplicate Group... beri nama "iPhone 2" dan klik OK pada dialog.

Pilih Edit > Transform > Scale dan tingkatkan duplikat iPhone menjadi lebar dan tinggi 107,0%. Posisikan iPhone ini sekitar 50px dari atas dan 200px dari panduan kiri.

Sleek Mobile App Website Tutorial

Ulangi langkah yang disebutkan di atas untuk mengganti tangkapan layar di dalam folder "iPhone 2".


Langkah 5

Sentuhan terakhir untuk iPhone kita adalah menciptakan pantulan dari mereka. Mari kita mulai dengan memilih kedua grup iPhone ("iPhone" dan "iPhone 2") lalu pilih Layer > Duplicate Layers... dan klik OK. Kemudian pilih Layer > Merge Layers.

Selanjutnya kita perlu membalik iPhones kita keatas dan kebawah. Pilih Edit > Transform > Flip Vertical, lalu posisi layer yang sudah terbalik langsung di bawah iPhone asli.

Sleek Mobile App Website Tutorial

Tambahkan Layer Mask dengan mengklik ikon Layer Mask di Layers Panel.

Sleek Mobile App Website Tutorial

Pilih Gradient Tool (G) dan pilih black to white swatch. Buat garis dari atas ke bawah pada iPhone yang terbalik yang tingginya sekitar 50px.

Sleek Mobile App Website Tutorial

Akhirnya, turunkan opacity pada layer menjadi 30%.


Langkah

Berikutnya adalah menambahkan detail utama aplikasi kita di sebelah kanan ponsel kita. Sebelum kita mulai, mari tambahkan panduan lain untuk menjaga agar tetap selaras. Pilih View > New Guide... pilih "Vertical" untuk orientasi dan 550 px untuk posisi.

Pada sekitar 100px dari atas kanvas kita, kita akan menambahkan logo kita. Saya menggunakan logo yang telah saya buat sebelumnya, Anda cukup menggunakan teks atau memasukkan logo Anda sendiri di sini. Di bawah logo, kita akan menambahkan paragraf teks untuk deskripsi aplikasi kita. 

Sleek Mobile App Website Tutorial

Di bawah logo, kita akan menambahkan paragraf teks untuk deskripsi aplikasi kita Pilih Horizontal Type Tool (T) dan gambar persegi panjang antara panduan tengah dan panduan kanan. Tetapkan pengaturan karakter sebagai berikut:

  • Font Family: Helvetica Neue
  • Size: 16 px
  • Style: Regular
  • Leading: 26 px
  • Tracking: -25
  • Anti-aliasing: Crisp
  • Color: #FFFFFF
Sleek Mobile App Website Tutorial

Langkah 7

Selanjutnya kita akan membuat sebuah tombol bagi pengunjung untuk membeli aplikasi kita. Dengan menggunakan Rounded Rectangle Tool (U), gambarlah persegi panjang 240x75px dengan radius 4px. Sejajarkan dengan itu, bagian kiri tombol menyentuh pemandu tengah dan berukuran 45px di bawah teks.

Sleek Mobile App Website Tutorial

Sekarang kita akan menerapkan beberapa gaya layer. Klik dua kali sisi kanan layer di Layer Panel dan gunakan gambar di bawah ini untuk referensi.

Sleek Mobile App Website Tutorial

Untuk menambahkan ikon Apple, gambar kotak teks kecil di dalam tombol menggunakan Horizontal Type Tool (T), lalu salin dan tempelkan simbol ini:  ke dalam kotak teks dan setel pengaturan karakter sebagai berikut:

  • Font Family: Helvetica Neue
  • Size: 50 px
  • Style: Regular
  • Anti-aliasing: Crisp
  • Color: #000000
Sleek Mobile App Website Tutorial

Akhirnya, ubah opacity pada layer ini menjadi 30%.

Buat kotak teks lain ke kanan dan tambahkan 2 baris teks (misal: "Download now on the App Store"). Terapkan pengaturan karakter berikut:

  • Font Family: Helvetica Neue
  • Size: 11 px (first line) 24 px (second line)
  • Style: Bold
  • Leading: 26 px
  • Tracking: -25
  • Anti-aliasing: Crisp
  • Color: #FFFFFF
Sleek Mobile App Website Tutorial

Tambahkan gaya Layer ke teks ini dengan menggunakan gambar berikut untuk referensi:

Sleek Mobile App Website Tutorial

Selanjutnya, kita akan menambahkan pemisah di sebelah kanan teks yang baru saja kita tambahkan. Pilih Line Tool (U) dan sambil menahan tombol SHIFT, gambarlah garis 1px dari atas tombol ke bawah, lalu ubah warna garis menjadi "FFFFFF" (putih).

Sleek Mobile App Website Tutorial

Ubah opacity dari baris ini menjadi 15% dan duplikat dengan memilih Layer > Duplicate Layer... dan klik OK. Ubah warna garis duplikat ini menjadi # 000000 (hitam) dan ubah opacity menjadi 10%. Kemudian, pindahkan garis duplikat 1px ke kiri.

Sleek Mobile App Website Tutorial

Unsur terakhir yang ditambahkan ke tombol ini adalah ikon yang mengindikasikan unduh. Mulailah dengan memilih Ellipse Tool (U) dan buat lingkaran berdiameter 25px.

Sleek Mobile App Website Tutorial

Kemudian, tambahkan Layer Styles berikut ini:

Sleek Mobile App Website Tutorial

Penutup, ambil Custom Shape Tool (U) dan pilih bentuk panah (saya menggunakan bentuk default yang disebut "Arrow 9"). Buat panah kecil berukuran 10px di dalam lingkaran dan ubah warna menjadi "FFFFFF" (putih).

Sleek Mobile App Website Tutorial

Langkah 8

Sekarang buat kotak kecil untuk menampilkan harga aplikasi kita. Pilih Rounded Rectangle Tool (U), atur Radius ke 4px dan buat persegi panjang yang tumpang tindih dengan tombol unduh dan tingginya 52px dan lebar lebih lebar dari 100px.

Sleek Mobile App Website Tutorial

Ubah warna kotak ini menjadi "2B2B2B" dan pindahkan di bawah tombol unduh di Layers Panel.

Sleek Mobile App Website Tutorial

Selanjutnya, tambahkan Stroke Layer Style ke kotak ini dengan pengaturan berikut:

Sleek Mobile App Website Tutorial

Sekarang kita bisa menambahkan informasi harga aktual. Untuk ini kita akan membuat dua kotak teks terpisah karena konten dalam membutuhkan gaya yang berbeda.

Untuk kotak teks pertama, tambahkan beberapa teks (saya menggunakan "ONLY") dan menerapkan pengaturan karakter berikut:

  • Font Family: Helvetica Neue
  • Size: 19 px
  • Style: Bold
  • Anti-aliasing: Crisp
  • Color: #FFFFFF
Sleek Mobile App Website Tutorial

Untuk kotak teks kedua, tambahkan harga Anda (saya menggunakan "$1,99") dan menerapkan pengaturan karakter berikut:

Sleek Mobile App Website Tutorial

Langkah 9

Pindah ke bagian bawah halaman kita, kita perlu membuat beberapa pemisahan. Untuk ini, kita akan menggunakan teknik dua baris yang kita gunakan sebelumnya pada tombol unduh untuk memberi pemisah tampilan "inset".

Pilih Line Tool (U) dan sambil menahan tombol SHIFT, gambarlah garis 1px dari panduan kiri ke kanan, lalu ubah warna garis menjadi "000000" (hitam).

Sleek Mobile App Website Tutorial

Ubah opacity dari baris ini menjadi 80% dan duplikat dengan memilih Layer > Duplicate Layer ... dan klik OK. Ubah warna garis duplikat ini menjadi "FFFFFF" (putih) dan ubah opacity menjadi 10%. Lalu, pindahkan garis duplikat 1px jadi di bawah garis hitam.

Sleek Mobile App Website Tutorial

Langkah 10

Pada bagian di bawah pemisah baris yang baru saja kita buat, kita akan menambahkan dua kolom, untuk screenshots dan daftar fitur.

Dimulai dengan screenshots, mulailah dengan mengimpor screenshots pertama Anda dengan memilih File > Place. Pilih tangkapan layar kita dari fail browser dan klik Place. Ubah ukuran screenshot menjadi 80% lebar dan tinggi, lalu gerakkan tangkapan layar di dekat pemandu kiri dan klik Enter.

Sleek Mobile App Website Tutorial

Pilih layer di Layers Panel dan klik tombol "Add Mask" dua kali untuk menambahkan Vector Mask.

Sekarang pilih Rounded Rectangle Tool (U) dan ubah radius menjadi 6px dan buat persegi panjang di atas screenshot dengan ukuran 175x120px.

Sleek Mobile App Website Tutorial

Terakhir, kita akan menambahkan Stroke Layer Style dengan pengaturan berikut:

Sleek Mobile App Website Tutorial

Ulangi langkah-langkah di atas untuk semua screenshots Anda dan beri mereka jarak 35px antara satu sama lain.

Sleek Mobile App Website Tutorial

Langkah 11

Untuk memisahkan screenshots dari fitur, gambar garis 1px dari bagian atas screenshots pertama hingga bagian bawah screenshots terakhir yang berjarak sekitar 55px dari screenshots.

Ubah warna garis menjadi "FFFFFF" (putih) dan atur opacity menjadi 5%.

Sleek Mobile App Website Tutorial

Langkah 12

Mari tambahkan judul yang akan menjelaskan fitur kita (saya menggunakan "Leaflet Features"). Posisikan teks 55px dari garis pemisah kiri dan gunakan pengaturan karakter berikut ini:

  • Font Family: Helvetica Neue
  • Size: 24 px
  • Style: Regular
  • Tracking: -10
  • Anti-aliasing: Crisp
  • Color: #FFFFFF
Sleek Mobile App Website Tutorial

Sekarang mari kita membuat daftar fitur dan posisi di bawah judul. Buat kotak teks dan tambahkan lima atau enam baris fitur dan beri mereka pengaturan karakter berikut:

  • Font Family: Helvetica Neue
  • Size: 15 px
  • Style: Regular
  • Leading: 28 px
  • Tracking: -10
  • Anti-aliasing: Sharp
  • Color: #8d8c90
Sleek Mobile App Website Tutorial

Ulangi langkah di atas untuk menambahkan persyaratan aplikasi.

Sleek Mobile App Website Tutorial

Langkah 13

Untuk membuat daftar fitur kami menonjol, mari buat beberapa bullets sederhana.

Mulailah dengan menggeser daftar fitur kotak teks 25px ke kanan.

Sleek Mobile App Website Tutorial

Sekarang pilih Ellipse Tool (U) dan buat lingkaran berdiameter 9px di sebelah kiri dari fitur pertama. Ubah warna lingkaran menjadi "bce086".

Sleek Mobile App Website Tutorial

Tambahkan Layer Style berikut ke lingkaran:

Sleek Mobile App Website Tutorial

Langkah 14

Sekarang kita perlu menduplikat bullets kita dan menyelaraskannya ke setiap fitur. Mulailah dengan menduplikat layer lingkaran dengan memilih layer lalu klik Layer > Duplicate Layer ...

Selanjutnya, pindahkan layer duplikat ke bawah 28px (jumlah Leading yang kita terapkan pada daftar fitur). Ulangi langkah di atas tiga kali. Ulangi langkah di atas tiga kali.

Sleek Mobile App Website Tutorial

Langkah 15

Pindah ke bagian footer dari halaman kita, kita akan sekali lagi menerapkan teknik dua jalur yang kita gunakan di awal  Langkah 9 untuk menambahkan beberapa pemisahan.

Sleek Mobile App Website Tutorial

Langkah 16

Sekarang kita bisa menambahkan beberapa hipertaut yang berguna ke area footer kita. Pertama kita perlu membuat empat kotak teks, berdampingan, yang akan menampung hipertaut kita.

Mulailah dengan membuat kotak teks yaitu sekitar 160x40px. Tambahkan beberapa teks untuk itu dan ulangi sebanyak 3 kali. Berikut adalah beberapa contoh teks yang bisa Anda gunakan:

  • Kotak 1: Ikuti @mycompany di Twitter untuk berita dan hal-hal baru.
  • Kotak 2: Untuk bantuan & dukungan ke Support area kami..
  • Kotak 3: Unduh kami pers dan media kit.
  • Kotak 4: Hak Cipta 2010 Perusahaanku, LLC.

Gunakan yang berikut untuk pengaturan karakter:

  • Font Family: Helvetica Neue
  • Size: 12 px
  • Style: Regular
  • Leading: 20 px
  • Anti-aliasing: Sharp
  • Color: #5555552
Sleek Mobile App Website Tutorial

Karena Anda mungkin melihat kotak kita tidak rata dan tidak selaras dengan benar, jangan khawatir, kita akan memperbaikinya di langkah berikutnya.


Langkah 17

Untuk memperbaiki masalah alignment kita, mulailah dengan menempatkan keempat kotak teks yang telah kita buat di atas ke dalam folder dan beri nama "Footer".

Pertama, posisikan kotak teks pertama 55px dari panduan kiri dan kotak teks terakhir menyentuh kanan panduan.

Sleek Mobile App Website Tutorial

Sekarang pilih empat layer teks di folder Footer dan ambil Move Tool (V). Klik tombol Align vertical center, lalu klik Distribute horizontal centers button dari Move toolbar.

Sleek Mobile App Website Tutorial

Langkah 18

Sekarang kita bisa menambahkan beberapa ikon kustom untuk menonjolkan hipertaut kita.

Pilih Ellipse Tool (U) dan buat lingkaran berdiameter 36px di sebelah kotak teks pertama kita.  Ubah warna lingkaran ini menjadi "FFFFFF" (putih).

Sekarang pilih Layer > Rasterize > Layer.

Sleek Mobile App Website Tutorial

Selanjutnya adalah menambahkan ikon kita ke lingkaran ini. Untuk ikon pertama, saya menggunakan Twitter "t" yang telah saya unduh secara gratis disini.

Setelah diunduh, pilih File > Place pada photoshop untuk mengimpor ikon ke dalam dokumen kita. Setelah diimpor, ubah ukuran ikon menjadi 28% lebar dan tinggi, posisikan di atas lingkaran kita, lalu klik enter.

Sleek Mobile App Website Tutorial

Selanjutnya, klik kanan pada thumbnail ikon Twitter di Layers Panel dan klik Select Pixels.

Sekarang pilih layer lingkaran di Layers Panel lalu pilih Edit > Clear.

Hapus Ikon Twitter yang diimpor dengan memilihnya di Layers panel dan klik atau seret ke ikon Trash.

Akhirnya, turunkan opacity pada layer lingkaran menjadi 15%.

Sleek Mobile App Website Tutorial

Langkah 19

Sleek Mobile App Website Tutorial

Untuk sisa ikon yang ditunjukkan di atas, ulangi langkah di  Langkah 18 dengan menggunakan ikon lain atau dengan bentuk kustom di photoshop.


Langkah 20

Untuk menambahkan sentuhan akhir pada hipertaut footer kita, berikan warna untuk membantu mereka terlihat.

Menggunakan Horizontal Text Tool (T) menyorot bagian teks di setiap kotak teks dan mengubah warnanya menjadi "83b546".

Sleek Mobile App Website Tutorial

Kesimpulan

Itu saja! Saya harap Anda menikmati tutorial ini dan telah menemukan beberapa teknik berguna yang dapat Anda adaptasi / terapkan pada desain Anda selanjutnya.

Advertisement
Advertisement
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.