Seberapa penting sebuah "Design System" dan "Graphic Standard Manual" ?

Desain Jun 03, 2020

Pernah denger kata Design system dalam sebuah aplikasi? atau GSM untuk produk?. Istilah rumit ini sudah lama diciptakan oleh para designer, bagi yang belum tahu mari kita pecahkan dan belajar bersama

Source: https://www.figma.com/blog/material-design-figma-styles/

👋 Pengertian Design System

Design system is a set of interconnected patterns and shared practices coherently organized to achieve the purpose of digital product.
— Design System Book, Alla Kholmatova.
A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications.
— designbetter.co
A Design System is the single source of truth which groups all the elements that will allow the teams to design, realize and develop a product.
— Audrey Hacq, UX Collective.

Design System adalah suatu kumpulan komponen-komponen UI dan code yang saling terhubung kemudian dikategorikan oleh suatu standarisasi yang jelas dan terintegrasi dalam suatu sistem. Design system ini dapat digunakan berulang kali oleh desainer ataupun developer dalam pengembangan produk.

Source: https://i.pinimg.com/originals/11/4c/f7/114cf7291d51b67eaff58268023cafbe.png

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.

🤗 Benefit

Diciptakannya design system untuk:

1. Alignment & consistency

Menjaga konsistensi pada semua platform, mengurangi redundancy, dan menjaga standar behavior untuk tiap-tiap elemen yang penting terkait usability.

2. Efficiency (gaining time & speed)

  • Mempercepat proses desain dan development karena Design System menyediakan shared-library dan guidelines dari komponen yang reusable
  • Designer mempunyai banyak waktu untuk fokus pada pengguna dan kebutuhan pengguna. Yang mana akan sangat berdampak positif untuk produk & organisasi/perusahaan
  • Meng-eliminasi perkerjaan yang repetitive
  • Save time & money
  • Avoiding design & technical dept (Redundant code)

3. Trust & Intuitive

  • Meningkatkan brand trust dengan memberikan pengalaman pengguna yang konsisten dan positif dalam penggunaan produk
  • Meningkatkan pemahaman pengguna terhadap product

4. Collaborative & Knowledge sharing

  • Membangun mindset kolaborasi dan support teamwork, karena semua orang bekerjasama dalam satu wadah. Mereka menjalankan, menjaga, dan merawat design system itu sendiri serta reducing design debate
  • Shared Vocabulary, memiliki bahasa yang sama dan visi dan misi yang sama
  • Member baru akan jauh memiliki proses orientasi yang lebih mudah.

5. Flexibility & Constantly Evolving

  • Design system akan terus tumbuh, akan terus beradaptasi dan berevolusi berdasarkan kebutuhan product kita (User needs & Business needs)

6. Scalability

  • Membantu skala bisnis dengan fondasi yang kuat untuk mengurangi biaya desain dan development di masa depan.

Sedangkan GSM,

Source: https://image.slidesharecdn.com/gsmcatfish-130228175317-phpapp01/95/graphics-standard-manual-catfish-7-638.jpg?cb=1362074370

GSM disini bukan temennya CDMA bos, tapi Graphic Standard Manual yang bisa diartikan. Dokumen yang berisikan tentang aturan logo, pemilihan jenis font, layout, pattern, dan segala elemen yang digunakan oleh sebuah brand atau perusahaan guna membangun identitas yang kuat. Aturan ini digunakan sebagai acuan dasar untuk desainer supaya tidak keluar dari jalur dari apa yang terlihat, terdengar, dan terasa dari suatu merek.

Fungsi Graphic Standard Manual 👌

  1. Cerminan kepribadian sebuah brand atau perusahaan.
  2. Lebih mengenal brand atau perusahaanmu lebih dalam.
  3. Membangun citra brand atau perusahaan.
  4. Membangun kepercayaan klien terhadap sebuah brand.
  5. Panduan gaya untuk desainer.
  6. Menjaga konsistensi logo meskipun digunakan pada media yang berbeda-beda.

Lantas perbedaannya dimana?

Design system untuk komponen UI sedangkan GSM untuk brand suatu produk.

Bonus!🎊

Berikut beberapa contoh design system dan GSM yang mungkin bisa dibuat referensi oleh kalian

Link repo design system: https://designsystemsrepo.com/design-systems/

Asphalt
GO-JEK Design Language System
Bukalapak Design — Brand Guideline
Learn about Bukalapak’s brand mission, brand story, and collection of brand elements.

Link GSM: https://www.nasa.gov/sites/default/files/atoms/files/nasa_graphics_manual_nhb_1430-2_jan_1976.pdf

Graphic Standards Manual D&D
Graphic standard manual adalah sebuah pedoman sebagai media acuan untuk menstandarisasi identitas yang telah dibuat untuk menjaga konsistensi identitas (logo) tersebut agar tetap tampil baik dan tidak salah dalam penempatannya pada berbagai media branding…

Kesimpulan

Jadi apakah penting sebuah "Design System" dan "Graphic Standar Manual" ?. sangat penting yaitu menjaga consistency sebuah desain.Karena desain sekarang bukan "bagus atau tidaknya" melainkan memberikan problem solving untuk produk atau jasa. salah satunya dengan cara menjaga consistency desain melalui "Design System" dan "Graphic Standar Manual".

Referensi:

Ubah Pola Mendesain dengan Design System
Sejatinya artikel ini adalah rangkuman dari Workshop yang berjudul “Building Design System for managing design consistency and high-functioning team” pada Tokopedia UXID Conference 2018 yang…
Kenapa Design System itu Sangat Penting 🕺
Berbagi cerita tentang GO-JEK Design Language System (asphalt.gojek.io) dari perspective Product Designer. Dari yang tadinya skeptis, menjadi seorang penikmat dan pecandu Design System. Dan bagaimana…

https://kreativv.com/creativepreneur-career/graphic-standard-manual/2/

Great! You've successfully subscribed.
Great! Next, complete checkout for full access.
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.