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

Merancang Antarmuka Pengguna Modular Kit di Photoshop

by
Length:LongLanguages:

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

Peran Photoshop dalam desain web menjadi lebih modular. Alih-alih menyusun tata letak piksel sempurna dari seluruh halaman web, mungkin lebih masuk akal hari ini untuk berkonsentrasi pada gaya umum, skema warna dan elemen antarmuka tertentu. Hari ini kita akan melihat lebih dekat pada desain elemen UI, menarik bersama kit UI kita sendiri dalam prosesnya.


Belajar dengan Contoh

Sebelum kita mulai merancang koleksi elemen UI sendiri, mari lihat beberapa situs web yang melakukan pekerjaan hebat dengan antarmuka mereka. Tentu tidak ada salahnya untuk mendapatkan inspirasi!

Exhibit A: Flow

Flow's UI
Flow's UI

Flow melakukan pekerjaan luar biasa dengan antarmuka pengguna mereka. Benar-benar bersih, bersemangat - dan hanya dengan melihatnya Anda secara naluriah tahu apa yang harus dilakukan dan ke mana harus pergi. Perhatikan penggunaan hebat warna dan ikon yang dimasukkan ke dalam aplikasi web.

Exhibit B: Gumroad

Gumroad's UI
Gumroad's UI

Gumroad memiliki vibe yang luar biasa dengan antarmuka mereka. Tidak hanya antarmuka menyenangkan, mereka juga melakukan pekerjaan besar menyajikan informasi dengan cara yang bersih, ringkas dan sederhana. Perhatikan bagaimana tombol ajakan bertindak benar-benar melompat keluar dari halaman.

Exhibit C: Squarespace

Squarespace's UI
Squarespace's UI

Squarespace membutuhkan sedikit dan bersih ke tingkat berikutnya. Tanpa menggunakan warna, antarmuka tetap memungkinkan pengguna untuk dengan mudah menavigasi melalui dasbor. Perhatikan bagaimana meskipun ada banyak konten, penggunaan shading yang cerdas membuat semua angka itu tidak terlalu mengintimidasi.

Exhibit D: GoSquared

GoSquared's UI
GoSquared's UI

GoSquared's UI menunjukkan bahwa aplikasi web dengan banyak konten juga dapat memanfaatkan desain yang hebat. Dengan penggunaan modul, antarmuka menjadi jelas dan konsisten. Penggunaan aksen warna yang hebat juga menambah UI. Perhatikan bagaimana jenis antarmuka ini cocok untuk kustomisasi; pengguna dapat dengan mudah menggeser, menghapus, menambah atau mengedit modul.


Membuat Desain Anda Sendiri

Sekarang kita telah melihat beberapa antarmuka pengguna yang sudah ada, sekarang saatnya untuk memecahkannya sendiri!

Kita akan mulai dengan header.

Skema warna

Seperti yang kita lihat sebelumnya, warna sangat penting ketika datang ke aplikasi web; skema warna membantu menentukan atmosfer dan membuat aplikasi mudah diidentifikasi. Warna yang berbeda juga memprovokasi suasana atau tema yang berbeda (misalnya, warna Gumroad yang lucu menyarankan aplikasi web bebas stres dan mudah digunakan), dan mereka dapat digunakan untuk menargetkan berbagai demografi (misalnya, cerah dan bersemangat untuk pemirsa muda, netral dan sederhana untuk audiens yang lebih tua).

Perlu diingat bahwa mungkin yang terbaik adalah memilih skema warna sederhana dengan warna yang mudah dilihat. Selain itu, pastikan Anda menggunakan kontras dan nuansa berbeda, karena ini membantu menentukan hirarki visual dan membuat konten jauh lebih mudah untuk difilter, seperti yang terlihat pada contoh di atas. Karena tidak benar-benar memiliki tujuan untuk aplikasi ini, kita akan Meyederhanakan dan memilih skema warna biru-abu-abu yang canggih:

Eight main colours we're using for our design
Delapan warna utama yang kita gunakan untuk desainnya

Gaya

