Дизайн системата е важна част от дизайн процеса. Много блог постове, видеа или туйтове споменават за ползите от създаването на този ресурс. Тази статия ще попълни дупките в знанията ви и ще покрие всички аспекти от материята. Нека да обобщим какво е дизайн система, да припомним ползите и да видим съществуващи примери.

Дизайн системата е нещо повече от UI стилово ръководство. Тя и източник на информация за целия тийм. Това ще рече библиотека с UI компоненти за дизайн тийма, готови за използване, коднати UI елементи за програмистите и описание на принципите в документация. Дизайн системата поддържа консистентността и помага за по-бързото създаване на дизайн. Също така спомага за комуникацията в тийма.

Добре, вече имаме едно бързо обобщение. Нека да прочетем цялата история с повече информация.

Какво е дизайн система?

Какво е Дизайн система?

Създаването на система звучи като много работа ( разбира се може да спестите много часове, като използвате различни инструменти – което ще обясня в следващия параграф ). Това обаче има много предимства, заради които си струва да отделим време и да създадем такава система. Ето някои от тях:

Консистентност – благодарение на дизайн системата, програмистите могат да имплементират потребителския интерфейс по-лесно. Те могат да мислят за определена страница като съвкупност от компоненти. Те не трябва да мислят, че даден бутон е с определен цвят на фона, със зададен размер на шрифта и колко отстъп има от краищата. За тях е нужно само да знаят, че това е основен бутон и да го използват на останалите страници.

Високо качество – Консистентността създава впечатление за високо качество. QA специалистите лесно ще могат да използват дизайна с документацията от дизайн системата. Неконсистентността ще се забележи на много по ранен етап.

По добра комуникация с програмистите – Дизайн системата е един източник на информация – това означава, че съдържа неща, които биха се използвали в проекта. Когато дизайнери и програмисти обсъждат страници, те биха използвали имената на елементите от дизайн системата. Благодарение на това, няма да се говори за “онзи големият розов бутон”, а ще се обърнат към него с “основният бутон”. Доста грешки се допускат поради неразбиране, а Дизайн системата дава възможността да говорим на един език.

Ускорява процеса за дизайн – Вие вече сте създали или купили библиотека с UI елементи, които трябва да използвате в потребителски интерфейс. Сега просто трябва да ги използвате, когато някоя нова характеристика изисква създаването на нова страница или модифицирането на вече готова такава. Дори и да решите да създадете UI библиотека от нулата – тези тонове часове, които сте прекарали в създаването ѝ, ще ви позволят бързо да създавате потребителски интерфейс за нови функционалности.

Позволява да се фокусирате повече върху работата, а не върху визията на сайта – използването на UI библиотека означава, че не е нужно да измисляме всеки път как трябва да изглежда някой бутон, защото това вече е решено. Визуалните елементи предварително са описани в система, така че направо може да подредим новата страница, като просто ги използваме и се фокусираме върху по-доброто потребителско изживяване.

Примери за дизайн системи.

Дизайн системите са големи. Трудно е да си представим колко много часове на работа коства създаването на една такава. Но си заслужава.

За щастие, много страхотни тиймове споделят публично техните дизайн системи. Благодарение на тях можем да научим добрите практики в създаването на дизайн система от вече съществуващите. Препоръчвам анализирането на тези:

Material Design – Тази е една от най-популярните системи. Тя е оформяна в продължение на години, но вече се използва не само от екипа на Google но и от още много създатели на Андроид и Уеб приложения.

Atlassian Design System – Една от най завършените на пазара използвана в реален продукт от Atlassian.

Polaris – Дизайн система създадена от Shopify.

Carbon – Тази е създадена от IBM

Human Interface Guidelines – Apple подготвят дизайн система за всички техни платформи.

Nachos – Създадена от Trello. Хубаво е да видим как те описват принципа на илюстриране в документация.

Grommet – Дизайн системата на HP, представена по много интуитивен начин.

Трябва ли да създам дизайн система?

Да. Може да не изглежда особено необходимо за бърз проект, но създаването ѝ ще се отплати.

Отначало вие и вашия екип може би ще се чувствате ограничени. Може би ще си мислите че ви лимитира, но накрая, ще създавате по бързо и по-качествени неща.

Как да започна създаването на дизайн система?

Основни са два случая. Първият е когато започваме нов проект. Вторият е когато работим върху вече съществуващ продукт. И в двата случая пътят е подобен, но вторият изисква няколко допълнителни стъпки.

За нов проект обикновено започваме да си играем с визуални елементи. Това може да са вече налични елементи от потребителски интерфейс или макети. Направете различни концепции и изберете най-добрите. Това трябва да бъде най креативната част от целия дизайн – когато откриваме „нещото“ ,което ни дава удовлетвореност, от където да започнем дизайн системата.

След това, използваме принципите за атомен дизайн – започваме от основните цветове, шрифтове и форми. Преминаваме към атомите – бутоните, полетата, чек-боксовете, радио бутоните и така нататък. След това правим молекулите – полета за търсене, дата пикър и накрая организма – навигация и странични менюта. Благодарение на това, ще може да подготвим библиотека с шаблони за нашите страници.

Ако вече работим за съществуващ проект,  първо ще трябва да направим инвентар от всички UI елементи. Вероятно ще открием много, почти идентични UI компоненти с малки разлики. Събираме всички елементи и отделяме всички подобни. След като групираме елементите по техните категории, ще трябва да преценим кои са уникални и кои трябва да изтрием. Опростяваме и намаляме броя на компонентите.

След като приключим, ще имаме малка колекция от елементи – структурираме ги и групираме по предназначение. Използваме обратен подход на принципа за атомен дизайн за да опростим и разделим. Може да използваме Design System Kit за да ускорим процеса.

Използване на Design System Kit

По време на моята професионална работа, открих че започването на всеки нов проект от нулата е просто загуба на време. Повтарящият се процес от избор на шрифтове, цветове и основни UI елементи, таблици и устройства отнема толкова много време.

Намерих решение и направих ресурс за дизайн – Prime Design System Kit. Благодарение на този UI Framework, създаден за Sketch, спестявам много много часове и започвам директно по-важните елементи за минути.

Обобщение

Дизайн системата вече не е виждане на бъдещето. Тези неща се реализират в много ценни проекти. Време е да започнете да прилагате такава и във вашия.