У 2021 році розробили паркувальні таблички для Києва. Більше фото у альбомі (один з кількох проєктів, де я замовив фотозйомку для портфоліо). З тих пір якісь міста їх копіювали, по-своєму, якісь надихались і створювали своє бачення. Також за цей час згадували про нові паркувальні зони, але їх поки вирішили не впроваджувати.

І от Київ нарешті в кінці 2025 року вирішив оновити тарифи на паркування, а з цим привести до ладу розміри табличок. Бо дійсно, розмір інформаційних табличок задумувався такий самий, як розмір табличок до дорожніх знаків: якщо знак 600×900 чи 700×1050 мм, то таблички мають бути відповідно 600×300 та 350×700 мм, щоб лишатись в єдиному розмірі. Але у Києві чомусь зі знаками 600×900, зробили таблички 350×700 ¯\_(ツ)_/¯. Тож разом з оновленням тарифів буде оновлено і розміри.

В новій версії

• дещо підрівняли розташування елементів
• збільшили QR код на 50%, навіть в порівнянні з тим, що таблички були більші.
• перемістили блок з кодом вище всю плашку вмістили всередині білої зони, таким чином табличка візуально залишається довшою.

Q: Привіт! Хотів спитати, бо я іноді заходжу на твій сайт, і часто бачу кодінг. Як взагалі відносишся до кодінгу у дизайні? думаю, може варто вивчити щось і закодіть, бо я бачу ти часто використовуєш програмування у дизайні

A: В принципі, для дизайну, як такого, кодінг не потрібен. Це просто додатковий інструмент для спрощення деяких видів задач у повсякденній роботі. Або ж можливість самостійно можна закривати більшу частину рутини, без додаткової комунікації (комусь, як мені, це в плюс 😅).

Нижче передісторія, а зараз дизайн. Перше рішення — це розділення табличок на всіх, хто ніс службу (військових, нацгвардійців тощо), та загиблих цивільних, яких теж треба вшановувати. Звідси перше рішення — розділити візуально та використати шрифт UAF Memory для військових та загальний київський Proba Nav2 для інших.

Це виключно ілюстрація, фото та імена згенеровані

Далі також хотілося додати приналежність у символах і додавати або символ роду військ, або комбатантський хрест (загальний символ для всіх), а для цивільних просто використати малий державний герб.

Провів ще одну менторську сесію Prjctr Mentorship. Поспілкувались з дизайнером Владом Бурко, який розробляє настільну карткову гру і для якої потрібно зробити 150+ макетів карток з різними текстами та елементами.

Поділився, як зібрати все до купи, та автоматизувати дизайн у Фігмі, а також в Ілюстраторі чи Індизайні. Налаштувавши процес можна спростити перевірку, уникати ручних помилок при тиражуванні дизайну та зрештою налагодити процес обробку будь-якої кількості макетів.

За донат на ЗСУ проконсультую по автоматизації дизайну, а також по дизайну навігації, схем, створенню карт, верстці, інтерфейсам тощо.

Продовжую оновлювати схему метро. На разі виходить версія 1.11, в якій:

• перейменовані Звіринецька та Площа Українських Героїв;
• перейменована частина зупинок швидкісних трамваїв;
• Kyiv City Express: додані зупинки на кільці, додані інші напрямки приміських маршрутів і дещо змінені самі лінії;
• додані примітки про транспорт не працюючий до аеропортів (ще його можна було б прибрати, але загальні схеми зараз важче оновлювати й вони висітимуть доволі довго).

Схема метро версії 1.11, великий розмір

В рамках менторської сесії Projectr Mentorship поспілкувались з дизайнером Олександром Канським, який розробляє транспортну схему свого міста Сарни. Дуже надихають такі ініціативи та бажання покращити своє місто.

За донат проконсультую по дизайну навігації, схем, карт, а також по верстці, інтерфейсам, автоматизації дизайну чи навіть обговорити.

