Cara Membangun Kerangka Desain yang Efektif (Termasuk Kerangka UI Sketsa Gratis)

Jika Anda sudah lama berkecimpung di dunia desain, Anda mungkin pernah mendengar istilah ini: kerangka kerja desain, kerangka kerja UI, kit UI, atau pustaka pola. Semuanya mengacu pada hal yang sama—sistem standar desain, template, pola UI, dan komponen yang digunakan di seluruh produk dan melayani bahasa desainnya.

Jika Anda belum pernah membuat kerangka kerja desain sebelumnya, memulainya bisa terasa melelahkan dan tampak memakan waktu, tetapi itu akan mempercepat pekerjaan desain Anda dan membuatnya lebih efisien secara keseluruhan.

Mari kita uraikan masalah utama yang dipecahkan oleh kerangka kerja desain, mengapa Anda membutuhkannya, dan komponen yang perlu Anda buat saat membangunnya. Anda akan menemukan kerangka kerja Sketsa UI yang dapat diunduh gratis nanti di artikel yang memungkinkan Anda membuat kerangka kerja desain Anda sendiri.

Apa itu Kerangka Desain?

Setiap desain antarmuka pengguna dimulai dengan artboard kosong, dan setiap desainer memiliki proses yang mereka gunakan untuk mengubah kanvas kosong itu menjadi produk yang berfungsi penuh. Proses ini mencakup semua komponen desain kecil yang dibuat, dan langkah-langkah yang dilalui desainer untuk membangun keseluruhan yang kohesif, mulai dari warna hingga kancing dan segala sesuatu di antaranya.

Seringkali, pekerjaan ini berulang dan dapat dikonsolidasikan dan dibuat lebih efisien dengan menciptakan sistem pola dan komponen yang saling terkait. Dengan kata lain, kerangka desain .

Kerangka kerja desain memecahkan beberapa masalah, termasuk:

• Menghilangkan inkonsistensi dalam desain produk.
• Meningkatkan kolaborasi, efisiensi, dan komunikasi antara tim desain dan produk.
• Membuat pembaruan desain nanti dalam proses desain tidak terlalu membuat frustrasi.

Masalah Pertama: Inkonsistensi dalam Produk

Konsistensi mengubah desain yang baik menjadi desain yang hebat. Konsistensi meningkatkan UX, kegunaan umum, dan efisiensi yang dapat digunakan pengguna untuk menggunakan produk digital. Baik itu situs web kecil, aplikasi, atau produk SaaS besar, inkonsistensi dalam desain membahayakan tampilan, nuansa, kredibilitas, dan pengalaman pengguna produk.

Inkonsistensi sering terjadi ketika tim atau desainer melakukan sesuatu terlalu cepat atau membuat perubahan dengan cepat. Terkadang seorang desainer menanggapi klien atau pemangku kepentingan yang meminta sesuatu yang berbeda dengan dengan cepat menunjukkan kepada mereka seperti apa perubahan itu nantinya. Tiba-tiba, tim desain menemukan diri mereka dengan empat warna hijau yang berbeda dan tidak ada yang yakin mana yang merupakan warna tombol utama.

Kerangka kerja desain memecahkan masalah ini dengan menetapkan standar yang konsisten.

Masalah Kedua: Kesenjangan Kolaborasi dan Komunikasi

Seringkali selama proses pengembangan ketika ada beberapa anggota tim yang terlibat dengan banyak yang mengerjakan desain pada titik yang berbeda dalam proses, dapat menjadi membingungkan jika tidak ada seperangkat standar untuk memandu tim.

Kerangka kerja desain meningkatkan kolaborasi dan efisiensi dengan merampingkan proses komunikasi dan memberikan standar dan arah yang jelas. Tidak ada lagi waktu yang terbuang untuk bolak-balik mencoba mencari tahu warna atau font mana yang benar untuk digunakan.

Masalah Ketiga: Perubahan Desain Tahap Akhir

Berapa kali desainer harus membuat satu perubahan warna dalam file desain dengan 120 artboard yang sudah dikembangkan? Berapa kali perlu mengubah ikon yang merupakan bagian dari 200 komponen?

