Mengoptimalkan Alignment untuk Membuat Icon yang Sempurna

Alignment yang sempurna dari semua elemen dalam sebuah icon adalah kunci untuk membuat icon yang estetis dan profesional. Pemilihan ukuran objek yang konsisten, penggunaan grid, dan pedoman untuk jarak antar elemen adalah faktor-faktor penting dalam mencapai alignment yang baik.

Salah satu aspek yang membedakan icon yang bagus dari yang kurang adalah alignment (penyelarasan) dan jarak antara elemen-elemennya. Alignment yang tepat dan jarak yang konsisten adalah elemen kunci yang akan membawa icon ke tingkat yang lebih tinggi. Kita tidak berbicara tentang penggunaan grid yang indah dan sempurna, ini hanya tentang menjaga jarak dan alignment yang konsisten di sekitar elemen-elemen icon dan seluruh rangkaiannya.

Konsistensi elemen di seluruh set icon juga sangat penting. Menggunakan elemen yang sama secara konsisten akan membantu menciptakan tampilan yang harmonis dan kohesif.

Namun, membuat alignment yang tepat dan jarak yang seragam sama pentingnya karena:

• Memastikan konsistensi keseluruhan.
• Icon akan terlihat lebih profesional.
• Icon yang seimbang secara visual akan lebih menarik.

Dalam menggunakan sistem spasi yang konsisten, kita membuat hubungan visual antara elemen-elemen yang terkait, sementara elemen-elemen yang terpisah tetap terisolasi. Hal ini membantu dalam mengidentifikasi elemen utama dan sekunder.

Contoh, mari kita lihat icon kartu kredit dibawah ini:

Icon ini dibuat dalam grid 64px dan menggunakan stroke weight 4px. Disini diputuskan bahwa ini akan menjadi ukuran objek terkecil yang digunakan dalam icon (disebut sebagai 1X).

Selalu disarankan untuk memilih ukuran objek yang akan digunakan dalam icon berdasarkan ukuran terkecil yang digunakan untuk jarak. Misalnya, garis magnet pada icon berukuran tiga kali lebih kecil, begitu pula dengan panjang garis atas blok informasi (3X). Sementara itu, logo Mastercard dan bagian bawah garisnya lima kali lebih besar.

Ketika membuat icon pertama dalam set, mulailah menetapkan pedoman untuk icon-icon berikutnya. Misalnya, tentukan jarak 4px antara elemen dalam dan 8px untuk memisahkan kelompok elemen yang berbeda. Sekali lagi, ini bukanlah standar yang kaku, tetapi perlu diingat.

Jadi, pedoman kasar untuk icon set lainnya adalah:

Ruang Antar Benda:

• 1X – 4 piksel;
• 2X – 8 piksel;

Ukuran Objek:

• 1X – 4 piksel;
• 3X – 12 piksel;
• 5X – 20 piksel;

Kita kemungkinan besar akan menggunakan lebih banyak objek dengan ukuran yang berbeda di seluruh set icon, jadi pastikan untuk menggunakan peningkatan ukuran yang seimbang.

Hal lain yang perlu diingat adalah sebaiknya tidak menggunakan terlalu banyak variasi ukuran jarak. Dalam kebanyakan kasus, 2-3 ukuran jarak yang berbeda sudah cukup, dan penggunaan berlebihan variasi akan merusak konsistensi dan menciptakan kekacauan.

Seperti biasa, jangan mengorbankan pesan icon demi penampilan yang menarik dan konsisten dengan rangkaian set icon yang lain. Semua aturan yang telah dibahas ini akan sia-sia jika aspek terpenting dari icon, yaitu kemudahan pengenalan hilang.

Tips:

Kita mungkin tidak akan bisa menetapkan pedoman jarak yang tepat saat membuat icon pertama dalam satu set. Ide-ide kasar mungkin ada dalam sketsa, tetapi biasanya kita akan mulai melihat pola spasi setelah beberapa icon pertama. Terkadang, penyesuaian jarak hanya perlu dilakukan setelah seluruh set icon selesai.