Desain dan Sketsa Atom – Panduan untuk Meningkatkan Alur Kerja

Sketsa dan Desain Atom adalah seperangkat alat dan metodologi yang dapat digunakan desainer untuk membuat sistem desain yang memungkinkan standarisasi dan alur kerja yang lebih efisien.

Sistem Desain: Sebuah Primer

Sistem desain adalah seperangkat komponen dan pedoman yang dapat digunakan kembali yang membantu tim bersatu dalam bahasa yang sama selama pembuatan dan masa pakai suatu produk.

Dalam kebanyakan kasus, sistem desain terdiri dari panduan gaya dan pustaka komponen. Mereka juga dapat menyertakan elemen seperti suara dan nada serta nilai merek. Inti dari memiliki sistem desain adalah untuk menciptakan seperangkat standar yang bertindak sebagai satu-satunya sumber kebenaran untuk suatu produk atau merek.

Desain Material Google adalah contoh sistem desain UI terstruktur. Desain Material diperkenalkan kembali pada tahun 2014 sebagai cara untuk merancang dan mengembangkan aplikasi Android yang kohesif.

Contoh lain adalah Suara dan Nada Mailchimp. Ini menggambarkan bagaimana suara seseorang selalu sama tetapi nadanya berubah tergantung pada konteksnya. Menyadari hal ini membantu memberdayakan konten dan memberikan kepribadian pada merek.

Meskipun ada banyak metode berbeda yang dapat digunakan untuk membuat sistem desain, sebaiknya pilih kerangka kerja yang memungkinkan tim untuk menyatukan bahasa yang sama dan serangkaian standar. Desain Atom adalah contoh yang bagus dari kerangka kerja yang mencapai dua tujuan ini.

Desain Atom: Sistem Desain Bangunan

Desain Atom, metodologi yang diperkenalkan oleh Brad Frost pada tahun 2013, didasarkan pada gagasan bahwa setiap sistem desain dapat didefinisikan sebagai serangkaian blok bangunan yang hidup berdampingan.

Berikut adalah ikhtisar singkat tentang komponen Desain Atom:

• atom . Mewakili blok bangunan dasar dari sistem desain. Contohnya adalah tombol atau gaya teks.
• Molekul . Sekelompok atom yang bekerja bersama sebagai satu kesatuan. Molekul adalah elemen UI yang nyata. Misalnya, tombol dan bidang teks dapat dikelompokkan untuk membuat formulir pencarian.
• organisme . Atom dan molekul bekerja sama dalam struktur yang kompleks. Bidang pencarian yang dikelompokkan dengan bilah navigasi membentuk organisme tajuk di situs web.
• Template. Objek tingkat halaman menempatkan komponen ke dalam tata letak yang mendefinisikan struktur konten. Misalnya, mengambil organisme tajuk dan menempatkannya di templat beranda.
• Halaman. Contoh template yang mewakili produk akhir.

“Kami ditugaskan untuk membuat antarmuka untuk lebih banyak pengguna dalam lebih banyak konteks menggunakan lebih banyak browser di lebih banyak perangkat dengan lebih banyak ukuran layar dan lebih banyak kemampuan daripada sebelumnya. Itu memang tugas yang menakutkan. Untungnya, sistem desain ada di sini untuk membantu.”—Brad Frost sebagai pengantar Desain Atom dan sistem desain.

Menggunakan Desain Atom untuk membuat dan memelihara sistem desain akan membantu desainer bekerja lebih efisien dan berkomunikasi lebih baik dalam tim mereka. Ada banyak sekali alat dan metode untuk membuat dan memelihara sistem desain, tetapi seringkali alat terbaik adalah yang paling kita kenal.

Cara Menggunakan Desain Atom dengan Sketsa

Untuk mengembangkan sistem desain menggunakan Atomic Design, alat yang hebat (dan sudah familiar) adalah Sketch. Ini menyediakan kanvas bagi kita untuk membuat atom, molekul, dan organisme: elemen yang diperlukan untuk menentukan inti dari sistem desain.

Membuat Atom

Kita mulai dengan membuat tiga jenis atom di Sketch: simbol, gaya lapisan, dan gaya teks.

Simbol. Simbol tidak lebih dari komponen yang dapat digunakan kembali. Mereka didefinisikan sekali karena mereka dapat dipakai di seluruh produk. Misalnya, simbol panah (atom) dapat didefinisikan dengan properti seperti warna batas, ukuran, dll. Kemudian, kita dapat menggunakan kembali simbol ini tanpa harus membuatnya kembali setiap kali.

Gaya Lapisan . Gaya lapisan adalah elemen gaya visual yang dapat digunakan kembali yang tetap konsisten di setiap lapisan. Misalnya, warna isian panah yang ditentukan sebelumnya.

Gaya Teks. Gaya teks, mirip dengan gaya lapisan, adalah elemen yang dapat digunakan kembali yang memastikan konsistensi di seluruh objek teks serupa. Misalnya, menentukan ukuran font dan warna elemen h1. Ini bekerja dengan cara yang mirip dengan gaya teks di Google Documents atau Microsoft Word.

Saat kita mendefinisikan simbol, gaya lapisan, dan gaya teks, Sketch dapat membaginya ke dalam kategori hierarkis dalam menu simbol dan gaya teksnya dengan menggunakan tanda “/” (garis miring). Mengikuti konvensi penamaan dan memiliki kumpulan kategori master yang terdefinisi dengan baik akan memberikan file struktur yang terorganisir, mengurangi kebingungan dan inkonsistensi.

Berikut adalah beberapa cara untuk membuat kategori hierarki untuk simbol, teks, dan gaya lapisan di Sketch.