Menjadi unik dalam hal gaya penting untuk aplikasi web; seperti warna, gaya adalah salah satu cara untuk membuat aplikasi Anda dikenali dan menonjol dari yang lain. Hari ini, fokus kita akan menjadi modern dan sederhana. Meskipun gradien sangat bagus, menambahkan tekstur dan pola dapat membuat elemen menonjol dan menciptakan pengalaman yang lebih taktil. Untuk mencapai efek itu, kita akan menggunakan pola noise pada bilah navigasi dan tombol. Lihat perbedaannya:

Notice the difference the noise makes on the left? Simple, but effective!
Perhatikan perbedaan yang dibuat noise di sebelah kiri? Sederhana, tapi efektif!

Selain pola, kita akan menggunakan gaya lapisan untuk menyesuaikan tombol sehingga tidak hanya menonjol, tetapi statusnya juga dapat dibedakan. Pada gambar di atas, Anda dapat dengan jelas melihat bahwa tombol 'Home' aktif.


Langkah 1: Menyiapkan Desain

Tanpa penundaan lebih lanjut, mari jalankan Photoshop! Mulai dengan membuat file baru dengan lebar 600px dan 350px (pengaturan web default). Buat bentuk persegi panjang yang mengisi seluruh kanvas dan ganti nama layer menjadi 'BG'. Karena kita memiliki background sekarang, hapus layer 'Background' default. Selanjutnya, ubah warna fill ke #dde3ec.

Sekarang, buat bentuk persegi panjang baru dengan lebar 600 piksel dan tinggi 70 piksel, dan sejajarkan ke bagian atas kanvas. Ini akan menjadi bilah navigasi aplikasi web kita. Penting untuk mengingat dimensi saat merancang, dalam hal ini, kita tidak ingin navigasi yang terlalu besar dan mengganggu untuk aplikasi lainnya, sehingga 70px sangat ideal.

Catatan: Dalam situasi browser kita mungkin menggunakan ems untuk mengukur elemen halaman, tetapi ketika menggunakan Photoshop kita harus tetap berpegang pada piksel.

Ubah nama layer itu menjadi 'Nav Bar' dan ubah warna fill ke #303844. Sangat penting untuk memilih warna yang kontras untuk elemen navigasi Anda dan membuatnya menonjol dari latar belakang. Dalam hal ini, kita memiliki background biru muda dan bar navigasi abu-abu biru gelap. Kunci posisi kedua lapisan, supaya tidak bergeser tanpa sengaja. Inilah yang harus Anda miliki saat ini:

Web App UI Step 1

Langkah 2: Membuat Pola Noise

Sebelum kita mulai menambahkan gaya ke bilah navigasi, kita akan mensimulasikan pola noise yang saya sebutkan sebelumnya.

Buat file baru dengan lebar 100px dan tinggi 100px (pengaturan web default). Buat layer baru, pilih seluruh kanvas (cmd / ctrl + a) dan fill dengan warna apa pun (cmd / ctrl + backspace). Dari menu, arahkan ke Filter > Noise > Add Noise. Atur jumlah noise hingga 400%, distribusi ke Seragam dan pastikan Monokromatik dipilih. Di sini adalah bagaimana seharusnya terlihat:

Web App UI Step 2

Setelah Anda memilikinya, masuk ke menu, Edit > Define Pattern, beri nama pola 'Noise' dan klik 'Ok'. Sekarang, Anda memiliki pola noise yang dapat Anda gunakan untuk elemen gaya! Ada banyak sumber daya online hebat yang menyediakan pola untuk penggunaan web - cobalah bereksperimen dengan mereka untuk menciptakan tampilan yang unik!


Langkah 3: Navigasi Bar

Kembali ke UI aplikasi web kita, buka opsi gaya lapisan untuk 'Nav Bar'. Menggunakan beberapa gaya lapisan, mudah untuk menambahkan beberapa efek hebat bentuk sederhana ini.

Kita akan memulai dengan menambahkan stroke 1px di luar layer, dengan warna fill #000000 dan opacity pada 100%. Ini akan memberi kita garis pembatas yang memisahkan elemen dari background.

