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

Mendesain Instrumen UI pada Aplikasi Web Menggunakan Photoshop

by
Difficulty:IntermediateLength:LongLanguages:

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

Final product image
What You'll Be Creating

Apa yang Akan Anda Buat

Pengembangan yang didorong style guide menawarkan banyak pendekatan fleksibel pada desain web modern. Pada tutorial kali ini saya akan memandu Anda untuk mendesain instrumen UI (User Interface/Antarmuka Pengguna) sekaligus menjelaskan pembuatan keputusan yang akan membuat instrumen UI kita konsisten dan dapat digunakan kembali.

Perlengkapan Tutorial

Untuk dapat mengikuti tutorial ini Anda akan membutuhkan beberapa perlengkapan (tersedia gratis):

Mempersiapkan Dokumen Photoshop

Langkah 1

Bukalah Photoshop dan mulai dengan membuat dokumen baru (File > New…) menggunakan pengaturan seperti yang ditampilkan di bawah ini.  Anda bebas menggunakan kanvas dengan dimensi apa saja yang Anda sukai- lagipula, web tidak memiliki luas yang tetap. 

Langkah 2

Mari atur beberapa garis bantu sehingga instrumen UI kita teroragnisir dan rapi. Saya tidak selalu menggunakan grid, tetapi mengaturnya akan memastikan kerapian dan konsistensi. Pergi ke View > New Guide… dan atur beberapa garis bantu. Saya biasanya memilih 1000px sebagai titik awal luas sehingga mari kita pertahankan instrumen UI kita pada dimensi tersebut.

Catatan: Garis bantu yang digunakan pada tutorial ini: vertikal pada 100px, 600px dan 1100px.

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

Langkah 3

Berpedoman pada Etiket Photoshop kita akan mempertahankan hal-hal tetap terorganisir da mudah dalam navigasi dan penyuntingan. Pada lingkungan kerja kita akan membutuhkan instrumen UI ini untuk digunakan di banyak kesempatan sebagai rujukan dan asset pengembangan. Sehingga, Anda perlu mengaturnya tetap rapi (tim pengembang akan sangat menghargai hal ini). Mari buat enam grup layer bernama Tipografi, Tombol, Formulir, Avatar, Gambar, dan Warna.

Untuk membuat grup pergi ke Layer > New > Group… dan berikan masing-masing judul seperti yang telah disebutkan. Untuk pembuatan yang lebih cepat cukup klik ikonnya.

Mengenali Tipografi

Seperti perkataan Oliver Reicheinstein yang terkenal, "Desain Web adalah 95% Tipografi", sehingga Anda harus membuat hal ini tepat. Pertama kita perlu untuk mengatur lingkungan yang sempurna untuk tipe Anda; sebuah latar beakang yang netral dan tidak mencolok mata. Latar belakang dan tipografi harus diatur pada tingkat kontras yang wajar agar mudah terbaca. Untuk tutorial ini Mari kita gunakan warna halus abu-abu - warna netral tetapi cukup kuat untuk memberikan aplikasi  sebuah identitas. Untuk tutorial ini mari gunakan warna abu-abu yang ringan #e9eeef dan tekan Alt+Backspace untuk latar belakang.

Langkah 1

Bukalah grup Typography, gunakan Horizontal Type Tool (T) dan pilih font Open Sans. Open sans adalah jenis huruf modern yang memiliki berbagai ketebalan dan memiliki tampilan yang professional tetapi juga nyaman. Cukup bergaya untuk Heading, tetapi juga praktis untuk bagian badan web.

Open Sans memiliki berbagai varian, sehingga untuk instrumen UI ini kita akan menggunakan satu font saja. Selalu diingat bahwa Anda harus berhati-hati dalam menggunakan lebih dari dua jenis huruf untuk proyek Anda karena rentan membuat hal-ha yang Anda kerjakan menjadi berantakan.

Saya telah mengatur warna latar depan menjadi hitam #000000 kemudian menggunakan Horizontal Type Tool (T) dan font yang telah disebutkan, Open Sans, dengan opsi Light 55px, masukkan judul section. Kita akan menggunakan ukuran dan model judul yang sama untuk judul lainnya agar menjaga konsistensi.

Langkah 2

Sekarang kita harus membuat hirarki untuk tipografi kita. Silakan cek artikel ini Bagaimana Membuat Skla Tipografi Modular oleh Ian Yates untuk memahami lebih baik tentang ilmu dan pentingnya tipografi web.

