Merancang Sistem UI Modular Melalui Pengembangan Berbasis Panduan Gaya

Menggunakan panduan gaya untuk mendorong pengembangan adalah praktik yang mendapatkan banyak daya tarik dalam pengembangan front-end — dan untuk alasan yang bagus. Pengembang akan memulai panduan gaya dengan menambahkan kode baru atau memperbarui kode yang sudah ada, sehingga berkontribusi pada sistem UI modular yang nantinya terintegrasi dalam aplikasi. Tetapi untuk mengimplementasikan sistem UI modular, kita harus mendekati desain dengan cara modular.

Desain modular mendorong kita untuk berpikir dan mendesain UI dan UX dalam pola. Misalnya, alih-alih mendesain serangkaian halaman atau tampilan untuk memungkinkan pengguna menyelesaikan tugas, kita akan memulai proses desain dengan memahami bagaimana sistem UI terstruktur dan bagaimana komponennya dapat digunakan untuk membuat alur pengguna.

Bacaan Lebih Lanjut tentang SmashingMag:

• Cara Membuat Panduan Gaya yang Efektif
• Tinjauan Mendalam Tentang Alat Panduan Gaya Hidup
• Mengotomatiskan Pengembangan Berbasis Panduan Gaya
• Set Ikon Panduan Gaya Gratis Untuk Penulis Dan Editor

Dalam posting ini, saya akan menjelaskan nilai modularitas dalam desain UI dan bagaimana kaitannya dengan proses pengembangan yang didorong oleh panduan gaya, yang meningkatkan penerapan aplikasi yang fleksibel dan ramah pengguna, sambil membantu desainer dan pengembang berkolaborasi secara lebih produktif.

Desain Modular Di UI

Desain modular adalah tentang memecah desain menjadi bagian-bagian kecil (modul), membuatnya secara mandiri, dan kemudian menggabungkannya menjadi sistem yang lebih besar. Jika kita melihat sekeliling kita, kita akan menemukan banyak contoh desain modular: Mobil, komputer, dan furnitur semuanya modular. Karena modularitasnya, bagian dari sistem ini dapat ditukar, ditambahkan, dihapus, dan diatur ulang. Ini bagus untuk konsumen karena mereka dapat menyesuaikan sistem agar sesuai dengan kebutuhan mereka . Mau sunroof, motor lebih bertenaga, jok kulit? Anda mengerti! Desain modular mobil memungkinkan untuk jenis penyesuaian ini dan banyak lagi.

Contoh bagus lainnya adalah furnitur IKEA. Pada ilustrasi di bawah, Anda dapat melihat bahwa modularitas desain tidak hanya dalam bentuk rak buku, yang memungkinkannya untuk diatur ke arah yang berbeda, atau Anda dapat menambahkan sisipan di bukaannya, tetapi juga di bagian paling atas. bagian yang membuat bagian itu sendiri, yang merupakan persegi panjang dengan ukuran berbeda, mengulangi pola yang sama.

Dari perspektif manufaktur, desain modular juga hemat biaya. Salah satu aspek penting dari ini adalah bahwa membangun bagian-bagian kecil yang sederhana yang dapat dihubungkan kemudian lebih mudah dan lebih murah daripada membangun satu bagian besar yang kompleks sekaligus. Selain itu, solusinya dapat digunakan kembali berulang kali, memaksimalkan produktivitas.

Tujuan dalam membuat desain UI serupa. Sebagai desainer, kami ingin membuat sistem UI yang efisien baik dalam konstruksi maupun pengoperasiannya. Ketika kami menemukan solusi untuk suatu masalah, kami ingin dapat menggunakan kembali solusi tersebut di banyak tempat. Ini tidak hanya menghemat waktu, tetapi juga menetapkan pola yang dapat dipelajari pengguna sekali dan diterapkan kembali di area aplikasi lainnya. Kami juga ingin dapat menyesuaikan sistem untuk skenario tertentu tanpa harus merestrukturisasi semuanya.

Inilah tepatnya yang dibawa modularitas ke desain UI: Ini mengarah ke sistem yang fleksibel, terukur, dan hemat biaya , tetapi juga dapat disesuaikan, dapat digunakan kembali, dan konsisten .

Contoh Desain Modular

Beberapa contoh desain UI modular dapat dilihat pada pola seperti grid responsif, desain jendela ubin, dan desain kartu . Dalam semuanya, modul digunakan berulang kali untuk menyediakan tata letak fleksibel yang mudah beradaptasi dengan ukuran layar yang berbeda. Selain itu, modul berfungsi sebagai wadah untuk komponen, memungkinkan kita untuk memasukkan berbagai jenis konten dan fungsionalitas, seperti sisipan yang dapat ditambahkan ke lemari IKEA.

