Advertisement
  1. Web Design
  2. Complete Websites

Mendesain Antarmuka Website e-Commerce yang Bersih pada Photoshop

by
Read Time:25 minsLanguages:

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

Ingat Toko Fashion freebie? Kali ini saya akan menunjukkan pada Anda bagiamana membuat antarmuka website e-commerce yang bersih ini pada Adobe Photoshop.  Tutorial ini tidak hanya diisi dengan banya teknik Photoshop tetapi juga konsep desain yang lebih dari bagian “bagaimana”, yang tentu saja tidak ingin Anda lewatkan. Jadi, mari mulai!


Toko Fashion, The Freebie

Pertama, saya ingin memberikan kredit pada Sunil, yang sebenarnya mendesain antarmuka ini. Saya telah membuat beberapa modifikasi pada tata letak, seperti mengorganisirnya menjadi bentuk grid.


Sketsakan Ide Anda

Pertahankan sketsa Anda bebas dan kasar. 

Sebelum kita melompat pada Adobe Photoshop, kita harus lebih dulu mengambil beberapa saat untuk memikirkan bagaimana kita akan menyusun desain kita. Ambillah sebuah pulpen dan kertas kemudian mulai membuat sketsa wireframe kita.

Ketika membuat sebuah wireframe, kita mensketsakan halaman kita untuk mencoba peletakkan visual yang berbeda-beda untuk masing-masing elemen pada halaman kita.  berkesinambungan satu sama lain. Kita jugan akan mempertimbangkan elemen mana yang harus mendapatkan penekanan dan yang mana yang tidak perlu.berkesinambungan satu sama lain. Kita jugan akan mempertimbangkan elemen mana yang harus mendapatkan penekanan dan yang mana yang tidak perlu.

Pada tahap ini kita harus berhenti mengkhawatirkan tentang elemen tertentu akan terlihat, pikirkanlah bagaimana desain situs terlihat secara keseluruhan nantinya.

Sayangnya, karena saya tidak membuat tata letak ini dari coretan, saya tidak memiliki sketsa wireframe untuk saya tunjukkan pada Anda. Tetapi ada satu hal yang akan saya katakan: jagalah sketsa Anda bebas dan kasar. Tidak perlu terlihat keren atau artistik.

Jika Anda baru dalam hal ini, berikut adalah tugas pertama Anda: cobalah mensketsakan desain akhir ini, ataupun website yang telah ada, yang mana saja. Hal ini akan membantu Anda memperhatikan hubungan antar elemen dalam sebuah halaman web.

Baca lebih jauh:


Membuat Wireframe Hitam-Putih

Sekarang kita telah mensketsakan beberapa ide, waktunya untuk mengubah sketsa ini menjadi wireframe yang lebih solid. Kita akan membuat wireframe hitam-putih yang semua tata letak dan dan tipe akan ditampilkan tetapi tidak akan ada warna, tekstur, gambar, dll.

Berikut adalah bagimana wireframe hitam-putih akhir kita akan terlihat: 


Tata Letak: Komposisi

Sebelum kita mulai mengerjakan wireframe kita pada Adobe Photoshop, kita memiliki beberapa hal untuk ditentukan.

Pertama, tata letak kita akan menjadi tata letak yang sudah tetap, artinya dimensi tata letak akan dispesifikkan menjadi angka tertentu dalam pixel. Tata letak kita akan memiliki luas 940px, jadi seperti yang dapat Anda lihat gambar di bawah ini, baik ditampilkan pada jendela yang lebih kecil maupun besar, ukurannya akan tetap sama.


Tata Letak: Grid

Menggunakan sebuah grid membuatnya lebih mudah untuk merapikan elemen kita dan menentukan ukurannya. Pada desain ini, kita akan menggunakan Baseline Grid ini yang dibuat oleh teman-teman keren pada Teehan+Lax. Ini merupakan garis dasar yang dipasangkan dengan sistem grid 960.

Bacaan Lebih Jauh:

Seiring dengan pergerakan kita, kita akan mendiskusikan bagaimana merapikan teks dan elemen kita, tetapi untuk saat ini Anda harus pergi membaca artikel ini untuk memahami bagaimana menggunakan grid ini.


Tata Letak: Spasi Putih

White, or Negative Space adalah spasi atau jarak antar elemen pada antarmuka kita. Jarak antar elemen mayor disebut Macro White Space.  Macro White Space adalah spasi berwarna putoh antar elemen seperti daftar item, spasi antar caption dan gambar, atau spasi antar kata dan huruf.

White Space membantu memposisikan brand, dan desainer biasanya menggunakan White Space pada desain mereka untuk memberikan perasaan yang memikat dan mewah. Jadi, ini adalah hal yang harus kita perhatikan pada saat mendesain.


Tipografi: Jenis Huruf

Kita harus selalu memilih jenis huruf/font kita secara hati-hati. Memilih font yang tepat bukanlah pekerjaan yang mudah, Anda harus melihat banyak aspek, dari memilih jenis huruf dengan sifat yang dapat mengirimkan pesan secara tepat, hingga bagaimana ia akan terlihat dalam browser.  Saya tidak akan masuk pada detail, tetapi saya akan menyebutkan beberapa post yang menurut saya sangat menarik:

