Cara Cepat Mengubah Ikon Membosankan menjadi Karya Asli

Ikon merupakan bagian integral dari desain kami. Mereka adalah isyarat visual untuk menunjukkan berbagai tindakan, dan mereka dapat memberikan identitas unik untuk suatu produk. Tetapi terlalu sering kita memilih untuk merayakan pentingnya mereka dengan mengunduh kumpulan ikon yang sama dan membuat setiap ikon untuk setiap situs web terlihat kurang lebih sama. Betapa cara untuk memperlakukan sesuatu yang begitu penting.

Untuk mengatasi masalah ini, saya telah membuat panduan untuk membantu desainer menambahkan kedalaman visual ke ikon mereka dan membuatnya unik untuk produk yang mereka wakili. Tutorial ini sebagian besar terinspirasi oleh desain Material Google yang berpengaruh.

Prinsip Desain Material Google

Seperti yang dikatakan Google, "materi adalah metafora." Ini meminjam isyarat visual dari dunia fisik dan menciptakan bahasa visual baru untuk membakukan semua antarmuka mereka. Prinsip Desain Material dapat diakses dan dapat diterapkan dengan cepat untuk meningkatkan daya tarik antarmuka dan pengalaman pengguna.

1. Gunakan Bentuk Geometris Sederhana dan Warna Tebal

Tren desain datar terinspirasi Desain Material, yang juga didasarkan pada bentuk datar dasar. Pilih dengan cermat bentuk mana yang paling mewakili elemen yang digambarkan oleh ikon.

2. Tambahkan Kedalaman Dengan Bayangan Halus

Drop shadow adalah cara yang baik untuk mengelabui mata dan memberikan kesan mendalam pada desain Anda, karena ini merangsang efek cahaya yang dipancarkan pada suatu objek.

Perhatikan bahwa cahaya alami sering disimulasikan datang dari sudut kiri atas.

3. Gunakan Warna Shades untuk Mengganti Drop Shadows

Setiap warna digunakan dalam berbagai warna untuk mensimulasikan kedalaman visual. Misalnya, di ikon Gmail, Anda dapat melihat bahwa warna merah yang berbeda digunakan untuk bentuk M, dan warna abu-abu yang lebih gelap digunakan di bawah tutup amplop.

Bagaimana Anda Dapat Melakukannya Juga: Demo Langkah demi Langkah

Kami akan menerapkan versi sederhana dari gaya Desain Material, dan untuk setiap ikon, kami hanya akan menggunakan tiga warna dengan warna yang sama dan menjaga bayangan tetap datar dan pendek, bukan efek "bayangan panjang" yang umum.

Sumber daya

• Periksa kumpulan ikon gratis lengkap dari Google di sini.

Mari kita mulai.

1. Ikon Baut

Pecahkan ikon asli menjadi dua, dan buat bagian atas tampak terangkat. Anda dapat mencapai ini dengan membuat efek bayangan di persimpangan dua bentuk. Gunakan tiga warna kuning - lebih terang di bagian atas, yang lebih gelap di bagian bawah, dan pertahankan warna paling gelap untuk bayangan.

2. Ikon Obrolan

Pada ikon asli, kami memiliki sedikit efek bayangan di celah antara dua gelembung, di situlah Anda akan membuat bayangan.

Pada bentuk bawah, pilih titik yang membentuk sudut kanan di celah, dan gerakkan ke atas ke kiri hingga Anda membentuk sudut kanan di sudut kiri atas.

Gandakan gelembung atas dan pindahkan salinannya ke bawah dan ke kanan. Pilih salinan dan bentuk gelembung bawah, gunakan "Pathfinder" untuk membuat pembagian, dan pertahankan hanya persimpangan dengan salinan Anda sebelumnya.

Sekarang Anda dapat menerapkan tiga warna biru dan memberikan yang paling terang di atas, paling gelap di tengah, dan yang paling gelap kedua di bawah.

3. Centang Ikon Tanda

Kami akan membuat efek kertas terlipat.

Gandakan ikon, dan hapus dua titik tambahan di kanan atas, lalu di paling kiri untuk mendapatkan dua bagian.

Gandakan lipatan kiri, dan pindahkan ke atas lipatan kanan.

Potong dua bentuk untuk menciptakan efek bayangan. Kemudian terapkan tiga corak warna sambil mempertahankan yang paling gelap untuk bayangan, paling gelap kedua untuk potongan panjang, dan warna yang lebih terang untuk bagian atas.

4. Ikon Bendera

Mulailah dengan membulatkan tepinya, lalu ekstrak pangkal bendera.

