Forwarded from Эникрафт
Генераторы для
Дизайн-кода
ЕКАТ
ЕРИН
БУРГА
Мы начали создавать генераторы несколько лет назад. Одним из наших первых проектов были генераторы для «Дизайн-кода Екатеринбурга» — команды энтузиастов, которая развивает дизайн своего города.
«Дизайн-код» разработал универсальные и адаптируемые шаблоны адресных табличек и панелей с названиями остановок, а мы упаковали их в простые генераторы. С тех пор в городе появляются только правильные макеты без единой ошибки.
Без генератора пришлось бы по старинке писать гайд и передавать все файлы для работы подрядчикам. По пути всё потеряется и люди сверстают макеты по-своему.
С генератором не нужно писать гайды и передавать файлы на производство. Правильный макет можно получить на сайте в пару кликов. Никто не тратит лишнее время и не делает ошибок. Ну просто мечта!
Вот они, наши красавцы:
Генератор адресных табличек
Генератор панелей с названиями остановок
Владислав Деревянных, сооснователь и куратор «Дизайн-кода Екатеринбурга», бренд-дизайн директор РА «Восход»:
______
Хотите внедрить такие генераторы для своих задач? Напишите нам на [email protected] — обсудим детали!
🇷🇺 💚 💚 🇷🇺
Дизайн-кода
ЕКАТ
ЕРИН
БУРГА
Мы начали создавать генераторы несколько лет назад. Одним из наших первых проектов были генераторы для «Дизайн-кода Екатеринбурга» — команды энтузиастов, которая развивает дизайн своего города.
«Дизайн-код» разработал универсальные и адаптируемые шаблоны адресных табличек и панелей с названиями остановок, а мы упаковали их в простые генераторы. С тех пор в городе появляются только правильные макеты без единой ошибки.
Без генератора пришлось бы по старинке писать гайд и передавать все файлы для работы подрядчикам. По пути всё потеряется и люди сверстают макеты по-своему.
С генератором не нужно писать гайды и передавать файлы на производство. Правильный макет можно получить на сайте в пару кликов. Никто не тратит лишнее время и не делает ошибок. Ну просто мечта!
Вот они, наши красавцы:
Генератор адресных табличек
Генератор панелей с названиями остановок
Владислав Деревянных, сооснователь и куратор «Дизайн-кода Екатеринбурга», бренд-дизайн директор РА «Восход»:
Человеческий фактор — главный враг продуманного дизайна. Можно создать идеальный продукт, но в чужих руках его обязательно «улучшат» на свой вкус.
Но выход есть — исключить человеческий фактор и доверить всё машине. Она сделает всё строго по алгоритму, без самодеятельности.
Наша команда «Дизайн-кода» первой применила автоматизированный подход для городских объектов. Сегодня наш опыт переняли несколько городов, и мы этому рады.
______
Хотите внедрить такие генераторы для своих задач? Напишите нам на [email protected] — обсудим детали!
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥8👍4🤩2
👆👆👆
Про создание генератора адресных табличек для Екатеринбурга я уже рассказывал тут. Но сегодня хочу обратить внимание на такой момент.
Для каждого дизайн-кода города, общественного пространства или для дизайн-системы (или как это называется?) дизайнеры создают подробный гайд, как применять созданный дизайн в различных условиях. Команда дизайн-кода Екатеринбурга тоже сделала подробное руководство. И не только по адресным табличкам, но и другие. И все эти руководства опубликованы на сайте: https://guides.ekaterinburg.city/ — взгляните, сколько внимательной и кропотливой работы!
Но с адресными табличками вышло так, что этот гайд, можно сказать, «больше не нужен» 🥹. Потому что для создания любой адресной вывески: современного или исторического здания, подъездной таблички — используют онлайн-генератор, в котором реализованы все возможные комбинации текста и чисел. Достаточно выбрать улицу и ввести номер дома. Готово!
Я даже не поленился и посчитал объём руководства по дизайну, получилось около 80 изображений и 6800 символов (без пробелов). На самом деле там описаны не все ситуации, в онлайн-генератор заложено 215 комбинаций :))
В общем, делайте онлайн-генераторы PDF-макетов для масштабирования дизайна! Дизайнеры должны заниматься творчеством, а не рутиной.
Про создание генератора адресных табличек для Екатеринбурга я уже рассказывал тут. Но сегодня хочу обратить внимание на такой момент.
Для каждого дизайн-кода города, общественного пространства или для дизайн-системы (или как это называется?) дизайнеры создают подробный гайд, как применять созданный дизайн в различных условиях. Команда дизайн-кода Екатеринбурга тоже сделала подробное руководство. И не только по адресным табличкам, но и другие. И все эти руководства опубликованы на сайте: https://guides.ekaterinburg.city/ — взгляните, сколько внимательной и кропотливой работы!
Но с адресными табличками вышло так, что этот гайд, можно сказать, «больше не нужен» 🥹. Потому что для создания любой адресной вывески: современного или исторического здания, подъездной таблички — используют онлайн-генератор, в котором реализованы все возможные комбинации текста и чисел. Достаточно выбрать улицу и ввести номер дома. Готово!
Я даже не поленился и посчитал объём руководства по дизайну, получилось около 80 изображений и 6800 символов (без пробелов). На самом деле там описаны не все ситуации, в онлайн-генератор заложено 215 комбинаций :))
В общем, делайте онлайн-генераторы PDF-макетов для масштабирования дизайна! Дизайнеры должны заниматься творчеством, а не рутиной.
🔥10❤4
Переименовал канал (раньше он был AdobeScript). Ну потому что уже давно я занимаюсь не только скриптами в Адобе.
Точнее даже так: мы стараемся всё делать в вебе, и используем Адоб Индизайн или Иллюстратор только при острой необходимости (когда клиент там работает).
С момента первой версии JP — генератора PDF-файлов — он круто прокачался и по возможностям, и по скоростям.
Вот, например, генератор визитки в вебе — https://autocraft.app/example/vcard
Кажется, примитивный случай, но посмотрите, что в этом примере работает «из коробки» в браузере без сервера:
— цвета в CMYK, миллиметры, куар-код с электронной визиткой vCard (можно рисовать любую форму в точках или углах куара);
— 2-страничный макет, оборотная сторона может быть вертикальной (или другого размера);
— все шрифты в кривых (в свойствах PDF-файла вы не найдёте следы шрифтов);
— вы можете загрузить свой PDF-файл в качестве логотипа (можно даже только что скаченную визитку снова вложить в новую визитку, как на картинках).
Далее опции посложней, не совсем очевидные:
— движок сам нарисовал форму ввода и следит за обновлением данных (но можно сделать свой интерфейс и контролировать данные перед генерацией),
— должность в визитке всегда под именем, даже если имя написано в одну или три строки (привязка элементов друг к другу);
— один из шрифтов был создан автором из вариативного, и при кривлении в Фигме в углах образовывались «дыры» в заливке, а тут всё хорошо;
— превью каждой страницы PDF-файла выведено на отдельные PNG-картинки, то есть это не HTML+CSS примерный вид файла, а реальный и контролируемый вид;
— работает условный шаблон, то есть шрифт и цвета визитки зависят от выбора в селекте; причем это не какой-то кастомный JS-код, а генератор обрабатывает условия и меняет цвет.
На самом деле движок уже умеет и RGB-цвета делать, или делать CMYK-файлы с превью в RGB-цветах. Или можно подключить Гугл-таблицу и скачать сразу сотню файлов. Или класть в PDF-файл картинку, а не только PDF.
Но это уже темы для следующих постов. И картинок будет больше, потому что без картинок автоматизация дизайна как-то скучновата.
Точнее даже так: мы стараемся всё делать в вебе, и используем Адоб Индизайн или Иллюстратор только при острой необходимости (когда клиент там работает).
С момента первой версии JP — генератора PDF-файлов — он круто прокачался и по возможностям, и по скоростям.
Вот, например, генератор визитки в вебе — https://autocraft.app/example/vcard
Кажется, примитивный случай, но посмотрите, что в этом примере работает «из коробки» в браузере без сервера:
— цвета в CMYK, миллиметры, куар-код с электронной визиткой vCard (можно рисовать любую форму в точках или углах куара);
— 2-страничный макет, оборотная сторона может быть вертикальной (или другого размера);
— все шрифты в кривых (в свойствах PDF-файла вы не найдёте следы шрифтов);
— вы можете загрузить свой PDF-файл в качестве логотипа (можно даже только что скаченную визитку снова вложить в новую визитку, как на картинках).
Далее опции посложней, не совсем очевидные:
— движок сам нарисовал форму ввода и следит за обновлением данных (но можно сделать свой интерфейс и контролировать данные перед генерацией),
— должность в визитке всегда под именем, даже если имя написано в одну или три строки (привязка элементов друг к другу);
— один из шрифтов был создан автором из вариативного, и при кривлении в Фигме в углах образовывались «дыры» в заливке, а тут всё хорошо;
— превью каждой страницы PDF-файла выведено на отдельные PNG-картинки, то есть это не HTML+CSS примерный вид файла, а реальный и контролируемый вид;
— работает условный шаблон, то есть шрифт и цвета визитки зависят от выбора в селекте; причем это не какой-то кастомный JS-код, а генератор обрабатывает условия и меняет цвет.
На самом деле движок уже умеет и RGB-цвета делать, или делать CMYK-файлы с превью в RGB-цветах. Или можно подключить Гугл-таблицу и скачать сразу сотню файлов. Или класть в PDF-файл картинку, а не только PDF.
Но это уже темы для следующих постов. И картинок будет больше, потому что без картинок автоматизация дизайна как-то скучновата.
🔥13👍5
Когда начал программировать самостоятельное рисование букв, надо было узнать всё про строение букв. Начал гуглить сайты и шерстить статьи в Википедии.
На каких-то сайтах было всё хорошо написано, но не хватало картинок. Где-то картинки хорошие, но навигация ужасная. Сразу хотелось сделать самому сайт про буквы!
И вот встретил прекрасный сайт, где это всё собрано и с авторскими иллюстрациями. Сайт пополняется. Русского языка нет, но у всех статей есть теги и темы.
Просто вау — https://wiki.wordsoftype.com
На каких-то сайтах было всё хорошо написано, но не хватало картинок. Где-то картинки хорошие, но навигация ужасная. Сразу хотелось сделать самому сайт про буквы!
И вот встретил прекрасный сайт, где это всё собрано и с авторскими иллюстрациями. Сайт пополняется. Русского языка нет, но у всех статей есть теги и темы.
Просто вау — https://wiki.wordsoftype.com
🔥12👍6❤3
Forwarded from Бургомистр (Sergey Turulin)
Я всё думал: почему врачи так медленно печатают на компьютерах? И, кажется, понял! И придумал решение.
Конечно, такая клавиатура должна поставляться с софтом, чтобы можно было, например, на F1 запрограммировать «Фурацилин», а на F5 — «Арбидол».
Конечно, такая клавиатура должна поставляться с софтом, чтобы можно было, например, на F1 запрограммировать «Фурацилин», а на F5 — «Арбидол».
😁9❤2👍2
Завтра выступаю на конференции HolyJS с докладом на тему «Автоматизация дизайна на JS» — 8 апреля в 14:15 в зале 3.
Расскажу про движок создания PDF-генераторов с точки зрения программирования: как делать файлы с кастомными шрифтами и кернингом, иконками, как вкладывать один PDF в другой и другие неочевидные фичи. Какие у движка возможности, реализации и что было сделано для оптимизации процесса генерации и рендера PDF-файлов в браузере.
Также расскажу про опыт его использования как отдельно, так и в системе, которую с ребятами реализовали в «Эникрафте».
Если вы там будете, приходите послушать о магии создания печатных файлов на JS. Сама конференция проходит 7 и 8 апреля.
Страница доклада
Канал конференции
Купить билет
Расскажу про движок создания PDF-генераторов с точки зрения программирования: как делать файлы с кастомными шрифтами и кернингом, иконками, как вкладывать один PDF в другой и другие неочевидные фичи. Какие у движка возможности, реализации и что было сделано для оптимизации процесса генерации и рендера PDF-файлов в браузере.
Также расскажу про опыт его использования как отдельно, так и в системе, которую с ребятами реализовали в «Эникрафте».
Если вы там будете, приходите послушать о магии создания печатных файлов на JS. Сама конференция проходит 7 и 8 апреля.
Страница доклада
Канал конференции
Купить билет
🔥5👍3🤡1