Sushi Design System - UI Kit

Zomato

O ovoj aplikaciji

Сусхи је Зомато-ов сопствени систем дизајна, који помаже у изградњи робусних корисничких интерфејса пратећи чист и једноставан језик дизајна. Ми у Зомато-у смо ово изградили од темеља. За нас то није само систем дизајна, већ нам више од тога помаже да нашим корисницима пружимо ново и побољшано искуство. Сусхи вам може помоћи да направите прилагођене корисничке интерфејсе пратећи атомски, чист и једноставан језик дизајна. Док се Сусхи надограђује на сопствени језик дизајна, он у потпуности прихвата и користи Гоогле-ове компоненте Материал Десигн интерно у многим областима.

Као систем дизајна и референца за смернице бренда, користе га и представљају различити тимови у оквиру Зомато-а, као што су – производ, инжењеринг, маркетинг и брендирање.

Шта је систем дизајна?
Систем дизајна је колекција компоненти за вишекратну употребу, вођених јасним стандардима, које се могу саставити заједно да би се изградио било који број апликација. Систем дизајна није само колекција средстава и компоненти које користите за прављење дигиталног производа. Према Емету Конолију, директору дизајна производа у компанији Интерцом, „... већина дизајнерских система су заправо само библиотеке узорака: велика кутија Лего делова корисничког интерфејса који се могу саставити на скоро бесконачне начине. Сви делови могу бити конзистентни, али то не значи да ће скупљени резултати бити. Ваш производ је више од гомиле вишекратних елемената корисничког интерфејса. Има структуру и значење. То није генеричка веб страница, то је отелотворење система концепата."

Сусхи Десигн Систем

Основе
Основе су смернице дигиталног бренда, које дефинишу типографију, палете боја, иконе, размаке, сенке и информациону архитектуру нашег система дизајна. Суши, пратећи принципе атомског дизајна, изграђен је одоздо према горе користећи компоненте које се могу саставити, поређане као атоми ➡ молекули ➡ организми.

Атомски дизајн
Атомски дизајн (како га је описао Бред Фрост) мапиран на наш систем.

#Атоми
Најмање недељиве јединице су атоми. У Андроид-у (или било ком мобилном корисничком интерфејсу) текстуалне ознаке, дугмад и држачи слика су атоми.

#Молецулес
Погледи који укључују више атома да се формирају, али и даље изгледају и понашају се као један ентитет за корисника су молекули. На пример, поља за унос имају поље за унос, поље за грешку и дугме за брисање, али заједно су један ентитет.

#организми
Комплексне, али вишекратне компоненте, које заједно раде на кохезиван начин. Састоји се од више атома и молекула. Пример су траке за оцењивање, које се састоје од ознака, од којих свака има број и икону. Ознаке такође мењају боју када се изаберу различите оцене. Свака ознака појединачно се такође користи на другим местима, али као трака за оцењивање, све заједно ради на стварању новог значења.

Типографија
Типографија, као што можда знате, је уметност уређења слова како би писани језик био читљив, читљив и привлачан када се прикаже. Распоред слова укључује избор слова, величине тачака, дужине редова, размака између редова и размака између слова и подешавање размака између парова слова.

Подржавамо следеће варијације слова -

ЕктраЛигхт
Светлост
Редовно
Средње
СемиБолд
Одважан
ЕктраБолд

Можете користити било који фонт који има до 8 тежине фонта и доделити их из ових алиаса. Док имамо Метрополис, Окра и Робото за демо, можете користити било који фонт који иде уз ваш бренд.

Боје
Сусхи такође нуди скуп унапред дефинисаних боја у својој палети. За изузетно јединствене случајеве, слободно користите своје боје, али иначе, препоручујемо да користите боје из ове палете за све компоненте вашег производа.

Складиште кодова