Desain Sistem telah menjadi bagian penting dari pekerjaan saya sehari-hari … Dan dari diskusi di sekitarnya, sekarang menjadi kasus bagi banyak orang ?

Setelah membaca buku Alla Kholmatova tahun lalu, saya beruntung menghadiri konferensi Eropa pertama tentang masalah ini pada bulan Maret. Semua ini memperkuat keyakinan saya bahwa, di masa depan, setiap merek dan setiap produk akan menggunakan Sistem Desain, sederhana atau komprehensif, ketat atau longgar, mono atau lintas platform …

Apa itu Sistem Desain?

Saya terus mendengar berbagai definisi, jadi izinkan saya mulai dengan mengatakan apa yang bukan Sistem Desain: ini bukan perpustakaan Sketsa , tidak lebih dari panduan Gaya atau Perpustakaan Pola … Sebenarnya, ini semua dan masih banyak lagi!

“Sistem Desain adalah satu-satunya sumber kebenaran yang mengelompokkan semua elemen yang akan memungkinkan tim untuk merancang, mewujudkan, dan mengembangkan suatu produk.”

Jadi Sistem Desain bukanlah hasil, tetapi satu set hasil. Ini akan terus berkembang dengan produk, alat dan teknologi baru.

Seperti yang dijelaskan Jina Anne dengan sempurna dalam konferensi ini , Sistem ini terdiri dari elemen-elemen fisik dan non-fisik:

• Alat untuk desainer & pengembang, pola, komponen, pedoman …
• Tetapi juga – dan itu seringkali merupakan hal yang paling sulit untuk dicapai – beberapa elemen abstrak seperti nilai-nilai merek, cara kerja yang sama, pola pikir, keyakinan bersama …

Panduan Gaya atau Perpustakaan Pola: apa bedanya?

Seperti yang seharusnya sudah jelas bagi Anda sekarang, panduan Gaya dan Perpustakaan Pola hanyalah beberapa hasil dari Sistem Desain.

Sebuah Panduan Gaya -seperti ditunjukkan oleh nama-nya akan fokus pada gaya grafis (warna, font, ilustrasi …) dan penggunaannya.

Sebuah Perpustakaan Pola akan mengintegrasikan komponen fungsional dan penggunaannya.

Sebagian besar Sistem Desain saat ini mengandung keduanya, seperti Shopify misalnya yang sebagai satu tab “Visual” untuk Panduan Gaya dan satu tab “Komponen” untuk Perpustakaan Pola-nya.

Shopify – Polaris: Panduan gaya & pustaka Pola

Mengapa kita membicarakan hal itu hari ini?

Keinginan untuk memfaktorkan desain dan komponen bukanlah hal baru. Tetapi kita dapat melihat bahwa tren telah meningkat selama beberapa tahun terakhir. Semakin banyak perusahaan yang didasarkan pada dukungan digital dan bahkan tidak memiliki panduan Grafik untuk dicetak lagi!

Untuk waktu yang lama, digital diperlakukan seperti “proyek sampingan”: kami biasa membuat pedoman Grafik untuk elemen yang dicetak dan kemudian, menambahkan beberapa pedoman tambahan untuk digital … Siapa yang tidak pernah menerima 300 halaman pedoman grafis dengan hanya 6 halaman tentang digital? Saya punya … Dan sebagai Desainer, itu bukan jenis input yang saya harapkan dari sebuah merek …

Seorang desainer yang menerima panduan Grafik dari kliennya

Kita sekarang harus menutup celah antara cetak dan digital di sekitar bahasa bersama yang akan berkembang seiring waktu. Desain Sistem adalah turunan langsung dari pedoman Grafis tetapi lebih matang dan lebih terintegrasi ke dalam alur kerja tim. Kami juga sekarang memiliki alat yang memungkinkan kami untuk membangun dan berbagi sistem komponen .

Apa yang ada di dalam?