Oе один приклад етичності в роботі дизайнера та відчуття справжності.

Сіль «Міць». Думаю багато хто бачив цей кейс від Сільпо, лімітована серія солі з Артемсолі (вже знищена). 500грн , гроші з продажу ідуть в United24 на дрони.

Ілюстрацію створив український дизайнер Артем Гусєв, а тут її офіційно використали для паковання. І саме паковання створене з увагою до деталей і нагадує оригінальну сіль.

Сіль «Воля». А цей приклад я побачив пізніше в Новусі. І це виглядає, як Абібас — дешева китайська копія першої: в матеріалах, формі, назві та ілюстрації. Навіть не знаю, хто вирішив застрибнути у цей потяг і зробити свою версію. Як на мене це не справжнє, обман. І ціна 200 грн додатково додає відчуття чогось дешевого.

У Києві є такий невеликий і скромний, проте дуже затишний і камерний Сирецький дендропарк. І я там побачив деталь, яка мене зачепила — на деяких рослинах були чорні таблички з назвами, які були намальовані від руки. Решта табличок були вже просто друкованими та на стійках.

Літери на цих чорних табличках були дуже гарні та приємні, написані явно з почуттями. В цих, на відміну від друкованих, хоч і написані лише назви, але відчувається справжність. А розміщення не на стійках, самих деревах робить їх нюансними не нав’язливими деталями.

Полюбляю малювати літери і виникла така ідея-концепт, натхненний малюнком українського авангардиста Василя Єрмілова (остання картинка). Потенційно з цього вийшов би яскравий і різноманітний стиль для ботанічного саду.

Ескізи

Бувають дуже гарні та цікаві проєкти самі по собі, але спільнота чи окремі автори настільки звеличують цю ідею, що це починає викликати відразу та нагадувати клуб міських божевільних.

Так і проєктом Рутенія. Цей проєкт є дуже цікавим дослідженням історії кирилки та заслуговує на відзнаки. Але є автор і спільнота навколо нього, які згодом почали критикувати абсолютно всю сучасну кирилку, яка не є Рутенією, та називати все це «московськими шрифтами» усіляко зневажливо на це вказуючи авторам українських шрифтів (зустрічав і такі коментарі пана Чебаника). Хоча сучасна кирилиця не є московською, а Рутенія не є єдиновірної графікою української мови.

Поговорили з Кирилом Онацьким (робив концепт бренду Житомира) про те, як дизайн впливає на місто, навіщо містам брендинг та трохи про автоматизацію дизайну.

Спочатку брендбуки були паперовими фізичними виданнями, де на сітці малювали логотипи, щоб потім інші по сітці могли їх відтворювати. Потім з появою комп’ютерів брендбуки стали цифровими, але так і лишились у вигляді зверстаного PDF + додаткової теки десь у хмарі зі всіма матеріалами. Буває так що іноді частина матеріалів губиться і нові працівники не завжди знають, що і де було, залежно від ступеня безладу у компанії.

Просунуті компанії всі ці матеріали викладають десь на своєму сайті на окремому піддомені та просто дають посилання. Подекуди стайлгайди роблять у Фігмі та дають посилання на цей робочий файл.

Влітку 2021 року на прохання Віталія Селика розробив знак для місць паркування електросамокатів. Київ тоді як раз підписав меморандум зі всіма сервісами прокату самокатів, щоб вони розміщували та збирали самокати у таких точках і щоб вони не були розкидані по всіх вулицях. Наживо побачив їх тільки під кінець року і тільки в центрі, а наскільки їх розповсюдили далі не знаю.

Завантажити значок у PDF, EPS або SVG: https://www.dropbox.com/sh/dswdaranqxvkoex/AADJS8oSobOgtJ2ONy55d-eVa?dl=0

