Sushi Design System - UI Kit

Zomato‏

اس ایپ کے بارے میں

Sushi Zomato کا اپنا ڈیزائن سسٹم ہے، جو صاف اور سادہ ڈیزائن کی زبان کے بعد مضبوط یوزر انٹرفیس بنانے میں مدد کرتا ہے۔ زوماٹو میں ہم نے اسے زمین سے بنایا ہے۔ یہ ہمارے لیے صرف ایک ڈیزائن سسٹم نہیں ہے، بلکہ اس سے بھی بڑھ کر یہ ہمارے صارفین کو ایک نیا اور بہتر تجربہ فراہم کرنے میں ہماری مدد کرتا ہے۔ سشی آپ کو ایٹمک، صاف اور سادہ ڈیزائن لینگویج کے بعد بیسپوک یوزر انٹرفیس بنانے میں مدد کر سکتی ہے۔ جب کہ سشی اپنی ڈیزائن کی زبان کو تیار کرتی ہے، یہ Google کے میٹریل ڈیزائن کے اجزاء کو مکمل طور پر قبول کرتی ہے اور بہت سے شعبوں میں اندرونی طور پر استعمال کرتی ہے۔

ایک ڈیزائن سسٹم اور برانڈ گائیڈ لائنز کے حوالے کے طور پر، اسے Zomato کے اندر مختلف ٹیمیں استعمال کرتی ہیں اور اس کی نمائندگی کرتی ہیں، جیسے - پروڈکٹ، انجینئرنگ، مارکیٹنگ اور برانڈنگ۔

ڈیزائن سسٹم کیا ہے؟
ایک ڈیزائن سسٹم دوبارہ قابل استعمال اجزاء کا ایک مجموعہ ہے، جو واضح معیارات سے رہنمائی کرتا ہے، جسے کسی بھی قسم کی ایپلی کیشنز بنانے کے لیے ایک ساتھ جمع کیا جا سکتا ہے۔ ایک ڈیزائن سسٹم صرف اثاثوں اور اجزاء کا مجموعہ نہیں ہے جسے آپ ڈیجیٹل پروڈکٹ بنانے کے لیے استعمال کرتے ہیں۔ انٹرکام میں پروڈکٹ ڈیزائن کے ڈائریکٹر ایمیٹ کونولی کے مطابق، "... زیادہ تر ڈیزائن سسٹمز واقعی صرف پیٹرن لائبریریاں ہیں: UI لیگو کے ٹکڑوں کا ایک بڑا باکس جسے قریب لامحدود طریقوں سے جمع کیا جا سکتا ہے۔ تمام ٹکڑے ایک جیسے ہوسکتے ہیں، لیکن اس کا مطلب یہ نہیں ہے کہ جمع شدہ نتائج ہوں گے۔ آپ کا پروڈکٹ دوبارہ قابل استعمال UI عناصر کے ڈھیر سے زیادہ ہے۔ اس کی ساخت اور معنی ہیں۔ یہ کوئی عام ویب صفحہ نہیں ہے، یہ تصورات کے نظام کا مجسمہ ہے۔"

سشی ڈیزائن سسٹم

بنیادیں
فاؤنڈیشنز ڈیجیٹل برانڈ گائیڈ لائنز ہیں، جو ہمارے ڈیزائن سسٹم کے ٹائپوگرافی، کلر پیلیٹس، آئیکنز، اسپیسنگ، شیڈو اور معلوماتی فن تعمیر کی وضاحت کرتی ہیں۔ سوشی، جوہری ڈیزائن کے اصولوں پر عمل کرتے ہوئے، کمپوز ایبل اجزاء کا استعمال کرتے ہوئے نیچے سے اوپر بنایا گیا ہے، جو ایٹم ➡️ مالیکیولز ➡️ جانداروں کے طور پر ترتیب دیا گیا ہے۔

ایٹمک ڈیزائن
ایٹم ڈیزائن (جیسا کہ بریڈ فراسٹ نے بیان کیا ہے) ہمارے سسٹم میں نقشہ بنایا گیا ہے۔

#ایٹم
سب سے چھوٹی ناقابل تقسیم اکائیاں ایٹم ہیں۔ اینڈرائیڈ (یا کسی بھی موبائل UI) میں ٹیکسٹ لیبل، بٹن اور امیج ہولڈرز ایٹم ہیں۔

#مالیکیولز
وہ نظارے جن کی تشکیل میں متعدد ایٹم شامل ہیں، لیکن پھر بھی صارف کے لیے ایک واحد وجود کی طرح نظر آتے ہیں اور برتاؤ کرتے ہیں وہ مالیکیول ہیں۔ مثال کے طور پر، ان پٹ فیلڈز میں ان پٹ باکس، ایرر فیلڈ، اور ایک واضح بٹن ہوتا ہے، لیکن ایک ساتھ یہ ایک واحد وجود ہے۔

#جاندار
پیچیدہ، لیکن دوبارہ قابل استعمال اجزاء، جو ایک ساتھ مل کر کام کرتے ہیں۔ متعدد ایٹموں اور مالیکیولز پر مشتمل۔ ایک کیس ریٹنگ بارز کا ہے، جو ٹیگز پر مشتمل ہوتا ہے، ہر ایک کا نمبر اور ایک آئیکن ہوتا ہے۔ جب مختلف درجہ بندیوں کا انتخاب کیا جاتا ہے تو ٹیگز کا رنگ بھی بدل جاتا ہے۔ ہر ٹیگ کو انفرادی طور پر دوسری جگہوں پر بھی استعمال کیا جاتا ہے، لیکن ریٹنگ بار کے طور پر، یہ سب مل کر نئے معنی پیدا کرنے کے لیے کام کرتے ہیں۔

ٹائپوگرافی
ٹائپوگرافی، جیسا کہ آپ جانتے ہوں گے، تحریری زبان کو پڑھنے کے قابل، پڑھنے کے قابل، اور ظاہر ہونے پر دلکش بنانے کے لیے قسم کو ترتیب دینے کا فن ہے۔ قسم کی ترتیب میں ٹائپ فاسس، پوائنٹ کے سائز، لکیر کی لمبائی، لائن اسپیسنگ، اور لیٹر اسپیسنگ کا انتخاب اور حروف کے جوڑے کے درمیان جگہ کو ایڈجسٹ کرنا شامل ہے۔

ہم درج ذیل قسم کی مختلف حالتوں کی حمایت کرتے ہیں۔

ایکسٹرا لائٹ
روشنی
باقاعدہ
درمیانہ
سیمی بولڈ
بولڈ
ایکسٹرا بولڈ

آپ کوئی بھی ایسا فونٹ استعمال کر سکتے ہیں جس میں 8 فونٹ وزن ہوں اور انہیں ان عرفی ناموں سے تفویض کریں۔ جب کہ ہمارے پاس ڈیمو کے لیے میٹروپولیس، اوکرا اور روبوٹو موجود ہیں، آپ کوئی بھی فونٹ استعمال کر سکتے ہیں جو آپ کے برانڈ کے ساتھ ہو۔

رنگ
سشی اپنے پیلیٹ میں پہلے سے طے شدہ رنگوں کا ایک سیٹ بھی فراہم کرتا ہے۔ انتہائی منفرد صورتوں کے لیے، بلا جھجھک اپنے رنگوں کا استعمال کریں، لیکن دوسری صورت میں، ہم آپ کی پروڈکٹ کے تمام اجزاء کے لیے اس پیلیٹ کے رنگوں کو استعمال کرنے کی تجویز کرتے ہیں۔

کوڈ ریپوزٹری