Ръководство 'Стъпка по стъпка' за създаване на система за проектиране

Въведение

В ерата на достъпността навсякъде и отвсякъде повсеместното присъствие се превърна в норма. Добре известно е обаче, че последователността е надеждност. Потребителите вече са по-наясно. Бързото и безпроблемно преживяване е основно очакване, независимо от интерфейса.

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

"Design System" е тук,за да улесни живота ви.

Какво е система за проектиране?

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

Системата за проектиране се развива повече от наръчниците за стилове или библиотеките с модели. Тази екосистема от насоки, свързани с различни елементи, включително UX дизайн, може да се използва като рамка от градивни елементи за всеки проект, за да се гарантира, че всички компоненти са последователни и съответстват на брандинга.

Въпреки че е полезна както за стартиращи, така и за разрастващи се фирми и предприятия, системата за проектиране се превръща в съществен и незаобиколим актив при разработването на даден продукт. Тя може да окаже положително влияние върху бизнес целите, работния процес, работата в екип, потребителското изживяване и цялостния опит с марката.

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

Някои от предимствата на прилагането на системен дизайн са

1. Повишаване на ефективността и съкращаване на времето - Основното предимство на всяка система за проектиране е възможността за бързо създаване и пресъздаване на проекти и разработки. Екипите могат да използват предварително подготвени елементи, за да намалят необходимостта от постоянно преоткриване на колелото и да намалят риска от непоследователност.
2. Подобрява визуалната последователност на страниците и каналите - липсата на система за дизайн в цялата организация може да доведе до непоследователни визуални ефекти, фрагментирано потребителско изживяване или изолиране от брандинга. Свързаният набор от стандарти също така помага да се управляват големи промени в дизайна или визуални ребрандове в голям мащаб.
3. Насърчаване на единен език - споделеният език на проектиране намалява възможността за загуба на време за проектиране или разработване поради неразбирателство в рамките на и между многофункционалните екипи.
4. Позволява по-добро фокусиране върху по-сложни проблеми - Екипите могат по-добре да решават сложни проблеми, като например приоритизиране на информацията, управление на пътуванията и т.н., когато са създадени прости компоненти на потребителския интерфейс, които са недвусмислени.
5. Служи като справочен и образователен инструмент за сътрудниците - Системата за проектиране улеснява процеса на въвеждане в експлоатация в случай на промени в персонала. Тя също така помага на новите индивидуални сътрудници да навлязат по-лесно в проектирането на UI UX или създаването на съдържание.
6. Принос към силна и непреходна марка - Целта на една система за дизайн е да предаде определена идентичност и дизайн на продуктите, които тя предлага. Тя помага за създаването на въздействащи марки и подпомага хората да запомнят опита с марката. Това кара хората да се чувстват по-свързани с дадена марка и да ѝ се доверяват повече.

Ръководство в десет стъпки за изграждане на система за проектиране

Разработихме процес от десет стъпки, който ще помогне на вашата компания да създаде система за проектиране.

1. Направете обстоен анализ на съществуващия процес на проектиране.

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

• Какъв е настоящият подход за проектиране във вашата организация?
• Какви са съществуващите инструменти, които вашата организация използва?

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

2. Определете азбуката на вашата марка

Азбуката на марката ще доведе до идентичността на марката, т.е. ценностите на марката и продукта и езика на марката. Езикът на марката се състои от форми, шрифтове, цветове, анимации, глас и тон.

Дизайнерите ще използват визуален език, определен от азбуката на марката. Прегледът на насоките на марката и разговорите със заинтересованите страни могат да ви помогнат да разберете идентичността и езика на марката.

3. Извършване на одит на текущия продукт AI

Извършването на одит на потребителския интерфейс на текущия продукт ще ви помогне да се справите с едно от основните предизвикателства при проектирането на продукти: дублирането на дизайна. Одитът има за цел да постигне две цели.

• Обърнете внимание на областите в продукта със значителни несъответствия.
• Разпознайте най-използваните и основни елементи на продукта.

Одитът на ПС е процес, който се състои от няколко стъпки. От решаващо значение е идентифицирането и анализирането на основните свойства на потребителския интерфейс и тяхното използване в компонентите. Можете да използвате наличните инструменти, за да видите броя на уникалните цветове и шрифтове във вашите таблици със стилове. След това можете допълнително да разбиете всеки дизайн на уебсайт на отделни елементи.

4. Установете принципите на проектиране на вашата система

За да създадете отлично потребителско изживяване, е необходимо да разберете причините, които стоят зад дизайнерските решения. Освен това ясният набор от цели улеснява определянето на принципите на дизайна и координацията с екипите.

Искате да имате процес на проектиране на система? Започнете с тези въпроси:

• Какво създавате
• Защо го правите
• Как ще го изградите

Принципите на дизайна трябва да отразяват ценностите и визията на вашата марка.

5. Изграждане на библиотека от компоненти

Известна още като библиотека с модели, тя трябва да включва всички функционални и декоративни елементи на потребителския интерфейс. Преценете компонентите според проекта, нуждите на потребителите и бизнес целите и запазете тези, които са ви необходими.

6. Установяване на правила

Системите за проектиране не са създадени, за да ограничават проектантите до определена посока на проектиране. Напротив, от тях се очаква само да предоставят на дизайнерите и разработчиците фундаментална рамка, която разширява творческата посока и дава възможност за иновации.

Това са два подхода към правилата на системата за проектиране, както е споменато в книгата на Алла Холматова:

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

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

7. Изберете своя модел на управление

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