Вважаю однією з перемог це зміна дорожнього шрифти, який увійшов у новий ДСТУ 4100 в 2021 році. Пам’ятаю нерозуміння частини людей дотичних до проєкту (особливо з ДержЖорНДІ, які саме розробляють дорожні стандарти) навіщо змінювати шрифти. Аргументи були, що той шрифт вже багато років існує, люди до нього звикли і зміна може бути навіть небезпечною та створювати ДТП.

Таке враження, ніби існує «презумпція нормальності» тих норм, що існують, і їм ніякі докази не потрібні. І не важливо, чи було щось розроблено 50+ років тому.

Чогось через цю новину всі дизайнери шуткують, що тепер і Фігма почне вилітати, як всі програми Адоб. Хоча насправді може ця співпраця тісніше інтегрує Фігму в усю екосистему Адоба і можна буде швидко переносити та підключати psd чи ai файли у Фігму, користуватись всіма шрифтами з бібліотеки чи адобівським фотостоком. Або у Фігмі зроблять нормальну роботу з друком та CMYK, що дозволить робити там крім інтерфейсів і багато друкованих макетів.

Порівняння відстаней, з яких зчитуються різні форми стрілок. Найбільш розпізнавані з більшох відстані — шевронні стрілки с широкими «вусами».

2004 рік. Джерело: https://www.researchgate.net/publication/245560609_New_Font_and_Arrow_for_National_Park_Service_Guide_Signs

Взагалі у стрілок є два важливі параметри, які впливають на їхню читабельність:

• Ніжка має бути довшою за кожне «вусо», стрілка стає більш видовженою і цим підказує куди вона повернута.
• «Вуса» мають явно віступати від ніжки, тоді при розфокусованому зорі буде видно, де більша візуальна маса і де напрямок.

Навіяно вчорашнім постом про відкриття відремонтованого виходу на Позняках коштом приватного інвестора.

Як написали у комментарях про цей дивовижний кейс столиці з 70 міліардним річним бюджетом:

Знадобився цілий Dragon Capital щоб прибрати два кіоска і обшити вагонкою стіну біля входу в перехід. Неймовірно)

А якщо бути душнілою, то варто зазначити, що окрім мафів там взагалі-то був інформаційний знак, який казав що це не просто метро і просто Позняки, а що це зелена гілка М3 та був вказаний номер виходу, який важливий для орієнтування, а також повністю відсутня транслітерація, яка має допомагати іноземцям.

Взяв участь у Марафоні Креативної практики від Cases на підтримку ЗСУ, та записав лекцію про автоматизацію дизайну, дизайн-конвеєр та можливість створювати масовий дизайн. А взагалі це про підвищення власної продуктивності і цінності, як спеціаліста.

По-перше, в основі продуктивної роботи лежить просунуте знання можливостей робочих інструментів (як і що робити швидше), вивчення нових інструментів у зв’язці з робочими (гугл-таблиці, термінальні команди тощо) та створення своїх інструментів під задачі (форматування даних, генератори макетів тощо). Розповідаю на прикладі дизайну паркувальних табличок та інших навігаційних проєктів, в яких кількість макетів легко може сягати 500+ шт.

Старий пост, написаний для блогу Агентів змін.

Пост навіяно черговим голосуванням вже Полтавської САД за запропоновані варіанти дизайну знаків на в’їзді у місто. Але за останні роки таких прикладів можна назбирати безліч: від вибору логотипів міст до вибору ліврей поліцейських машин. І кожен раз можна побачити схожу картину: запускається голосування, починається шквал критики у соцмережах, голосування або припиняється або завершується, але і організатори і коментатори вважають іншу сторону мудаками, які нічого не розуміють, а у публічному просторі з’являється не завжди гарний дизайн.

Є річ, яка має бути у кожному публічному приміщенні — плани евакуації при пожежі. Ви напевно бачили такі, на них зображують план приміщення та купу стрілок з кімнат до коридорів, а потім до виходів.