Selanjutnya, kita akan menambahkan drop shadow ke layer: blend mode seperti biasa, warna seperti #000000, opacity sebagai 58%, sudut 90 derajat, jarak 1px, sebarkan sebagai 0px dan ukuran sebagai 5px. Drop shadow ini akan memberikan efek yang bagus yang menyoroti bilah navigasi dan membuatnya lebih menonjol.

Selanjutnya, kita akan menambahkan inner shadow: blend mode sebagai linear dodge (add), color as #ffffff, angle as -90 degrees, jarak 1px dan choke dan size sebagai 0px. Bayangan linear ini menambahkan efek 3D ke bilah navigasi dan hanya menambahkan sedikit lebih banyak ke desain.

Navigasi Bar kita terlihat agak datar (tidak ada yang salah dengan itu, bny jalan!), Tapi mari tambahkan gradien: mode campuran sebagai overlay, opacity sebagai 20%, default hitam ke gradien putih, gaya sebagai linier, dan sudut 90 derajat  Untuk membantu gradiennya, mari tambahkan pola yang kita kerjakan sebelumnya: mode campuran sebagai overlay dan opacity sebagai 1%. Inilah yang harus Anda miliki:

Web App UI Step 3

Langkah 4: Tombol

Tombol Aktif

Sekarang navigasi bar kita terlihat bagus, saatnya untuk menambahkan beberapa item ke dalamnya. Desain tombol sangat penting untuk desain antarmuka - mereka banyak digunakan dan harus dapat dibedakan, fungsional, dan representatif dari merek.

Membedakan antara status tombol yang berbeda juga penting - pengguna membutuhkan umpan balik yang berkelanjutan, sehingga dengan mengubah sedikit gaya lapisan, kita dapat membuat berbagai status. Kita akan memulai dengan membuat tombol yang aktif.

Buat layer baru 'Nav Button Active' dengan bentuk persegi panjang bulat: lebar 100px, tinggi 40px, dan radius border 4px. Sekali lagi, dimensi sangat penting. Lebar dan tinggi tombol bergantung pada banyak faktor seperti dimensi elemen induknya, jumlah teks, dan ukuran teks. Posisikan secara vertikal di tengah, dengan memperhatikan bilah navigasi dan 40px dari kiri kanvas.

Atur warna fill ke #90a2c3, opasitas isian hingga 25% dan buka pengaturan gaya untuk lapisan. Sekali lagi, buat stroke yang 1px di luar layer, memiliki opacity 100% dan memiliki warna fill #000000. Selanjutnya buat inner glow: mode campuran normal, opacity 13%, warna #000000, choke 0px dan ukuran 4px. Inner glow ini memberikan efek 'pushed in'.

Sekarang, untuk drop shadow: mode campuran normal, warna #ffffff, opacity 10%, sudut 90 derajat, dan jarak 2px. Drop shadow ini menambahkan lebih jauh ke efek yang didorong.

Selanjutnya, tambahkan gradien: mode campuran normal, opacity 6%, default hitam menjadi putih, linier, dan sudut 90 derajat. Sama seperti yang kita lakukan dengan bilah navigasi, tambahkan pola noise dengan lapisan mode campuran dan opasitas 2%.

Hasilnya adalah tombol yang memiliki kualitas intuitif untuk itu; tanpa melihat status tombol lainnya, penggunaan dapat segera mengenali bahwa teks apa pun dalam tombol itu merujuk pada konten yang aktif di laman web.

Teks Tombol

Teks sama pentingnya pada tombol; Perlu diingat bahwa itu membutuhkan ruang untuk bernapas berdasarkan ukuran tombol yang Anda pilih serta jumlah konten yang ingin Anda tampilkan di tombol.

Buat layer teks baru bernama 'Teks Aktif'. Atur warna ke #f3f5f9, ukuran font ke 12px dan font family ke Helvetica Neue.

Catatan: Helvetica Neue hadir sebagai font sistem di banyak versi OS X, bu tidak demikian untuk Windows. Anda mungkin lebih suka menggunakan Arial untuk kit UI ini, karena lebih banyak tersedia untuk pengguna akhir.