• Самотен модел - Едно лице или група лица пряко "управляват" процеса на проектиране на системата.
• Централизиран модел - един екип отговаря за системата и я направлява.
• Федеративен модел - няколко души от няколко групи ръководят процеса на проектиране на системата.

Въпреки че всеки от тези модели има своите плюсове и минуси, особено моделът на самотния служител може да доведе до това, че едно отговорно лице да се превърне в тясно място за изпълнението на много задачи. Най-добрият вариант е да използвате комбинация от различни модели в съответствие с вашите нужди.

8. Определяне на структурата на компонентите

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

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

Критерии за многократно използваеми и мащабируеми компоненти:

• Модулни - независими компоненти и взаимозаменяеми елементи.
• Композиционни - Обединявайте съществуващи компоненти, за да създавате нови.
• Възможност за персонализиране - персонализирани компоненти, които работят в множество контексти.

9. Уверете се, че всички екипи използват единен език

Целта на системата за проектиране включва улесняване на безпроблемната работа в екип. Следователно интегрирането на системата в работния процес на екипите е от съществено значение. Тя повишава производителността, като същевременно предоставя стойност на членовете на екипа.

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

10. Редовно предавайте промените

Процесът на системата за проектиране се развива заедно с организацията и не може да бъде статичен. Ето защо, след като въведете системата в организацията, е важно да съобщавате за всички промени и да държите организацията в течение.

Един кратък и добре поддържан списък с промени може да помогне на потребителите да разберат различните актуализации и как те ще се отразят на работата им.

Три примерни примера за начало

Система за проектиране Atlassian

(https://atlassian.design/)

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

Trello и Jira, два от широко използваните инструменти за съвместна работа на Atlassian, напълно отразяват философията на компанията за дизайн. Тази философия е свързана с използването на цифровия опит за повишаване на производителността и цялостния потенциал на екипите и отделните членове на екипа.

Въпреки това Atlassian Design System предлага гъвкави техники и ефективно проследяване на всеки един етап от проекта - от планирането на продукта до доставката му. Това в крайна сметка води до благоприятни резултати при създаването и доставката на продукти. Тяхната система за проектиране включва основно:

1. Насоки за проектиране
2. Стандарти на марката
3. Продукт
4. Илюстрация
5. Създаване на прототипи
6. Маркетинг
7. Личност

Система за проектиране на IBM

(https://carbondesignsystem.com/migrating/guide/design)

IBM е нагледен пример за голямо ИТ предприятие, което работи в световен мащаб и следва своя собствена система за проектиране.

Техните възможности включват всичко - от бизнес консултиране и финансиране до създаване на софтуер, ИТ хостинг/управление и решения за свързване на софтуер с хардуер.

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

Според IBM добрият дизайн е не само необходимост, но и ангажимент към потребителите. Ето някои от отличителните функции на тяхната Carbon Design System, които предоставят на разработчиците и дизайнерите, работещи с Adobe, Axure и Sketch, богат набор от инструменти и ресурси:

1. Визуализация на данни
2. Модели
3. Компоненти
4. Насоки
5. Уроци

Система за проектиране на Uber

(https://baseweb.design/)

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

Uber се нуждае от ефективен системен дизайн, за да може този тип услуга да функционира безпроблемно във всички подмарки, вътрешни марки, продукти и проекти.

Основните атрибути на Uber Design System са:

1. Архитектура на марката
2. Състав
3. Тон на гласа
4. Движение
5. Илюстрация
6. Фотография
7. Иконография
8. Цвят
9. Лого
10. Типография

Указания, които трябва да знаете, преди да създадете първата си система за проектиране

1. Ранната и ясна комуникация е вашият нов най-добър приятел

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

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

Внимавайте да не прекалявате с мисленето, да не изхабявате ума си, но не се колебайте да общувате прекалено.

2. Стъпките ви не са единственото нещо, което трябва да следите

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

Въвеждането на ежедневно статистическо събиране на данни за това кои екипи използват точно кои версии на библиотеката позволява да се разбере степента на приемане, надграждане и понижаване.

Когато идентифицирате екипите, които рядко актуализират, можете да се запознаете с проблемите, които блокират актуализирането, и впоследствие да ги отстраните.

3. Механизмите за обратна връзка са подценявани като Рейгал от ГОТ

За да гарантирате, че вашата система е не само ценна за потребителите, но и нещо, от което те се чувстват част и за което активно са допринесли, ключов елемент ще бъде наличието на прости, но ясни начини за даване на обратна връзка (Slack, имейл и др.) и допринасяне за системата.

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

Системата за проектиране е северната звезда, от която се нуждае вашата организация

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

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

Препратки

https://ionic.io/resources/articles/why-every-company-needs-a-design-system

https://www.baianat.com/books/merits-of-design-systems/design-systems-and-their-benefits

https://www.uxpin.com/create-design-system-guide/

https://builtin.com/design-ux/11-benefits-design-systems

https://elementor.com/blog/design-system/

https://www.nngroup.com/articles/design-systems-101/

https://www.uxpin.com/studio/blog/best-design-system-examples/#h-4-uber-design-system

https://www.eleken.co/blog-posts/7-design-systems-examples-for-your-inspiration

https://aufaitux.com/blog/best-design-systems/

https://www.copycat.dev/blog/design-system-examples/

https://builtin.com/design-ux/design-system

https://www.editorx.com/shaping-design/article/design-system-examples

https://medium.com/spotify-design/5-things-i-wish-id-known-before-starting-a-design-system-at-spotify-f8624abf1081