Sushi Design System - UI Kit

Zomato

Tentang aplikasi ini

Sushi adalah sistem desain Zomato sendiri, yang membantu membangun antarmuka pengguna yang kuat mengikuti bahasa desain yang bersih dan sederhana. Kami di zomato, telah membangun ini dari bawah ke atas. Ini bukan hanya sistem desain untuk kami, tetapi lebih dari itu membantu kami memberikan pengalaman baru dan lebih baik kepada pengguna kami. Sushi dapat membantu Anda membangun antarmuka pengguna yang dipesan lebih dahulu dengan mengikuti bahasa desain yang atomik, bersih, dan sederhana. Sementara Sushi dibangun dengan bahasa desainnya sendiri, Sushi sepenuhnya mencakup dan menggunakan komponen Desain Material Google secara internal di banyak area.

Sebagai sistem desain dan acuan pedoman merek, digunakan dan diwakili oleh berbagai tim di Zomato, seperti - Produk, Teknik, Pemasaran, dan Branding.

Apa itu sistem desain?
Sistem desain adalah kumpulan komponen yang dapat digunakan kembali, dipandu oleh standar yang jelas, yang dapat dirakit bersama untuk membangun sejumlah aplikasi. Sistem desain bukan hanya kumpulan aset dan komponen yang Anda gunakan untuk membangun produk digital. Menurut Emmet Connolly, direktur desain produk di Intercom, “… sebagian besar Sistem Desain sebenarnya hanyalah Perpustakaan Pola: sekotak besar potongan Lego UI yang dapat dirakit dengan cara yang hampir tak terbatas. Semua bagian mungkin konsisten, tetapi itu tidak berarti hasil yang dikumpulkan akan sama. Produk Anda lebih dari sekadar tumpukan elemen UI yang dapat digunakan kembali. Ia memiliki struktur dan makna. Ini bukan halaman web generik, ini adalah perwujudan dari sistem konsep.”

Sistem Desain Sushi

Yayasan
Fondasi adalah pedoman merek digital, yang menentukan tipografi, palet warna, ikon, spasi, bayangan, dan arsitektur informasi dari sistem desain kami. Sushi, mengikuti prinsip desain atom, dibuat dari bawah ke atas menggunakan komponen yang dapat dikomposisi, disusun sebagai atom ️ molekul ️ organisme.

Desain Atom
Desain Atom (seperti yang dijelaskan oleh Brad Frost) dipetakan ke sistem kami.

#Atom
Satuan terkecil yang tidak dapat dibagi lagi adalah atom. Di Android (atau UI seluler apa pun), label teks, tombol, dan pemegang gambar adalah atom.

#Molekul
Tampilan yang melibatkan banyak atom untuk terbentuk, tetapi tetap terlihat dan berperilaku seperti satu kesatuan bagi pengguna adalah molekul. Misalnya, bidang masukan memiliki kotak masukan, bidang kesalahan, dan tombol hapus, tetapi bersama-sama itu adalah satu kesatuan.

#Organisme
Komponen kompleks, tetapi dapat digunakan kembali, yang bekerja secara kohesif bersama-sama. Terdiri dari beberapa atom dan molekul. Contohnya adalah bilah peringkat, yang terdiri dari tag, masing-masing memiliki nomor dan ikon. Tag berubah warna juga, ketika peringkat yang berbeda dipilih. Setiap tag secara individual juga digunakan di tempat lain, tetapi sebagai bilah peringkat, semuanya bekerja bersama untuk menciptakan makna baru.

Tipografi
Tipografi, seperti yang Anda ketahui, adalah seni mengatur jenis huruf untuk membuat bahasa tulisan dapat dibaca, dibaca, dan menarik saat ditampilkan. Penataan jenis melibatkan pemilihan tipografi, ukuran titik, panjang garis, spasi baris, dan spasi huruf, dan menyesuaikan ruang antara pasangan huruf.

Kami mendukung variasi jenis huruf berikut -

ExtraLight
Lampu
Reguler
Sedang
Setengah Tebal
Mencolok
Ekstra Tebal

Anda dapat menggunakan Font apa pun yang memiliki hingga 8 bobot font dan menetapkannya dari alias ini. Meskipun kami memiliki Metropolis, Okra, dan Roboto untuk demo, Anda dapat menggunakan font apa pun yang sesuai dengan merek Anda.

Warna
Sushi juga menyediakan satu set warna yang telah ditentukan dalam paletnya. Untuk casing yang sangat unik, jangan ragu untuk menggunakan warna Anda sendiri, tetapi jika tidak, kami sarankan untuk menggunakan warna dari palet ini untuk semua komponen produk Anda.

Repositori kode