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
Выступил на конфе HolyJS с темой «Автоматизация дизайна на JS». Было круто и бодро!
Выступать на конференции для программистов — дело не простое. Там одними картинками и словами нельзя ограничиваться. Надо залезать «под капот». Поэтому показал, как движок JP точно рисует глифы из шрифта и как это собирается в тексты.
Я заморочился и сделал тему в редакторе кода в цветах презентации, чтобы выглядело цельно. Пришлось переделать все слайды, которые использовал раньше. Но, думаю, оно того стоило. Получилась большая подробная презентация про работу движка, которую скоро частями опубликую на сайте.
Ещё полезно было повозиться с кодом движка, потому что некоторые функции забылись. Обнаружил функцию, которая соединяет два объекта на PDF-документе линией: просто передаёшь ей не координаты точек, а имена объектов и движок сам их находит и рисует между ними.
И в конце рассказал о настоящем будущем — сложных системах, которые сейчас делаем с ребятами в «Эникрафте» @anycrafttech. Сложные системы для упрощения работы ;–)
В общем, зовите на конференции или другие мероприятия!
Выступать на конференции для программистов — дело не простое. Там одними картинками и словами нельзя ограничиваться. Надо залезать «под капот». Поэтому показал, как движок JP точно рисует глифы из шрифта и как это собирается в тексты.
Я заморочился и сделал тему в редакторе кода в цветах презентации, чтобы выглядело цельно. Пришлось переделать все слайды, которые использовал раньше. Но, думаю, оно того стоило. Получилась большая подробная презентация про работу движка, которую скоро частями опубликую на сайте.
Ещё полезно было повозиться с кодом движка, потому что некоторые функции забылись. Обнаружил функцию, которая соединяет два объекта на PDF-документе линией: просто передаёшь ей не координаты точек, а имена объектов и движок сам их находит и рисует между ними.
И в конце рассказал о настоящем будущем — сложных системах, которые сейчас делаем с ребятами в «Эникрафте» @anycrafttech. Сложные системы для упрощения работы ;–)
В общем, зовите на конференции или другие мероприятия!
🔥10❤3⚡2