HTML (HyperText Markup Language) memiliki berbagai macam tag yang akan membantu browser menginterpretasikan konten sebuah halaman. Banyak dari Tag ini khusus digunakan untuk tipografi web seperti <h1>, <h2>, <h3> dan seterusnya. Ini menggambarkan headlines, <h1> menjadi yang paling penting. Setelah itu ada <p> tag digunakan untuk paragraf. Tanpa lebih jauh mencari detail apa yang diperhatikan HTML, kita akan mempelajari tampilan dari elemen-elemen berikut ini.

Menggunakan Horizontal Type Tool (T) masukkan headline. Saya menggunakan Open Sans (Light) 55px untuk h1, 44px untuk h2, dan 32px untuk h3, memberikan jarak 30px antar masing-masing. Jarak adalah hal lain yang harus selalu diperhatikan. Berikan jarak yang cukup sehingga ketikan Anda dapat terbaca dengan mudah dan terlihat seimbang.

Catatan: Saya menggunakan ketebalan Regular untuk h3. Karena teks menjadi semakin kecil varian Light mungkin menjadi lebih tidak mudah terbaca.

Langkah 3

Kita telah mengatur headline kita, sekarang mari menuju pada teks konten sebenarnya. Pertimbangkan semua kemungkinan variasi teks dan tampilkan pada instrumen UI Anda, sehingga pengembang dapat menerapkan apa yang telah Anda rencanakan. Pikirkan sebuah model headline dalam paragraph, cetak tebal, cetak miring, dan juga link.

Untuk warna teks utama saya menggunakan warna abu-abu #838383, untuk headline warna hitam #000000 dan biru #006ee3 untuk warna link.

Headline harus berwarna lebih gelap yang tegas daripada badan teks, untuk memberikan efek yang lebih hebat. Warna konten utama haruslah nyaman dan mudah untuk dibaca. Terakhir, pastikan Anda memilih warna yang berbeda untuk link Anda sehingga pengguna memahami bahwa mereka dapat meng-kliknya.

Catatan: ataur headline dan link dengan ketebalan font Semibold untuk membuat mereka terlihat lebih besar dan lebih penting.

Mambuat Tombol

Tombol sangatlah penting untuk proyek web kita. Ia adalah link sederhana atau formulir di kebanyakan waktu, tetapi mereka jug adapt digunakan untuk fungsi Call To Action (CTA) dengan mengarahkan orang-orang di halaman untuk membuat keputusan lebih cepat. Sngatlah penting untuk menjaga tampilan yang konsisten pada tombol sehingga pengguna akan menjadi familiar dengan hal ini sepanjang aplikasi.

Langkah 1

Minimize grup Tipografi dengan mengklik ikon panah kecil pada nama grup dan bukalah grup Tombol. Setelah itu buatlah beberapa garis bantu vertikal untuk membagi area konten menjadi tiga area yang sama luas dengan jarak 35px masing-masing. Pergi ke View > New Guides… dan atur garis bantu vertikal berikut ini: 410px, 445px, 755px, dan 790px. Di sini adalah tempat kita meletakkan tombol-tombol kita sehingga semua menjadi sama dan konsisten.

Langkah 2

Navigasi kembali pada grup Tipografi, temukan layer judul section dan gandakan dengan mengklik CMD+J, kemudian pindahkan pada grup Tombol dan ubah menjadi “Tombol”.

Setelah itu masukkan tiga judul status tombol: Normal, Melayang, dan Aktif. Letakkan pada bagian kiri dari tiga section yang sama tadi, dan terus ingat untuk memberikan jarak 35px anatara yang area pertama, kedua, dan ketiga.

Langkah 3

Sekarang atur warna latar depan yang sebelumnya menggunakan warna biru #006ee3 dan buat grup baru bernama Primary Normal.  Kemudian gunakan Rounded Rectangle Tool (U), atur Radius menjadi 3px dan gambar bentuk persegi dengan dimensi 310x44px. Letakkan di antara dua garis bantu pertama di bawah headline “Normal”. Untuk mencapai proses akhir tombol, tuliskan beberapa teks menggunakan warna putih #ffffff sehingga dapat dibaca dengan jelas.

Langkah 4

Sekarang gandakan grup dengan Primary Botton klik CMD+J pada grup tersebut dan ubah nama grup menjadi Primary Hover dan Primary Active. Setelah itu letakkan dua grup baru ini di bawah s=dua section yang telah kita buat headline-nya sebelumnya.

Apa maksud dari hover dan aktif? Anda mungkin bertanya.Melayang menjelasjan kondisi ketika sebuah tombol ketika Anda menggerakkan kursor mouse ke arahnya, kita harus mengilustrasikan beberapa umpan balik dari tombol tersebut. Sebuah link menjadi aktif pada saat Anda mengkliknya.

