Метод підійде не тільки для Фігми, але і до будь-яких екранних редакторів, які не прив’язані до фізичних розмірів (міліметрів, дюймів тощо).

Дисклеймер: винесемо за дужки передачу кольору. Для друку потрібна колірна модель CMYK, а «екранні» редактори заточені лише під роботу з екраном і працюють у RGB/HSB/HSL/Lab та інших адитивних колірних моделях. Але це не завжди буває критично: або можна перевести у CMYK картинку пізніше, або ж при використанні цифрового друку колір буде конвертувати вже сама машина/принтер або друкарі.

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

Тому далі виникає таке поняття, як роздільна здатність (DPI) — кількість точок фарби на лінію довжиною 1 дюйм (25,4 мм). І коли маємо фіксовану кількість пікселів в картинці, то фізично ми її можемо стиснути до меншого розміру і тоді кількість пікселів на дюйм збільшиться. Або ж розтягнути і кількість пікселів на дюйм, навпаки, зменшиться.

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

• ширина (мм) * роздільна здатність (DPI, точок на дюйм) / 25,4 (міліметрів у дюймі) = ширина (px, округлити до більшого цілого)
• висота (мм) * роздільна здатність (DPI, точок на дюйм) / 25,4 (міліметрів у дюймі) = висота (px, округлити до більшого цілого)

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

Наприклад, для друку у книжку потрібно зробити картинки. Зазвичай мінімальний потрібний DPI — 300. Якщо маємо формат сторінки книжки 205×290 мм. Тож гарна картинка на всю сторінку має бути 2422×3426 px (відповідно, на розворот має бути вдвічі більша ширина).

Розрахунок:

• ширина = 205 мм * 300 DPI / 25,4 = 2 421,2598425197 px = 2422 px
• висота = 290 мм * 300 DPI / 25,4 = 3 425,1968503937 px = 3426 px

Допоміжним інструментом буде цей калькулятор роздільної здатності — Pixelcalculator.

У яких сценаріях це може бути корисно: ілюстрації для друкованих видань, макети наружної реклами (в якій DPI можуть варіюватись від 56, 72 до 300) тощо.

Розрахунок масштабу картинок

Ще один метод застосування розрахунків не тільки для Фігми — можливість порахувати необхідний DPI для підготовки вихідних картинок, якщо масштаб макету відрізняється.

Наприклад, вам потрібно зробити білборд 5700×2800 мм, а Ілюстратор донедавна не підтримував дуже великі артборди, тож макет робить, наприклад, у масштабі 1:20 — 285×140 мм. Щоб на виході отримати TIF реального розміру до потрібно вказати при експорті збільшений DPI.

1) Рахуємо розмір потрібної для друку картинки:

• 5700 * 72 / 25,4 = 16158 px
• 2800 * 72 / 25,4 = 7938 px

2) Рахуємо тепер у зворотному напрямку, який DPI потрібно вказати при експорті:

• 16158 px * 25,4 / 285 mm = 1440 DPI
• 7938 px * 25,4 / 140 mm = 1440 DPI

Плагіни для Фігми

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

• Print for Figma: плагін, що допомагає створити артборди, які б відповідали фізичним аркушам, а також автор розробляє експорт у CMYK.
• Unit converter: простий калькулятор для переводу міліметрів у пікселі та навпаки.
• DPI2Pixel: створює артборд по заданих у міліметрах розмірах.

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

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

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

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

Далі елементи:

1. Прив’язка до місця, або ж чому саме тут встановлена ця табличка.
1.2) Нагороди та відзнаки.
2. Ім’я та прізвище.
3. Позивний і підрозділ для військових.
4. Вік людини. Знову ж зоб уникнути суто похоронного формату «дата народження — дата смерті», додатково це дає осягнути не просто дати, а наскільки молоді були люди.
5. Додатковий текст про обставини смерті.
6. Ще є місце під QR та короткий лінк, якщо вони будуть.
7. Фото. Дуже хотілося уникнути формату з фото в рамці чи обрізане десь по центру, бо вони дуже нагадують надгробки, натомість за прикладом Дніпра, більш людяно виглядають фото до краю формату. Але з точки зору графіки це має бути не фотозображення, а адаптована під гравіювання графіка.



Розміри та шрифти

Завантажити PDF з правилами

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

Роздрукував кілька розмірів, приміряв на будинках, розміри вийшли 570×300 мм з фото та 400×300 мм без фото.

Тестування

Передісторія

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

Запропонований вигляд табличок департаментом архітектури КМДА

Меморіальні таблички Львова

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

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

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

1. Чи буде хтось весь процес адмініструвати? Бо так простіше буде контролювати, щоб всі таблички були однакові. Якщо затвердити просто стандарт і дати всім з ним працювати, то вийде, як з адресними покажчиками в Києві, які масово роблять не за правилами та не з тих матеріалів. Якщо контролювати ніхто не буде, то хоча б можна зробити сайт на якому можна згенерувати макет.