Apakah Ini Homogen?

Jika desain modular adalah tentang mendesain sistem, dan sistem UI sebagian besar terdiri dari bagian yang sama (tombol, tipografi, ikon, kisi, dll.), Anda mungkin bertanya-tanya:

• Bukankah semua desain modular akan terlihat sama?
• Bagaimana ini akan memengaruhi identitas merek?
• Bagaimana UI suatu produk bisa dibuat unik?

Pertanyaan-pertanyaan ini, meskipun valid, menimbulkan pertanyaan mendasar: Di mana letak inovasi dan keunikan dalam desain produk? Perdebatan ini telah meningkat akhir-akhir ini (lihat "Kehomogenan Desain yang Tak Tertahankan" dan "Dalam Pertahanan Desain Homogen"), tetapi saya akan mengatakan bahwa, karena desain visual adalah apa yang kita lihat pertama kali, kita cenderung berpikir bahwa inovasi dan keunikan terletak pada cara desain terlihat. Namun, desain visual hanyalah salah satu bagian dari itu. Inovasi dan keunikan dalam desain produk perlu diperhitungkan dalam keseluruhan produk: dalam nilai intrinsik yang diberikannya dan dalam cara orang mengalaminya, termasuk penampilannya. Ambil kursi. Itu diperlukan untuk menjadi kursi, tetapi tidak semua desain kursi terlihat, terasa, atau berfungsi sama. Faktanya, desain kursi secara historis merupakan bidang inovasi dalam desain dan material. Demikian pula, UI memiliki persyaratannya sendiri, dan menggunakan pola yang terbukti berhasil tidak berarti mengorbankan inovasi dan keunikan. Sebaliknya, inovasi dan keunikan akan dibutuhkan untuk memecahkan masalah khusus yang dihadapi pelanggan Anda. Keindahan desain modular adalah mendorong kita untuk mendekati solusi ini sebagai sistem bagian-bagian yang saling berhubungan, daripada menemukan solusi orisinal dengan cara yang terisolasi demi menjadi berbeda. Dengan kata lain, desain inovatif yang diterapkan pada kontrol UI tidak akan tetap terdegradasi ke satu tempat dalam aplikasi, melainkan akan meresap ke seluruh sistem, mempertahankan kohesi, dan meningkatkan kegunaan.

Modularitas Pengembangan Gaya Panduan-Drive

Dari sisi implementasi, pengembangan yang digerakkan oleh panduan gaya juga sangat modular. Sebagai permulaan, proses dimulai dengan fase penemuan : memahami masalah yang perlu dipecahkan, mengumpulkan persyaratan dan mengulangi melalui solusi desain. Meskipun solusi desain biasanya disajikan sebagai keseluruhan paket atau fitur, solusi tersebut harus benar-benar merupakan kombinasi dari banyak bagian sistem yang didokumentasikan dalam panduan gaya. Beberapa bagian dari desain mungkin baru, tetapi harus tetap dibuat sebagai modul. Intinya adalah menggunakan panduan gaya untuk menentukan modul mana yang tersedia di sistem UI yang dapat digunakan kembali atau diperluas untuk membuat desain.

(Bagaimana jika tidak ada panduan gaya? Jangan khawatir! Saya akan menunjukkan kepada Anda di bagian selanjutnya bagaimana mendesain dengan cara modular, bahkan jika Anda tidak menggunakan panduan gaya.)

Langkah selanjutnya dalam pengembangan yang digerakkan oleh panduan gaya adalah fase abstraksi , yang pada dasarnya adalah latihan memecah solusi desain menjadi bagian-bagian yang lebih kecil. Selama fase ini, desainer dan pengembang bekerja sama untuk membedakan desain yang diusulkan dan mengidentifikasi elemen dan komponen (yaitu modul) yang akan digunakan atau ditingkatkan atau yang perlu dibuat untuk implementasi.

Fase abstraksi berfungsi juga untuk melacak rencana untuk langkah selanjutnya: implementasi dan dokumentasi . Selama fase ini, modul dibangun atau ditingkatkan secara terpisah dari modul lain yang ada. Dalam pengembangan web, ini berarti membangun komponen atau mendefinisikan gaya untuk elemen yang tidak bergantung pada aplikasi. Ini adalah aspek penting dari modularitas, karena membantu Anda mengidentifikasi masalah apa pun di awal proses, mencegah ketergantungan yang tidak terduga dengan bagian lain dari sistem. Hasilnya adalah bagian-bagian yang lebih stabil yang lebih mudah untuk diintegrasikan secara keseluruhan.