Untuk membuat model keadaan melayang dan aktif pada tombol kita cukup membuatnya menjadi lebih gelap. Buatlah layer baru di atas tombol bentuk dan isi dengan warna hitam #000000. Setelah itu tahan tombol Alt dan mouse pada layer hingga Anda melihat ikon panah mgarah ke bawah, kemudain lepaskan untuk membuat Clipping Mask. Terakhir, kurangi kegelapan Opacity menjadi 10%.

Catatan: untuk tombol aktif tambahkan layer hitam Opacity menjadi 20%

Langkah 5

Sekarang gandakan semua grup tombol sebelumnya dan ubah judul dan warnanya menjadi sekunder. Kita akan menentukan warna instrumen UI kita nanti pada tutorial ini. Sekarang, cukup pilih satu warna dan gantikan warna biru sebelumnya. Saya menggunakan warna hijau #36c265.

Mendesain Formulir

Formulir sangatlah penting dalam elemen aplikasi web karena hal ini akan memungkinkan pengguna untuk memasukkan informasi dan berinteraksi dengan aplikasi. kita akan mendesain beberapa formulir dasar sehingga pengembang dapat tetap bertahan pada model yang sama dan menjaga desainnya tetap konsisten.

Langkah 1

Minimize Tombol grup dan bukalah grup formulir.  Sekali lagi gandakan judul section dari grup sebelumnya dan ubah menjadi “Formulir”.  Kita kan membuat beberapa formulir dasar tipe input termasuk input teks, kolom password, dropdown atau pilih kolom dan kolom kumpulkan (tombol sederhana).

Ketika mendesain formulir, kejelasan dan hal yang sudah umum adalah faktor kunci. Jangan mencoba untuk bereksperimen.  Buatlah sebuah grup baru dan ubah namanya menjadi Nama. Kemudian gunakan Horizontal Type Tool (T) dan masukkan label kolom input, saya membuat “Nama Depan” ,emggunakan font yang sama, Open Sans (Regular), ukuran 18px warna hitam #000000.

Sekarang gandakan salah satu layer tomboldan pindahkan pada grup Name. Setelah itu ubah latar belakangnya menjadi putih #fffff dan tambahkan 1px warna abu-abu #d5d5d5 di dalam coraknya. Terakhir, letakkan sebuah contoh input teks  di dalam bulatan persegi. Untuk contoh yang saya miliki saya menggunakan 16px Open Sans (Regular) dan berwarna abu-abu #838383 seperti yang digunakan pada badan teks sebelumnya.

Langkah 2

Buatlah beberapa kolom input dengan judul cukup dengan menggandakan kolom input pertama. Umumnya, untuk kolom password/kata sandi menggunakan titik-titik ∙ atau bintang *. Contoh kolom input yang lebih banyak ditampilkan di bawah ini.

Gandakan CDM+J salah satu grup tombol, pindahkan di dalam grup Formulir dan letakkan di bawah kolom input yang baru saja kita buat. Sekali lagi, penting untuk membuat tetap konsisten dan menggunakan kembali elemen yang telah dibuat sebelumnya. 

Langkah 3

Pada tutorial ini kita kita bertahan pada antar muka pengguna yang paling dasar yang dapat digunakan aplikasi web yang sangat sederhana. Mari buat tipe kolom input yang lain; yakni <select>

Gandakan salah satu grup kolom dan letakkan di antara garis vertikal ketiga dan keempat, pastikan untuk meratakan semuanya.  Ubah nilai menjadi berapapun yang Anda inginkan dan tambahkan sebuah ikon panah sederhana untuk mengindikasikan bahwa ini adalah kolom dengan menu dropdown. Anda dapat menemukan ikon panah Anda pada Iconfinder.

Langkah 4

Untuk membuat pengembang dapat bekerja lebih mudah, sekali lagi pastikan Anda memasukkan status aktif (active state). Pikirkan bagaimana dropdown akan terlihat ketika pengguna meng-kliknya? Ini merupakan tugas desainer untuk memandu pengembang untuk membuat pengalaman yang konsisten dan koheren.

Gandakan grup dropdown yang baru saja kita buat. Menggunakan Direction Selection Tool (A) klik pada sebuah sudut dari bentuk yang kita buat untuk melihat titik tepinya, kemudian tahan tombol Shift, pilih empat titik bawah dan tekan ke bawah beberapa kali untuk memperpanjang bentuknya. Teknik ini akan menjaga vektor bentuk yang Anda buat dan menjaga sudut tidak tersentuh.

Setelah itu gandakan pilihan yang mungkin dan letakkan beberapa di bawah yang pertama. Gunakan Line Tool (U) 1px pada Weight untuk membuat pemisah sederhana dan terakhir ubah warna panah menjadi seperti yang digunakan untuk tombol. Hal ini akan membantu untuk mengindikasikan bahwa kolom tersebut aktif.