Проблема

Основна проблема — майже всі плани зроблені «для галочки», бо їх вимагають пожежники. Наявність планів обов’язкова по стандартах. Чому «для галочки»:

• плани ніколи не показують ваше точне місце розташування, по них не можна скласти маршрут;
• купа стрілок у різні боки, які нічого не скажуть про потрібний напрямок;
• на планах забагато зайвого — якісь елементи конструкцій, меблі та інше, що не допомагає орієнтуватись;
• плани у різних будівлях виглядають по різному, хоча їх вигляд та візуальна мова має бути знайомою та зрозумілою (як ті самі дорожні знаки).

Щоб зрозуміти, що зайве, варто замислитись у який ситуації має працювати цей план. 99% часу він просто десь висить у будівлі та стає потрібен вже під час виникнення пожежі та екстреної ситуації. Це вже критичні та стресові умови сприйняття інформації, до цього можуть додаватись ще погане або відсутнє освітлення, задимлення тощо. Тож на сприйняття інформації є досить мало часу. І щоб допомогти у такій ситуації план має:

У продовженняпопередньої теми: коли ми отримуємо безліч макетів, то для кращого орієнтування їх потрібно зрозуміло всі переназвати.

Стандартний інструмент МакОС дає можливість дуже обмежено або замінити частину назви або задати у певному форматі. Але ця функція не гнучка.

Automator

Наприклад, для паркувальних табличок логічним був би формат

А1001

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

Під час роботи над плакатами про ремонт у метро постала задача: як можна зробити так, щоб у метро самостійно могли робити плакати, коли їм потрібно бо ремонт може бути у будь-який день, але при цьому проконтролювати, щоб початковий дизайн плакату лишався без змін (не стискали чи змінювали шрифти та відступи тощо)?

Першою думкою було передати PDF, який можна редагувати у тому ж Adobe Acrobat. Але для цього у метро має бути цей софт та і редагує він криво, то ж цей варіант теж не ок.

КМДА вчора оголосила підвищення цін за паркування та запуск інспекторів, що має кардинально покращити ситуацію з паркуванням в центрі та прибрати незаконних паркувальників «за готівку».

Ми разом з Олександром Зайцевим зробили дизайн нових інформаційних табличок про оплату паркування та дизайн лендингу, на якому скорочено і доступно все пояснено по паркуванню. З початку роботи ще до виходу таблички пережили кілька великих змін: спочатку туди інтегрувалася оплата на той час KyivSmartCity, потім було його оновлення до Київ Цифровий, потім змінювалися тарифи та умови, а кінці ще додали англійську мову, щоб зробити інформацію доступною й іноземцям.

Взимку Сергій Родіонов та Богдан Логвіненко з Ukrainer розповіли ідею зробити і надрукувати якусь нову більш естетичну адміністративну мапу для школярів, яка була б кращою за те що можна побачити. І дійсно, якщо пошукати адміністративні карти, то можна побачити якісь строкаті мапи, з насиченими, але не яскравими кольорами, купою різних шрифтів та безліччю зайвої інформації, яка тільки шумить. В окремих випадках розташування інформації були таким, що можна було зустріти скорочення назв міст, бо вони не вміщалися всі (особливо на сході країни). Всього цього хотілося уникнути та створити щось нове. 

У контексті автоматизації таблиці можна застосовувати для переформатування (роз’єднання та з’єднання тексту, заміна тексту іншим і так далі) вхідних даних у необхідному вигляді для подальшої роботи у Data Merge в InDesign, JSON для використання на сайтах, консольних командах тощо.

Найцікавіші функції у Google Sheets:

