Design Guidelines & UI Kit Tiket.com
Apa yang bisa kita simpulkan, ketika kita tahu bahwa Google merilis Material Design, Facebook merilis facebook.design, Apple membuat Apple Design Guide, etc.? iyah mereka semua memiliki style guide atau design guidelines yang berfungsi sebagai panduan atau pedoman untuk merancang desain product sesuai dengan pola atau pattern yang sudah mereka rumuskan.
Style guide adalah kumpulan elemen, rancangan visual grafis dan aturan yang dibuat sebelum pembuatan design product untuk memastikan desain produk konsisten, dan menyatu mulai dari proses perancangan sampai akhir.
Hal ini sangat penting ketika banyak desainer bekerja di perusahaan digital product besar, untuk memastikan bahwa mereka tidak banyak menafsirkan sendiri-sendiri, tidak mengubah atau menyesuaikan desain berdasarkan selera pribadi. Elemen-elemen dalam design guidelines juga membantu untuk mempercepat proses perancangan desain produk, sebab elemen-elemen tersebut bisa dipakai berulang. Elemen-elemen dalam design guidelines bisa disebut dengan istilah UI Kit.
UI Kit adalah kumpulan elemen UI dengan pola berdasarkan brand product, Typography, Color Palette, Icons, Forms, button, white space, etc. UI Kit digunakan oleh UI/UX designer sebagaimana framework atau code snippet yang digunakan oleh developer.
Berikut adalah contoh UI Kit dari Tiket.com yang dipakai untuk merancang Web / Apps versi 3.0 (versi Cardamon)
Typography menggunakan font Samsung Sans Regular dan Samsung Sans Medium, untuk paragraf menggunakan font-size 18px dan line-height 25px. Ukuran font lainnya: 10px, 12px, 14px, 16px, 20px, 25px, 30px.
Color Scheme, dibagi 3 yaitu
- Brand Guideline: Primary Dark Blue, Primary Orange
- Black & Grey Colors: Black Primary, Grey Primary, 2nd Grey, 3rd Grey, White
- UI Colors: 2nd Blue, 2nd Orange, Primary Red, Primary Green
Demikian beberapa design guidelines umum dari Tiket.com. Selain yang saya tampilkan di atas sebenarnya masih banyak elemen lainnya, Namun mohon maaf saya tidak bisa menampilkan semua style guide lebih rinci karena beberapa UI kit masih digunakan dalam proses development belum resmi di-release dalam bentuk Apps dan Web.
Cheers