Baca Lebih Lauh:

Pada antarmuka kita, kita akan menggunakan tiga jenis huruf berikut ini: Helvetica, jenis huruf yang rapi dan modern yang akan menjelaskan segala hal.  Georgia, sebuah jenis huruf yang membangkitkan kemewahan dan tone yang serius. Bebas, sebuah jenis huruf yang memberikan kesan kekuasaan, dan memberikan kesan statement yang berani, selalu menjelaskan tujuannya.

  • Helvetica Neue: Badan Teks (Font Standar).
  • Bebas: Judul (Download di sini).
  • Georgia: Elemen Judul Lainnya (Font Standar).

Tipografi: Hirarki

"Hirarki Tipografi" menjelaskan bagaimana perbedaan jenis huruf, ketebalan dan ukurannya terstruktur dalam sebuah dokumen.

Perihal ukuran font, grid baseline yang telah kita tentukan untuk digunakan didesain agar menjadi compatible dengan ukuran font standar, maka dari itu kita akan mempertahankannya.  Ukuran ini terbukti sangat berguna ketika dikombinasikan dengan tiga jenis huruf tadi. Jadi berikut ini adalah ukuran pixel utama untuk antarmuka kita:

  • 24px: H1 judul.
  • 18px: H2 judul.
  • 14px: H3 dan judul navigasi  
  • 12px: badan teks—dengan nilai leading (leading value)18px.

Bagiamanapun, pada banner sidebar kita dan area konten fitur, kita akan menggunakan beberapa ukuran berbeda (lagipula, iklan ini akan digantikan sewaktu-waktu) tetapi akan tetap dalam ukuran font standar.

Untuk ketebalannya, saya akan menggunakan dari Roman Lower Case (huruf kecil) hingga Bold Lower Case (huruf tebal kecil). Tidak begitu sulit.


Tipografi: Leading, Kerning & Tracking

Seperti yang telah saya sebutkan sebelumnya, kita akan menggunakan nilai leading (jarak baris) yang disediakan grid, yang akan menjadi: 18px dan 21px.

Kerning kita akan menjadi Metrics untuk badan teks, dan Optical untuk judul (lihat pada baca selanjutnya). Dan terakhir, kita akan menggunakan nilai tracking default (0) untuk semua teks.

Baca Lebih Lanjut:


Tipografi: Anti-Aliasing

Ini merupakan artikel yang sangat menarik. Anda harus membaca yang satu ini! Saya tidak akan mengatakan sepatah katapun, kecuali untuk bada teks (ukuran kecil) kita akan menggunakan Sharp, dan untuk judul (ukuran besar) kita akan menggunakan Crisp.


Langkah 1: Mempersiapkan Dokumen

Sekarang setelah kita menentukan beberapa keputusan, waktunya untuk membuka Adobe Photoshop dan benar-benar mulai membuat wireframe kita! Jadi bukalah dokumen grid yang telah kita unduh sebelumnya yang bernama “grid.psd”.  Hal pertama yang kita lakukan adalah memilih semua layer pada dokumen—kecuali folder bernama “Marks”—dan hapus semuanya, atau kelompokkan semua dalam sebuah folder dan sembunyikan untuk sekarang.  Sebelum kita melangkah lebih jauh, mari pilih folder “Marks” dan klik tombol “Lock All” pada panel layer.

Sekarang kita harus mengubah tinggi dokumen kita, karena desain akhir kita lebih tinggi daripada dokumen yang telah ada. Untuk melakukannya, kita akan pegi ke Image > Canvas Size, ubah tinggi (height) menjadi 1540px dan pastikan untuk mengatur Anchor menjadi Top Center. 

Kemudian klik View > Extras (untuk melihat Guides), Rulers (untuk melihat Rulers), dan Snap (sehingga objek yang kita buat dapat menangkap Guides).


Langkah 2: Membuat Latar Belakang

Kita akan mulai dengan membuat latar belakang. Buatlah layer baru, berikan nama (“bg” misalnya), kemudian gunakan Rectangular Marquee Tool (M).  Pilihlah seluruh kanvas, dan untuk mengisinya, klik Shift+Backspace, Use: Color… kemudian isi bidang yang telah dipilih dengan nilai warna berikut: #f5f5f3.  Perhatikan bahwa nilai warna yang akan kita gunakan pada wireframe hitam-putih bukanlah nilai akhir, tetapi kita akan menggunakannya untuk membedakan elemen halaman kita.


Langkah 3: Membuat Bar Atas

Sekarang mari membuat bar atas. Sekali lagi gunakan Rectangular Marquee Tool (M), pilihlah area dengan dimensi 1260x45px, kemudian isilah dengan nilai warna: #2d2d2d.

Pilih Horizontal Type Tool (T), ketik item navigasi Anda, kemudian terapkan pengaturan huruf berikut ini padanya:

  • Font: Helvetica Neue LT Std.  
  • Weight (ketebalan): 55 Roman. 
  • Size (ukuran): 12px. 
  • Kerning: Metrics. 
  • Color (warna): #767676. 
  • Anti-Aliasing: Sharp.