• CONCATENATE — об’єднання текстів з різних комірок та з заданим вручну текстом. Наприклад, CONCATENATE (A1;"-";B1;".svg") візьме текст з A1, додасть дефіс, додасть текст з B1 та в кінці додасть «.svg».
• JOIN — схоже на CONCATENATE, об’єднає два тексти з вказаним розділювачем між ними. Наприклад, JOIN("–";A1;B1) візьме текст з A1, додасть два дефіси та додасть текст з B1.
• SPLIT — розділить текст у комірці на кілька частин по вказаному символу-розділювачу. Наприклад, SPLIT(B3; “-”) розділить текст з комірки B3 на дві частини: ліворуч від дефіса “-” та праворуч від нього. Розділені дані будуть у кількох комірках праворуч від комірки з формулою.

У минулому пості я згадав книжку «Основи ергономіки» Панеро та Зелника. У мене є лише її скан, тож ділюся всією книжкою (PDF, 210 МБ).


Та обрав кілька цікавих розворотів звідти, які були корисні в роботі: рівень очей, зріст та кути зору. Для дизайну навігації це допомагає зрозуміти, які габарити будуть комфортними для сприйняття різними людьми.

Так ми колись дивились, які розміри більше підходять для інфостендів, які має бути зручно читати з відстані ~80–100 см: верхня точка — 2000 мм, нижня — 750 мм (а краще 900 мм). Все що вище або нижче читати буде незручно.

Дизайн документів взагалі не пахане поле. Ось Микита Підгайний, який пропагує видалення беззмістовної юрні у юридичних документах, у своєму каналі написав про таку дрібничку, як написання IBAN.

Дійсно дуже складно уважно сприймати таку кількість цифр без додаткових розділювачів. Дійсно потрібно розглянути сценарії використання цього коду. Його можуть:

• копіювати та переслати бухгалтерам чи юристам;
• копіювати та вставляти у клієнт-банк для оплати;
• набирати вручну з роздрукованого договору.

Найпростіший варіант був би, як з номерами телефонів чи банківських карток, — набирати з пробілами. Але якщо такий код скопіювати, то не всі клієнт-банки його сприйматимуть. Авжеж це задачі розробників клієнт-банків зробити нормальний парсер, але маєво що маємо. Тож пробіли — не варіант.

Sublime Text — дуже потужний текстовий редактор, в якому я постійно пишу код. Є купа доповнень, які дуже просто встановлюються через вбудований Package Control та запускаються через вбудований командний рядок (⌘⇧+P). Окрім кодингу активно користуюсь, коли потрібно щось робити з текстом.

Інтерфейс Sublime Text

Написання купи рядків однакового змісту за допомогою мультикурсорів. Наприклад, маємо купу однакових імен файлів або перелік текстових рядків і потрібно в них всіх щось дописати.

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

Якщо дія разова, то пошук рішення та автоматизація може зайняти набагато більше часу, тому може здаватись недоцільною. Але, якщо щось потрібно зробити три рази, то велика ймовірність того, що потрібно буде робити і четвертий, а може і більше.

Додаткова перевага автоматизації: чим більше робить машина, тим менше місця для помилок людини.

Для чого потрібні піктограми? Вікіпедія нам каже, що це умовний малюнок із зображенням будь-яких дій, явищ, предметів і т. д.

Дві основні задачі піктограм:

1. Бути зрозумілою. На відміну від логотипів, чим більш впізнаваний образ на піктограмі, то більша ймовірність, що її правильно зчитають.
2. Зчитуватись. Піктограми разом із текстом часто зчитуються у поганих умовах і впізнавана форма самої піктограми дуже допомагає її зчитати.

Тож не варто використовувати піктограми на плашках, бо форма плашки нівелює форму іконки. Наприклад, якщо у нас є види транспорту, то основні їх відмінності у деталях (у тролейбуса зверху роги, у залізниці знизу колії, у трамвая пантограф зверху та рейки знизу).

У Львові затопило вулицю Франка і три трамваї змінили свої маршрути. Але Львівелектротранс ніяк про це комунікував на зупинках, тому небайдужий пасажир самостійно зробив і розмістив об’яви про це. Він молодець, ЛЕТ — ні. 