Tambahkan drop shadow: blend mode sebagai overlay, opacity 35%, sudut -90 derajat, jarak 1px dan spread dan ukuran 0px. Teks sans-serif sekarang terlihat seperti didorong dengan tombol aktif. Terakhir, pusatkan teks dengan memperhatikan tombol. Di sini, apa yang kita miliki adalah teks yang agak sederhana di dalam tombol, tetapi menggunakan warna yang konsisten dengan tema dan drop shadow yang sederhana, itu meningkatkan konten dan membuatnya lebih mudah untuk dibaca.

Web App UI Step 4-1

Tombol normal

Sekarang, mari kita buat tombol bergaya normal untuk item di navigasi bar yang tidak aktif. Penting untuk mempertahankan tema status tombol lainnya, tetapi juga mengubah gaya sehingga sangat berbeda dari keadaan aktif.

Gandakan layer 'Nav Button Active' sebagai 'Nav Button Normal' dan layer teks 'Text Active' sebagai 'Teks Normal'. Untuk membuat tombol keadaan normal terlihat berbeda, kita akan inverse yang mendorong tampilan dan gaya tombol sehingga terlihat seperti didorong keluar dari layar. Ini tidak hanya membuatnya menonjol, tetapi memungkinkan pengguna mengetahui bahwa itu dapat dipilih. Mulailah dengan mengubah warna tombol untuk mengisi #c2dcff dan mengisi opacity 5%.

Juga, ubah drop shadow: mode campuran normal, warna sebagai #000000 opacity 10%, sudut 90 derajat, jarak 2px. Selanjutnya, ubah inner shadow: mode campuran normal, opacity 25%, warna sebagai #ffffff, jarak 1px. Sekarang, tambahkan cahaya batin: mode campuran layar, opacity 7%, warna sebagai #ffffff dan ukuran 3px. Akhirnya, ubah opacity gradien menjadi 13% dan hapus overlay pola. Hasilnya akan menjadi tombol yang sedikit lebih ringan dari bar navigasi, keluarkan dengan bantuan drop shadow dan stroke.

Membedakan warna teks dan gaya adalah cara lain yang membuat bagian terlihat berbeda. Ubah warna teks ke #e8ecf3 dan drop shadow sehingga opacity 50% dan sudut 90 derajat.

Web App UI Step 4-2

Tombol Power

Alih-alih memberi pengguna tombol 'Login' yang membosankan untuk diklik, mengapa tidak mengubah keadaan dan memiliki ikon power? Melakukan hal ini akan menambahkan sesuatu yang kreatif dan unik untuk desain, sementara juga memungkinkan pengguna untuk dengan cepat membedakan tombol login dari yang lainnya. Mulailah dengan menggandakan 'Nav Button Normal' Layer ke 'Nav Button Login'. Sesuaikan ukuran bentuk sehingga menjadi 40px dengan 40px persegi bundar. Anda dapat melakukan ini dengan menggunakan alat pemilihan langsung, memilih 4 titik di sisi kanan layer bentuk, dan menggesernya ke kiri sehingga lebar berubah menjadi 40px (shift + <). Gunakan metode ini daripada mengubah layer bentuk, karena itu mendistorsi sisi bulat.

Untuk membuat ikon daya, buat serangkaian bentuk pada satu lapisan bernama 'Ikon Daya'. Pertama, buat lingkaran 16px kali 16px. Berikutnya, kurangi lingkaran 12px dengan 12px di tengah yang lebih besar. Ini akan memberi Anda lingkaran 16px kali 16px yang tebal 2px. Selanjutnya, kurangi persegi 6px selebar rata ke pusat atas lingkaran. Akhirnya, tambahkan lebar 2px, persegi panjang 8px tinggi yang berpusat pada bidang persegi yang dikurangi dan selaras 1px di atas titik tertinggi lingkaran.

Pada titik ini, Anda harus memiliki satu layer bentuk dengan ikon daya. Ubah warna bentuk ikon daya ke #ffffff. Buka layer style dan tambahkan drop shadow: blend mode overlay, warna sebagai #000000, sudut 90 derajat, jarak 1px dan spread dan ukuran 0px. Kemudian tambahkan gradien: mode campuran normal, opasitas 10% dan gradien default hitam ke putih.

