Sushi Design System - UI Kit

Zomato

Bu uygulama hakkında

Sushi, Zomato'nun temiz ve basit bir tasarım dilini izleyerek sağlam kullanıcı arayüzleri oluşturmaya yardımcı olan kendi tasarım sistemidir. Biz zomato'da bunu sıfırdan inşa ettik. Bu bizim için sadece bir tasarım sistemi değil, bundan daha fazlası kullanıcılarımıza yeni ve gelişmiş bir deneyim sunmamıza yardımcı oluyor. Sushi, atomik, temiz ve basit bir tasarım dilini izleyerek ısmarlama kullanıcı arayüzleri oluşturmanıza yardımcı olabilir. Sushi kendi tasarım dilini oluştururken, Google'ın Materyal Tasarımı bileşenlerini dahili olarak birçok alanda tam olarak benimser ve kullanır.

Bir tasarım sistemi ve marka yönergeleri için bir referans olarak, Zomato'daki Ürün, Mühendislik, Pazarlama ve Markalaşma gibi çeşitli ekipler tarafından kullanılır ve temsil edilir.

Tasarım sistemi nedir?
Bir tasarım sistemi, herhangi bir sayıda uygulama oluşturmak için bir araya getirilebilen, net standartlar tarafından yönlendirilen yeniden kullanılabilir bileşenlerin bir koleksiyonudur. Tasarım sistemi, yalnızca dijital bir ürün oluşturmak için kullandığınız varlıkların ve bileşenlerin bir koleksiyonu değildir. Intercom'da ürün tasarımı direktörü Emmet Connolly'ye göre, “… çoğu Tasarım Sistemi gerçekten sadece Model Kitaplıklarıdır: neredeyse sonsuz şekilde birleştirilebilen büyük bir UI Lego parçası kutusu. Tüm parçalar tutarlı olabilir, ancak bu, birleştirilmiş sonuçların olacağı anlamına gelmez. Ürününüz, yeniden kullanılabilir kullanıcı arabirimi öğeleri yığınından daha fazlasıdır. Yapısı ve anlamı vardır. Bu genel bir web sayfası değil, bir kavramlar sisteminin somutlaşmış halidir.”

Suşi Tasarım Sistemi

Temeller
Temeller, tasarım sistemimizin tipografisini, renk paletlerini, simgeleri, aralığı, gölgeyi ve bilgi mimarisini tanımlayan dijital marka yönergeleridir. Atomik tasarım ilkelerini takip eden Sushi, atomlar ➡️ moleküller ➡️ organizmalar olarak sıralanan birleştirilebilir bileşenler kullanılarak aşağıdan yukarıya inşa edilir.

Atomik Tasarım
Atomik Tasarım (Brad Frost tarafından tarif edildiği gibi) sistemimize eşlendi.

#Atomlar
En küçük bölünemeyen birimler atomlardır. Android'de (veya herhangi bir mobil kullanıcı arayüzünde) metin etiketleri, düğmeler ve resim tutucular atomlardır.

#Moleküller
Oluşturulması için birden fazla atom içeren, ancak yine de kullanıcıya tek bir varlık gibi görünen ve davranan görüşler moleküllerdir. Örneğin, girdi alanlarında girdi kutusu, hata alanı ve bir silme düğmesi bulunur, ancak bunlar birlikte tek bir varlıktır.

#Organizmalar
Birlikte uyumlu bir şekilde çalışan karmaşık, ancak yeniden kullanılabilir bileşenler. Birden fazla atom ve molekülden oluşur. Her biri bir sayı ve bir simgeye sahip etiketlerden oluşan derecelendirme çubukları olan bir durum. Farklı derecelendirmeler seçildiğinde etiketlerin rengi de değişir. Her etiket ayrı ayrı başka yerlerde de kullanılır, ancak bir derecelendirme çubuğu olarak hepsi birlikte çalışarak yeni bir anlam yaratır.

Tipografi
Tipografi, bildiğiniz gibi, yazı dilini okunaklı, okunabilir ve görüntülendiğinde çekici hale getirmek için yazı düzenleme sanatıdır. Yazı düzeni, yazı karakterlerinin, nokta boyutlarının, satır uzunluklarının, satır aralığının ve harf aralığının seçilmesini ve harf çiftleri arasındaki boşluğun ayarlanmasını içerir.

Aşağıdaki yazı tipi varyasyonlarını destekliyoruz -

Ekstra ışık
Işık
Düzenli
Orta
Yarı Kalın
Gözü pek
EkstraKalın

8'e kadar yazı tipi ağırlığına sahip herhangi bir Yazı Tipi kullanabilir ve bunları bu takma adlardan atayabilirsiniz. Demo için Metropolis, Bamya ve Roboto varken, markanıza uygun herhangi bir yazı tipini kullanabilirsiniz.

Renkler
Sushi ayrıca paletinde bir dizi önceden tanımlanmış renk sağlar. Son derece benzersiz durumlar için kendi renklerinizi kullanmaktan çekinmeyin, aksi takdirde ürününüzün tüm bileşenleri için bu paletteki renkleri kullanmanızı öneririz.

Kod deposu