Perubahan tidak dapat dihindari selama proses desain, begitulah cara produk meningkat, tetapi sering kali terjadi lebih lambat dari yang diinginkan desainer. Kerangka kerja desain membuat perubahan tahap akhir itu jauh lebih tidak menyakitkan, karena dibangun di atas sistem komponen berorientasi objek. Ubah sekali dan beriak di seluruh desain.

Cara Membuat Kerangka Desain

Sekarang kita tahu apa itu kerangka kerja desain dan masalah yang dipecahkannya, mari kita bicara tentang membuatnya (dan apa yang ada dalam unduhan kit Sketch UI yang disediakan nanti di artikel).

Kerangka desain yang digunakan untuk artikel ini adalah file Sketsa tunggal yang ditata menggunakan hierarki komponen tertentu, yang dikenal di Sketsa sebagai "simbol". Simbol-simbol ini memudahkan penerapan perubahan di seluruh file dengan satu klik. Satu perubahan dalam komponen "master"—"simbol"—direfleksikan secara instan di semua contoh lainnya.

Hirarki Kerangka Desain

Untuk membuat kerangka desain yang berfungsi dengan baik, mulailah dengan menyiapkan hierarki visual yang solid. Rancang komponen yang paling ada di mana-mana, seperti warna dan tipografi terlebih dahulu. Kemudian turunkan ke yang lebih kecil, seperti tombol dan komponen input. Anggap saja seperti membangun rumah—bangun fondasinya terlebih dahulu, lalu tambahkan bagian lainnya saat proyek berlangsung.

Warna

Warna adalah elemen terpenting dalam hierarki kerangka kerja desain UI—setiap komponen dalam desain menggunakan warna. Warna memunculkan reaksi dan emosi yang kuat pada orang dan mengatur keseluruhan tampilan, nuansa, dan nada produk.

Praktik yang baik adalah membagi warna menjadi beberapa kelompok:

1. Warna primer adalah warna merek utama, biasanya digunakan untuk membuat skema warna umum proyek dan untuk komponen penting seperti tombol.
2. Warna sekunder melengkapi palet primer—seringkali warnanya berbeda, saturasi, atau rona warna primer. Grayscale umumnya digunakan untuk tipografi atau latar belakang. Di suatu tempat antara lima hingga delapan tingkat abu-abu seharusnya sudah cukup.
3. Warna umpan balik sistem adalah grup penting yang sering dilupakan oleh desainer. Warna-warna ini menampilkan pesan sistem, termasuk peringatan, peringatan, dan pemberitahuan.

Kisi: Ruang Desain

Setelah warna dipilih, langkah selanjutnya adalah menyiapkan kisi. Kotak menyimpan semua komponen lain pada halaman di tempat dan urutan yang tepat. Ini adalah ruang desain keseluruhan.

Ada dua jenis kisi: vertikal dan horizontal .

Grid vertikal adalah yang paling umum digunakan dan menjaga semuanya tetap sejajar secara horizontal. Ada banyak sistem grid populer seperti Bootstrap atau grid 960px yang lebih lama.

Grid horizontal tidak begitu umum. Grid horizontal digunakan untuk tipografi. Ini menciptakan ritme vertikal untuk paragraf dan biasanya terlihat di surat kabar.

Pengubah: Aturan Gaya

Selain warna dan kisi, ada satu komponen lagi yang tinggi dalam hierarki kerangka desain: pengubah. Mereka tidak dapat digunakan sebagai komponen otonom—mereka digunakan untuk memodifikasi atau menata orang lain.

Grup ini menghadirkan gaya pada sebuah proyek dan mencakup komponen yang bertanggung jawab atas estetika, seperti bentuk atau bayangan ; mengubahnya satu per satu di fase proyek selanjutnya dapat menjadi rumit.

Perlakukan pengubah sebagai parameter untuk semua blok bangunan berikutnya. Buat simbol Sketsa dari tiga bentuk berbeda: persegi panjang, persegi panjang bulat, dan lingkaran. Gunakan bentuk ini untuk membuat setiap komponen UI, termasuk tombol, komponen input, bidang formulir, dll., dan elemen latar belakang.

Teknik ini memungkinkan desainer untuk lebih fokus pada UX daripada penampilan komponen UI. Ini juga memudahkan untuk kembali ke bentuk dasar, mengubah gayanya (misalnya radius sudut) dan semua yang terhubung akan diperbarui secara otomatis.