Terakhir, sejajarkan ikon tombol masuk ke tengah tombol masuk dan sejajarkan tombol 40px dari kanan kanvas. Di sini adalah bagaimana navigasi bar yang diselesaikan akan muncul:

Web App UI Step 4-3

Meskipun kita menggunakan gaya yang sama untuk tombol ini seperti yang lainnya, mengganti teks dengan ikon meningkatkan desain keseluruhan.


Langkah 5: Login Dropdown

Kita telah membangun basis yang hebat untuk UI aplikasi web, tetapi sejauh ini kita hanya mendesain tombol dan background. Mari kita coba memperluas UI dengan menambahkan antarmuka masuk tarik-turun. Ini akan memberi kita kesempatan untuk membuat beberapa elemen bentuk dan tombol yang ditata untuk background  yang berbeda.

Desain Dasar

Pertama-tama, mari kita buat persegi panjang bulat baru (radius 4px border seperti sebelumnya untuk konsistensi) yaitu lebar 300px dan tinggi 200px, menamakannya 'Login Dropdown BG'. Selanjutnya, tambahkan segitiga dengan lebar 14 piksel dan tinggi 7 piksel ke layer 'Masuk Dropdown BG' dan selaraskan 13 piksel dari kanan atas persegi panjang bulat. Ini akan membuat efek tooltip ke dropdown dan mewakili koneksi antara tombol login di atasnya.

Ketika kita mengubah warna login drop down ke #ffffff, itu tidak benar-benar menonjol dari background kanvas. Untuk membuatnya berdiri lebih banyak kita akan menambahkan bayangan drop: mode campuran normal, opacity 25%, sudut 90 derajat, jarak dan penyebaran 0px dan ukuran 4px. Ini memberi kita bayangan halus untuk drop-down, membuatnya tidak hanya lebih menonjol, tetapi juga memberikan efek yang melayang di atas background. Jika Anda mengkodekan ini, mungkin ada baiknya untuk menambahkan animasi pendek untuk ditambahkan ke efek mengambang. Sejajarkan bentuk drop-down ini 40px dari kanan kanvas dan 13px dari bagian bawah bilah navigasi. Inilah yang kita miliki sejauh ini:

Web App UI Step 5-1

Perhatikan bagaimana perataan dropdown menyatu dengan tombol? Konsistensi dengan posisi dan padding membuat bersih, dan lebih mudah untuk mengkodekan dalam wadah.

Teks

Sekarang, tambahkan lapisan teks dengan teks 'Masuk ke akun Anda, atau buat yang baru.'. Ubah ukuran font menjadi 12px, font family to Helvetica Neue (Regular) dan warna ke #92969b. Untuk mewakili tautan, ubah warna 'buat yang baru' ke #5c6f91.

Sehubungan dengan layer 'Login Dropdown BG', sejajarkan teks 14px dari kiri dan 20px dari atas. Kita tidak ingin membuat teks menonjol terlalu banyak karena kami ingin pengguna untuk fokus pada benar-benar masuk, itulah sebabnya ukuran font yang relatif lebih kecil dan warna yang lebih terang adalah ide yang bagus.

Bidang Teks

Penting untuk diingat bahwa bidang teks kita harus sesuai dengan tema desain, tetapi juga cukup menonjol sehingga pengguna dapat mengenalinya dan mengisinya. Buat persegi panjang bulat baru (radius batas 3px) yang lebarnya 270px dan tinggi 30px dan beri nama 'Bidang Teks'. Perhatikan bahwa alih-alih radius batas 4px, kita menggunakan radius batas 3px untuk bidang teks. Alasannya adalah karena bidang teks berada dalam dropdown dan akan terlihat aneh jika ukuran radiusnya sama.

Ubah warna fill layer ke #f9fafc dan tambahkan stroke 1px di luar bentuk yang merupakan warna #d3d8e1 (100% opacity). Untuk menambahkan sedikit sorotan ke bidang teks, tambahkan bayangan batin: warna #ffffff, opasitas 100%, sudut -90 derajat, jarak 1px, dan sebaran dan ukuran 0 piksel. Saya memilih untuk mengubah warna bidang teks sehingga menonjol dan tidak menyatu dengan background drop down.

