Casing Desain Aurora

Dec 07 2022

Seperti yang Anda ketahui, beberapa desainer dapat terlibat dalam pembuatan proyek yang berkembang dan kompleks pada waktu yang berbeda. Sangat mudah untuk menggunakan sistem elemen dan aturan yang terorganisir untuk penggunaannya sambil terus mengerjakan proyek seseorang.

Inilah metode yang dibutuhkan untuk salah satu proyek kami, Aurora. Tugas kami adalah membuat konsep elemen dasar untuk selanjutnya membangun antarmuka lengkap untuk platform di bidang manajemen e-niaga dari mereka.

Klien memberikan sistem Carbon sebagai contoh, yang mencakup Design-Kit, warna, font, kasus penggunaan, dan banyak lagi. Serta analog dari produk mereka. Selain itu, saya fokus pada contoh Desain Material, karena situs web mereka memiliki opsi komponen yang dapat berguna dalam pengembangan.
Selama pengerjaan, pertama-tama, font, ikon, dan warna utama proyek diusulkan. Pada saat yang sama, saya membuat tombol sampel dan masukan untuk menunjukkan bagaimana font dan ikon yang dipilih berinteraksi satu sama lain. Berdasarkan ini, klien memilih font, warna, dan tampilan ikon. Jadi, salah satu warna logo, pink, digunakan sebagai warna Primer, dan warna kedua, abu-abu, sebagai warna Sekunder.

Semua gaya font bekas dengan peran yang ditandai disimpan dalam gaya proyek Figma dan dapat dipilih dari daftar.

Warnanya diawetkan dengan cara yang sama. Tapi mereka dibagi ke dalam folder di bagian Gaya Warna: Utama dan Tambahan. Untuk memperluas palet warna, saya menggunakan metode menambahkan hitam dan putih ke warna yang dipilih dalam proporsi berbeda secara berurutan (20%, 40%, 60%, dll.). Bingkai dengan tata warna juga menunjukkan peran warna yang dimaksud.

Selain itu, beberapa opsi bayangan ditambahkan untuk dipilih dari set siap pakai yang ditawarkan oleh klien.

Selanjutnya, tampilan tombol, input, dropdown, dan tombol pemilihan bahasa dipilih. Semua tombol adalah komponen yang tampilannya dapat diubah langsung di proyek, tergantung tujuannya. Ikon di tombol juga bisa diubah di menu Tata Letak Otomatis.

Tampilan tombol dropdown untuk memilih bahasa sedikit berubah (menjadi lebih ringkas) setelah saya membuat contoh halaman Login.

Input memiliki 9 opsi dan dapat digunakan dengan atau tanpa ikon. Bidang input kata sandi memiliki lebih banyak opsi karena dapat digunakan dalam situasi yang berbeda dan memiliki properti spesifiknya sendiri. Misalnya, skala yang menunjukkan kekuatan kata sandi dan elemen yang disorot dengan warna hijau jika pengguna telah memasukkan jumlah karakter yang diperlukan. Saya juga membuat komponen terpisah untuk kolom input kode verifikasi.

Selanjutnya, komponen untuk kotak centang dan sakelar dibuat, serta komponen untuk elemen yang sama dengan teks. Selain itu, saya menambahkan avatar dengan berbagai ukuran, komponen dengan grup, tooltips, dan contoh penggunaan beserta daftar dropdown.

Untuk menunjukkan bagaimana elemen dan teks bekerja dalam kehidupan nyata, saya membuat layar login, dengan mempertimbangkan keinginan klien. Kemudian, tema gelap ditambahkan, di mana saya membuat komponen terpisah.

Dan untuk menyiapkan komponen untuk tema gelap, saya menggunakan tata letak masuk yang sudah jadi dan memilih kombinasi warna dan transparansi yang sesuai. Untuk beberapa elemen tidak ada yang harus diubah. Misalnya untuk tombol Utama.

Dengan demikian, dalam waktu yang cukup singkat, klien menerima UI-kit sederhana dengan kemampuan untuk mengedit elemen di Figma. Ini adalah cara yang bagus untuk menampilkan fokus gaya utama dari sebuah proyek tanpa menghabiskan banyak uang.