Untuk memastikan bahwa teks kita rata dengan latar belakang, pilihlah kedua layer (layer teks dan layer latar balakang), kemudian klik pada Rata Vertikal Tengah pada bar kontrol.


Langkah 4: Membuat Formulir Sign-in (Masuk)

Ketik kata "Sign In" menggunakan Horizontal Type Tool (T), terapkan pengaturan huruf berikut ini pada bagian tersebut, dan pastikan ia rata seperti yang terlihat di gambar di bawah ini.

  • Font: Helvetica Neue LT Std.  
  • Weight (ketebalan): 75 Bold. 
  • Size (ukuran): 12px. 
  • Kerning: Metrics. 
  • Color (warna): #ffffff. 
  • Anti-Aliasing: Sharp.

Sekarang mari buat area input (masukan). Menggunakan Rounded Rectangle Tool (U) buatlah dua persegi bulat yang masing-masingnya berukuran 127x26px, dengan radius 15px. Isi dengan nilai warna berikut: #767676 dan ratakan seperti gambar di bawah ini.  

Ketiklah dua kata “User name (Nama Pengguna)” dan “Password (Kata Sandi)” di dalam dua area ini, kemudain ratakan seperti gambar di bawah ini:

  • Font: Helvetica Neue LT Std.  
  • Weight (ketebalan): 55 Roman. 
  • Size (ukuran): 12px. 
  • Kerning: Metrics. 
  • Color (warna): #ffffff. 
  • Anti-Aliasing: Sharp.

Kita akan membuat tombol “Go” menggunakan Rounded Rectangle Tool (U) tetapi kali ini dengan radius 25px. Keudian ketik kata “Go” di dalamnya menggunakan karakter huruf yang sama dengan pengaturan seperti gambar sebelumnya tetapi ubahlah ketebalannya menjadi 75 Bold.

Gunakan Line Tool (L), buatlah sebuah garis 1x25px dan isilah menggunakan warna putih. Keudian ketik kata “Sign Up (Daftar)” menggunakan pengaturan karakter yang sama seperti ditunjukkan gambar di bawah ini, juga ratakan seluruh elemen yang telah kita buat pada tahap ini sesuai dengan gambar.


Langkah 5: Membuat Ruang Iklan

Mari gunakan Rctangular Marquee Tool (M) untuk embuat persegi panjang 480x60px, isilah menggunakan #767676, dan ratakan seperti gambar di bawah ini. Ini akan berperan sebagai placeholder untuk ruang iklan.

Kemudian berikan layer ini Stroke. Gambar menunjukkan pangaturan yang kita inginkan.


Langkah 6: Membuat Logo

Secara praktik, logo kita seharusnya tidak desain di Adobe Photoshop ini, tetapi untuk sekarang kita buat saka di aplikasi ini terlebih dahulu. Jadi ambillah Ellipse Tool (U), buatlah sebuah lingkaran 60x60px, kemudian isi dengan nilai warna: #2d2d2d, dan ratakan seperti yang terlihat pada gambar di bawah ini. 

Ketiklah huruf “F” menggunakan pengaturan huruf berikut ini, dan ratakan menggunakan gambar berikut ini:

  • Font: Avant Quelombre. 
  • Size (ukuran): 53.65px. 
  • Color (warna): #ffffff. 
  • Anti-Aliasing: Crisp.

Kemudian ketik kata “Fashion” dan terapan pengaturan huruf berikut:

  • Font: Avant Quelombre. 
  • Size (ukuran): 30px. 
  • Kerning: Optical.  
  • Color (warna): #2d2d2d. 
  • Anti-Aliasing: Crisp.

Dan “Store” menggunakan pengaturan huruf berikut ini:

  • Font: Georgia. 
  • Weight (ketebalan): Regular. 
  • Size (ukuran): 12px. 
  • Kerning: Metrics. 
  • Color (warna): #767676. 
  • Anti-Aliasing: Sharp.

Pastikan Anda meletakkan keduanya sesuai dengan yang ditunjukkan gambar di bawah ini.


Langkah 7: Membuat Bar Navigasi

Pada tahap ini kita akan membuat bar navigasi kita. Segera buat dan gunakan Rectangular Marquee Tool (M), pilihlah area berdimensi 940x48px, kemudian isi dengan nilai warna: #c3c3c3, dan letakkan 20 pixel di bawah ruang ikan seperti yang terlihat di gambar berikut.

Kita akan melanjutkan dan menggunakan Horizontal Type Tool (T), dan mengetik judul dari sub-halaman kita menggunakan pengaturan huruf di bawah ini:

  • Font: Bebas. 
  • Weight (ketebalan): Regular. 
  • Size (ukuran): 14px. 
  • Kerning: Optical. 
  • Color (warna): #2d2d2d/#ffffff. 
  • Anti-Aliasing: Crisp.

Sekarang mari pisahkan judul yang baru saja kita buat. Menggunakan Line Tool (U), buatlah sebuah garis vertikal antara setiap dua judul, isi dengan nilai warna berikut ini: #b4b4b4, dan pastikan untuk memberikan 20px untuk masing-masing judul dan garis vertikal.


