Panduan Super Sederhana untuk Ikonografi

Rata-rata, berapa lama waktu yang Anda butuhkan untuk mendesain ikon kustom?

Beberapa menit? Sepuluh menit? Lebih lama? Bagaimana jika kami menunjukkan cara membuat 10 ikon hebat dalam waktu kurang dari 10 menit?

Ikonografi adalah bentuk komunikasi yang menambah bahasa visual merek, sehingga kumpulan ikon khusus lebih bermakna dan menarik daripada yang sederhana dan umum. Kebanyakan desainer tidak pernah repot-repot mempelajari cara membuat ikon kustom, terutama karena itu adalah kursus lain untuk ditambahkan ke antrian pembelajaran kami.

Jadi saya mulai membuat panduan super sederhana untuk membantu Anda mempelajari dasar-dasar ikonografi dalam waktu kurang dari 10 menit (maksud saya).

Mampu membuat ikon kustom akan membuka dunia baru bagi Anda untuk mulai membuat bentuk rumit untuk proyek Anda, yang akan membedakan Anda dari orang lain, memberi Anda keunggulan kompetitif sebagai desainer.

Awalnya, saya terinspirasi untuk membuat panduan ini dengan GIF ini dari Morgan Allan Knutson yang menunjukkan cara membuat ikon layanan lokasi dalam beberapa detik. Saya merasa itu menyegarkan, cerdas, dan cepat. Ini mengungkap proses pembuatan ikon khusus dan menunjukkan betapa sederhananya itu. Ikon sebenarnya adalah bentuk geometris yang dapat dihasilkan dari kombinasi atau deformasi bentuk dasar, seperti kotak, segitiga, atau lingkaran. Aturan praktis dalam desain logo atau ikon adalah menjaga semuanya tetap sederhana.

Tujuan artikel ini adalah membuat 10 ikon masing-masing dalam 10 detik, hanya menggunakan bentuk sederhana.

Catatan Penting: Kami akan menggunakan Adobe Illustrator dalam posting ini, tetapi Anda bisa mendapatkan hasil yang sama menggunakan Sketch atau bahkan Figma. Setiap kali kita perlu menambahkan atau menghapus titik pada bentuk, kita akan menggunakan "Pen Tool (P)." Memilih dan memindahkan titik akan dilakukan dengan "Alat Seleksi Langsung (A)."

Ikon Mata

Ratakan tengah empat lingkaran, dari terbesar ke terkecil dengan mengubah warna, seperti yang ditunjukkan. Pada lingkaran terbesar, ke arah belakang, tarik titik kiri dan kanan menjauh dari pusat. Terakhir, pindahkan lingkaran dalam terkecil ke tepi lingkaran berikut untuk menciptakan efek pencahayaan pada iris.

Tip: Daripada menggunakan lingkaran putih, cukup kurangi (menggunakan panel Pathfinder) dua lingkaran dari lingkaran di bawahnya masing-masing. Ini menciptakan hasil yang lebih bersih di latar belakang.

Ikon Panah

Ini semua tentang di mana Anda menambahkan titik-titik ekstra di tepi kotak awal. Tip: Sebagai alternatif, Anda cukup menggambar garis tipis berbentuk seperti panah.

Ikon Baterai

Menggunakan satu kotak dengan goresan dan dua dengan isian. Cukup mainkan dengan proporsi, sambil memasukkan satu kotak yang diisi ke dalam bentuk goresan dan pertahankan yang kedua di luar untuk membentuk ujung baterai.

Tip: Mainkan dengan ketebalan goresan dan bantalan untuk menjaga keseimbangan visual yang baik.

Ikon Daftar Peluru

Mulailah dengan kotak sederhana; duplikat sekali di sebelah kanannya; dan membentuknya kembali menjadi persegi panjang. Pilih semuanya, dan duplikat dua kali sambil menjaga satu ruang ukuran persegi di antaranya.

Tip: Ganti persegi dengan lingkaran untuk menciptakan tampilan yang lebih lembut.

Ikon Awan

Gambarlah tiga lingkaran dengan ukuran berbeda. Ratakan bawah dua lingkaran terkecil untuk memiliki alas, dan letakkan lingkaran terbesar di antaranya, pada posisi yang lebih tinggi. Buat dasar awan dengan mengubah bentuk salah satu lingkaran kecil.

Tip: Gunakan ukuran lingkaran yang berbeda untuk mendapatkan awan yang tampak lebih organik.

Ikon Putar Maju

Gambarlah sebuah persegi panjang. Tambahkan titik ke tengah tepi kiri, dan hapus titik atas dan bawah. Sekarang Anda memiliki satu segitiga, cukup duplikat bentuk itu sekali ke kanan untuk melengkapi ikon.