Sesuatu yang unik tentang pengembangan yang didorong oleh panduan gaya adalah bahwa, saat implementasi berlangsung, dokumentasi juga terjadi, bukan hanya sekedar renungan. Hal ini dimungkinkan karena ketika generator panduan gaya digunakan, dokumentasi menjadi panduan gaya hidup , berfungsi sebagai kerangka kerja dan kotak pasir untuk implementasi:

• Panduan gaya hidup berfungsi sebagai kerangka definisi untuk elemen UI (seperti judul, daftar, tautan, kontrol input, dll.) dan sebagai pustaka komponen (seperti sistem navigasi, bilah alat, alat pencarian, tabel kisi, dll. ) yang tersedia untuk digunakan. Artinya pembangunan tidak dimulai dari nol setiap saat. Sebaliknya, itu dibangun di atas definisi yang ada dalam sistem UI dan berkontribusi padanya.
• Ini juga merupakan sandbox karena berfungsi sebagai ruang demonstrasi untuk membangun dan menguji implementasinya. Di sinilah tepatnya pengembangan berlangsung sebelum diintegrasikan ke dalam aplikasi.

Langkah terakhir pengembangan yang digerakkan oleh panduan gaya, fase integrasi , menyerupai langkah perakitan dalam desain modular. Elemen atau komponen UI yang dibutuhkan telah dikembangkan dan siap untuk diintegrasikan ke dalam aplikasi. Yang tersisa adalah mengonfigurasi dan menyesuaikannya. Selama integrasi, panduan gaya seperti manual instruksi yang baik yang digunakan untuk merakit desain modular fisik.

Sekarang kita telah mengidentifikasi konsep dasar desain modular dan pengembangan yang digerakkan oleh panduan gaya, mari kita gunakan.

Mendesain Dengan Cara Modular

Bayangkan ini: Anda telah menemukan alur pengguna yang hebat, mengumpulkan maket dan prototipe untuk mengilustrasikan interaksi, dan mendokumentasikan setiap bagian. Kemungkinan desain Anda sudah mengikuti panduan gaya, yang bisa memberi Anda keuntungan besar. (Jika tidak, jangan khawatir!) Mundur saja dan mulai memetakan bagian utama dari solusi desain Anda pada tingkat yang tinggi. Bagian-bagian ini bisa menjadi titik interaksi di mana hal-hal tertentu dicapai. Misalnya, alur pembayaran dapat terlihat seperti ini:

Tapi pegang senjatamu! Ini belum menjadi modul. Untuk sampai ke sana, kita perlu mengidentifikasi elemen UI yang persisten dalam alur, seperti:

• indikator langkah checkout,
• elemen form yang digunakan untuk memasukkan informasi,
• representasi produk di keranjang,
• representasi produk terkait yang telah dibeli orang lain,
• kebijakan tentang pembelian,
• teks bantuan,
• pesan dan peringatan.

Menggali sedikit lebih dalam, kita juga akan menemukan gaya dan pola interaksi:

• Gaya:

• warna yang digunakan untuk menunjukkan:

  • pesan kesalahan, keberhasilan, peringatan dan informasi;
  • tindakan primer versus sekunder;
  • status tidak aktif versus terpilih versus dinonaktifkan;
  • link versus teks biasa;
  • merek;

• tipografi yang digunakan untuk menunjukkan berbagai jenis konten:

  • ukuran font untuk meletakkan informasi secara hierarkis;
  • jenis font untuk menyoroti pesan atau memberikan informasi tambahan;
  • daftar untuk meringkas informasi;

• ikonografi untuk menyampaikan makna visual dan untuk referensi cepat ke tindakan umum.

• Pola interaksi:

  • menunjukkan langkah-langkah yang akan datang (dinonaktifkan);
  • menunjukkan langkah-langkah sebelumnya (diaktifkan agar informasi dapat diedit);
  • menampilkan ringkasan yang dapat diedit;
  • memvalidasi informasi setelah pengguna mengklik keluar dari lapangan;
  • memberikan teks bantuan pada rollover;
  • memperbarui troli setelah pilihan dibuat.

