Advertisement
  1. Web Design
  2. General

Membuat Ikon Web Lebih Pintar

Scroll to top
Read Time: 10 min

Indonesian (Bahasa Indonesia) translation by Husain Ali Yahya (you can also view the original English article)

Artikel ini adalah yang bagian pertama dari tiga seri yang akan menunjukkan pendekatan baru ke Iconic iconografi. Jika kamu suka apa yang kamu lihat di dalam artikel ini, coba pertimbangkan untuk mendukung Iconic di Kickstarter.


Sebenarnya Apa itu Ikon Pintar?

Ikoon pintar adalah ikon yang dirancang sehingga elemen-elemen di dalamnya berubah sesuatu input, interaksi, atau data-data yang terasosiasi. Singkatnya, dia dinamis. Ikon pintar memiliki basis SVG dan dikontrol menggunakan kombinasi dari Javascript dan CSS.


Kenapa Ini Relevan

Ikon situs hingga titik ini biasanya statis—terutama karena pembatasan pada teknologi. Keaaan berbeda atau variasi dari sebuah ikon bisa dibuat dengan menyediakan berkas-berkas tersendiri dari tiap permutasi. Contohnya, ikon baterai bisa hadir dalam empat versi berbeda: mengecas, penuh, setengah penuh, dan tidak dicas. Bukan pendekatan yang paling optimal memang.

Seperangkat kemungkinan baru sekarang menjadi mungkin karena adopsi SVG 1.1 pada browser. Karena struktur semantik SVG, sebuah ikon pintar bisa menampilkan rentang keadaan dan variasi penuhnya. Ini menghapus kebutuhkan penggantian gambar dan mengizinkan transisi antara keadaan untuk terjadi secara lebih lancar.

Ikon pintar juga memberikan perancang kesempatan untuk menampilkan informasi kontekstual yang tepat di dalam sebuah ikon. Sebuah ikon yang didesain dengan baik biasanya memiliki objek yang informasional. Dengan menambahkan informasi kontekstual ke sebuah ikon, kepadatan informasi yang diberikan akan menjadi lebih besar tanpa peningkatan muatan kognitif yang perlu dipertimbangkan. Secara teori, jenis ikon ini juga akan bisa mengambil muatan berat dari komunikasi, sehingga akan mengurangi jumlah dari elemen lain di layar.


Kasus-Kasus Penggunakan Ikon Pintar

Ada banyak arah di mana ikon pintar bisa digunakan—beberapa di antaranya jauh lebih mudah diimplementasikan ketimbang yang lainnya. Kita masih dalam proses penelusuran, tapi sejauh ini kita telah mendapatkan tiga kasus utama:

Menyediakan informasi kontekstual

Ada banyak ikon yang bisa memberikan layer lain dari informasi, tapi masih belum mencapai titik ini, karena metode tampilan statis mereka. Contoh-contohnya termasuk ikon-ikon seperti jam, termometer, bukaan, sinyal Wi-Fi dan pengisian baterai.

clockclockclock

Berperan sebagai elemen data-vis sederhana (ketika d3.js terlalu banyak)

Salah satu kasus terbaik penggunakan ikon pintar adalah visualisasi data sederhana. Ikon-ikon akan sesuai dengan kategori ini adalah spektrum audio, meteran, dan indikator loading. Ikon pintar bisa secara dramatis menyederhanakan proses dari pembangunan tampilan dasbor—pikirkan hanya dengan menambahkan empat atau lima ikon ke HTML-mu dan mengatur nilai ukurannya dengan sebuah atribut data.

audio-spectrum-analyzeraudio-spectrum-analyzeraudio-spectrum-analyzer

Menampilkan aneka keadaan

Banyak ikon biasanya hadir dalam beberapa seri variasi untuk menyampaikan keadaan-keadaan berbeda mereka. Contohnya termasuk baterai, WIFI, pemutar ulang media (misalnya play, pause, dan lainnya) dan power (misalnya on, off, standby). Penggunaan potensial lainnya dari ikon pintar adalah untuk menggulung semua keadaan ikon ke dalam satu SVG. Jadi dariapda berganti aset gambat ketika keadaan subyek berubah, kamu cukup mengganti atribut data ke keadaan yang tepat.

batterybatterybattery

Kacang dan Baut

