UI STANDARDIZATION

Small design team adalah team dimana biasanya hanya ada 2-5 desainer dan hanya mendesain untuk satu platform. Namun ada kalanya tim tersebut akan tumbuh seiring tumbuhnya kebutuhan bisnis suatu perusahaan. dan ketika sebuah tim mulai berkembang, beberapa masalah pun mulai bermunculan, diantaranya :

1. Desain team yang mulai berkembang : salah satu yang akan dilakukan perusahaan untuk mempercepat lajunya adalah melakukan hiring, termasuk menghire desainer. tentunya setiap desainer memiliki gaya desainnya masing-masing.
   
   
2. Tuntutan untuk support multiple platform : Sesuai kebutuhan perusahaan yang meningkat, tantangan pun meningkat, yang semula hanya mendesain product yang mensupport satu platform, kini perusahaan mulai mampu mengcover banyak platform.
   
   
3. Desain yang mulai tidak konsisten : Masalah ini merupakan buah dari masalah pertama dan kedua. Setiap desainer memiliki gaya desainnya masing-masing. dengan kata lain, semakin banyak desainer, desain yang dihasilkan terhadap seluruh produk bisa saja semakin tidak konsisten. 
   
   
4. Terlalu fokus pada masalah kecil : kebanyakan desain tim di perusahaan terlalu fokus pada hal-hal kecil seperti sibuk memperbaiki desain bugs, elemen yang tidak konsisten, dan masalah visual lainnya, daripada fokus mengurangi painful point-nya user.

Design System adalah kumpulan komponen-komponen UI terkategorisasi yang ditentukan oleh standar yang jelas dan saling terintegrasi dalam satu sistem, juga disertai dengan dokumentasi yang mencakup code library sehingga dapat digunakan seluruh tim untuk men-develop produk lebih cepat.

Selain disertai dengan component library yang membuat desainer hanya melakukan drag n drop, komponen-komponen UI tersebut umumya saling terkoneksi satu sama lain sehinga jika ingin melakukan perubahan, cukup merubah 1 komponen saja dan komponen lain yang serupa akan terganti secara otomatis (dapat diterapkan dengan fitur symbol untuk Sketch, dan fitur component untuk Figma). Misalnya kita ingin merubah button yang semula berwarna biru menjadi warna merah, maka cukup merubah 1 komponen button utama menjadi warna merah dan semua button di dalam seluruh komponen dan halaman lainnya akan berubah menjadi merah secara otomatis. Bayangkan jika kita masih menggunakan cara lama, kita harus merubah setiap tombol satu persatu di setiap halaman, dan bayangkan ada berapa banyak tombol yang harus kita ganti.

Dalam proses mendesain pun desainer cukup menggunakan komponen yang sudah tersedia di component library dan tidak perlu lagi membuat komponen dari awal. Hal tersebut cukup memangkas waktu, sehingga dengan adanya design system, desainer lainnya bisa lebih fokus untuk menyelesaikan user problem dibanding mengurusi masalah-masalah visual kecil.

Apa bedanya dengan style guide?

Style guide hanya mendefinisiksan graphic style, seperti apa saja warna yang digunakan, aneka font size dan jenis font yang digunakan, gaya illustrasi seperti apa yang akan digunakan, dan lain-lain. Style guide hanya suatu bagian dari Design System.

Apa bedanya dengan UI Kit atau Pattern Library?

UI Kit atau Pattern Library hanya kumpulan dari beberapa komponen UI yang sudah dikategorikan oleh desainer untuk mempermudah kinerja desainer. UI kit tidak disertai code library sehingga tidak dapat digunakan oleh developer. UI Kit atau Pattern Library juga hanya suatu bagian dari Design System.

Apakah sama dengan Bootstrap atau Front-end Framwork lainnya?

Mendekati, tapi bootstrap hanya ramah untuk developer dan tidak ramah bagi workflow desainer karena bootstrap tidak menyediakan pattern library yang dapat disimpan di design tools untuk digunakan para desainer. Salah satu alasan kenapa tidak menggunakan bootstrap adalah karena brand suatu produk atau company tidak selalu bisa selaras dengan style-nya bootstrap, maka kita harus membuat “bootstrap kita sendiri” yang kali ini harus ramah untuk developer maupun desainer.

TOOLS

Beberapa tools yang umumnya digunakan:

Design tools

• Sketch
• Adobe XD
• Figma

For Collaboration

• Figma
• Abstract
  Like github for designer (Sketch plugin).
• Github
  Collaboration among developer.

For Documentation

• Storybook
• Catalog
• Docsify
• Patternplate
• Zeroplate

Other

• invision
  for prototyping.
• zeplin
  deliver your design to developer.
• slack
  chatting platform for your company.
• emotion.js
  like CSS, javascript for styling.