Langkah 8: Membuat Menu Drop-down

Sekarang mari kita buat menu drop-down. Gunakan Rectangular Marquee Tool (M), pilihlah area yang mengisi ruang antara dua garis yang melindunginya dari kata “WOMEN” dan isilah menggunakan nilai warna: #2d2d2d.  kemudian buat pilihan lain dengan dimensi 340x147px, isi dengan nilai warna yang sama, dan ratakan sesuai dengan yang ditunjukkan gambar di bawah ini. Ini akan bertindak sebagi latar belakang untuk menu drop-down.

Tekan tombol (T) pada keyboard Anda untuk memiliih Horizontal Type Tool (T), dan mulai ketikkan elemen dari sub-menu, menggunakan pengaturan huruf berikut ini:

  • Font: Helvetica Neue LT Std.  
  • Weight (ketebalan): 55 Roman. 
  • Size (ukuran): 12px. 
  • Kerning: Metrics. 
  • Leading: 30px. 
  • Color (warna): #767676. 
  • Anti-Aliasing: Sharp.

Terakhir, pastikan rata seperti yang ditunjukkan gambar di bawah ini:

Apa yang akan kita lakukan sekarang adalah untuk membuat sebuah bingkai untuk gambar (kita akan meletakkan sebuah gambar seorang wanita hanya untuk memebritahukan pengguna kita bahwa Anda telah memilih bagian “Wanita”). Jadi gunakan Rectangular Marquee Tool (M), buatlah sebuah pemilihan di area 139x105px, da nisi dengan #1f1f1f, kemudian buatlah pilihan lain 121x87px dan isilah dengan #767676.  Pastikan bagian tengah dua persegi ini rata secara horizontal dan vertikal.


Langkah 9: Membuat Bar Pencarian

Mari mulai dan buatlah sebuah kolom input untuk bar pencarian kita. Dapatkan Rounded Rectangle Tool (U), buatlah sebuah persegi 123x26px, dengan radius 15px, dan isilah dengan warna putih. Jangan lupa untuk meratakannya sesuai dengan yang ditunjukkan gambar di bawah ini.

Menggunakan Horizontal Type Tool (T) yang luar biasa, ketik kata “Search (Pencarian)” di dalam peregi dan terapkan pengaturan huruf seperti berikut:

  • Font: Helvetica Neue LT Std.  
  • Weight (ketebalan): 55 Roman. 
  • Size (ukuran): 12px. 
  • Kerning: Metrics. 
  • Color (warna): #767676. 
  • Anti-Aliasing: Sharp.

Temukan sebuah ikon kaca pembesar, dan letakkan pada bagian kanan bar pencarian, pastikan Anda beri warna #929292 dan rata seperti yang ditunjukkan gambar di bawah.


Langkah 10: Membuat Bar Pencarian

Mari mulai membuat area “Featured Content”. Mulai dengan membuat pilihan 640x315px menggunakan Rectangular Marquee Tool (M), dan isilah menggunakan #c3c3c3.

Mari buat bar ini tempat untuk menampilkan pesan tentang produk fitur. Gunakan Rectangular Marquee Tool (M), pilihlah 480x33px, isilah dengan nilai warna: #767676, dan ratakan seperti yang terlihat di gambar di bawah ini.

Pilihlah Horizontal Type Tool (T) dan keitklah pesan menggunakan pengaturan huruf di bawah ini: 

  • Font: Helvetica Neue LT Std.  
  • Weight (ketebalan): 55 Roman. 
  • Size (ukuran): 14px. 
  • Kerning: Metrics. 
  • Color (warna): #ffffff. 
  • Anti-Aliasing: Sharp.

Jangan lupa untuk meratakan teks dan latar belakang seperti yang didemonstrasikan. 

Sekarang waktunya mengetik teks perkenalan. Gunakan Horizontal Type Tool (T), dan ketik kata “Collection” menggunakan pengaturan huruf berikut ini:

  • Font: Georgia.   
  • Weight (ketebalan): Bold. 
  • Size (ukuran): 18px. 
  • Kerning: Optical. 
  • Color (warna): #2d2d2d. 
  • Anti-Aliasing: Crisp. 

Kemudian ketiklah kata “Summer” menggunakan pengaturan huruf berikut:

  • Font: Georgia. 
  • Weight (ketebalan): Bold. 
  • Size (ukuran): 48px. 
  • Kerning: Optical. 
  • Color (warna): #ffffff. 
  • Anti-Aliasing: Crisp.

Dan terakhir, ketik “Helping you look cool” (Membantu Anda terlihat menawan) dengan pengaturan huruf yang diterapkan:

  • Font: Helvetica Neue LT Std.  
  • Weight (ketebalan): 55 Roman. 
  • Size (ukuran): 18px. 
  • Kerning: Optical. 
  • Color (warna): #2d2d2d. 
  • Anti-Aliasing: Crisp. 

Pastikan untuk meratakan teks kita seperti ditunjukkan gambar di bawah ini.


Langkah 11: Membuat Tag Penjualan