Kami dapat merepresentasikan simbol menggunakan konvensi penamaan yang disarankan berikut di bawah Atoms/ :

• Aktiva
• tombol
• Kontrol Masukan
• Gambar-gambar
• Navigasi
• Informasi

Kami tidak akan mengubah gaya lapisan menjadi simbol sehingga mengidentifikasinya dengan grup semantiknya sudah cukup. Sekali lagi, menggunakan Atom /:

• mengisi
• perbatasan
• Bayangan
• Gradien

Mirip dengan gaya lapisan, inilah cara kita membuat gaya teks di bawah Atom /:

• Judul
• Tubuh
• Keterangan
• Label
• Tautan

Bahasa desain terpadu seharusnya tidak hanya seperangkat aturan statis dan atom individu; itu harus menjadi ekosistem yang berkembang.—Airbnb tentang Membangun Bahasa Visual.

Membuat Molekul

Atom menentukan bagian dasar dari pedoman desain produk, tetapi atom itu sendiri tidak sepenuhnya berguna. Untuk mendapatkan beberapa fungsi, kita menggabungkan atom dan membuat molekul.

Menggabungkan label (atom) dengan tombol input (atom) untuk membuat fungsi pencarian adalah contoh yang baik dari elemen molekul yang umum digunakan.

Sebuah kata hati-hati karena mungkin ada sedikit area abu-abu di sini. Tombol, pada tingkat kode , dianggap sebagai atom, tetapi tombol pada tingkat desain dianggap sebagai molekul karena kami mengelompokkan gaya lapisan dan atom gaya teks. Untuk menghindari kebingungan, sebaiknya pikirkan hanya tentang elemen level kode.

Kategori utama yang termasuk dalam Molekul/ adalah:

• Informasi
• Navigasi
• Kontrol Masukan

Karena molekul akan mulai membentuk produk kita secara interaktif, ada baiknya untuk mendefinisikan lebih lanjut kategori di atas. Dalam hal ini, kami akan mendefinisikan satu set subkategori yang mewakili pustaka pola:

• Daftar Dropdown
• Matikan
• Penggeser
• tab
• paginasi
• Indikator Kemajuan
• Bidang Tanggal
• Bidang Teks
• kotak centang
• Tombol radio
• Modul

Membuat Organisme

Organisme adalah kumpulan atom dan molekul. Mereka juga bisa menjadi bagian dari organisme lain.

Tidak seperti atom dan molekul, organisme tidak memiliki inklusi abstrak dalam produk yang kami rancang; mereka adalah komponen yang konkret dan dapat digunakan kembali yang dapat dengan mudah diidentifikasi dengan tindakan tertentu. Strukturnya lebih kompleks daripada atom atau molekul.

Jika bidang pencarian yang ditentukan sebelumnya dikelompokkan dengan komponen lain, seperti bilah navigasi (molekul), dan logo (atom), organisme akan dibuat. Contohnya adalah bilah navigasi atau kalender.

Organisme, seperti molekul, dapat masuk ke dalam kategori dan subkategori yang sama:

Berikut adalah kategori utama yang akan kami buat untuk Organisme/:

• Informasi
• Navigasi
• Kontrol Masukan

Seperti halnya molekul, kami juga akan membuat subkategori untuk organisme:

• Daftar Dropdown
• Matikan
• Penggeser
• tab
• paginasi
• Indikator Kemajuan
• Bidang Tanggal

Sampai saat ini, sebagian besar UI telah dirancang, jadi sekarang semudah memanggil instance komponen kita saat dibutuhkan untuk desain.

Sangat mudah untuk menemukan setiap komponen ini berdasarkan grup semantiknya, baik dengan mencarinya secara langsung menggunakan panel sisipan di toolbar Sketch, di mana kita akan menemukan kumpulan 3 kategori utama yang terorganisir dengan baik, atau, dengan menggunakan plugin seperti Pelari untuk Sketsa.

Runner for Sketch mengoptimalkan alur kerja desainer dengan menyediakan serangkaian perintah keyboard yang dapat mereka gunakan alih-alih menemukan hal-hal di menu tanpa akhir. Misalnya, mereka dapat mengetikkan kata insert , menekan tombol tab dan mencari komponen yang mereka butuhkan.

Dengan mengetikkan atom , daftar tarik-turun akan menunjukkan kepada kita semua elemen yang termasuk dalam kategori itu. Jika atom dan molekul memiliki kategori yang sama, hanya atom yang akan terlihat dan semua molekul akan diabaikan.

Membungkusnya

Sketsa dan Desain Atom adalah seperangkat alat canggih yang dapat digunakan bersama untuk meningkatkan alur kerja desain dan memfasilitasi kerangka kerja sistem desain yang efektif.

Menggunakan konsep atom , molekul , dan organisme sebagai dasar komponen, Atomic Design membantu desainer menyatukan bahasa yang sama selama pembuatan dan kehidupan suatu produk.

Desainer dapat menggunakan alat seperti Sketch untuk mengimplementasikan Desain Atom yang menyediakan alur kerja yang lebih efisien dan serangkaian standar yang dianut oleh semua orang di tim desain termasuk pengembang selama tahap akhir proyek.

Bacaan lebih lanjut di Blog Desain Toptal:

• Cara Membangun Kerangka Desain yang Efektif
• Memahami Sistem dan Pola Desain
• Cara Membuat Panduan Gaya Sketsa, Pustaka, dan Kit UI
• Mengapa Startup Membutuhkan Styleguide
• Plugin Zeplin Sketch – Jembatan Alur Kerja Antara Desain dan Rekayasa