Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Design Theory
Webdesign

Prinsip-Prinsip untuk Membuat Desain Tombol yang "Sukses"

by
Length:MediumLanguages:

Indonesian (Bahasa Indonesia) translation by Mahesa Kama (you can also view the original English article)

Saat ini ada seribu cara untuk merancang dan membuat tombol dan pernahkah anda mencoba untuk melihat beberapa desain tombol di dribbble untuk mendapatkan inspirasi? Banyak contoh-contoh dari desain yang sama persis, tapi kadang-kadang ada beberapa hal yang sedikit berbeda dari fungsi dan tujuan pembuatan tombol tersebut.

Bahkan sekarang kita dapat dengan mudah membuat desain tombol yang bagus, elegan, dan stylish dengan adanya CSS3 yang sebelumnya kita harus membuat desain tombol dari gambar agar dapat ditampilkan di web browser versi lama.

Banyak orang yang membuat desain dan mereka sering membagi karya mereka secara gratis dalam bentuk UI elemen dalam bentuk gambar atau format *.PSD. Tapi mengapa anda tidak mencoba meluangkan waktu untuk mempertimbangkan apakah anda harus memakai tombol gratisan yang tidak sesuai? Tapi kalau memang bagus sih boleh-boleh saja.

Mendesain ulang tombol orang lain memang baik-baik saja, tidak masalah kok, anda dapat menghemat waktu, tetapi tidak ada salahnya anda meluangkan waktu untuk memahami desain dan melihat komposisi tombol sedikit lebih detail. Bagaimana tombol itu dirancang? Apakah tombol tersebut memiliki keunikan? Apakah tombol saya cukup menonjol? Apakah saya perlu tombol primer, sekunder, atau tersier? Apakah tampilannya menarik?

Mengapa tidak? Kita semua (termasuk saya) ingin memiliki desain tombol yang keren dan mencari tombol yang benar-benar berguna.

Berikut ini ada sepuluh hal mengenai prinsip-prinsip desain secara umum dan sederhana yang dapat mengoptimalkan desain tombol dan UI (User Interface) pada umumnya.

1. Desain Tombol Harus Cocok dengan Style Brand Anda

Untuk para profesional desainer pasti sudah mengerti dengan judul diatas. Di sini kita diarahkan bagaimana untuk bisa membuat desain yang cocok dengan warna, gaya grafis atau memiliki ciri khas suatu merek atau logo. Mungkin ada beberapa bentuk yang menonjol, tekstur atau gaya desain yang dapat menginspirasi anda. Nah, dengan pedoman tersebut anda akan bisa membuat tombol yang melekat dengan brand anda.

Jika Anda bisa mengambil kesempatan untuk bereksperimen dengan memperluas ide anda melalui antarmuka (User Interface) dengan menggunakan bentuk yang tepat, efek yang tepat, pewarnaan yang tepat, dan lain-lain.

2. Pencocokan Gaya Kontekstual

Selanjutnya, lebih menekankan pada originalitas dan penempatan tombol agar sesuai dengan fungsi dan tujuan utama tombol tersebut.

Buatlah tombol yang lebih baik dari segi desain atau tampilan dari sudut pandang pengguna. Tugas anda, buatlah tombol agar menarik untuk di klik atau mendapat semacam tindakan dari pengguna. Itulah salah satu unsur keberhasilan anda mendesain sebuah tombol.

3. Pastikan Tombol Memiliki Kontras Warna yang Baik Agar Terlihat Lebih Menonjol

Dengan begitu banyak desain tombol yang terinspirasi oleh gaya tombol Apple iOS, khususnya di banyak UI Element *.PSD gratisan di luar sana. Beberapa desain tombol yang buruk biasanya terlihat menyatu dengan warna latar belakang akibat kurangnya pengaturan kontras antara warna yang digunakan. Jadinya tombol tersebut malah tidak User Friendly. Coba gunakan warna yang tepat, ukuran yang tepat, spasi atau jarak yang tepat, dan tipografi yang tepat untuk memastikan tombol Anda memiliki visual yang baik, agar tombol terlihat lebih menonjol dan jelas.

4. Pertimbangkan Penggunaan Style Rounded atau Shapely Buttons

Kembali lagi ke poin nomer 1. Kok bolak-balik sih? Sabar dulu brow, untuk membuat style atau gaya yang digunakan dalam membuat tombol memang harus melihat style atau gaya dari brand anda sendiri.

Anda harus dapat menentukan gaya yang cocok digunakan pada desain tombol yang akan anda buat. Baik itu bulat, kotak dengan gaya flat, atau tombol yang bergaya unyu-unyu. Hehehe. Silahkan anda sesuaikan sendiri.

5. Perhatikan Penekanan Elemen Sekunder User Interface