Sekarang mari kita membuat tag penjualan. Gunakan Ellipse Tool (U) untuk membuat lingkaran 80x80px, isilah dengan nilai warna ini: #2d2d2d, kemudian letakkan seperti ditunjukkan gambar di bawah ini.

Ketik beberapa teks di dalam lingkaran (“40% off” misalnya) dan terapkan pengaturan huruf pada bagian ini:

  • Font: Georgia. 
  • Weight (ketebalan): Regular / Bold. 
  • Size (ukuran): 48px / 14px. 
  • Kerning: Metrics. 
  • Color (warna): #ffffff. 
  • Anti-Aliasing: Crisp.

Langkah 12: Membuat Area Isi Utama

Mari bersegera dan mulailah membuat area konten kita. Kita akan mulai dengan judul, jadi gunakan Horizontal Type Tool (T), ketiklah sebuah judul, dan terapkan pengaturan huruf berikut:

  • Font: Bebas. 
  • Weight (ketebalan): Regular. 
  • Size (ukuran): 24px. 
  • Kerning: Optical. 
  • Color (warna): #2d2d2d. 
  • Anti-Aliasing: Crisp. 

Jangan lupa untuk meletakkannya 20px di bawah area konten fitur.

Dengan Horizontal Type Tool (T) yang masih dipilih, ketiklah sebuah deskripsi singkat untuk judul ini, menggunakan pengaturan huruf berikut ini:

  • Font: Helvetica Neue LT Std.  
  • Weight (ketebalan): 55 Roman. 
  • Size (ukuran): 12px. 
  • Kerning: Metrics. 
  • Color (warna): #767676. 
  • Anti-Aliasing: Sharp.

Dan tentu saja harus rata sesuai dengan grid baseline seperti yang ditunjukkan gambar di bawah ini.

Menggunakan Line Tool (U), buatlah sebuah garis selebar 640px dan warnai dengan nilai ini: #e5e5e5.


Langkah 13: Membuat Gambar Produk

Ambil Rectangular Marquee Tool (M), pilihlah bidang 200x152px, kemudian isi dengan #2d2d2d dan ratakan dengan jarak 20px di bawah garis yang baru saja kita buat.

Buatlah tag penjualan lain seperti yang kita buat pada langkah 11, tetapi kali ini buatlah lingkaran 45x45px dan isi dengan warna putih. Kemudian teks harus dalam 24px/14px dan diisi dengan #767676. 

Gunakan Horizontal Type Tool (T) untuk mengetik nama dan harga produk dengan pengaturan huruf berikut ini:

  • Font: Helvetica Neue LT Std.  
  • Weight (ketebalan): 55 Roman. 
  • Size (ukuran): 12px. 
  • Leading: 21px. 
  • Kerning: Metrics. 
  • Color (warna): #767676 / #000000. 
  • Anti-Aliasing: Sharp.

Kita akan mengisi jarak kosong antar teks dengan sebuah ikon—jikalau Anda bertanya-tanya.

Letakkan sebuah ikon kereta belanja, letakkan pada ruang kosong yang kita tinggalkan pada langkah sebelumnya, dan ratakan seperti ditunjukkan gambar di bawah ini.

Jika ikonnya berwarna, pergilah pada Layer > New Adjustment Layer > Black & White… untuk membuatnya menjadi hitam-putih.

Pilih semua elemen pratinjau produk yang kita buat pada tahap ini, kemudian kelompokkan mereka, dan gandakan folder ini lima kali. Ratakan enam pratinjau produk seperti yang ditunjukkan gambar di bawah ini.


Langkah 14: Membuat Banner Sidebar Besar

Sekarang mari mengerjakan sidebar. Kita akan mulai dengan banner yang besar, jadi ambillah Rectangle Tool (U), buatlah sebuah persegi panjang 280x314px dan mengisinya dengan #2d2d2d. Dengan alat yang masih dipilih membuat lain persegi panjang 280x41px dan isi dengan #767676, kemudian ratakan keduanya seperti yang ditunjukkan pada gambar di bawah ini. 

Menggunakan Horizontal Type Tool (T), ketiklah sebuah judul untuk banner ini menggunakan pengaturan jenis huruf berikut:

  • Font: Bebas 
  • Weight (ketebalan): Regular. 
  • Size (ukuran): 18px. 
  • Kerning: Optical. 
  • Color (warna): #ffffff. 
  • Anti-Aliasing: Crisp.

Tekan tombol (U) untuk memilih Ellipse Tool (U), buatlah sebuah lingkaran dengan dimensi 210x210px, isilah dengan #7676767 dan cobalah untuk meratakannya agar terlihat seperti gambar di bawah ini.

Sekarang, untuk menyiingkirkan bagian lingkaran yang melebihi latar banner, bukalah panel Layers, letakkan layer lingkaran (“tag_bg”) tepat di atas layer latar belakang banner (“box_bg”), kemuidan klik kanan pada layer lingkaran > Buatlah Clipping Mask.

Sekarang, menggunakan Horizontal Type Tool (T), ketiklah beberapa teks di dalam lingkaran ini, menggunakan pengaturan berikut ini:

  • Font: Georgia 
  • Weight (ketebalan): Regular. 
  • Size (ukuran): 18px / 14px / 24px / 30px. 
  • Kerning: Optical. 
  • Color (warna): #ffffff. 
  • Anti-Aliasing: Crisp.