Tujuan mendasar dari Sistem Desain adalah untuk memfasilitasi pekerjaan tim. Jadi pertanyaan pertama yang perlu kita tanyakan pada diri kita sendiri bukanlah “apa yang harus saya masukkan ke dalam Sistem Desain saya?” tetapi “siapa yang akan menggunakannya dan bagaimana?”.

Setelah target kami ditentukan dan kami memiliki ide pertama tentang apa yang sudah ada di perusahaan (Apa yang bekerja atau tidak? Tingkat kematangan tim tentang subjek ini? Apa alat yang ada? …), itu akan lebih mudah untuk tahu harus mulai dari mana.

# 1. Nilai tujuan dan nilai bersama

© Jahit Janberk

Kemana kita akan pergi? Mengapa? Dan bagaimana?

Sebelum memulai apa pun, penting untuk menyelaraskan tim di sekitar serangkaian tujuan bersama yang jelas. Ini akan membantu membangun visi dan memastikan semua orang melihat ke arah yang sama. Tujuan-tujuan ini akan berkembang seiring waktu dan itu normal. Kami hanya harus memastikan bahwa perubahan dikomunikasikan secara luas.

Adapun nilai-nilai, mereka seperti cita-cita besar yang akan memandu pilihan kita, sesuai dengan tujuan merek. Kita perlu memastikan bahwa apa yang kita rancang tidak berbeda dari nilai-nilai kunci ini.

Selain nilai-nilai merek dan produk ini, kami juga dapat mendefinisikan beberapa nilai tim yang akan membawa masing-masing kolaborator ke dalam pikiran bersama.

Poster-poster tim ASH dibuat untuk nilai-nilai inti mereka

# 2. Prinsip desain

Prinsip Desain : Kumpulan Prinsip dan metode Desain

Hal pertama yang perlu diingat: Prinsip-prinsip desain jauh lebih dari sekadar aspek visual dari suatu produk …

“Prinsip-prinsip desain adalah kalimat panduan yang membantu tim untuk mencapai tujuan produk berkat desain.”

Mereka akan membantu tim untuk membuat keputusan Desain yang bermakna.

Saya akan mengambil contoh Medium. Salah satu prinsip Desain mereka adalah “Arah atas pilihan”. Berkat prinsip itu, alih-alih merancang editor teks biasa dengan pilihan warna dan font yang tidak terbatas, mereka memilih yang lebih sederhana. Itu memungkinkan penulis untuk fokus pada konten artikelnya daripada pada aspek visualnya.

Prinsip Desain harus memandu pilihan desain

# 3. Identitas & bahasa merek

Identifikasi merek Shopify

Identitas harus didefinisikan sejalan dengan strategi dan tujuan merek. Alla Kholmatova berbicara tentang “pola perseptual” yang ia tuliskan sebagai berikut:

• Warna
• Font
• Spasi
• Bentuk
• Ikon
• Ilustrasi
• Foto-foto
• Animasi
• Suara dan nada
• Kedengarannya

Semua ini membentuk alfabet Merek.

Ini adalah titik awal yang baik, tapi itu jelas tidak cukup untuk berbicara bahasa! Kita harus melangkah lebih jauh untuk menggunakan alfabet ini untuk menulis beberapa kata dan kemudian mengaitkan kata-kata ini untuk mendapatkan kalimat yang masuk akal. Elemen-elemen merek ini akan membutuhkan beberapa aturan yang akan, dengan cara, tata bahasa dan konjugasi Sistem.

Dalam Sistem Desain kami, itu diwujudkan oleh pedoman, yang harus dan tidak boleh dilakukan serta “contoh yang baik” dari penggunaan.

Contoh Pedoman Identitas © Backelite

Ini akan memastikan tim desain menggunakan “kombinasi yang tepat” dari bahasa ini, mereka yang membuat merek sangat unik dan mudah dikenali.

# 4 Komponen & pola

Komponen & Pola berada di jantung Sistem. Semua elemen yang disebutkan sebelumnya akan membantu kita untuk membuatnya dan memberikan pengalaman yang konsisten.