Tipografi: Isinya

Tipografi adalah komponen kerangka desain penting terakhir. Ini dapat dibagi menjadi dua kelompok: salinan halaman statis, seperti header dan paragraf; dan salinan komponen interaktif, seperti tombol, navigasi, atau bidang masukan.

Rancang gaya dan ukuran semua judul (H1, H2, H3, dll.) dan paragraf. Salinan halaman statis biasanya tidak memiliki banyak variasi gaya (warna atau berat). Satu-satunya variasi—yang terkait dengan gaya penyalinan halaman statis—adalah apakah itu pada latar belakang terang atau gelap. Oleh karena itu, yang terbaik adalah membuat dua set warna untuk memastikan salinan halaman statis berfungsi pada keduanya.

Salinan yang muncul di komponen interaktif, seperti tombol atau pesan umpan balik sistem, dapat memiliki beberapa variasi. Misalnya, pesan umpan balik sistem dapat ditampilkan pada empat warna latar belakang yang berbeda berdasarkan jenis pesan (peringatan, kesalahan, keberhasilan, dll.)—label tombol juga dapat berada di latar belakang yang berbeda.

Menyertakan grup ini dalam kerangka desain sangat membantu saat berpikir secara global tentang tipografi. Pertama, buat teks label tombol biasa, dan kedua, buat variasinya; ini akan membantu menghindari berakhir dengan terlalu banyak ukuran font. Saat membuat komponen UI baru dalam kerangka kerja, selalu periksa untuk melihat apakah ada gaya tipografi yang cocok.

ikon

Ada dua kelompok ikon dalam sistem desain: ikon informatif dan antarmuka pengguna. Grup pertama biasanya merupakan bagian dari sistem ilustrasi dan tidak digunakan untuk komponen interaksi UI (seperti tombol). Grup kedua—ikon UI—menambahkan makna ke komponen yang lebih kompleks: tombol, label, atau tabel, dengan menggunakan sedikit ruang. Ikon di UI juga dapat digunakan sebagai pemicu fungsi seperti "edit", "salin", "unduh", dan "hapus".

Mulailah dengan ikon sederhana yang digunakan untuk interaksi UI, seperti panah, “tambah” (+) atau “tutup” (x). Praktik yang baik adalah mendesainnya dalam berbagai ukuran (12px, 16px, 24px 32px).

Komponen

tombol

Tombol tidak diragukan lagi merupakan salah satu komponen terpenting dalam desain UI, dan selama bertahun-tahun, tombol telah mengalami banyak perubahan seiring tren desain yang datang dan pergi.

Saat mendesain tombol, pastikan untuk mendesain "status" masing-masing. Sebagai aturan, sebuah tombol memiliki beberapa status dan memberikan umpan balik visual kepada pengguna untuk menunjukkan status saat ini (menganggur, mengarahkan kursor, ditekan, dinonaktifkan, aktif, dll.).

Ada dua cara untuk melakukannya: yang pertama adalah mendesain tampilan tombol secara terpisah untuk setiap status (reguler, aktif, mengarahkan kursor, dan ditekan). Solusi ini mungkin memakan waktu, tetapi kemudian memberikan banyak fleksibilitas. (Metode ini digunakan dalam kerangka UI Sketch gratis yang disertakan di bawah.)

Cara kedua adalah mendesain semua status berdasarkan yang awal. Misalnya, buat satu simbol Sketsa yang akan mengubah warna, saturasi, atau kecerahan setiap status.

Untuk melakukan ini, tempatkan simbol sebagai overlay tombol dengan salah satu mode blending Sketch: hue, saturation, atau overlay. Gunakan persegi panjang hitam dengan hue blending mode di atas tombol biasa untuk mengubah saturasinya. Mengubah opacity overlay nanti membuatnya menjadi tombol yang kurang lebih jenuh.

Komponen Masukan

Input memungkinkan pengguna untuk berkomunikasi dengan aplikasi dan mengunggah data. Menggunakan komponen seperti kolom input bersama dengan tombol memungkinkan pembuatan aplikasi web sederhana. Seperti halnya tombol, yang terbaik adalah membuat komponen input dengan status berbeda. Itu tergantung pada kerangka desain, tetapi setidaknya, pertimbangkan untuk membuat status kosong, terisi, dan kesalahan.