Dan pastikan bahwa “Fauz Bold” pada panel huruf dipilih.


Langkah 15: Membuat Banner Sidebar yang Lebih Kecil

Gunakan Rectangle Tool (U) dan buatlah persegi berukuran 280x144px, isi dengan #2d2d2d, dan letakkan sesuai dengan gambar di bawah ini.

Sekarang mari buat tombol “Know More” (ketahui lebih lanjut). Gunakan Rectangular Marquee Tool (M) untuk membuat pemilihan pada dimensi 120x30px dan isilah dengan #767676.

Kemudian gunakan Horizontal Type Tool (T), ketiklah “Know More” di dalam persegi menggunakan pengaturan huruf seperti berikut ini:

  • Font: Helvetica Neue LT Std.  
  • Weight (ketebalan): 55 Roman. 
  • Size (ukuran): 18px. 
  • Kerning: Optical. 
  • Color (warna): #ffffff. 
  • Anti-Aliasing: Crisp.

Dengan Horizontal Type Tool (T) masih dipilih, ketiklah beberapa teks seperti yang ditunjukkan gambar di bawah ini menggunakan pengaturan seperti berikut:

  • Font: Helvetica Neue LT Std. 
  • Weight: 55 Roman. 
  • Size: 14px / 24px / 18px. 
  • Leading: 24px. 
  • Kerning: Optical. 
  • Color: #ffffff. 
  • Anti-Aliasing: Crisp.

Gambar menunjukkan bagaimana Anda harus meratakan teks.

Buatlah salinan dari banner ini dan berikan ruang 20px jarak vertikal di antaranya. 


Langkah 16: Membuat Bagian “Twitter Updates”

Pilihlah280x235px menggunakan Rctangular Marquee Tool (M), isilah dengan warna putih, kemudian letakkan 20px di bawah banner.

Gunakan Horizontal Type Tool (T) dan ketik menggunakan pengaturan huruf berikut ini:

  • Font: Bebas. 
  • Weight (ketebalan): Regular. 
  • Size (ukuran): 18px. 
  • Kerning: Optical. 
  • Color (warna): #2d2d2d. 
  • Anti-Aliasing: Crisp. 

Menggunakan Line Tool (U) buatlah sebuah garis dengan lebar 240px dan isilah dengan nilai warna: #e5e5e5.

Temukan sebuah ikon/ilustrasi dari burung Twitter dan letakkan seperti ditunjukkan gambar di bawah ini. Juga pastikan untuk membuatnya hitam-putih seperti yang kita lakukan pada langkah sebelumnya.

Gunakan Horizontal Type Tool (T) dan ketiklah beberapa teks sebagai sebah contoh cuitan (tweet), kemudian terapkan pengaturan huruf berikut:

  • Font: Helvetica Neue LT Std.  
  • Weight (ketebalan): 55 Roman. 
  • Size (ukuran): 12px. 
  • Leading: 18px. 
  • Kerning: Metrics. 
  • Color (warna): #2d2d2d / #767676. 
  • Anti-Aliasing: Crisp.

Kemudain ketik “More Tweets” menggunakan pengaturan huruf berikut:

  • Font: Helvetica Neue LT Std.  
  • Weight (ketebalan): 55 Roman. 
  • Size (ukuran): 12px. 
  • Kerning: Metrics. 
  • Color (warna): #2d2d2d. 
  • Anti-Aliasing: Crisp.

Jangan lupa untuk mengklik “Underline” pada panel Character.


Langkah 17: Membuat Bagian “Other Products” (Produk Lainnya)

Gunakan Rectangle Tool (U) dan buatlah sebuah persegi 940x264px, isilah dengan #ffffff, dan letakkan 20px di bawah bagian “Twitter Updates”.

Buatlah sebuah judul untuk bagian ini yang persis sama dengan yang kita buat tadi pada langkah sebelumnya. Kemudian gunakan Line Tool (U) untuk membuat garis sebesar 898px dan isilah dengan #e5e5e5.

Gunakan Rectangle Tool (U) untuk membuat persegi 178x113px. Buatlah tiga salinannya dan ratakan seperti gambar di bawah ini.

Sekali lagi, ketiklah beberapa informasi tentang produk dan terapkan pengaturan huruf ini pada teks Anda:

  • Font: Helvetica Neue LT Std.  
  • Weight (ketebalan): 55 Roman. 
  • Size (ukuran): 12px. 
  • Leading: 18px. 
  • Kerning: Metrics. 
  • Color (warna): #2d2d2d/#767676. 
  • Anti-Aliasing: Crisp.

Terakhir, jangan lupa untuk membuat tombol “Buy Now” (Beli Sekarang) diberi garis bawah.

Temukan sebuah ikon panah dan letakkan seperti gambar di bawah ini, coba untuk mengubah ukurannya menjadi sekitar 28x28px, dan isilah menggunakan nilai warna: #2d2d2d. buatlah salinan lain lagi untuk ikon ini dan letakkan pada bagian kanan.


Langkah 18: Membuat Area Footer