Catatan: Sebelum masuk ke detil, penting untuk mencatat bahwa contoh-contoh yang kita tampilkan hanyalah prototype yang membuktikan konsepnya. Prototype ini bertujuan untuk mengomunikasikan fungsi yang akan kita bangun. Tidak ada satupun kode berikut sudah final, biarkan menjadi beta. Kami masih berada dalam fase R7D dari metode ini dan kita tahu masih terdapat banyak masalah untuk diselesaikan. Kita akan bekerja pada arah yang lebih konkrit dari metode ini setelah kampanye Kickstarter selesai.

Ikon pintar terdiri dari SVG, Javascript dan CSS. Pemikiran kita saat ini adlaah untuk memperlakukan tiap ikon sebagai aplikasi kecil dengan API sederhana untuk mengatur elemen-elemen di dalam ikon. Untuk meraihnya dengan andal, pendekatan ini membutuhkan markup SVG untuk dimasukkan ke dalam DOM.

Ingat bahwa mark up SVG harus distruktur secara tepat agar pendekatan ini bekerja. Inilah yang membuat kami merasa Iconic unik. Ikon-ikonnya dirancang dan dibuat dengan konsep baru. Konsep-konsep ini bergantung pada semantik yang jelas dan struktur mark up yang dapat dibayangkan agar bekerja dengan benar. Ini tidak memiliki perbedaan dengan HTML yang distruktur dengan baik—jika markup-mu kacau, akan jadi sulit untuk melakukan apapun yang keren.

Banyak hal menarik bisa terjadi saat SVG dengan struktur yang baik berada dalam DOM. Masalahnya adalah menambahkan markup SVG ke dalam HTML adalah hal yang menyakitkan. Markup SVG-nya bisa menggembungkan kode-mu dan membuatnya menjadi lebih susah untuk membedakan antara HTML struktural dengan vector imagery. Untuk menghilangkan perselisihan ini, kita sarankan untuk menginjeksi markup SVG ke DOM di runtime.

Kamu telah membuat prototype SVG injector seerhana yang akan mengganti semua tag img terspesifikasikan dengan markup dari berkas SVG yang direferensikan. Sehingga ini...

Berubah menjadi ini:

Catatan: Ingat, bahwa pendekatan injector ini terasa hanya untuk sementara dan kami berharap pekerjaan kita akan membantu untuk mendorong standar bawaan browser. Hingga saat itu, pemikiran kami saat ini adalah pendekatan yang terbaik.

Setelah SVG di masukkan ke DOM, JavaScript yang terbungkus di dalamnya akan dieksekusi dan siap untuk digunakan. Beberapa ikon akan berjalan sendiri (seperti jam) meskipun beberapa yang lainnya akan membutuhkan input agar berubah.

Ikon yang Berjalan Sendiri

Jam adalah contoh sempurna dari sebuah ikon yang berjalan sendirinya. Setelah diinjeksi, dia akan berjalan. Lihat aksinya

HTML

JS

SVG: clock.svg

Ikon Berbasis Input

Saat sebuah ikon merespon ke input atau data, dia membutuhkan sediikit pekerjaan tambahan. Namun dasar-dasarnya tidak berubah. Lihat aksinya

HTML

JS

SVG: audio-spectrum-analyzer.svg

Menambah gerakan (sedikit pemanis)

Ikon pintar akan menjadi lebih baik dengan gerakan. Ada banyak cara untuk melakukannya. Kami saat ini masih menggunakan elemen SVG animation karena dia mengizinkan fungsionalitas yang dibangun langsung ke browser—yang berarti lebih sedikit kode di SVG-nya. Dukungannya masih sedikit lemah (kita mengalami beberapa masalah di Safari 6), tapi dia akan segera menjadi lebih baik. Lihat aksinya.

HTML

JS

SVG: themometer.svg


Kesimpulan

Iconography telah memainkan peran yang penting dalam desain antarmuka. Semakin relevan informasi yang ikon kita bisa sediakan, mereka akan menjadi semakin bertenaga. Kita sangat percaya bahwa iconography pintar bisa menjadi sebuah alat yang menarik bagi perancang untuk memberikan layer makna tambahkan ke ikon-ikon mereka. Tidak semua ikon cocok dengan ini—seperti semua hal bagus, dia membutuhkan moederasi. Namun, saat digunakan dengantepat, dia bisa menjadi alat baru yang sangat berguna.


Dukung Iconic di Kickstarter

Tujuan dari Iconic adalah untuk membantu menyediakan pendekatan baru ke iconography. Ada lbanyak sekali hal pada Icoic ketimbang hanya ikon pintar dan kami akan membagikan fitur menarik lainnya denganmu minggu depan.

iconic-logoiconic-logoiconic-logo

Mohon pertimbangkan untuk mendukung Iconic di Kickstarter

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
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.