Langkah 5

Kita akan membuat sebuah scenario pesan error sederhana, seperti jikas seseorang memasukkan password terlalu lemah.

Gandakan CMD+J kolom password yang telah dibuat sebelumnya dan letakkan di bawah kolom dropdown sebelumnya.  Setelah itu ubah bingkai kolom menjadi berwarna merah tipis (saya menggunakan #eb8686) dan latar belakang menjadi merah keabu-abuan #e9dde3. Terakhir, pilih merah yang lebih tegas #b63131 dan masukkan pesan error sederhana.

Itu dia proses pembuatan formulir! Saya telah mengulas tentang dasar-dasarnya tetapi itu cukup untuk menjadi awal untuk mendesain formulir yang lebih kompleks.

Avatar

Avatar adalah hal yang menjadi standar di hampir semua aplikasi web masa kini, sehingga akan berguna untuk memiliki beberapa visual untuk mempermudah proses komunikasi dan mengidentifikasi pengguna.

Langkah 1

Minimize grup yang tidak lagi diperlukan dan bukalah grup Avatar. Gunakan Ellipse Tool (U) dan, tahan tombol Shift, gambar sebuah lingkaran 80x80px. Kunjungi uifaces.com dan ambil sebuah gambar. Copy dan paste di atas lingkaran yang baru saja dibuat. Tahan tombol Alt dan mosue pada thumbnail gambar hingga Anda melihat ikon panah kecil, kemudian lepaskan mouse untuk membuat Clipping Mask.

Langkah 2

Penting untuk memikirkan bagaimana Avatar akan digunakan dan termasik beberapa ukuran yang berbeda untuk kemudian digunakan oleh pengembang. Sebagai contoh, gambar avatar yang semakin besar dapat digunakan pada halaman profil dan yang lebih kecil pada bagian komentar.

Gandakan avatar dan skala CMD+T, tahan tombol Shift untuk mempertahankan proporsinya.

Gambar

Kita harus benar-benar memasukkan sebuah sampel gambar untuk menunjukkan bagaimana gambar akan tampil di dalam aplikasi Anda. Saya akan meletakkan sebuah gambar di dalam bentukan lingkaran ini untuk menunjukkan bahwa gambar harus memiliki sudut bulat.

Langkah 1

Gunakan Rounded Rectangle Tool (U) dan gambarlah sebuah bentuk persegi antara garis vertikal di bawah grup Avatar. Setelah itu pilihlah sebuah gambar, saya menggunakan satu dari unsplash.com, atur ukurannya dengan CMD+T dan buatlah Clipping Mask.

Membuat Warna

Sekarang kita akan membahas warna. Palet warna solid sangatlah penting dan Anda harus memperlajari teori warna untuk lebih memahami makna dan pentingnya warna yang Anda gunakan. Kita memilih untuk memilih warna tepat setelah akhir proses, karena sekarang kita telah memiliki ide untuk melihat elemen mana yang perlu kita berikan style.

Langkah 1

Bukalah grup Warna dan pilihlah salah satu warna yang telah Anda gunakan untuk tombol sebagai warna latar depan. Setelah itu, gunakan Rectangle Tool (U) untuk menggambar sebuah persegi. Kemudian gunakan Horizontal Type Tool (T) dan tulislah judul warnanya, atau untuk apa ia digunakan, mis. “Warna Utama” dan sediakan kode warna dalam HEX, RGB atau format lainnya yang dibutuhkan. Buatlah sebuah grup baru, tulislah nama warnanya dan letakkan seluruh layer di dalamnya.

Langkah 2

Sekarang gandakan CMD+J grup warna dan buatlah corak warna sebanyak mungkin yang Anda butuhkan. Biasanya, akan lebih baik jika Anda mempertahankan pada empat hingga lima warna, karena lebih dari itu akan membuat elemen-elemn terlihat berantakan pada akhirnya. Pelajari Kuler dan COLOURlovers untuk inspirasi palet warna yang luar biasa.

Untuk tutorial ini seperti yang Anda lihat saya menggunakan warna “Primer” dan “Sekunder”, satu warna untuk teks badan, dan satu untuk headline, juga putih untuk latar belakang input. Hal ini ditunjukkan seperti gambar di bawah ini.

Selamat! Anda Telah Selesai!

Itulah dia yang kita pelajari. Sebuah panduan membuat style antar muka pengguna untuk aplikasi web. Saya harap Anda belajar dan memahami dasar-dasar membuat panduan gaya (style guide), mengampa beberapa keputusan diambil dan bagaimana hal ini menguntungkan untuk proyek.

Jika Anda memiliki pertanyaan atau kesulitan jangan ragu untuk PING saya pada kolom komentar!

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.