Untuk membuat efek lipat, lacak dua garis yang berpotongan secara diagonal. Menggunakan ”Pathfinder”, bagi bentuk bendera dengan garis-garisnya, dan terapkan tiga warna hijau ke bendera sambil mempertahankan warna dasar abu-abu.

5. Ikon Hati

Gandakan ikon hati.

Pisahkan setengah kiri bentuk.

Lacak garis diagonal ke bawah, datang dari titik kanan atas.

Tumpang tindih bentuk yang dihasilkan dengan hati, lalu pindahkan ke kanan untuk mengurangi bentuk bayangan. Terapkan tiga warna pink Anda.

6. Ikon Pegunungan

Celah kosong di dalam ikon asli menunjukkan di mana kita dapat menempatkan bayangan.

Buat dua bentuk segitiga dari masing-masing pick.

Pindahkan salinan yang lebih kecil ke kanan, dan ekstrak persimpangan yang dihasilkan sebagai bentuk bayangan.

Terapkan tiga warna cokelat dengan menjaga yang paling terang ke kiri, yang kedua paling terang ke segitiga besar, dan yang paling gelap untuk bayangan di tengah. Terapkan beberapa radius sudut untuk melunakkan hasilnya.

7. Ikon Orang

Pilih dan duplikat bagian bawah orang di sebelah kiri. Sejajarkan salinan itu dengan orang di sebelah kanan. Sekarang, pilih tiga bentuk yang tumpang tindih, dan terapkan alat "Divide" dari panel "Pathfinder". Sekarang, terapkan warna untuk menyelesaikan.

8. Ikon Kotak Mengambang

Pilih bentuk bawah, dan pindahkan titik tengah-atasnya ke atas hingga terlihat seperti berlian.

Gandakan bentuk berlian atas, dan pindahkan salinannya ke bawah 10 atau 20 px.

Pilih dua bentuk bawah, dan terapkan alat "Divide" dari panel "Pathfinder".

Dari bentuk berpotongan yang dihasilkan, simpan hanya dua bagian bawah, dan hapus titik tambahan apa pun.

Bungkus dengan menerapkan tiga warna merah sambil menetapkan yang paling gelap di tengah.

9. Ikon Surat

Dengan "Direct Selection Tool (A)," pilih titik kedua yang lebih tinggi dari bentuk amplop.

Tambahkan titik pada segmen di sebelah kanannya menggunakan "Pen Tool."

Sekarang setelah Anda memiliki poin tambahan, Anda dapat membentuk kembali ruang negatif itu agar terlihat seperti kertas dengan mengangkat dua titik atas dan memindahkannya ke kanan dan ke kiri seperti yang ditunjukkan.

Pilih semuanya, dan terapkan pembagian dari panel "Pathfinder". Pisahkan bentuk kertas atas dari amplop, lalu gandakan bagian amplop di atas kertas untuk memotong bentuk bayangan sebelum menerapkan tiga warna biru.

10. Ikon Kue

Pisahkan versi duplikat dari bagian bawah kue.

Persempit lebarnya dengan menggerakkan tepi kiri dan kanan ke dalam.

Pindahkan bentuk yang dihasilkan di atas ikon asli, dan rentangkan titik yang lebih tinggi untuk tumpang tindih dengan bentuk lapisan gula.

Buat pembagian semua bentuk yang tumpang tindih dengan "Pathfinder," dan hapus titik ekstra di samping alas kue sempit yang Anda buat sebelumnya.

Lengkapi kue Anda dengan menerapkan warna oranye muda pada lapisan gula dan lilin, warna yang lebih gelap pada alasnya, dan warna oranye yang lebih gelap untuk bentuk api dan tepi bayangan.

Tingkatkan Tampilan dan Nuansa Ikon Anda

Membuat ikon dengan gaya Material dapat dicapai dengan sederhana. Anda hanya membutuhkan kombinasi yang baik dari bentuk geometris yang bijaksana, nuansa warna yang berani, dan efek bayangan.

Kabar baiknya adalah, Anda bahkan tidak perlu membuat semua ikon dari awal, seperti yang kami lakukan di tutorial ini. Anda dapat memulai dari ikon datar gratis yang ada, dan menerapkan teknik sederhana yang baru saja Anda pelajari.

Beri tahu kami pendapat Anda! Silakan tinggalkan pemikiran, komentar, dan umpan balik Anda di bawah ini.

• • •

Bacaan lebih lanjut di Blog Desain Toptal:

• Prinsip Desain dan Kepentingannya
• Portofolio Desainer UX Terbaik – Studi Kasus dan Contoh yang Menginspirasi
• Menjelajahi Prinsip Desain Gestalt
• Adobe XD vs. Sketch – Alat UX Mana yang Tepat untuk Anda?
• 10 Hasil Kerja UX yang Digunakan Desainer Teratas