2. Технологія та матеріали. Або закласти щось максимально вживане, або треба пошукати щось якісне і естетичне на вигляд. У Дніпрі от обрали гравіювання на 4 мм алюмінії з заливкою фарбою. Має гарний вигляд, максимально довговічне, і не ржавіє/зеленіє з часом, на відміну від латуні. Той самий приклад з Києвом: є затверджені матеріали, але масово роблять не так і ніхто не контролює, тому по Шевченківському району купа пласких табличок з композиту, а не металеві.

3. Елементи на самій табличці:

• Що таке «info info»? Яка інформація передбачається? В якому вигляді? Чи буде це стандартизовано чи модеруватись (явно ні)? Що важливо вказувати про людину?
• Точно мають бути два формати з фото і без, бо фото буде не у всіх.
• Фото. Потрібен загальний, бажано монохромний стиль. І ще це залежить від бажаної технології нанесення зображення. Далі мають бути критерії як фото відбирати і як готувати. Це не описано.
• Далі питання чи таблички тільки для військових, чи також для працівників ДСНС або цивільних. Від цього залежить, що краще вказувати у тексті. Якщо мова про військових, то бажано і символіку і стиль ЗСУ брати за основу, щоб був єдиний стиль по країні + для них важливе вказання підрозділу та позивного. Для решти можна придумати більш загальний.
• QR-код. Перед тим як вводити на табличку код, то має бути якесь єдине місце/сайт, на який посилатись і на якому буде інформація про людину. Звідси випливає, що хтось має модерувати цей ресурс та оновлювати. Інакше на табличках надовго лишаться неробочі коди.


Тож отримавши матеріали та поставивши питання «в повітря» (чого так — питання філософське), я взявся подумати, як би робив на свій розсуд.

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

Приклад таблички, які встановлюють у Києві

Інші приклади

Дніпро

У Дніпрі затвердили нещодавно і вони провели рік, шукаючи гарний матеріал і технологію (алюміній з гравіюванням). Автори — Dnipro.design, t.me/dniprodesign

Розпорядження: 27-13/2, 13.02.2024 Про затвердження вимог щодо зовнішнього вигляду меморіальних дощок загиблим внаслідок російської агресії

Вигляд табличок

Матеріали

Івано-Франківськ

У Франківську почали робити таблички набагато раніше, з часів АТО. Виготовляються з фотоскла (скло з друком) та мають єдиний вигляд.

Хочу поділитись гарним прикладом небайдужості. В каналі Urban Rail побачив картинку яка нагадувала суміш плаката метро та стилю УЗ, в якому доволі зрозуміло було написано, коли буде відбуватись ремонт колій і як зміниться розклад. Я спитав і в метро, і в УЗ, чи вони робили, але всі здивовано сказали ні.

І от в коментарях нещодавно написав автор, який самотужки просто взяв і переверстав оголошення, як пише «на телефоні». Вийшло чітко, зрозуміло і людяно, у порівнянні з оригіналом.

Зверніть увагу:

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

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

Трамвай

Також Олександр поділився плакатами, які робив під час ремонту трамвая у 2020-2021 роках. Навіть чорно-біла роздруківка виглядає, як повідомлення, на відміну від полотна тексту.

Фото

Правила гарної комунікації

Зміни у роботі транспорту неминучі, і пасажири заслуговують зрозумілої комунікації. Якщо коротко, то основні правила гарної комунікації:

1) Що відбувається? Це основне повідомлення у заголовок, коротко, крупно.

2) Чому? Далі можливо дати трохи більше контексту і пояснень, з меншим акцентом. Це дає людям більше розуміння, чому зміна роботи вплинула на їхнє переміщення.

3) Що робити? Коли вже зрозуміло, яка зміна, то додатково варто підказати, що ж зараз робити. Якщо зміна руху, то якими маршрутами скористатись. Якщо ремонт виходу — показати схематичну карту, як тепер йти.

4) Перепросити і показати, що. Якщо є варіант дати якийсь бонус за цю незручність, то це буде плюсом. Наприклад, безкоштовний квиток на проїзд.

5) Додатково: загальний вигляд має підказувати про що повідомлення. Діагональні жовто-чорні смуги виділяють в просторі це повідомлення, а відносять повідомлення до теми ремонту, як стрічки, якими огороджують місця ремонту.

І головне, в комунікації має бути повага до пасажирів/клієнтів та турбота. Це авжеж потребує зусиль, але формує довіру до транспорту і в решті міста.






Гарний приклад, як можна взяти? зробити інакше і гарно.
Автори: Dnipro.design, @dniprodesign

Фото з міста

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

З цікавого:

• Код вже містить високий рівень корекції помилок 23% (якщо майже чверть даних була знищена, ці коди все ще можна зчитувати). Для порівняння звичайний QR за замовченням має 7%, а більший захист потребує більшої кількості модулів.
• Код не потребує безпечної зони навколо.

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

Приклад ацтекського коду в Amazon Go