Dokumen tersebut membahas tentang konsep desain sistem yang mencakup definisi, komponen, contoh penerapan, manfaat, dan komponen dasar yang perlu diperhatikan dalam membuat desain sistem seperti navigasi, kesederhanaan, penggunaan yang mudah, grafik, penulisan, dan aksesibilitas. Dokumen tersebut juga memberikan contoh desain sistem pemerintah dan katalog desain sistem yang dapat digunakan sebagai referensi.

1. Konsep Design
System
Semester Ganjil 2022 - 2023
By : Arif Hadi Sumitro, M.Kom
NIDN.0718029002
STIKOM PGRI BANYUWANGI
Design System 2

2. Membuat Konsep
Apa Yang Anda Fikirkan ?

3. Konsep Dasar Web Desain
 Navigasi : Patokan pertama baik tidaknya performa website terletak pada navigasinya.
Navigasi yang perlu Anda perhatikan antara lain judul HTML, link, site map, tombol home,
dan lainnya.
 Kesederhanaan : memberi space antara heading dengan sub heading, menyorot kata yang
penting, hingga memadukan warna font yang tepat dengan backgroundnya.
 Penggunaan Yang Mudah : Jangan sampai pengunjung web Anda hengkang karena lama
saat me-loading, atau lama saat men-direct.
 Grafik : Jangan sampai Anda memasukkan terlalu banyak grafik dalam web. Misalnya,
memberi teks alternatif pada tag, hal ini bermanfaat apabila pengunjung web mematikan
grafik, sehingga pengunjung tersebut tetap mengetahui gambar yang dimatikan tersebut.
 Penulisan : Konsep penulisan dalam web haruslah tepat. Mengingat pengguna internet
tidak memiliki waktu yang banyak, mereka cenderung mencari informasi yang instan.
 Pengaksesan Yang Mudah : web yang mudah digunakan artinya pengunjung akan kembali,
web yang sulit digunakan menghasilkan penyesalan bagi pengunjung
 Buta Warna : jangan jadikan warna sebagai satu-satunya tolak ukur, Anda bisa
menambahkan garis bawah atau underline dalam beberapa kata yang penting.

4. Apa Design System ?
Alla Kholmatova, Konsultan UX mendefinisikan
design system sebagai kumpulan pola yang
saling berhubungan.
Tak sekadar pola saja, pola ini diatur dan
digunakan secara bersama-sama, serta
diciptakan agar harmonis dan konsisten. Pada
akhirnya, pola-pola ini bisa digunakan untuk
mencapai tujuan dari produk digital.

5. Apa Design System ?
Forum One, Sistem desain adalah serangkaian
komponen yang dapat digunakan kembali dalam
kombinasi yang berbeda. Sistem desain
memungkinkan Anda mengelola desain dalam
skala besar.
Lewat dua definisi tadi, bisa disimpulkan bahwa
design system merupakan kumpulan komponen
desain yang konsisten.
Ia harus bersifat bisa digunakan berulang-ulang,
serta bisa digunakan oleh berbagai anggota tim
produk digital.

6. Contoh Penerapan Design System
https://www.w3schools.com/w3css

7. Contoh Penerapan Design System
Kamu bisa melihat bahwa komponen yang ada
bersifat konsisten dan senada. Bahkan, beberapa
unsur hanyalah hasil copy dan paste dengan sedikit
penyesuaian.
Pada praktiknya, design system ternyata tidak hanya
digunakan di produk digital. Desain produk industri
juga bisa menggunakannya.
Gambar di atas merupakan desain petunjuk
untuk penumpang kereta di New York. Pada
ilustrasi itu, elemen-elemen penunjuk bersifat
senada dan “bisa digunakan kembali”.

8. Mengapa Harus Design System ?
Meskipun mungkin terasa seperti Anda menambahkan lapisan lain, sistem desain sebenarnya
dapat membantu Anda meningkatkan efisiensi. Untuk lebih memahami bagaimana ini berlaku
untuk Anda, pertimbangkan pertanyaan berikut :
1.Skala – Apakah Anda mendesain produk (atau produk) yang memiliki lebih dari 300 layar ? Apakah
produk anda akan tumbuh secara signifikan ?
2.Konsistensi – Apakah Anda ingin produk Anda memiliki branding, tampilan dan nuansa, serta
pengalaman yang konsisten ? Apakah produk Anda saat ini memiliki 20 gaya tombol yang berbeda ?
3.Efisiensi – Apakah Anda ingin desainer visual, desainer pengalaman pengguna, dan pengembang
front-end Anda bekerja lebih cepat dan menghemat waktu ?
4.Kerja tim – Apakah Anda memiliki proyek di mana ada banyak handoff antara desainer atau banyak
desainer bekerja pada proyek yang sama sekaligus ?

9. Time Is Money
Selain itu, karena Anda menggunakan kembali komponen dalam sistem desain Anda, waktu yang Anda
habiskan untuk membuat akan berkurang seiring waktu. Pada saat itu, desainer dan pengembang front-
end Anda dapat menyempurnakan produk yang ada, dan bisa fokus pada proyek lain!

10. Mengapa Harus Design System ?
System Desain Pemerintah
https://designsystem.digital.gov/
https://uspto.github.io/designpatterns/index.html
https://usajobs.github.io/design-system/
http://style.bristol.gov.uk/
http://cityofphiladelphia.github.io/patterns/
Katalog Sistem Desain
 Adele – 100+ sistem desain yang dikatalogkan dan dikategorikan. Daftar ini sangat membantu jika
Anda mencari sesuatu yang spesifik. Mereka telah mencatat sistem desain mana yang memiliki
pedoman aksesibilitas, suara dan nada, ikon, penamaan warna, dan banyak lagi. Ini disatukan oleh
UXPin.
 Design Systems Repo – 50+ sistem desain, panduan gaya, dan pustaka pola.
https://designsystem.quickbooks.com/
https://material.io/

11. Yang Perlu Diingat
Style yang akan diterapkan, didefinisikan oleh W3C (https://www.w3.org/Style/CSS/)
Referensi utama: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
selectors { property: value; }
Elemen yang akan dikenai style Nilai style yang akan diterapkan

12. Yang Perlu Diingat
• Kode CSS ditulis sebagai value dari atribut style pada elemen HTML
Inline
• Kode CSS ditulis pada tag <style> di bagian <head> dari dokumen HTML
Internal
• Kode CSS ditulis pada file terpisah (*.css) kemudian dihubungkan melalui tag
<link> yang dideklarasikan pada bagian <head> dokumen HTML
External

13. Example : Component Button
<style>
a, button,input[type=submit],input[type=reset] {
font-family: sans-serif;
font-size: 15px;
color: white;
border: white 3px solid;
border-radius: 5px;
padding: 12px 20px;
margin-top: 10px;
}
.danger{
background: #86010f;
}
.warning{
background: #f39946;
}
.info{
background: #0747ad;
}
.success{
background: #18ee8b;
}
a {
text-decoration: none;
}
a:hover, button:hover, input[type=submit]:hover, input[type=reset]:hover{
opacity:0.9;
}
</style>

14. Example : Component Button
<button class="danger">Button</button>
<a href="#" class="warning">Link Button</a>
<input class="info" type="submit"
value="Submit Button">
<input class="success" type="reset"
value="Reset Button">

15. Tugas
 Bentuk Kelompok Maksimal 5 Orang.
 Tentukan Thema dari masing – masing
kelompok.
 Tentukan Design System Thema yang Dibuat.
Jelaskan Arti Warna yang anda gunakan
dalam Psikologi dan Filosofinya.

16. Terima kasih.