Style Guide pada UI Standard
Style Guide adalah dokumen komprehensif yang melacak semua elemen berulang untuk sebuah proyek, mulai dari aturan branding hingga unuk tombol call to action
Kita mengunakan Style Guide untuk beberapa alasan seperti
1. Konsistensi visual
Membantu desain kita agar kohesif yang mencerminkan bahasa visual yang umum.
2. Konteks
Menjelaskan mengapa kita memilih desain tersebut.
3. Kolaborasi
Menyamaratakan presepsi antara anggota tim agar memiliki pola pengerjaan yang sama.
4. Standarisasi kode
Front-and Style Guide dapat membantu desainer untuk menentukan standard code yang digunakan contohnya mengunakan HTML, JavaScript
5. Konsoliidasi
Desainer hanya perlu mencari satu acuan yaitu Style Guide menjadi kiblat perancangan.
6. Orientasi karyawan baru
Dengan Style Guide kita tidak perlu mendefinisikan tentang desain kita kepada masing-masing anggota atau karyawan yang baru. Hanya perlu menunjukan dokumen saja.
Pada Style Guide ada yang disebut Front-End Style Guide
Front-End Style Guide adalah kumpulan modular semua elemen pada UI produk, bersama code snippet untuk developer yang akan di-copy dan di-paste sesuai kebutuhan untuk mengimplementasikan elemen-elemen.
Berikut Komponen utama UI Guide.
1. verview/mission statement
merupakan bagian yang berisi visi dan misi dari project, Strategi Konten, filosofi dan moto
2. Layout (or grid) (layout atau grid)
Pada bagian ini akan ditampilkan dari border margin, jarak ruang antar elemen yang berbeda, penentuan posisi logo, informasi copyright atau sering disebut elemen global
3. Typography (tipografi)
Elemen dari tipografi adalah size dan font. Pengunakan size dan font harus ukuran yang berbeda untuk setiap elemennya. Hal ini diperlukan untuk menampilkan infromasi paling penting. Hal ini dilakukan agar desain itu simplicity.
4. Color (warna)
Pemilihan warna harus memiliki skema yang tepat, dengan menentukan warna apa saja yang akan digunakan untuk elemen tertentu. Mungkin saja warna yang dipilih disesuaikan dengan tema dari customer.
5. Media treatment (layanan media)
Dibagian ini kita akan menentukan proporsi dan rasio dari media yang akan didesain seperti standard rasio gambar atau video.
6. Branding (branding)
Pada bagian ini kita akan memperhatikan bagian dari logo yang disediakan oleh perusahaan untuk web yang akan dirancang. Sehingga kita tidak bisa dengan bebas mengubah-ubah logo yang mereka beri. Kita harus bisa menjaga kekonsitenan-nya, mulai dari ukuran, warna dan lainnya.
7. Navigation (navigasi)
Pada bagian ini akan dicakup aturan terkait navigasi, seperti penggunaan search box, sidebar, link, drop-out.
8. Iconography (ikonografi)
Pada bagian ini kita akan mendifinisikan icon yang akan dapat digunakan
9. Naming Convention and File Directories
pada bagian ini kita akan menetapkan standard bentuk dari directori filenya sehingga nanti desain yang dihasilkan sama. contoh pengaturan sidebar-nya dan widget
10. UI Pattern
pada bagian ini akan kita isi standart dari pola yang kita gunakan. pola yang digunakan sebaiknya yang sudah familiar sehingga user mudah untuk memahaminya.
11. Writimg Guidelines
pada bagian ini akan berisi aturan mengenai tulisan, ada beberapa bidang pada bagian ini yaitu guideline subyektif, guideline obyektif, bahasa yang sesuai. kita dapat mengunakan ketiganya sesuai dengan keperluan kita
12. Code Snippet
pada bagian ini aka berisi code yang akan digunakan. code yang digunakan desainer adalah code yang kita buat pada bagian ini.