Komponen Kompleks

Pada tahap ini, kerangka desain dapat dianggap lengkap karena memiliki semua yang diperlukan untuk membuat produk yang berfungsi. Namun, sering kali bermanfaat untuk meluangkan lebih banyak waktu untuk membuat komponen UI yang lebih kompleks untuk kerangka kerja UI, seperti kartu, tabel, datepicker, bagan, dan formulir.

Bagian

Pada tahap ini, kerangka desain dapat dikembangkan lebih lanjut dengan membuat bagian paling umum dari aplikasi atau situs web. Dengan mendesain hal-hal seperti navigasi, header, bagian "tentang kami", dan galeri, seorang desainer dapat menghemat waktu di fase proyek selanjutnya. Membuat beberapa variasi bagian produk yang berbeda akan mempermudah penyesuaian dengan proyek yang berbeda di masa mendatang.

Praktik Terbaik Kerangka Desain

Terus-menerus Menguji Kerangka Desain

Pengujian harus disertakan dalam setiap desain atau proses pengembangan. Hindari kesalahan dan komponen yang hilang dengan membuat potongan desain kecil dan "menguji stres" mereka. Misalnya, periksa apakah mengubah komponen yang dibuat di awal juga mengubah komponen yang baru ditambahkan.

Buat Komponen UI Sederhana

Buat komponen tetap sederhana sambil memikirkan sebanyak mungkin kasus penggunaan desain, sehingga di masa mendatang, gaya apa pun dapat tercakup. Yang terbaik adalah membuat komponen UI dengan bentuk sederhana, membuatnya cukup fleksibel untuk menyesuaikan dengan mudah ke proyek apa pun.

Jangan Fokus pada Satu Gaya

Kerangka kerja desain harus universal, jadi alih-alih berfokus pada gaya tertentu, fokuslah pada komponen yang dapat digunakan untuk membuat gaya.

Buat Kerangka Desain Anda Sendiri

Pada proyek Anda berikutnya, luangkan waktu di awal untuk membangun kerangka desain dengan cermat. Anda akan menemukannya meningkatkan proses desain secara keseluruhan, meningkatkan efisiensi, dan meningkatkan konsistensi desain produk, yang meningkatkan kegunaan. Anda akan menghemat waktu, mengomunikasikan ide-ide desain dengan lebih efektif, dan membuat klien dan pemangku kepentingan senang ketika ide-ide tersebut diwujudkan hanya dalam beberapa detik di 120 Sketsa artboards.

Apakah Anda Siap Memulai Kerangka Desain Anda Sendiri?

Unduh file Sketsa di sini. Instruksi disertakan tentang cara menggunakannya.

Sistem Desain yang Menginspirasi dan Kerangka UI

Salah satu cara terbaik untuk memahami lebih lanjut tentang kerangka kerja desain adalah dengan memeriksa seberapa besar perusahaan mapan menggunakannya. Ikuti jenis perusahaan ini dan pelajari tentang pendekatan mereka.

Desain Material Google – saat ini salah satu kerangka kerja desain paling populer di dunia. Pelajari bagaimana Google melapisi seluruh proses desain dan menyusun hierarki komponen yang berguna.

Bahasa Desain IBM – IBM membagikan seluruh proses desain mereka termasuk penjelasan mendalam tentang setiap detail. Mereka juga berbagi banyak sumber daya dari bahasa desain mereka, dari ikon sederhana hingga perpustakaan animasi UI.

Atlassian – sumber belajar hebat lainnya. Panduan gaya produk mereka adalah sistem desain yang bagus untuk dipelajari. Mereka berbagi paket GUI Web mereka, file Sketsa dengan banyak komponen dan konsep.

• • •

Bacaan lebih lanjut di Blog Desain Toptal:

• eCommerce UX – Tinjauan Praktik Terbaik (dengan Infografis)
• Pentingnya Desain yang Berpusat pada Manusia dalam Desain Produk
• Portofolio Desainer UX Terbaik – Studi Kasus dan Contoh yang Menginspirasi
• Prinsip Heuristik untuk Antarmuka Seluler
• Desain Antisipatif: Cara Membuat Pengalaman Pengguna yang Ajaib