Gunakan Rectangular Marquee Tool (M) dan buatlah pilihan seluas 1260x122px, kemudian isilah dengan #2d2d2d.

Ketiklah teks pada footer menggunakan pengaturan huruf berikut ini:

  • Font: Helvetica Neue LT Std. 
  • Weight: 55 Roman. 
  • Size: 12px. 
  • Leading: 21px. 
  • Kerning: Metrics. 
  • Color: #ffffff / #767676. 
  • Anti-Aliasing: Crisp.

Terakhir, letakkan sebuah salinan logo dan pastikan meratakannya seperti yang terlihat pada gambar di bawah ini, dan selesai!


Kombinasi Warna

Sekarang kita telah selesai dengan wireframe hitam-putih kita, sekarang waktunya untuk mewarnai antarmuka kita. Warna adaah topik yang besar, jadi saya hanya akan menjelaskan bagian kombinasi warna. Skema warna kita akan terdiri dari tiga tipe warna:

  • Subordinat atau warna dasar: ini adalah warna yang lemah secara visual atau warna subordinat. Ia kontras atau pelengkap.
  • Dominan atau warna utama: Pewarnaan ini menggambarkan nilai komunikasi dari kombinasi warna.
  • Aksen atau warna highlight: Ini bisa menjadi simpatik pada warna dasar atau warna utama. Atau, Anda dapat memilih warna aksen yang secara visual cukup kuat, dan yang terlihat bersaing dengan warna utama, untuk memberikan penekanan antar kombinasi warna.

Gambar berikut ini menunjukkan warna dasar, utama, dan aksen kita.


Ruang Melihat-lihat

Karena kita akan menggunakan beberapa gambar pada desain kita, saya pikir saya harus membicarakan sedikit tentang “Looking Room” (Ruang Melihat-lihat).  Umunya, gambar foto akan memiliki sebuah subyek dan ruang di sekitarnya. Visual yang mnarik dari sebuah gambar dapat berasal dari pergerakan, yang menunjukkan bagaimana mata kita bergerak di sekitar jepretan. Dan untuk membuat mata kita bergerak, maka fotografer mengatur ruang di sekitar subyek secara teratur.

Jadi, sebagai contoh, seperti yang dapat Anda lihat pada gambar di bawah ini, pengaturan ruang subyek pada bagian kiri (1), dengan Ruang Putih (Looking Room) pada bagian kanan, menciptakan sebuah pergerakan (3), yang akan membuat mata kita melihat ke arah di mana subyek terlihat.

Baca Lebih Lanjut:


Langkah 19: Memberi Warna pada Latar Belakang

Sekarang mari mulai mewarnai antarmuka kita! Untuk mengisi layer latar belakang dengan warna, Anda dapat mengklik pada thumbnail pada panel Layer sembari menahan tombol Cmd/CTRL untuk memilih pixel kemudian menekan Shift+Backspace > Color…> #f6f6f4.  Atau Anda dapat menambahkan Color Overlay di atasnya.


Langkah 20: Mewarai Bar Atas

Warnai kata “Sign In” dengan nilai warna berikut: #ffffff, “User name/Password” dengan: #8e8e8e, kolom input dengan #8e8e8e, kemudian latar balakang tombol “Sign In” dengan #ea6a53, dan teks navigasi dengan #999999.

Isilah ruang iklan dengan sebuah gambar seperti yang ditunjukkan gambar di bawah ini, dan buatlah Clipping Mask untuk itu, seperti yang telah kita lakukan pada langkah 14.

Waktunya untuk mewarnai logo. Berikan lingkaran dan kata “Fashion” nalai warna barikut ini: #2d2d2d, isilah huruf “F” dengan warna yang sama seperti latar belakang #f6f6f4, dan kata “store” dengan #bc3726.


Langkah 21: Mewarnai Bar Navigasi

Kita akan mengisi teks latar belakang navigasi dengan nilai warna berikut ini: #c3c3c3, teks dengan #2d2d2d, kata “WOMEN” dengan #f6f6f4 (mewakili yang dipilih), dan garis vertikal yang memisahkan dengan #b4b4b4.

Untuk menambahkan visua yang menarik pada teks navigasi, kita akan menambahkan Drop Shadow. Gambar di bawah ini menunjukkan pengaturannya.

Berpindah pada bar pencarian kita akan mengisi kolom input dengan warna #ffffff, kata “Search” dengan #a6a6a6, dan ikonnya dengan #ea6a53. 

Sekarang mari berikan bar sub-navigasi beberapa warna… isilah latar belakang dengan #2d2d2d, teks dengan #c4c4c4, dan bingkai gambar dengan #1f1f1f.

Kita akan membuat bingkai gambar sedikit lebih menarik dengan manmbahkan Drop Shadow dan sebuah Inner Shadow padanya. Semua pegaturannya dapat dilihat pada gambar di bawah ini.

Terakhir, letakkan sebuah foto model wanita seperti yang ditunjukkan gambar di bawah ini. 