Tip: Untuk melakukannya lebih cepat, mulailah dengan segitiga, bukan persegi.

Ikon Corong

Mulailah dengan persegi panjang. Tambahkan titik ke tengah tepi kiri dan kanan. Sekarang, regangkan tepi atas secara horizontal, dan selesai.

Tip: Tempatkan dua kotak dari ujung ke ujung, dan cukup regangkan ujung paling atas secara horizontal.

Ikon Putar/Jeda

Mulailah dengan tiga persegi panjang panjang secara paralel. Bentuk kembali persegi panjang terluas menjadi segitiga.

Tip: Sebagai alternatif, cukup gambar satu segitiga, diikuti oleh dua persegi panjang paralel.

Ikon Panah Posisi

Yang ini adalah remix dari ikon layanan lokasi Morgan. Cukup gambar satu persegi, lalu tarik titik kiri bawah ke arah diagonal, bergerak ke atas hingga Anda melewati titik yang berlawanan.

Tip: Di Illustrator, menekan tombol Shift sambil menyeret titik membantu menjaga simetri sambil menjaga sudut diagonal tetap tepat.

Ikon Pin Posisi

Hancurkan lingkaran di dalam lingkaran yang lebih besar (menggunakan panel Pathfinder). Seret titik terendah lurus ke bawah, dan pertajam sudut yang terbentuk - alihkan ke "Pen Tool (P)," lalu sambil menahan tombol "Shift", klik pada titik tersebut.

Tip: Gunakan sudut membulat pada titik kritis tersebut untuk memperhalus tampilan - sesuaikan nilai "radius sudut" di panel opsi "Transform" saat titik dipilih.

Ikon Suara

Sama seperti ikon corong tetapi pada rotasi 90 derajat.

Tip: Cukup salin dan tempel ikon corong, dan putar searah jarum jam.

Ikon Gelombang

Gambarlah garis lurus, dan tambahkan titik-titik pada jarak yang sama pada panjangnya. Tarik ke bawah mengubah poin, dan bulatkan setiap sudut secara maksimal, hingga semuanya mulus.

Tip: Lengkapi ujung garis untuk tampilan yang lebih halus.

Ikon Toptal

Ini adalah ikon bonus.

Gambarlah sebuah persegi dengan goresan yang cukup tebal. Dengan menggunakan alat gunting, potong titik kanan atas dan kiri bawah. Ini akan membagi bentuk menjadi dua. Pindahkan bagian bawah ke atas, dan putar semuanya 45 derajat berlawanan arah jarum jam.

Tip: Perhatikan ketebalan garis, dan ruang putih yang terbentuk di dalam logo.

Sebuah Ikon Bernilai 1.000 Kata.

Kita sering mendengar bahwa sebuah gambar bernilai seribu kata. Nah, ini sangat berlaku untuk ikon, yang menggantikan kalimat dan kata-kata panjang untuk mengoptimalkan ruang visual, kegunaan, dan estetika. Mengetahui cara membuat seperangkat ikon sederhana dan efektif bisa sangat membantu. Dan kami baru saja melihat betapa cepat dan mudahnya dengan mengamati dan memanfaatkan kumpulan bentuk dasar.

Singkatnya, 10 aturan utama ikonografi adalah:

• Jadikan itu simbolis dan bermakna.
• Anda pernah mendengarnya: Tetap sederhana. Gaya tidak boleh berkompromi dengan keterbacaan.
• Jadilah disengaja dan bijaksana. Pikirkan sebelum Anda membuat.
• Pastikan itu berfungsi dalam berbagai ukuran.
• Ingatlah keseragaman.
• Vektor saja, tolong!
• Gunakan warna hanya jika diperlukan, dan lakukan dengan hati-hati.
• Ini membantu untuk mengetahui geometri dasar.
• Pikirkan "keterjangkauan" untuk memastikan ikon yang dirancang akan membantu desain secara keseluruhan.
• Ikonografi adalah bahasa yang harus universal.
• Bonus: Alfabet hanyalah seperangkat 26 ikon.

Mainkan bersama, dan lihat apa yang bisa Anda dapatkan dalam waktu kurang dari 10 detik.

• • •

Bacaan lebih lanjut di Blog Desain Toptal:

• eCommerce UX – Tinjauan Praktik Terbaik (dengan Infografis)
• Pentingnya Desain yang Berpusat pada Manusia dalam Desain Produk
• Portofolio Desainer UX Terbaik – Studi Kasus dan Contoh yang Menginspirasi
• Prinsip Heuristik untuk Antarmuka Seluler
• Desain Antisipatif: Cara Membuat Pengalaman Pengguna yang Ajaib