Komponen adalah blok LEGO kami. Mereka digunakan dalam Sketsa oleh desainer, dan langsung dalam kode oleh pengembang. Perilaku fungsional mereka harus ditentukan.

Adapun pola, mereka adalah instruksi bangunan yang akan memungkinkan kita untuk menggunakan komponen-komponen ini secara logis dan konsisten di semua produk.

Pada gambar di bawah ini, kita dapat dengan jelas melihat bahwa komponen akan ditentukan dengan dokumentasi teknis dan fungsional, sedangkan sebuah pola akan memberikan rekomendasi tentang cara menggunakannya:

Pola vs komponen © Nathan Curtis

Jika Anda bertanya-tanya komponen mana yang harus Anda kembangkan terlebih dahulu untuk sistem Anda, Anda dapat menjalankan bengkel prioritas komponen .

Praktik terbaik

Selain dokumentasi, yang sering dikaitkan langsung dengan Sistem, praktik terbaik akan menemani tim dengan cara yang lebih besar dan lebih transversal.

Idenya adalah untuk menggali praktik-praktik terbaik umum dan mengekstraksi hanya mereka yang masuk akal, berdasarkan produk dan tingkat kematangan tim.

Praktik terbaik akan membantu tim untuk membentuk dan mengembangkan keterampilan teknis mereka.

“Cara” di Sistem Desain BBC

Sistem Desain seperti apa?

Kita hampir dapat mengatakan bahwa ada satu jenis Sistem Desain per tim atau produk … Untuk menentukan sendiri, kita harus bertanya pada diri sendiri pertanyaan yang tepat:

• Berapa banyak orang yang akan menggunakan sistem ini?
• Apa profil mereka dan apakah mereka cukup dewasa dalam hal ini?
• Berapa banyak produk yang harus kita selaraskan? Pada berapa banyak platform? Berapa banyak teknologi yang berbeda (Angular, React, others …)?
• Berapa tingkat konsistensi yang kita inginkan di seluruh produk kita?

Semua jawaban ini akan membantu kita menentukan jenis Sistem Desain yang paling tepat.

Dalam bukunya, Alla Kholmatova memberi kita beberapa inspirasi:

Ketat atau longgar?

Di sebelah kiri: Airbnb / Di sebelah kanan: Ted

Sistem yang ketat akan memiliki dokumentasi yang komprehensif dan terperinci dan akan sepenuhnya disinkronkan antara desain dan pengembangan. Akan ada proses ketat untuk memperkenalkan pola baru dalam Sistem. Sistem yang ketat harus sangat luas untuk mencakup sebagian besar kasus yang mungkin dihadapi tim.

Sistem yang longgar akan meninggalkan lebih banyak ruang untuk eksperimen. Sistem di sini untuk menyediakan kerangka kerja bagi tim sambil menjaga kebebasan. Desainer dan pengembang bebas untuk menggunakannya atau tidak, mengenai kebutuhan khusus mereka untuk produk mereka.

Dari pengalaman saya, kami harus menemukan keseimbangan yang tepat antara ketat dan fleksibel: sistem yang sangat ketat mungkin mengusir desainer dan pengembang yang tidak ingin menggunakannya. Di sisi lain, masih bisakah kita berbicara tentang Desain Sistem jika ini terlalu longgar?

Modular atau terintegrasi?

Sistem modular vs terintegrasi ©  Alla Kholmatova

Sistem modular terbuat dari bagian yang dapat dipertukarkan dan dapat digunakan kembali. Ini cocok untuk proyek yang harus berskala cepat dan yang harus beradaptasi dengan berbagai kebutuhan pengguna. Bagian negatifnya adalah sering kali lebih mahal untuk disadari (karena mungkin sulit untuk membuat modul yang bisa mandiri sambil bekerja sama dengan baik). Sistem semacam ini akan sesuai dengan produk skala besar seperti situs web e-commerce, keuangan, dan pemerintah. Untuk sistem modular, akan sangat menarik untuk bekerja dengan desain atom dalam pikiran .