Dari tampilan sebuah tombol harus memberikan gambaran secara umum kepada pengguna tentang fungsi tombol tersebut. Kemana user akan diarahkan jika menekan tombol tersebut? Apa yang dicari pengguna dengan tombol tersebut? dan Mengapa pengguna harus menekan tombol tersebut?

Itulah yang menjadi permasalahan yang harus dipecahkan dalam membangun Elemen User Interface yang baik. Misalnya, penggunaan tombol option yang apabila di tekan akan memunculkan beberapa pilihan, atau tombol tab yang harus dipisahkan antara tab yang aktif dan tab yang lainnya.

6. Perhatikan Penggunaan Garis Pinggir (Border)

Sebagian besar tombol yang kita lihat di luar sana memiliki beberapa bentuk border atau stroke. Lihat saja contoh gambar di bawah ini (kanan). Pada latar belakang gelap ada baiknya untuk menambahkan border dengan warna yang lebih gelap dari pada warna background dari pada tanpa border yang membuat tombol terlihat sedikit berbaur dengan warna background. Saya menganggap hal ini menjadi prinsip desain umum ketika berhadapan dengan stroke / border dalam desain web.

7. Hati-hati Dengan Efek Shadow

Untuk poin yang ke-7 ini hampir sama dengan poin nomer 6 di atas. Jika elemen lebih gelap dari latar belakang maka bayangan (shadow) yang harus digunakan adalah bayangan yang sangat halus. Mirip dengan penggunaan stroke dan border, saya sangat menganggap hal ini menjadi prinsip desain umum yang berlaku untuk semua elemen UI.

8. Penggunaan Icon pada Tombol Bisa Membuat Efek "WOW"

Selain sebagai detail kecil lain yang selanjutnya dapat membedakan tombol Anda dari unsur-unsur yang sama, penggunaan elemen ikon sederhana seperti panah dapat memberikan beberapa rasa berupa tindakan kecil seperti apa yang terjadi ketika pengguna mengklik.

Sebagai contoh, sebuah panah menunjuk tepat setelah teks pada tombol mungkin memberikan pengguna berupa ajakan untuk berpindah atau meninggalkan halaman ke halaman selanjutnya, sering kita lihat pada tombol "Read More". Kemudian, ikon panah menunjuk ke bawah mungkin menunjukkan bahwa beberapa konten akan semakin diungkapkan di bawah ini, atau mungkin beberapa jenis menu akan terbuka, mungkin seperti efek accordion menu

9. Pertimbangkan Styles Primer, Sekunder dan Tersier

Ini biasanya digunakan untuk membedakan antara fungsi tombol yang satu dengan tombol yang lainnya. Untuk kepentingan antarmuka yang menggunakan banyak tombol. Misalnya, menggunakan tombol yang berukuran lebih besar atau berwarna lebih menonjol sebagai Primary Button, dan seterusnya.

Lihat saja contoh gambar di bawah ini, mulai dari besar ke kecil, dan dari segi perbedaan warna antara tombol Primer, Sekunder, dan Tersier.

10. Efek pada Tombol Mempengaruhi Keberhasilan Tombol

Untuk poin yang ke-10 ini adalah desain tombol yang bisa dibilang tingkat kesulitan membuatnya cukup tinggi, tapi hasilnya TOP BGT. Jelas sekali digambarkan, seakan-akan kita mengerti dengan kondisi dan fungsi tombol tersebut.

Seolah-olah tombol tersebut dapat memberikan feedback setelah kita melakukan tindakan berupa klik pada tombol tersebut. Contoh saja twitter, ketika kita melihat tombol yang berisi tulisan Follow ketika kita klik tombol tersebut maka tulisannya bukan follow lagi, tapi tulisannya secara otomatis berubah menjadi Following atau Followed.

Kesimpulan

Sebagai desainer, Anda semua akan memiliki proses Anda sendiri. Apapun hal yang anda lakukan untuk belajar. Saya menulis artikel ini untuk memberi sedikit pengetahuan yang bermanfaat bagi anda dan membuat anda fokus dan menyipitkan mata dan berkata 'Ya itu memang benar!' Hahaha. Itu adalah bagian yang menyenangkan saat kita belajar. Desainer berbakat cenderung lebih kreatif dan mempunyai lebih banyak hal-hal yang mereka anggap penting diluar 10 hal yang saya sampaikan tadi.

Tidak ada salahnya kembali untuk menggunakan pakem-pakem desain dan elemen UI (User Interface) yang sudah ada, Hal ini tentu dapat menghemat banyak waktu anda dalam bekerja. Saya tidak melarang jika anda tetap menggunakan desain tombol gratisan yang sudah anda download.

Namun, pemahaman anda mengenai 10 prinsip dalam mendesain tombol yang sukses adalah bekal anda sebagai proses menjadi desainer yang lebih baik.

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.