Setelah desain dipecah menjadi semua bagian yang lebih kecil ini, kami akhirnya akan memiliki modul kami. Pada titik ini, lebih mudah untuk melihat bahwa banyak dari mereka tidak hanya berlaku untuk proses checkout, tetapi juga untuk banyak area aplikasi lainnya. Dengan pendekatan desain modular, modul-modul ini dapat dibuat sehingga dapat digunakan dalam desain khusus ini maupun di masa mendatang.

Desain atom layak disebut sebagai metodologi yang dapat mempercepat proses pembuatan desain modular ini. Metodologi ini menganalisis hubungan antara bagian-bagian yang berbeda dari sistem dan bagaimana mereka saling berhubungan, menggunakan kimia sebagai analogi. Melewati langkah-langkahnya adalah kebalikan dari latihan kami sebelumnya:

1. Kita mulai dari atom , yang merupakan modul terkecil dalam sistem (dalam contoh kita, tombol, tipografi, dan ikonografi).
2. Modul tumbuh dalam kompleksitas, mengikat bersama menjadi molekul , yang menyediakan lebih banyak fungsionalitas (dalam contoh kami, indikator langkah checkout dan modul produk terkait).
3. Lalu, ada organisme , yang merupakan molekul yang dikelompokkan bersama dalam aplikasi (dalam contoh kita, header aplikasi dan berbagai bentuknya).
4. Meninggalkan analogi kimia, tingkat berikutnya adalah templat , yang merupakan struktur yang telah ditentukan sebelumnya di mana organisme ditempatkan.
5. Terakhir, ada pages , yang merupakan instance dari template.

Bagian yang hilang di sini adalah cara untuk mendokumentasikan modul yang telah diidentifikasi. Ini bukan hanya masalah membuat dokumen spesifikasi untuk menangkap bagaimana modul perlu dibangun, atau menulis pedoman yang menangkap definisi tingkat tinggi seperti warna merek dan kelompok font (yang khas dari panduan gaya standar). Sebaliknya, dokumentasi harus lebih canggih dan dinamis, sehingga ketika modul-modul ini berubah (dan Anda tahu itu akan terjadi!), dokumentasi tidak menjadi usang. Di sinilah persisnya panduan gaya hidup mengisi celah!

Menggunakan Panduan Gaya Hidup

Panduan gaya hidup bisa sangat berguna selama proses desain karena memberikan beberapa hal.

Dasar untuk Bekerja Dengan

Alih-alih memulai dari awal setiap saat, panduan gaya memberikan arahan visual dan modul yang harus Anda gunakan untuk membuat desain.

Karena panduan gaya hidup dihasilkan dari kode aktual, panduan ini mencerminkan versi terbaru dan terbaik dari desain yang diterapkan.

Dokumentasi Solusi Desain

Pengetahuan yang telah diperoleh untuk menyelesaikan masalah UI atau UX tertentu dapat diserahkan untuk digunakan nanti.

Ini membantu menjaga konsistensi dalam implementasi, mendorong Anda untuk memasukkan solusi baru apa pun ke dalam bagian dari desain saat ini.

Anda akan mengembangkan pola yang dapat dikenali pengguna, sehingga meningkatkan kegunaan.

Kemudahan Komunikasi

Panduan ini membantu mengomunikasikan desain dengan memberikan representasi UI yang paling mutakhir (tidak seperti maket statis, yang cepat usang).

Bahasa UI umum dikembangkan karena Anda harus memberi nama berbagai elemen dalam panduan gaya. Ini membutuhkan kolaborasi tidak hanya di antara desainer UI, tetapi antara desainer dan pengembang, yang merupakan keuntungan besar ketika Anda harus mengomunikasikan bagaimana desain harus diimplementasikan.

Baik Anda memiliki panduan gaya yang ada atau berencana untuk membuatnya, mengotomatiskan proses akan menempatkan Anda ke arah yang benar, mendorong proses desain secara modular. Jadi, jika Anda siap untuk berbelanja generator panduan gaya hidup, maka saya akan merekomendasikan sumber daya berikut:

• “Ikhtisar Mendalam tentang Alat Panduan Gaya Hidup,” Robert Haritonov, Majalah Smashing
• “Ikhtisar Generator Pola Perpustakaan,” David Hund, GitHub
• “Style Guide Generator Roundup,” Susan Robertson, A List Apart

Jangan Terlalu Ekstrim!

Sekarang kita telah melihat bagaimana menyempurnakan proses desain untuk menggabungkan modularitas, serta keuntungan dari panduan gaya hidup, mari kita telusuri beberapa perangkap umum yang mungkin Anda temui di sepanjang jalan.

Panduan Gaya Tidak Menggantikan Pekerjaan Desain

