5 стъпки за създаване на система за проектиране

Проучвания за това как направихме нашата система за проектиране в Sketch

Conestoga College Doon Campus Design Foundation Foundation Studio

Дизайнерските системи са се превърнали в основен актив във всеки екип за проектиране и разработка. Пионери от технологични компании като Google (Материал), AirBnB, Uber и Facebook, те имат важна цел: да осигурят единно място за дигитален дизайн, включително насоки, компоненти и фрагменти от код. Те не са само за технологични компании и приложения - други, те обслужват всяка организация с цифрово присъствие. В тази публикация ще ви покажем стъпка по стъпка как създадохме нашата система за проектиране и изборите, които направихме по пътя. Ще се позоваваме на нашия продуктов кръг като пример за изграждане на нашата система за проектиране и сме избрали Sketch като инструмент за проектиране за изграждане и каталог на компоненти.

Универсалното меню на веригата

За схемата и нашите дизайнерски проблеми, предизвикателства и цели

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

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

В стремежа си да оптимизираме процеса на проектиране, решихме да приемем система за проектиране.

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

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

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

Таблица на плюсовете и минусите на дизайнерската система (диаграма, направена с нашата система за проектиране!)

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

Как да създадете и организирате система за проектиране

Ето стъпките, които следвахме, за да създадем нашата система за проектиране. Избрахме Sketch, за да създадем нашата библиотека и някои от препоръките ще бъдат специфични за нейната функционалност, но концепциите, които покриваме, са универсални. Други инструменти, които можете да използвате, включват Figma, Adobe Xd и Adobe Illustrator.

Крайният резултат може да изглежда нещо подобно.

Стъпка 1 - Одитирайте уебсайта или приложението си и направете списък

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

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

Стъпка 2 - Организиране на страници

Методът на атомния дизайн (вляво) и методът на страницата за образец (вдясно)

Независимо от избрания софтуер, вероятно ще използвате страници, за да организирате съдържанието на вашата библиотека. Има два начина да направите това. Първият е методологията на атомния дизайн от Брад Фрост, където елементите се моделират според 5 йерархични групировки: атоми, молекули, организми, шаблони, страници. Вторият метод, който ние наричаме Шаблони Страници, представя свързани компоненти в техните собствени страници като Цветове, Тип, Икони, Аватари, Бутони и т.н. пристигащи дизайнери, които да намерят конкретни парчета, но липсва структурираният поток на "атомния метод" на "градивен блок".

Как организираме нашата система за проектиране

Структурирахме нашата система, следвайки атомните принципи, въпреки че я опростихме значително. В крайна сметка завършихме с 5 основни страници:

Страница с насоки за писмена документация за обяснение на стандартите и целите на системата за проектиране.

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

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

Готовата страница със символи

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

Една от страниците на стилови ръководства

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

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

Стъпка 3 - Създайте стилове на слоеве и текстови стилове (пропуснете тази стъпка, ако нямате скица)

Слоевете и текстовите стилове са страхотни, защото ви позволяват да отменяте формите и текста, които сте свързани със стиловете по-късно.

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

Стиловете на слоя на веригата

Добавяне на стил на слой: изберете вашия обект и в панела със свойства под външния вид, щракнете върху „No Layer Style“ и „Create new Layer Style“, за да запазите свойствата на обекта.

Именуване на стилове на слоевете: как да назовете стиловете си ще определи как те се появяват в менюто (по-горе). Ако установите, че стигането до вашия стил отнема твърде много време или е трудно да го намерите, винаги можете да го промените в прозореца за стилове. Слой> Организиране на стилове на слоеве. Ето как нарекохме стиловете на нашия слой:

Circuit / цвят / Основно / син / среден

Текстовите стилове ни позволяват да запазваме свойствата на текста, включително размера на шрифта, шрифта, подравняването и т.н., и ни позволява бързо да въвеждаме или променяме текст, използван в символите по-късно. Тук вероятно ще искате да организирате стиловете си според семантичните класификации на текста на вашите уеб страници, т.е. H1, H2, H3, body и така нататък.

Текстови стилове на веригата

Добавяне на стил на текст: изберете вашия текст и в панела със свойства под външния вид, щракнете върху „Без текст стил“ и след това „Създайте нов стил на текст“.

Именуване на текстови стилове: Подобно на стиловете на именуване на слоеве. Групирахме стиловете си според H1, H2, H3, ... параграфи и всички компоненти, които се нуждаят от собствения му стил на текст.

Можете също да приложите стилове на слоеве към текстови стилове. Ето как:
Изберете текст> Слой> Преобразуване в очертания, тогава би трябвало да можете да добавите стиловете на слоя си към текст, както всяка нормална форма. Ако обаче имате много текст, извършването на това твърде много може да срине вашия Sketch или да го направи невероятно лаг.

Стъпка 4 - Създайте символи / компоненти

Това е забавната част. Обърнете специално внимание на разстоянието, оразмеряването, формите и ако е приложимо, не забравяйте да приложите текстови и слоеви стилове към отделни части от компонентите, това дава възможност за отмяна на частите по-късно. Целта е да завършите с пълна колекция от символи и компоненти.

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

Име на символа: Това ще определи как ще се появят в менюто за вмъкване. За бутон ги кръстихме като такива:

Бутон / Default / Idle
Бутон / Default / Hover
Бутон / Default / Disabled

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

Замяна на панела на компонента на картата

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

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

Винаги мащабирайте нов символ, за да тествате!

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

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

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

Макет на мобилен екран, показващ как се прилагат отмените

Стъпка 5 - Текущи актуализации на системата за проектиране

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

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

Ето няколко допълнителни съвета за скица, които да ви помогнат да управлявате системата си:

  • Създайте папки с данни, за да добавите собствена библиотека от изображения с отмяна. Имайте предвид, че ако преместите папката, ще трябва да я свържете отново. Скица> Предпочитания> Данни / Библиотека.
  • Актуализиране на библиотеката ви в други документи - известия горе вдясно → Актуализиране на библиотеката (първо трябва да запазите и затворите библиотеката)
  • Sketch API е официален, актуализиран източник за двойно проверяване на факти, тъй като понякога уебсайтовете на трети страни имат остаряла информация.
  • Източниците на SketchApp са полезно място за получаване на безплатни активи за скица

Приставките улесняват използването и организирането на вашата система за проектиране. Няколко, които обичаме в момента:

  1. Sketch Runner - използвайте клавиатурата си, за да вмъквате символи бързо!
  2. Symbol Organizer - направи страницата с вашите символи хубава и организирана, както искате.
  3. Unsplash It - добавете снимки от Unsplash.

Надяваме се, че тази статия е била полезна, за да покаже как можете да оптимизирате работния си процес с дизайнерска библиотека. Честито създаване!