Belajar Design System Untuk Pemula
Summary
TLDRThis video script delves into the application of system design in crafting complex Yin Yang projects, emphasizing its importance in large-scale and collaborative work to prevent miscommunication and streamline project execution. It explains the concept of system design, including component libraries, pattern libraries, and style guides, and demonstrates the benefits of using a design system for consistency, efficiency, and ease of collaboration. The script also discusses different approaches to adopting, adapting, or creating a design system tailored to a company's needs, highlighting the trade-offs between customization and cost.
Takeaways
- 😀 A design system is a collection of components, patterns, and styles that can be reused in product design development.
- 🔄 Design systems facilitate the replication and implementation of elements across large-scale projects, enhancing efficiency and consistency.
- 👥 Collaboration in design projects can be streamlined with a design system, reducing miscommunication and aligning team efforts.
- 🎨 The system includes a style guide focusing on branding elements such as color, typography, and logos, and provides guidelines for content creation.
- 📚 A component library is part of the design system, housing pre-designed UI elements ready for reuse in various projects.
- 🛠️ Each component in the system is detailed with descriptions, usage guidelines, attributes, and source code for easy implementation by developers.
- 🔑 Attributes of components such as color and size are adjustable, allowing for flexibility and adaptation to different project needs.
- 🔄 The pattern library organizes how components can be grouped together, focusing on content structure and layout templates for reuse.
- 🛑 Standardization in design systems ensures that the products reflect the brand identity and values, maintaining a consistent brand experience.
- 🤝 Design systems can be adopted, adapted, or created from scratch, each approach having its own advantages and disadvantages in terms of cost, customization, and brand differentiation.
- 📈 A good design system is well-documented, user-friendly, and based on user research and brand identity, ensuring each element has a strong rationale behind it.
Q & A
What is the main topic of the video?
-The main topic of the video is the application of design systems in the process of building a large-scale Yin Yang project.
Why is it important to use a design system when building a complex Yin Yang project?
-Using a design system is important because it streamlines the work process, reduces miscommunication, and ensures consistency across a large-scale project, which can span hundreds of pages.
What are the components of a design system according to the video?
-A design system consists of a component library, pattern library, and style guide. These include elements like color schemes, typography, buttons, icons, and other UI components.
How does a design system help in collaboration within a team?
-A design system aids in collaboration by providing a standardized set of components and guidelines, which minimizes miscommunication and ensures that all team members are aligned with the project's visual and functional standards.
What are the benefits of using a design system in a project?
-The benefits include easy replication and implementation of elements in large projects, focusing designers on more complex problems, facilitating collaboration, and maintaining visual consistency across the entire product.
How does the video demonstrate the process of creating a component within a design system?
-The video demonstrates creating a button component, setting its size, color, and text, and then turning it into a reusable component within the design system.
What is the advantage of having a master component in a design system?
-Having a master component allows for easy updates across all instances of that component in a project. If the design needs to change, only the master component needs to be updated, and all other instances will automatically reflect the changes.
What are the three approaches to using a design system mentioned in the video?
-The three approaches are adopting an existing design system, adapting an existing design system to fit the company's needs, and creating a custom design system specifically for the company.
What are the potential drawbacks of adopting an existing design system as mentioned in the video?
-The potential drawbacks include limited customization options and reduced brand differentiation, as the design system may be used by other companies as well.
What are the key characteristics of a good design system according to the video?
-A good design system should have concise and clear documentation, understandable rules and guidelines, and all components, patterns, and styles should be based on user research and brand identity.
How does the video suggest a design system will evolve over time?
-The video suggests that a design system will continue to evolve with the development of the product it supports and will be influenced by the emergence of new tools and technologies.
Outlines
🛠 Introduction to Design Systems in Project Collaboration
The script begins by addressing the audience and introducing the topic of design systems in the context of complex Yin Yang projects, which can involve hundreds of pages. It raises questions about the audience's experience with such projects and the challenges they might have faced without a design system in place. The importance of design systems in streamlining work and preventing miscommunication in large-scale projects is emphasized. The video aims to explain what a design system is, its components, and how it can be implemented effectively. A design system is described as a collection of components, patterns, and styles that can be reused in product design, with standards set by organizations or companies.
📚 Components and Benefits of Design Systems
This paragraph delves into the specifics of what constitutes a design system, including style guides, component libraries, and pattern libraries. It explains that a design system can be reused across various projects, making it an efficient tool for developers and designers alike. The paragraph also highlights the benefits of using a design system, such as the ease of replication and implementation of elements in large projects. The script provides a practical demonstration of creating and implementing a design system element, like a button, within a project, showcasing the time-saving and consistency benefits of such an approach.
🔄 The Role of Components in Design Systems
The script continues to explore the functionality of components within a design system, discussing how they can be grouped and used in different projects. It emphasizes the ease with which developers can implement these components using source code, and how changes to the master component can automatically update all instances across projects. This section also touches on the advantages of design systems in terms of allowing designers to focus on more complex problems, facilitating collaboration, and maintaining visual consistency throughout a product or brand.
🌟 Approaches to Creating a Design System
The final paragraph discusses the different approaches to creating a design system, as outlined by Teresa Neumann, a senior user experience specialist from Nielsen Norman Group. It presents three main approaches: adopting an existing design system, adapting an existing one to fit company needs, or creating a bespoke design system for the company. The paragraph examines the pros and cons of each approach, such as cost, customization, and brand differentiation. It concludes by highlighting the importance of documentation, clear guidelines, and user research in creating an effective design system.
Mindmap
Keywords
💡System Design
💡Component Library
💡Pattern Library
💡Style Guide
💡Consistency
💡Collaboration
💡Replicability
💡Customization
💡Brand Identity
💡User Research
💡Documentation
Highlights
Introduction to the importance of system design in creating complex Yin Yang projects with numerous pages.
Discussion on the challenges of building complex Yin Yang projects without a system design, leading to potential miscommunication and extended project timelines.
Definition of system design as a collection of components, patterns, and styles that can be reused in product development.
Explanation of how system design components, pattern libraries, and style guides contribute to a standardized approach in an organization or company.
The significance of system design in facilitating collaboration within a team and avoiding miscommunication.
Demonstration of how system design can streamline the replication and implementation of elements in large-scale projects.
The role of a style guide in focusing on branding, including color schemes, typography, and logos.
Description of a component library as a collection of pre-designed UI elements ready for reuse in various projects.
Importance of naming components specifically to prevent miscommunication between designers and developers.
How providing a description and usage guidelines for each component aids in consistent application across projects.
The inclusion of attributes and source code for each component to ease the implementation by front-end developers.
The concept of a pattern library that groups components and focuses on content structure, layout, and reusable templates.
Benefits of using a design system, such as ease of replication, focus on complex problem-solving, and facilitated collaboration.
The impact of design systems on maintaining visual consistency throughout a product and enhancing user experience.
Different approaches to using design systems: adopting existing ones, adapting them to company needs, or creating a new one specifically for the company.
Analysis of the pros and cons of each approach to using design systems, considering cost, customization, and brand differentiation.
Characteristics of a good design system, including concise documentation, clear guidelines, and components supported by user research and brand identity.
Conclusion emphasizing the evolving nature of design systems and their dependence on product development, team needs, and technological advancements.
Transcripts
Hai Hai
[Musik]
semuanya selamat datang kembali di
channel ini di video kali ini saya akan
mengajak kalian untuk membahas mengenai
penerapan desain sistem dalam rancang
sebuah Yin Oke Sebelumnya saya mau
bertanya kepada kalian apakah kalian
pernah membangun sebuah Yin Yang
kompleks dengan memiliki puluhan hingga
ratusan halaman atau page tanpa
melibatkan desain sistem di dalam
prosesnya
kemudian Pernahkah kalian membangun ydn
secara berkolaborasi dengan tim kalian
tanpa menggunakan desain sistem dalam
prosesnya kira-kira Bagaimana eksperimen
kalian apakah kolaborasi yang kalian
lakukan berjalan dengan baik atau malah
terjadi miskomunikasi di dalamnya yang
juga berdampak pada waktu pengerjaan
Project yang cukup lama nah the
permasalahan tersebut tentu dengan
menggunakan desain sistem dalam proses
membangun yin yang memiliki skala yang
besar akan merampingkan pekerjaan kalian
Oke mungkin dari kalian semua ada
beberapa yang belum memahami apa sih itu
desain sistem maka dari itu di video
kali ini saya akan mencoba menjelaskan
apa sih itu desain sistem dan bagaimana
implementasinya
[Musik]
desain sistem adalah kumpulan komponen
pola dan gaya yang dapat digunakan
berulang kali dalam mengembangkan sebuah
produk desain sistem memiliki standar
yang telah ditentukan oleh sebuah
organisasi ataupun perusahaan
dari definisi yang telah saya sampaikan
ada beberapa hal yang perlu kita garis
bawahi dan kita coba bahas satu per satu
poin pertama Hai desain sistem adalah
kumpulan komponen atau lebih dikenal
dengan komponen library kemudian berisi
Pola atau pattern library dan gaya atau
style guide komponen pola dan gaya yang
dimaksud bisa berupa Kaler typography
kemudian kumpulan komponen seperti
button icon dan kumpulan komponen Yui
yang lainnya Nah kita masuk ke poin
nomor 2 desain sistem dapat digunakan
berulang kali
komponen pola dan gaya yang dibuat di
dalam desain sistem dapat digunakan
berulang kali di setiap projek yang kita
buat istilahnya kita tinggal ambil dan
kopi dan selanjutnya kita tinggal
implementasikan saja komponen ke dalam
project-project yang kita kerjakan
selanjutnya kita masuk ke poin yang
nomor tiga yaitu desain sistem memiliki
standard yang sudah ditentukan
setiap perusahaan tentu ingin produk
yang dibangunnya mengandung nilai-nilai
atau identitas brand yang dibuat
sehingga pada saat membuat desain sistem
Para desainer dan developer akan
memperhatikan nilai-nilai tersebut agar
produk yang dibuat dapat mencerminkan
identitas perusahaan
[Musik]
dalam membuat sebuah desain sistem ada
beberapa hal yang umum dimuat di dalam
desain sistem seperti yang sebelumnya
sudah saya sampaikan hal-hal yang berisi
di dalam desain sistem seperti gaya atau
style guide style guide cenderung
berfokus pada branding atau identitas
brand seperti warna tipografi hingga
logo Selain itu style guide biasanya
berisi panduan Bagaimana cara menulis
berbagai konten yang selaras dengan
nilai-nilai dari perusahaan selanjutnya
desain sistem berisi komponen atau
komponen library component library yang
juga dikenal sebagai desain library
berisi kumpulan elemen Yui yang telah
dirancang sebelumnya dan dapat digunakan
berulang kali pada setiap proyek yang
dikerjakan selain berisi visual
komponen-komponen juga dilengkapi dengan
nama komponen tentunya nama komponen
dapat ditulis dengan spesifik untuk
menghindari miskomunikasi antara
desainer dan developer
selanjutnya Selain nama komponen setiap
komponen akan diberikan deskripsi
tentang bagaimana sebuah komponen
digunakan Selain itu akan dilengkapi
juga cara untuk menggunakannya Seperti
hal yang boleh dilakukan dan hal yang
tidak bisa dilakukan
selanjutnya atribut agar lebih lengkap
lagi setiap komponen akan diberikan
atribut seperti warna ukuran dan dari
setiap komponen
selain atribut setiap komponen akan
diberikan source code dengan adanya
source code tim developer atau front-end
developer dapat dengan mudah
mengimplementasikan setiap komponen yang
dimiliki ke dalam project-project yang
mereka kerjakan dan yang terakhir desain
sistem berisi Pola atau pattern library
beton library biasanya berisi cara untuk
mengelompokkan komponen yang telah
dibuat dengan komponen yang lain atau
fat on library lebih menekankan pada
struktur konten tata letak setiap elemen
Yui dan template yang dapat digunakan
kembali pada sebuah Project
[Musik]
lalu Mengapa sih kita menggunakan desain
sistem Nah ada beberapa manfaat yang
bisa didapatkan saat menggunakan desain
sistem yang pertama Hai dapat
mereplikasi dan mengimplementasikan
elemen pada Project yang besar dengan
mudah maksud dari mereplikasi dan
mengimplementasikan elemen ini Agar
kalian lebih paham Saya akan mendemokan
atau menunjukkan prosesnya di dalam
figma Oke kita langsung saja ke dalam
hikmah
Ok Sekarang saya sudah berada di dalam
hikmah Nah selanjutnya saya akan
menjelaskan mengenai pengertian
mereplikasi sebuah elemen Yui dan
mengimplementasikannya ke dalam sebuah
Project okeh langsung saja bisa kalian
lihat di layar saya sudah menyediakan
beberapa pic dimana Pets pertama akan
saya jadikan sebuah desain sistem yang
akan berisi sebuah
elemen Yui dan kemudian tiga bridge ini
akan saya gunakan sebagai contoh sebuah
Project nah di mana diproject ini jika
kalian misalnya
buat sebuah elemen Yui misalnya sekitar
buat button Oke kita buat button
Soalnya ini 71 untuk tingginya dan kita
beri teks misalnya get started
[Musik]
OK kita taruh di center
warnanya kita ganti putih untuk betonnya
kita ganti hijau seperti ini Oke
dan kita taruh di tengah
[Musik]
nah oke nah jika kalian membuat elemen
Yui seperti Barton ini dan setiap pic
yang lain juga membutuhkan elemen yang
sama yaitu sebuah badan get started
tentu kalian bisa membuat secara manual
seperti tadi di setiap pedasnya tapi
bagaimana jika kalian memiliki jumlah
first atau jumlah halaman yang banyak
misalnya ratusan ini akan membutuhkan
waktu yang cukup lama dan ini tidak
efisien tapi ini juga bisa kalian copy
seperti berikut dan copy P seperti
berikut nah tapi jika kalian suatu saat
nanti produk Kalian ada perubahan atau
perusahaan mengalami reprimanding dan
misalnya button ini kita ganti menjadi
warna biru tentu kita akan mengganti
setiap balon-balon yang lain di setiap
halaman atau page nya secara manual juga
dan ini membutuhkan waktu yang cukup
banyak juga dan tidak efisien Maka dari
itu peran komponen dalam desain sistem
ini sangat penting sekali Nah bisa
kalian lihat dulu ya Disini saya akan
mencontohkan bagaimana saya membuat
sebuah komponen di dalam desain sistem
dan saya implementasikan ke dalam setiap
projek yang saya miliki ok
Hai
nah Disini saya akan buat button lagi di
desain sistem Oke segini saja
ukurannya samain aja ya 337
[Musik]
dan tingginya adalah 71
seperti ini dan teksnya adalah get
started sama
[Musik]
Oke seperti ini
untuk beton yang sebelumnya akan saya
delete terlebih dahulu Nah untuk warna
dari Banten ini akan saya ganti hijau
dan tulisan menjadi putih
Nah bisa kalian lihat di sini Ini adalah
sebuah balon biasa ya yang terdiri dari
sebuah sip dan tulisan Nah berikut saya
akan the button ini menjadi sebuah
komponen Oke kita tinggal pilih text dan
asyiknya kemudian kita kontrol by untuk
grup nah oke Ini sudah di grup
selanjutnya kalian bisa pilih komponen
yang di atas ini yang ada kota empat ini
kita tinggal pilih nah oke di sini bisa
kalian lihat di grup 1 itu akan
terimplementasikan sebuah komponen
nah komponen yang sudah kita buat ini
dapat kita implementasikan ke setiap
project-project yang kita miliki caranya
adalah kita pergi ke Asep nah secara
otomatis sebatan yang kalian rubah
menjadi komponen ini akan terdaftar di
aset yang berada di bagian desain sistem
cara menggunakannya seperti berikut kita
tinggal pilih saja button yang kita
perlukan
oke tinggal pilih dan kita tinggal
letakkan di pic yang membutuhkan elemen
Yui yang kalian buat Oke Tibet God
nah oke
Dan ini juga bisa kita copy dan kita
best ke
pet special lainnya nah Disini ajaibnya
dari penggunaan komponen di dalam desain
sistem apabila suatu saat nanti produk
kita berubah maka kita tinggal merubah
desain sistemnya saja yaitu komponen
betonnya misalnya warnanya misalnya
berubah suatu saat nanti menjadi Ungu
Oke dan ketika kita merubah baten
masternya maka beton beton yang lainnya
akan berubah juga bagaimana dengan
rounded Nya najika rounded Nya kita
ganti menjadi misalnya 11 Oke sudah maka
semua beton akan menjadi rounded Hai
bagaimana dengan teks nah misalnya kita
ganti menjadi login
maka
semua teks pada button button yang ada
di Project kita juga akan berubah
mengikuti Master button yang telah kita
buat di dalam desain sistem nanti
penjelasan kali ini cukup singkat saja
saya akan membuat penjelasan atau
praktek membuat sebuah komponen di dalam
desain sistem dimana video tersebut akan
saya buat terpisah dimana jika video
tersebut sudah selesai dikerjakan Dan
diupload maka link video tersebut akan
muncul di pojok kanan atas video ini Oke
langsung saja kita lanjut ke dalam slide
selanjutnya
designer dapat fokus pada masalah yang
lebih kompleks karena elemen-elemen Yui
sudah dibuat sebelumnya di dalam desain
sistem maka para desainer dapat berfokus
dalam mengatasi
permasalahan-permasalahan yang lebih
kompleks hal ini akan mempercepat
pekerjaan desainer atau sebuah tim yang
terlibat di dalam sebuah Project
kemudian yang ketiga yaitu memudahkan
dalam berkolaborasi
dalam mengerjakan sebuah Project tentu
kita akan melakukan kolaborasi untuk
menyelesaikan proyek tersebut dan
kolaborasi tersebut bisa saja dilakukan
dengan tim yang sama atau dengan tim
yang berbeda semakin banyak orang yang
terlibat di dalam sebuah Project maka
akan ada peluang setiap orang akan
mengalami miskomunikasi dalam pengerjaan
proyek tersebut maka dari itu peranan
desain sistem adalah untuk meminimalisir
miskomunikasi ini dari sisi
fungsionalitas elemen dan tampilan
visual dan yang terakhir nomor 4 Yaitu
dapat menjaga konsistensi visual di
seluruh produk dan C Hai banget karena
design system menyediakan satu sumber
komponen pola dan gaya yang dapat
digunakan berulang kali di seluruh
produk dan channel maka akan memberikan
konsistensi visual dan eksperimen yang
konsisten bagi pengguna
[Musik]
selanjutnya kita akan membahas mengenai
pendekatan-pendekatan yang dapat kita
gunakan dalam membuat sebuah desain
sistem dari artikel yang ditulis di
Nielsen Norman grup.com oleh Teresa
fessenden seorang senior user experience
specialist secara umum terdapat tiga
pendekatan dalam menggunakan desain
sistem yaitu mengadopsi desain sistem
yang sudah ada kemudian mengadaptasi
atau menyesuaikan sistem desain yang
sudah ada dengan kebutuhan perusahaan
yang terakhir adalah membuat desain
sistem sendiri khusus untuk perusahaan
nah di ketiga pendekatan ini tentu ada
kelebihan dan kekurangannya
masing-masing dan kita bisa memilih
salah satu pendekatan sesuai dengan
kebutuhan tim dan kebutuhan Project yang
kita buat nah disini bisa kalian lihat
di layar Kalian ada beberapa kelebihan
dan kekurangan seperti mengadopsi desain
sistem yang sudah ada di mana Di sini
ada Kelebihannya yaitu Low Cost yaitu
biaya yang dikeluarkan sedikit karena
kita hanya mengadopsi desain sistem yang
sudah ada namun dengan Hal ini tentu
akan menimbulkan kekurangan yaitu les
customization karena design system ini
yang kita gunakan adalah desain sistem
yang sudah ada jika suatu saat nanti
produk kita mengalami perubahan maka hal
ini akan menjadi PR yang cukup hai oh
besar bagi para desainer ataupun
developer untuk merubah desain sistem
mereka dan yang terakhir kekurangannya
adalah lo brand diferensiasi on karena
ya kita menggunakan desain sistem yang
sudah ada maka kemungkinan perusahaan
lain menggunakan desain sistem yang sama
itu ada sehingga disini akan mengurangi
nilai keunikan sebuah produk dari sebuah
perusahaan nah maka dari itu kita bisa
membuat sendiri desain sistem kita namun
disini tentu
high-cost ya biaya yang dikeluarkan
cukup tinggi dan waktu yang dikeluarkan
untuk mengerjakan desain sistem ini
cukup panjang namun dengan kita membuat
desain sistem ini akan mendapatkan
kelebihan yaitu more customization
dimana jika suatu saat nanti produk yang
kita buat mengalami perubahan atau suatu
saat nanti perusahaan melakukan
re-branding Para desainer developer
dengan mudah sesuka hati merubah desain
sistem mereka Sesuai dengan identitas
brand atau batasan-batasan yang telah
ditentukan sebelumnya kemudian kelebihan
selanjutnya adalah high brand
differentiations dimana karena design
system kita buat sendiri kita bisa
membuat desain sistem yang unik dan
sesuai dengan nilai-nilai atau identitas
dari perusahaan
[Musik]
Lalu bagaimana sih kita membuat desain
sistem yang baik Nah berikut beberapa
ciri desain sistem yang baik yang
pertama tentu memiliki dokumentasi yang
ringkas dan rapi dengan dokumentasi yang
ringkas dan rapi Para desainer para
developer ataupun orang-orang yang
terlibat langsung dalam sebuah proyek
yang melibatkan desain sistem akan
dengan mudah mempelajari desain sistem
tersebut dan mengimplementasi desain
sistem tersebut kedalam Project Mereka
kemudian yang nomor dua adanya aturan
dan pedoman yang mudah dimengerti dan
yang terakhir segala komponen pola dan
gaya yang dibuat didukung berdasarkan
user research dan identitas brand
sehingga setiap elemen pada desain
sistem memiliki alasan yang kuat dibuat
kesimpulan dari pembahasan kali ini
adalah desain sistem Merupakan
sekumpulan komponen pola dan gaya yang
dapat digunakan berulang kali di setiap
proyek yang dikerjakan terdapat beberapa
hal yang perlu kita pertimbangkan jika
ingin membuat sebuah desain sistem
seperti skala proyek yang dikerjakan
kebutuhan tim dan waktu yang dibutuhkan
dalam mengerjakan projek desain sistem
akan terus berkembang mengikuti
perkembangan produk yang dibuat hingga
pengaruh dari adanya perkembangan tools
dan teknologi baru oke untuk pembahasan
kali ini sudah selesai di selanjutnya
saya akan membahas mengenai Atomic
desain yang masih ada kaitannya dengan
desain sistem Jika menurut kalian video
ini membantu silahkan like video ini dan
subscribe channel ini agar kalian tidak
ketinggalan video-video menarik yang
lainnya dan silahkan share juga ke teman
kalian agar teman kalian memiliki
referensi yang sama dengan kalian Oke
mungkin sekian video kali ini dan terima
kasih
[Musik]
تصفح المزيد من مقاطع الفيديو ذات الصلة
Why I Pick ShadCN and Tailwind for all my projects
System Design BASICS: Horizontal vs. Vertical Scaling
Operating System Generation and System Boot
UML Diagram For Software Engineering | Unified Modelling Language Diagram | Simplilearn
The Perfect Spacing Framework in UI Design | Figma Tutorial
How to THINK LIKE A DEVELOPER using Dev Mode in Figma!
5.0 / 5 (0 votes)