У коментарях до посту я сказав, що це добра спроба, але для немісцевого пасажира. Що я, як немісцевий, бачу на плакаті:

У нашому метро на кожній платформі висять таймери, які показують коли поїхав потяг. Пасажирам ця інформація завжди здавалася дивною, бо не несе для них ніякої користі. Насправді ж ці таймери для машиністів. Але виникає питання нащо вони такі великі, бо можна ж було встановити малі та біля кабіни машиніста, щоб тільки він бачив. Тим паче, що за кордоном у багатьох метрополітенах є таймери, які показують час до наступного потяга. І це як раз зручно, оскільки дає можливість планувати подорож та має заспокійливу дію, оскільки точно знаєш коли поїзд приїде.

Укрзалізниця на днях запустила ще одну електричку Тарасівка—Вишневе—Київ у рамках свого проєкту Kyiv City Express. Це добра новина, транспортне сполучення з супутниками Києва не найкраще. Але поговоримо про дизайн у контексті цієї новини. Мою увагу привернуло фото з салону, на якому видно схему маршруту.

Наявні схеми

Що можна побачити на цій схемі?

• Цікавий номер маршруту S5. Здається, не вистачає загальної схеми, щоб зрозуміти, які ще є маршрути. В ідеалі інтегрувати їх у схему швидкісного транспорту. Підкажіть, якщо хтось розумію всі нові маршрути.
• Немає трансліту та перекладу всіх назв.
• Білий текст на жовтому зовсім неконтрастний.
• Сумнівний вибір жовтого кольору для лінії, який схожий на колір міської електрички на інших схемах. Краще було б обрати колір, який би відрізнявся від інших кольорів міського швидкісного транспорту.
• Назви зупинок написані всіма великими літерами та під кутом, це погіршує зчитування, при цьому нічого не заважає написати їх рівно.
• Піктограми іншого транспорту в колах схожі одна на одну. Та і позначення всіх автобусів викликає сумнів: для тих, хто вперше їде, номери ні про що не говорять без опису маршрутів, тож достатньо вказати швидкісний транспорт.
• Номери маршрутів електрички зайві, оскільки вони обидва рухаються по колу, просто в різні боки.

У своїй роботі ми завжди дотримуємось принципів універсального дизайну, основний з яких — рівність та доступність використання. Тому у цій статі опишемо, як можна перевіряти дизайн та кольори на доступність для людей із порушенням зору.

Дальтонізм

Близько 8% чоловіків та 0,5% жінок народжуються з одним із видів дальтонізму. Тому будь-які макети треба перевіряти на доступність при кольоровій сліпоті, особливо, коли одночасно використовуються червоний та зелений кольори.

Adobe

У Adobe Photoshop, Illustrator та InDesign є вбудована функція перевірки макетів на два найпоширеніші види кольорової сліпоти: View / Proof Setup / Color Blindness Protanopia та Deuteranopia type. Для комфортної роботи можете додати гарячу клавішу для ввімкнення цих режимів у Edit / Keyboard Shortcuts.

Для Sketch існує безліч різних плагінів: як великих, так і зовсім невеликих. Великі плагіни впроваджують власні механізми для оновлення, а за оновленнями дрібних плагінів стежити досить складно. Ручне оновлення — це біль.

В інтернеті знайшов цікавий спосіб оновлювати плагіни за допомогою git. Працює тільки для плагінів, які розміщені на GitHub, тому потрібно мати там акаунт.

Все дуже просто:

1. Спочатку потрібно встановити плагін за допомогою git-клієнта у папку плагінів: ///Users/YOUR-ACCOUNT-FOLDER/Library/Application Support/com.bohemiancoding.sketch3/Plugins///
2. Оновлювати плагін за допомогою кнопки Pull у git-клієнті

Установка покроково

Створіть акаунт на GitHub.