Sistem terintegrasi fokus pada satu konteks unik. Itu juga terdiri dari bagian-bagian, tetapi bagian-bagian ini tidak akan bisa saling dipertukarkan. Jenis sistem ini sesuai dengan produk yang memiliki sangat sedikit komponen berulang dan yang membutuhkan Arah Seni yang kuat dan sering berubah (portofolio, pameran, kampanye pemasaran …).

Terpusat atau didistribusikan?

Organisasi di sekitar Sistem Desain sangat penting untuk evolusi dan skalabilitasnya. Dalam artikel ini , Nathan Curtis merinci berbagai jenis model. Inilah dua di antaranya:

Model mana untuk Sistem Desain Anda: terpusat atau didistribusikan? © Nathan Curtis

Dalam model terpusat , satu tim bertanggung jawab atas Sistem dan membuatnya berkembang. Tim ini ada di sini untuk memfasilitasi pekerjaan tim lain dan harus sangat dekat dengan mereka, untuk memastikan bahwa Sistem mencakup sebagian besar kebutuhan mereka.

Dalam model terdistribusi , beberapa orang dari beberapa tim bertanggung jawab atas sistem. Adopsi sistem lebih cepat karena semua orang merasa terlibat tetapi juga membutuhkan pemimpin tim yang akan mempertahankan visi keseluruhannya.

Dalam setiap kasus, saya menyarankan agar semua orang untuk mengambil bagian dan membuat saran untuk meningkatkan sistem, untuk menciptakan rasa keanggotaan.

Tempatkan sistem Anda pada skala

Gagasannya adalah memposisikan sistem kita pada tiga skala ini, untuk menentukan jenis sistem yang kita inginkan:

Airbnb: sistem yang ketat, modular, dan terpusat

Beberapa contoh

Tanpa orisinalitas apa pun, berikut adalah beberapa favorit saya:

• Desain Material untuk kemudahan navigasi dan alat untuk desainer & pengembang

Sistem Desain Bahan

• Atlassian karena kelengkapannya

Sistem Desain Atlassian

• Polaris dari Shopify, karena integrasinya ke dalam alur kerja perancang dan pengembang

Polaris oleh Shopify

• IBM atas karya besarnya pada bahasa Desain

Bahasa Desain IBM

Kata-kata terakhir

Sistem Desain adalah produk lengkap yang akan membantu para pelaku proyek membangun produk lain.

Adapun setiap produk yang bagus, ia akan memiliki simpanan sendiri dan harus membangun dirinya sendiri secara iteratif, menjaga pengguna (desainer, pengembang, PO …) di jantung pendekatan.

“Semakin terintegrasi sistem dengan alur kerja perancang dan pengembang, semakin efektif pula.”

Salah satu contoh yang sangat bagus dari integrasi ini adalah plugin Sketch dari Polaris yang menampilkan komponen dan dokumentasi sistem secara langsung di Sketch, sehingga desainer memiliki semua yang mereka butuhkan selama fase konsepsi:

Teleskop: plugin sketsa, oleh Polaris

Dan semua ini hanyalah permulaan!

Saya yakin bahwa masa depan akan memberi kami banyak evolusi teknis yang hebat untuk memudahkan hidup kami dan memungkinkan kami untuk berkonsentrasi pada pengalaman produk dan pengguna kami ?

Sumber

• Buku Alla Kholmatova tentang Desain Sistem
• Setiap artikel dari Nathan Curtis yang luar biasa
• Konferensi dan tulisan oleh  Jina Anne

Anda juga dapat menemukan contoh lain dari Sistem Desain yang sangat baik pada repo ini:

Terima kasih sudah membaca!
Terima kasih kepada Soizic Le Colleter, Valentin Chrétien, dan Florent Hacq.

sumber: Medium Audrey blog.marvelapp.com