Tambahkan layer teks dengan teks 'Nama Pengguna' (ukuran font 12px, Helvetica Neue Regular, warna #727d88) dan sejajarkan secara vertikal di tengah dan bergeser 10px ke kiri dengan memperhatikan bidang teks. Perataan 14px bidang teks dari kiri dari drop-down background dan 18px dari bagian bawah lapisan teks. Untuk membuat bidang kata sandi, cukup gandakan layer bidang teks dan lapisan teks dan sejajarkan dengan 12px dari bagian bawah lapisan bidang teks pertama. Inilah yang harus Anda miliki saat ini:

Web App UI Step 5-2

Perhatikan bagaimana ukuran dan posisi semua bidang teks dan teks terlihat alami; Anda tidak ingin menyimpan terlalu banyak atau terlalu sedikit ruang, tetapi cukup hanya untuk konten agar sesuai dengan nyaman.

Tombol Login

Saatnya untuk menambahkan tombol login untuk drop-down formulir, tetapi tombol yang kita buat untuk navigasi tidak akan cocok dengan desain. Ini karena sekarang, kita berurusan dengan background terang dan gaya yang digunakan pada bilah navigasi tidak akan menonjol dengan background putih dropdown. Kontras sangat penting untuk antarmuka yang mudah diakses.

Kita akan membuat gaya tombol sekunder, yang dapat digunakan untuk konten utama aplikasi dan yang juga berfungsi dengan baik pada background terang. Kita akan menggunakan gaya serupa dari tombol navigasi untuk memberi gaya tombol masuk, sehingga gaya kita konsisten.

Mulailah dengan membuat bentuk persegi panjang bulat baru (radius batas 3px) yang tinggi 90px, lebar 35px dan beri nama 'Tombol Masuk'. Ubah warna isian ke #a3b2cd dan tambahkan stroke 1px di luar lapisan bentuk yang merupakan warna #7b8da4 (opasitas 100%). Selanjutnya, tambahkan overlay gradien opacity 25%, dengan warna hitam ke putih default. Akhirnya, tambahkan bayangan batin normal dengan warna #ffffff, opacity 45%, sudut 90 derajat, jarak 1px dan spread dan ukuran 0px.

Untuk konten tekstual, buat layer teks baru (ukuran 12px, Helvetica Neue Regular, warna #ffffff) dengan teks 'Login', dan tambahkan bayangan drop: mode campuran overlay, warna #000000, jarak 1px, dan sebaran dan ukuran 0 piksel. Sejajarkan lapisan teks ke tengah tombol masuk.

Sama seperti desain Gumroad, kita ingin para pengguna kami tahu persis di mana harus mengklik setelah mereka mengisi rincian login mereka.

Itu saja dengan desain UI yayasan kita!


Memperluas UI

Setelah beberapa lapisan dan beberapa gaya lapisan lainnya, kita telah menyelesaikan desain untuk fondasi antarmuka aplikasi web kita! Dengan apa yang kita miliki, Anda bisa merasakan tema, gaya, warna dan elemen antarmuka pengguna.

Membangun Lebih Lanjut

Dengan semua pekerjaan dasar yang telah kita lakukan, itu relatif mudah untuk terus mendesain lebih banyak elemen. Kita telah menyusun skema warna dan gaya desain kita, sehingga semua yang diperlukan adalah membuat lebih banyak bentuk dan men-tweak warna / gaya lapisan. Pada dasarnya, setelah Anda memiliki elemen desain dasar, Anda dapat meletakkan modul-modul penting dari aplikasi Anda.

Bagian terbaik tentang membuat UI 'contoh' adalah tidak memerlukan upaya sebanyak jika Anda membuat kumpulan UI lengkap. Katakanlah Anda tidak senang dengan arah yang digunakan UI - lebih baik untuk menjauh dari kumpulan elemen kecil daripada membuang jam kerja sia-sia. Pendekatan alur kerja ini juga memungkinkan Anda menjelajahi sekelompok tema UI yang berbeda dan memilih salah satu yang sempurna untuk aplikasi Anda.

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.