Tidak jarang mendengar dari manajer bahwa, setelah panduan gaya hidup diterapkan, sebagian besar pekerjaan desain selesai. Sementara banyak pekerjaan berulang dan sepele dilakukan (seperti membuat prototipe berbagai status tombol berulang kali), pertimbangkan bahwa:

• fitur baru akan terus perlu dibangun,
• menemukan solusi melibatkan pengambilan keputusan desain.

Jadi, ya, memiliki panduan gaya hidup dan mengikuti pengembangan yang didorong oleh panduan gaya meningkatkan alur kerja pengembangan, tetapi itu tidak membuat desainer keluar dari persamaan. Memiliki alat yang mempercepat alur kerja dan meningkatkan komunikasi menguntungkan bagi desainer dan pengembang. Tetapi hal yang hebat tentang pendekatan ini adalah memungkinkan banyak ruang untuk UI untuk dikustomisasi, sehingga meningkatkan pengalaman pengguna — dan mencari tahu itu adalah bagian dari peran desainer.

Jangan Mengikuti Pola secara Ekstrim

Kita harus selalu berusaha untuk menggunakan pola dalam sebuah aplikasi. Misalnya, penggunaan warna dan ukuran font yang konsisten dapat dengan cepat menunjukkan elemen pengguna di UI yang dapat berinteraksi dengannya. Namun, hindari menggunakan pola hanya karena telah diterapkan sebelumnya; alih-alih, gunakan karena itu benar-benar memecahkan masalah yang dihadapi.

Misalnya, jika Anda telah menetapkan pola tampilan bilah alat di bagian atas layar, pola ini akan berfungsi dalam banyak kasus, tetapi akan ada saat-saat ketika menyajikan bilah alat kontekstual, lebih dekat ke tempat pengguna mengambil tindakan, lebih masuk akal. . Jadi, selalu pertanyakan apakah penggunaan kembali suatu pola memprioritaskan kemudahan implementasi daripada pengalaman pengguna.

Jangan Abaikan Iterasi Desain

Ini sedikit terkait dengan poin sebelumnya. Jangan mengabaikan nilai iterasi dan inovasi saat mencoba pola baru dan menemukan cara untuk mendesain antarmuka, meskipun pada pandangan pertama mereka tidak mengikuti panduan gaya. Panduan gaya tidak boleh membatasi upaya Anda untuk menciptakan pengalaman pengguna sebaik mungkin. Sebaliknya, seperti namanya, itu harus menjadi panduan, titik awal untuk membantu Anda menyelesaikan masalah dengan memanfaatkan pekerjaan dan pengalaman sebelumnya. Iterasi selama fase desain harus terus menjadi sama pentingnya seperti sebelumnya dan harus memacu Anda untuk memperbaiki pola yang sudah ada.

Beban Pemeliharaan

Di antara trilyun hal yang melibatkan pekerjaan Anda, mempertahankan panduan gaya harus menjadi hal terakhir yang terasa seperti beban. Untuk mengatasi ini, saya menemukan praktik berikut membantu:

• Temukan sistem dokumentasi yang mudah dipasang dan mudah berinteraksi secara teratur.
• Jadikan pembaruan dokumentasi sebagai bagian dari alur kerja Anda, bukan sebagai renungan setelah implementasinya selesai. Dokumen saat Anda pergi!
• Tetapkan pedoman yang memudahkan semua orang untuk berkontribusi pada dokumentasi. Ini akan mendistribusikan beban kerja dan meningkatkan rasa memiliki.

Desain Modular Untuk Membangun Modular

Membuat sistem UI fleksibel yang konsisten dan mudah disesuaikan, sementara juga skalabel dan hemat biaya, tidak hanya bergantung pada cara pembuatannya, tetapi juga pada desainnya. Pustaka komponen memiliki nilai yang sangat kecil jika setiap desain baru dibuat secara independen, mengabaikan standar dan pola yang telah ditetapkan.

Di sisi lain, ini bukan tentang membuat antarmuka pemotong kue yang menggunakan kembali gaya dan pola yang sama karena nyaman. Desain yang baik efektif bukan karena keunikannya, tetapi karena menggabungkan bentuk dan fungsi untuk menciptakan pengalaman yang luar biasa . Sasaran ini harus selalu menjadi perhatian utama, dan menggunakan metode seperti pengembangan yang didorong oleh panduan gaya untuk menghadirkan modularitas pada desain dan pengembangan akan membantu Anda membuat sistem UI yang kohesif yang mencapai tujuan ini.