Sekarang saatnya membuat garis putus-putus antar item navigasi. Bukalah Adobe Illustrator, buatlah sebuah dokumen baru, pilihlah Line Segment Tool (\), buatlah sebuah garis selebar 135px, dan isilah dengan None (/).  Kemudian bukalah panel Stroke dan atur pengaturan Anda sesuai dengan gambar di bawah ini.

Salin garis putus-putus dan tempelkan pada Adobe Photoshop, buatlah dua salinan, dan isilah semuanya dengan nilai warna ini: #484848.


Lagnkah 22: Mewarnai Banner Sidebar yang Lebih Besar

Kita akan memulai langkah ini dengan meletakkan sebuah gambar untuk mengisi latar belakang banner. Pergilah ke File > Place … > Select an Image > Place.

Mari mulai dan warnai lingkaran dengan teks di dalamnya. Nilai warna yang harus kita gunakan ditunjukkan gambar di bawah ini.

Untuk membuat nomor “50” terlihat luar biasa, kita akan menerapkan Drop Shadow pada layer yang mengandungnya. Pengaturan dapat terlihat seperti di gambar di bawah ini.

Waktunya mengerjakan judul. Isilah latar belakangnya menggunakan nilai warna berikut ini: #000000, dan teks dengan nilai warna: #c3c3c3. Kemudian buatlah dua garis putus-putus (seperti yang kita buat pada langkah 21) isilah dengan #414141 dan letakkan seperti gambar di bawah ini.

Mari tambahkan beberapa visual yang menarik untuk latar belakang judul dengan menambahkan tekstur grunge yang halus. Unduhlah set kuas yang menarik pada: "Function Subtle Grunge Brushes" yang dibuat oleh kawan-kawan luar biasa pada WeFunction atau pada set kuas lain yang Anda sukai. Buatlah layer baru tepat di atas layer latar belakang judul, dan ketika ia terpilih, lukislha di sekitar judul dengan salah satu kuas menggunakan Brush Tool (B) (atau mungkin Anda menggunakan PNG yang dimasukkan) isilah dengan warna putih, kemudian kurangi kegelapannya menjadi 30%.  Akhirnya, klik kanan > Buatlah clipping mask…


Langkah 23: Mewarnai Area Konten Fitur 

Kita akan mengisi latar belakang dari area konten fitur dengan gradien untuk membuatnya terlihat lebih menarik. Jadi, lanjutkan dan gunakan Gradient Tool (G), bukalah Gradient Editor daro panel Control, dan atur nilai wanra Anda dari #b6a397 menjadi #9d8a83. 

Kita harus menspesifikkan area yang harus diisi dengan gradien, dan kita melakukannya dengan embuat pilihan di atasnya. Jadi mari pergi ke panel Layers, klik pana latar belakang thumbnail layer sembari menahan tombol Cmd/CTRL untuk memilihnya, kemudian dengan Gradient Tool (G) masih dipilih, pilih Radical Gradient, dan seret seperti yang ditunjukkan gambar di bawah ini sembari menahan tombol Shift untuk mempertahankan sudut. 

Nilai warna pada elemen bagian ini ditunjukkan dengan gambar di bawah ini.

Terakhir, temukan sebuah foto seorang model wanita, letakkan pada dokumen kita, dan ratakan sesuai dengan grid seperti yangditunjukkan gambar di bawah ini.


Langkah 24: Mewarnai Banner Sidebar Kecil

Sekali lagi, kita akan meletakkan sebuah gambar sebagai latar belakang banner kita, dan mengguankan nilai warna seperti yang ditunjukkan gambar di bawah ini untuk mewarnai elemen kita.

Untuk membuat teks kita menjadi sedikit lebih menarik, kita akan memberikan Drop Shadow. Pengaturan dapat dilihat pada gambar di bawah ini.

Dan kita akan melakukan hal yang sama pada banner yang lain…

Sekarang mari berikan beberapa warna pada bagian “Twitter Updates”… gambar di bawah ini mengandung semua nilai warna yang perlu kita gunakan pada bagian ini.


Langkah 25: Mewarnai Area Konten Utama

Kita akan mulai dengan judul, isilah dengan nilai warna: #2d2d2d, kemudian deskripsinya dengan nilai: #858585, kemudian garisnya dengan #e5e5e5.

Berpindah pada pratinjau produk… pertama letakkan sebuahh gambar produk, kemudian warnai seluruh elemen dengan nilai yang Anda lihat di gambar di bawah ini.

Elemen pada “Other Products” akan diwarnai sama dengan nilai yang ditunjukkan pada langkah sebelumnya, hanya saja pastikan untuk mengisi latar belakang dengan warna putih #ffffff, dan ikon panah dengan #040707. 


Mewarnai Area Footer

Isilah latar belakang footer dengna nilai warna berikut: #2d2d2d, dan teks dengan #a0a0a0 dan #ffffff.

Dan terakhir, warnai logo seperti yang ditunjukkan oleh gambar di bawah ini…


Kesimpulan

Dan itulah semua! Saya harap Anda menikmati membaca tutorial ini, dan, yang lebih penting, Anda telah mengambil manfaatnya. Jika Anda memiliki pertanyaan, jangan ragu untuk meninggalkan komentar, dan saya akan berusaha sebaik mungkin untuk membantu.

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.