Keindahan merupakan faktor yang tidak terlupakan bagi desainer web. Keindahan tersebut salah satunya diwujudkan dalam bentuk visualiasi yang memikat pengunjung. Dan keberadaan icon dalam hal ini memiliki peran yang sangat penting untuk tujuan tersebut.
Selain membantu memudahkan navigasi web bagi pengunjung. Icon merupakan elemen visual yang menarik perhatian pengunjung. Karena dengan icon yang tepat tentu akan meningkatkan nilai estetika sebuah situs. Dan pengguna pun lebih cepat memahami fungsi icon yang ada di situs web.
Sehingga keberadaan icon ini mewakili komunikasi antar lintas bahasa maupun negara. Contohnya icon beranda, login, keranjang dan lain-lain yang memberikan petunjuk visual tentang tujuan dan fungsi halaman tersebut. Meskipun tidak dijelaskan dengan bahasa manapun secara panjang lebar dan tinggi.
Banyak Pilihan! Icon Mana yang Cocok untuk Desain Web?
Penggunaan icon pada sebuah website haruslah dipertimbangan dari beragam sisi. Jika mampu tentu saja lebih baik menggunakan dengan karya sendiri. Namun masalahnya, membuat beragam icon yang dibutuhkan memerlukan keahlian tersendiri.
Berbeda halnya jika kita memanfaatkan sumber daya icon yang tersedia di internet. Agar efisien, ini adalah cara yang lebih cepat dibandingkan dengan metode pertama. Hanya saja perlu diingat tentang tujuan penggunaannya beserta lisensi yang terkait icon tersebut.
Dan Anda sedang mencari literatur penyedia icon yang cocok untuk desain web? Simak penjelasan berikut tentang penyedia layanan icon yang dirangkum dari berbagai sumber.
1. Fontawesome
FontAwesome adalah sebuah library icon yang populer dan sering digunakan dalam desain web. Library ini terdiri dari ikon-ikon yang dapat disematkan menggunakan kode HTML atau CSS memberikan fleksibilitas dalam penggunaan dan penyesuaian tampilan ikon.
Melansir wikipedia, Font Awesome dibuat oleh Dave Gandy untuk digunakan dengan Bootstrap dan kemudian dibundel ke BootstrapCDN. Adapun lisensinya ada yang free namun ada juga yang premium. Makanya disebut dengan Freemium; sebuah model bisnis dengan penawaran layanan basic secara cuma-cuma tetapi mengenakan biaya untuk fitur khusus atau lanjutan yang disebut dengan premium.
Dan penggunaanya tidak harus khusus untuk theme yang berdasarkan bootstrap saja. Bagi theme blogger yang tidak menggunakan bootstrap juga bisa. Jika Anda tertarik untuk menggunakannya, silahkan kunjungi fontawesome.com. Jangan khawatir, versi gratis sampai saat ini masih tersedia.
Adapun format yang tersedia baik versi Font Awesome Free maupun Font Awesome Pro; yaitu icon font serta icon dalam format SVG (Scalable Vector Graphics). Bagi pengguna aplikasi Inkscape, format SVG ini pasti tidak asing lagi bukan?
2. Google Material Icons
Google Fonts merupakan library web font milik Google yang terkenal. Beberapa jenis web font yang disebutkan ini mungkin sudah familiar. Seperti halnya Roboto, Open Sans, Lato dan Oswald. Selain menyediakan web font, Google juga memiliki icons yang serupa dengan Fontawesome di atas.
Namanya adalah Google Material Icons untuk membantu web developer mengembangkan karyanya. Dan Google Material Icons tersedia dalam lima style, yaitu: outlined, filled, rounded, sharp, two tone. Kabar baiknya, Google Fonts merupakan open source dan gratis untuk digunakan.
Dan icon-icon tersebut sebetulnya berdasarkan inti dari prinsip dan metrik Material Design. Adapun Material Design adalah sistem desain yang dibuat dan didukung oleh desainer dan developer Google. Yang saat ini sudah memasuki versi 3 melalui website di Material Design. Didalamnya disertakan panduan UX mendalam dan implementasi komponen UI untuk Android dan Flutter serta Web.
Ingin mencoba layanan library icon yang dimiliki Google? Silahkan kunjungi Google Material Icons.
3. Bootstrap Icons
Bootstrap Icon dirancang oleh Mark Otto yang sekaligus sebagai pengembang Bootstrap framework dan dikelola bersama tim Bootstrap. Awalnya berasal dari komponen Bootstrap sendiri yang juga sama-sama open source. Menurut pengakuannya, mereka sebetulnya tidak membutuhkan banyak icon untuk penggunaan bersama dengan framework tersebut.
Namun ketika mereka memulai untuk membuat icon sebagai komponen pendukung. Ternyata mereka tidak dapat berhenti sehingga menghasilkan lebih banyak. Dan saat ini bertepatan dengan artikel ini ditulis baru dengan versi 1.10.0 dengan icon sebanyak 1.800-an.
Adapun format yang tersedia yaitu web font serta SVG yang bisa digunakan dengan Bootstrap atau tanpa menggunakan Bootstrap. Oh ya, untuk theme blogger Sebardi Blog bertepatan dengan artikel ini ditulis sedang menggunakan Bootstrap Icon. Untuk penempatannya saya kira lebih mudah dan tidak jauh berbeda ketika kita menggunakan fontawesome.
Namun untuk jumlah koleksi icon yang tersedia saya rasakan masih kurang dibandingkan fontawesome. Karena pada beberapa kasus ternyata tidak ditemukan beberapa font yang ingin saya tampilkan. Namun bagi yang mau mencoba silahkan kunjungi website Bootstrap Icons.
4. Feather Icons
Feather Icon adalah kumpulan ikon open source yang dirancang pada grid 24x24 dengan penekanan pada kesederhanaan, konsistensi, dan fleksibilitas. Sama halnya dengan ketiga library icon di atas, untuk memasang Feather Icons juga bisa dilakukan melalui layanan CDN.
Bagi Anda yang ingin mencobanya pastikan sudah memasang link CDN "<script src="https://unpkg.com/feather-icons"></script>" yang ditempatkan diantara tag <head> dan </head>. Serta "<script src="https://unpkg.com/feather-icons"></script>" atau "<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>" sebelum tag </body>.
Untuk keterangan masing-masing icon silahkan telusuri laman web feathericons.com.
5. Tabler Icon
Tabler Icon adalah library ikon serbaguna yang menawarkan banyak koleksi ikon berkualitas tinggi. Penggunaan icon-icon ini cocok untuk berbagai aplikasi berbasis web. Karena dengan estetika yang terlihat modern, opsi penyesuaian yang luas, serta situs web serta plugin yang ramah pengguna.
Hal ini semakin memantapkan Tabler Icons sebagai sumber yang bagus untuk desainer dan pengembang yang ingin menyempurnakan proyek mereka dengan ikon berkualitas tinggi.
Selain menyediakan icon yang berjumlah 4150 lebih ini. Juga menyediakan layanan webfont menggunakan link CDN: <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@2.19.0/tabler-icons.min.css" /> yang ditempatkan di antara tag <head> dan </head>
Sedangkan untuk icon font melalui layanan CDN sebagaimana dilansir dari jsdelivr.com. Yaitu: "<script src="https://cdn.jsdelivr.net/npm/tabler-icons@1.35.0/icons-react/dist/index.umd.min.js"></script>" dan "https://cdn.jsdelivr.net/npm/tabler-icons@1.35.0/iconfont/tabler-icons.min.css".
Namun secara pribadi terus terang saya belum mencobanya jika menggunakan platform Blogger. Kita tunggu saja perkembangan belajar selanjutnya ya. Apakah Tabler Icons ini akan menggantikan library icons yang biasa kita gunakan selama ini? Yang berminat silahkan kunjungi website Tabler Icons.
5. CoreUI Icons
CoreUI Icons adalah kumpulan ikon open source yang terbagi menjadi dua; Free dan Pro. Ini mengingatkan kita dengan layanan yang diberikan oleh fontawesome. Dan CoreUI Icons dapat digunakan dalam produk digital seperti aplikasi web atau seluler.
Didalamnya terdapat lebih dari 500 ikon dalam berbagai format, yaitu: SVG, PNG, dan Webfont. Adapun framework yang didukung yaitu: JavaScript/Vanilla JS, Angular, React.js dan Vue.js
Hal tersebut sebagaimana dilansir dari Dokumentasi CoreUI Icons ketika menjelaskan tentang cara penggunaannya. Dan kita lihat di sana, disebutkan bahwa icons CoreUI ini bisa diakses melalui layanan CDN. Dimana tautan cdn untuk css yang diletakan pada tag <head> adalah:
Sedangkan tautan CDN untuk JavaScriptnya yang diletakan sebelum tag </body> adalah:
Untuk informasi lebih lanjut bisa kunjungi website CoreUI.io.
6. Ion Icons
Ada lagi yang namanya Ionicons; kumpulan icon sumber terbuka dengan 1.300-an ikon yang dibuat untuk aplikasi web, iOS, Android dan desktop. Ionicons ini dibuat untuk Ionic Framework, sebuah kerangka kerja aplikasi web progresif dan hibrid lintas platform.
Dan style yang tersedia di Ion Icons ini terdiri atas: outline, filled dan sharp.
Lalu bagaimana jika tidak digunakan bersamaan dengan framework Ionic? Apakah kita bisa menggunakan icon dari IonIcons? Melansir dari laman github disebutkan bahwasannya bisa saja digunakan. Syaratnya yaitu dengan menempatkan script:"<script src="https://unpkg.com/ionicons@latest/dist/ionicons.js"></script>" yang diletakan sebelum tag body penuutup untuk mengaktifkannya.
Keterangan lebih lanjut silahkan kunjungi website ionic.io/
7. Drip Icons
Dripicons V2 telah dibuat oleh Amit Jakhu dari www.amitjakhu.com yang sepertinya dengan domain utama yang sudah tidak aktif. Dripicons V2 ini tersedia gratis untuk digunakan baik dalam proyek pribadi maupun komersial.
Sebagaimana dilansir dari github, Dripicons 2.0 dilisensikan di bawah Creative Commons Attribution 4.0 International License ( https://creativecommons.org/licenses/by-sa/4.0/ ) dan dengan font di bawah SIL Open Font License ( http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL ).
Sehingga Anda dapat dengan bebas menggunakan rangkaian ikon ini tanpa batasan, dalam program perangkat lunak, templat web, dan materi lain yang ditujukan untuk penjualan atau distribusi. Tidak diperlukan atribusi atau tautan balik, tetapi segala bentuk penyebaran berita selalu dihargai.
Adapun tampilan icon bisa dilihat di http://demo.amitjakhu.com/dripicons/. Dan Anda juga bisa mengunduh kumpulan ikon tersebut melalui tombol download di bawahnya. Sedangkan link CDN untuk mengaktifkan Drip Icons mungkin bisa ditemukan pada laman cdnjs.com.
Penutup
Kehadiran icon yang tepat pada website membantu meningkatkan navigasi dan menghemat ruang. Dan icon library yang sudah disebutkan di atas semoga menjadi pertimbangan untuk keputusan tersebut. Lalu bagaimana menjawab kebingungan dalam memilih icon mana yang tepat?
Pilihan library ikon terbaik tergantung desain yang ingin dicapai. Untuk itu disarankan untuk menjelajahi beberapa library ikon tersebut di atas. Saya sendiri yang masih pemula saja sudah menjelajah fontawesome serta bootstrap icons. Dan ke depan mungkin Google Material Icons.
Hal ini untuk melihat lebih jauh mana yang paling sesuai dengan kebutuhan dan gaya desain masing-masing. Dan jika referensi di atas masih belum cukup serta tujuannya bukan untuk blogger custom domain. Maka layanan library icons lainnya ini layak untuk dicoba. Setelah itu silahkan mengunduh ikon-ikon tersebut lalu mengunggahnya ke hosting yang Anda pilih.
Opsi lain selain library icons di atas yang saya maksud misalnya seperti ikons, icofont, icon8, remixicon, bytesize, octicons dan flaticon. Dan pengetahuan akan banyaknya referensi ini demi menunjang keterampilan sebagai seorang web developer.
Sehingga, dalam hal ini Web developer bisa mempertimbangkan penggunaan icon dengan bijak untuk meningkatkan kualitas dan daya tarik sebuah website. Akhir kata, semoga desain web yang menarik yang diinginkan atau yang sedang dikerjakan bisa terwujud dengan library icons di atas.
Selamat belajar meskipun otodidak.
Tidak ada komentar:
Posting Komentar