Ако работите в стартъп, агенция или продуктов екип и искате да създадете или подобрите вашата система от цветови токени, тази работилница е за вас. Тя е особено полезна, ако вашият екип инвестира в дизайн система или цели да я разшири в множество продукти или платформи.
Сесията е фокусирана единствено върху цветовите токени. Вероятно най-сложната и основополагаща категория токени. Ще разгледаме как големи дизайн системи като Spectrum на Adobe, Carbon на IBM и Material Design 3 на Google решават проблема с цветовете в голям мащаб и след това ще проучим как можете да приложите тези уроци във вашата собствена работа.
Ще започнем с кратък преговор, за да сме сигурни, че всички споделят една и съща основа. Оттам ще разгледаме как да избираме подходящи цветови пространства, да задаваме достъпни палитри и да прилагаме предстоящи промени в WCAG 3.0. Ще научите как да проектирате семантични слоеве токени, свързани с реални роли в интерфейса, да дефинирате мащабируеми конвенции за именуване и да структурирате токени на ниво компонент за гъвкаво повторно използване.
Ще обсъдим също как изглежда жизненият цикъл на цветовите токени – от въвеждането, поддръжката и оттеглянето им с течение на времето. Ще изследваме невидимата част на системата и ще разберете как да създадете документация, да определите собственост и управление, които са необходими, за да бъде вашата система устойчива с нарастването си. Накрая ще научите как да подготвите вашите токени за автоматизация и доставка на множество платформи, използвайки Style Dictionary.
Работилницата не е практическа в смисъла на “отворете си лаптопа”. Изградена е предимно от лекции, изпълнен с примери, визуални демонстрации и моменти за размисъл и дискусия. Ще има няколко интерактивни части, но истинската стойност идва от мисленето зад системата, а НЕ само от цъкането на бутони.
За кого е подходяща?
Предназначена е за дизайнери и дизайн мениджъри на средно и високо ниво, които вече работят с UI компоненти и разбират основите на дизайн системите. Ако сте младши дизайнер, който все още учи принципите на оформлението и визуалния дизайн, сте добре дошли да се присъедините, но темпото може да ви се стори бързо. Продуктови мениджъри или инженери, участващи в системния дизайн, също са добре дошли, особено ако искат да разберат по-добре логиката зад мащабируемите структури на цветови токени.
Какво ще научите?
- Основите на дизайн токените
Какво са те, как са структурирани и защо са важни. Ще разгледаме нивата на токените (основни, семантични, компонентни) и ще обясним различните типове стойности (сурови стойности, псевдоними и смесване, изчислителни, адаптивни). - Как цветовите токени се вписват в по-голямата картина
Специфичната роля на цвета в дизайн системите и защо той е един от най-трудните, но същевременно най-важни типове токени за правилното му дефиниране. - Как да изберете правилното цветово пространство
Разликите между стандартни, широкообхватни и перцептивно равномерни цветови пространства. Ще знаете кога кое да използвате и защо това е важно за гъвкавостта и достъпността. - Какви са изискванията на стандартите за достъпност днес и утре
Правилата за контраст на WCAG 2.2, как работи формулата за съотношение на контраст и как можем да манипулираме цветовете в цветовото пространство, така че да отговаряме на критериите, без да се налага да променяме значително всички цветови атрибути. Промените в WCAG 3.0 и как бъдещите стандарти ще повлияят на начина, по който изграждаме и тестваме цветови системи. - Как големите дизайн системи дефинират и управляват цветовете
Подходите на Spectrum на Adobe, Carbon на IBM и Material Design на Google към цветовите токени. Примери за това какво да адаптирате и какво да избягвате. - Как да дефинирате анатомията на добър цветови токен
Реални конвенции за именуване. Ще покажем как да избягваме двусмислие и ще обясним как токените се развиват с нарастването на системите. - Как да изградите цветова палитра, която пасва на вашия продукт
Дефиниране на адаптивни към бранда палитри, базирани на реални нужди на продукта, а не само на теория или дъска за вдъхновение (mood board). - Как да създадете семантичен слой, който има смисъл
Съпоставяне на вашата палитра с ясни роли в интерфейса (фонове, граници, повърхности и други). Ще научите как да структурирате и именувате тези токени, така че вашият екип действително да иска да ги използва. - Как да валидирате правилата на вашите цветови токени за достъпност
След като дефинираме правилата, ще преминем през работни процеси за тестване и ще видим как да вградим валидация на контраста директно във вашия дизайн процес. - Как да дефинирате цветови токени на ниво компонент
Свързване на вашите семантични токени с UI компоненти като бутони, полета за въвеждане и известия. Ще разберете как структурата поддържа консистентност и гъвкавост. - Как да поддържате вашата система от токени жива и здрава
Управление на токените. Ще научите кой какво притежава, как да преглеждате токени и как да поддържате структурата си лесна за поддръжка с нарастването на вашия продукт. - Как да автоматизирате вашия процес на работа с токени с Style Dictionary
Структурира на токените за доставка на множество платформи и поддържане на теми или бранд вариации. Ще видите как да преминете от чист JSON файл към използваеми резултати за уеб, iOS и Android.
Допълнителни ресурси, които ще получите след работилницата
Няма просто да си тръгнете с нови знания, а ще вземете със себе си практически инструментариум, който ще ви помогне да приложите тези идеи в екипа или продуктовата си среда.
- Готов за употреба презентационен комплект, който можете да адаптирате за вътрешни работилници или сесии за съгласуване със заинтересовани страни.
- Списъци с конвенции за именуване на цветови токени на основно, семантично и компонентно ниво.
- Структуриран Style Dictionary JSON файл, който поддържа износ на множество теми, брандове и платформи.
- Примерни работни процеси с токени и примери, използвани по време на работилницата, за бъдещи справки.
- Списък с инструменти и приставки, демонстрирани в работилницата, с връзки и указания за настройка.
- Речник на ключови термини и концепции, който да помогне на вашия екип да изгради общо разбиране.
Въпроси и отговори
На какъв език ще се проведе?
Ако има участници, които не говорят български, работилницата ще се проведе на английски език. В противен случай презентацията и всички дискусии ще бъдат на български, като английски ще се използва само за ключови термини и слайдове.
Защо фокусът е само върху цветовите токени?
Всяка категория токени (цвят, разстояние, типография, анимация и т.н.) има своя собствена логика, предизвикателства и най-добри практики. Покриването на всички тях в една работилница би ни ограничило до повърхностни обзори. Вместо това, тази сесия е посветена изцяло на цвета, което ни позволява да навлезем много по-дълбоко, отколкото би било възможно иначе. Цветовите токени често са първата категория, създадена в една система, и също така една от най-сложните.
Трябва ли вече да имам познания за дизайн токените?
Основното разбиране за дизайн системи ще помогне, но ще започнем с кратък преглед, за да сме на една и съща вълна.
Ще говорим ли за достъпност?
Да. Достъпността е голяма част от начина, по който се проектират и тестват цветовите токени. Ще разгледаме какво изисква WCAG 2.2 днес, но също така ще хвърлим бърз поглед към WCAG 3.0, който въвежда нови модели за контраст и потенциално големи промени в начина, по който дефинираме използваеми цветови системи.
Ами ако моят екип все още няма дизайн система?
Тогава работилницата е идеална. Независимо дали започвате от нулата или се опитвате да почистите нещо, което е нараснало твърде бързо, ще получите ясен ментален модел за това как да подходите към цвета по начин, който е мащабируем.
Това ще се приложи ли за уеб, iOS, Android и инструменти за дизайн като Figma, Sketch или Framer?
Да. Подходът, който ще разгледаме, е агностичен към платформата. Ще научите как да дефинирате токени веднъж и да ги трансформирате за множество среди, използвайки инструменти като Style Dictionary. Когато обсъждаме как се прилагат токените в инструменти за дизайн, Figma ще бъде използван за всички демонстрации.
