Soroka by Оксана Кочуева

Finding harmony among disparate fonts Шрифты — неотъемлемая часть в создании дизайна. Графические редакторы представляют всё больше возможностей для дизайнеров, а некоторые позволяют расширить свой функционал с помощью плагинов — «дополнительных программных блоков, подключаемых к основной программе». Появление в Figma простого доступа к созданию плагинов создало для дизайнеров и разработчиков новое поле, внутри которого решаются глубокие проблемы. Книга посвящена созданию плагина призванного преодолеть парадокс выбора шрифта и помочь дизайнерам подбирать шрифтовые пары.

Шрифты — неотъемлемая часть в создании дизайна. Графические редакторы представляют всё больше возможностей для дизайнеров, а некоторые позволяют расширить свой функционал с помощью плагинов — «дополнительных программных блоков, подключаемых к основной программе». Появление в Figma простого доступа к созданию плагинов создало для дизайнеров и разработчиков новое поле, внутри которого решаются глубокие проблемы. Книга посвящена созданию плагина призванного преодолеть парадокс выбора шрифта и помочь дизайнерам подбирать шрифтовые пары.

Исследование экосистемы плагинов графического редактора Figma, процесса изучения и подбора шрифтовых пар, разработка плагина для подбора шрифтовых пар в Figma Шрифты — неотъемлемая часть в создании дизайна. Графические редакторы представляют всё больше возможностей для дизайнеров, а некоторые позволяют расширить свой функционал с помощью плагинов — «дополнительных программных блоков, подключаемых к основной программе». Появление в Figma простого доступа к созданию плагинов создало для дизайнеров и разработчиков новое поле, внутри которого решаются глубокие проблемы. Книга посвящена созданию плагина призванного преодолеть парадокс выбора шрифта и помочь дизайнерам подбирать шрифтовые пары.

2020

Научный руководитель: Шерифзянов Рустам Шамилевич Рецензент: Мельникова Янина Олеговна Консультант: Харитонов Захар Николаевич

ПРАВИТЕЛЬСТВО РОССИЙСКОЙ ФЕДЕРАЦИИ ФЕДЕРАЛЬНОЕ ГОСУДАРСТВЕННОЕ АВТОНОМНОЕ ОБРАЗОВАТЕЛЬНОЕ УЧРЕЖДЕНИЕ ВЫСШЕГО ПРОФЕССИОНАЛЬНОГО ОБРАЗОВАНИЯ «НАЦИОНАЛЬНЫЙ ИССЛЕДОВАТЕЛЬСКИЙ УНИВЕРСИТЕТ ВЫСШАЯ ШКОЛА ЭКОНОМИКИ»

Школа дизайна факультета коммуникаций, медиа и дизайна НИУ ВШЭ Кочуева Оксана Николаевна Выпускная квалификационная работа по направлению «Дизайн и программирование» студента группы Б17ДЗ19 ( образовательная программа «Дизайн»)

Москва, 2020

Предисловие (7) А. Возникновение и развитие Figma (9) Шрифты — неотъемлемая часть(19) в создании дизайна. Графические редакторы Б. Создание плагинов

представляют всё больше возможностей для дизайнеров, а некоторые позволяют расширить свой функционал с помощью плагинов — «дополнительных программных блоков, подключаемых к основной программе». Появление в Figma простого доступа к созданию плагинов В. Разработка плагинов (27) создало для дизайнеров и разработчиков новое поле, внутри которого решаются глубокие проблемы. Книга посвящена созданию плагина призванного преодолеть парадокс выбора шрифта и помочь дизайнерам подбирать шрифтовые пары.

Г. Классификация плагинов (33) Д. Шрифтовые плагины (41) Е. Парадокс выбора (51) Ё. Soroka Plugin (67)

Ж. Дизайн-система плагина Soroka (99) З. Построение бренда (115) И. Запуск проекта (139)

Заключение (151)

Источники (157)

Предисловие Как часто вы сталкиваетесь с тем, что часами сидите перед экраном, пытаясь подобрать шрифт? «Вот этот вроде ничего, хотя и тот тоже неплох...», этот процесс тратит Шрифты — неотъемлемая часть в создании дизайна. Графические много сил и времени особенно, если ты новичок,редакторы и к тому представляют всё больше возможностей для дизайнеров, а некоторые позволяют же работаешь в Figma, где всеплагинов шрифты в селекторе расширить свой функционал с помощью — «дополнительных программных блоков, подключаемых программе».большой Появление в Figma выглядят одинаково. С этойк основной мысли начался простого доступа к созданию плагинов создало для дизайнеров и разработчиков путь создания решения подобных проблем, которое новое поле, внутри которого решаются глубокие проблемы. Книга посвящена реализовано среде Figma плагинов. созданию плагина в призванного преодолеть парадокс выбора шрифта и помочь дизайнерам подбирать шрифтовые пары.

Эта книга посвящена шрифтовому плагину с названием «Soroka». Здесь будут освещены контексты, в которых он существует. Мы поговорим о возникновении графического редактора Figma, его развитии и планах на будущее, о системе сообщества, которую он вокруг себя строит. Будут освещены как технические, так и интерфейсные особенности создания плагина, затронуты различные нюансы, ограничения в разработке и гайдлайны. Проведён анализ и сравнение существующих плагинов и сервисов подбора шрифта. Через анализ создаваемого сервиса книга поможет взглянуть на процесс подбора шрифта под другим углом, проанализировать этот процесс с точки зрения таких терминов, как аналитический паралич, парадокс выбора, закон Хикса, а также подтвердить несколькими примерами других сервисов. Это рассуждение и особый взгляд, описание процесса от идеи и изучения контекста до готового продукта.

Возникновение и развитие Figma Шрифты — неотъемлемая часть в создании дизайна. Графические редакторы представляют всё больше возможностей для дизайнеров, а некоторые позволяют расширить свой функционал с помощью плагинов — «дополнительных программных блоков, подключаемых к основной программе». Появление в Figma простого доступа к созданию плагинов создало для дизайнеров и разработчиков новое поле, внутри которого решаются глубокие проблемы. Книга посвящена созданию плагина призванного преодолеть парадокс выбора шрифта и помочь дизайнерам подбирать шрифтовые пары.

Глава A

Развитие Figma

Figma была представлена в 2016 году как коллаборативный инструмент для дизайна интерфейсов, позволяющий дизайнерам совместно работать над одними и теми же проектами в режиме реального времени. Сервис был похож на Google Docs для дизайна интерфейса, поскольку хотел объединить все части процесса проектирования, чтобы отдельные дизайнеры и команды могли работать в одной интегрированной системе на основе браузера. Но её история началась раньше, ещё в 2011 году. Этот год по стечению обстоятельств стал переломным для технологического мира с совершенно разных сторон. Смерть Стива Джобса, патентные войны, а так же повышение роли мобильного браузинга до такого уровня, что впервые использование телефона для поиска в интернете превысило использование для этих нужд компьютера. Всё это стало маркерами начала новой эры интернет-пространства. В этом же году в Сан-Франциско у основателей Figma возникла идея «Можно ли создать инструмент для дизайнеров в интернете»1. В 2012 Дилан Филд и Эван Воллас основали стартап Figma, состоящий из 20 человек. С тех пор она привлекла 18 миллионов долларов от Greylock Partners’, John Lilly, Index Ventures, OATV и ICONIQ, и индивидуальных инвесторов, среди которых генеральный директор LinkedIn Джефф Вайнер, главный дата-сайентист Белого дома DJ Patil, генеральный директор Wealthfront Адам Нэш и бывший глава отдела дизайна Dropbox Солейо Куэрво. 11

«Which tools do you use for interface design?» Ежегодное исследование Design Tools Survey показало, что с 2018 по 2019 год популярность Figma среди респондентов выросла почти в два раза с 12% до 23%. Если в 2018 году программой пользовались 583 из 2775 респонтеднтов, то к 2019 году число пользователей увеличелось до 1178 человек из 3149 опрошенных. При этом показатели других программ остались практически без изменений. В 2020 году из-за вынужденного массового перехода на удалённую работу Figma стала самым популярным графическим редактором для UI-дизайна. Процент опрошенных использующих программу вырос до рекордных 67%.

2018г. 3000 2800 2600 2400 2200 2000 1800 1600 1400 1200 1000 800 600 400 200 0

ch et k S

a gm

r o op XD to di e ra sh tu t b o s S o ot n Illu Ad io Ph e b vis o n I Ad

er am Fr

r ne

e ur Ax ty

Affi

sig De

er th

)

er am r F

ic ss la

2019г. 3000 2800 2600 2400 2200 2000 1800 1600 1400 1200 1000 800 600 400 200 0

ch et k S

a gm

r o op XD to di e ra sh tu t b o s S o ot n Illu Ad io Ph e b vis o n I Ad

er am Fr

r ne

e ur Ax ty

Affi

er th

)

sig De

ic ss la

er am r F

2020г. 3000 2800 2600 2400 2200 2000 1800 1600 1400 1200 1000 800 600 400 200 0

a gm

ch et k S

e ob

XD be

o Ad

r to tra s Illu

o op di sh tu o S ot n io Ph vis In

e ur Ax

er am r F

r ne

Pi UX

Affi

sig De

er th

Развитие Figma

Photoshop и Illustrator — это базовые приложения для дизайнеров, существующие уже несколько десятилетий. Они позволяют решать проблемы, с которыми дизайнеры сталкивались на протяжении многих лет, но они не столь гибки для решения конкретных задач, включая разработку веб-интерфейсов. Инструменты проектирования должны отражать то, как мы взаимодействуем. С возникновением новых задач появляются и новые инструменты, отвечающие потребностям современного процесса проектирования, так для создания интерфейсов появился Sketch, Adobe XD и Figma. Sketch не теряет свою лидирующую позицию, но остаётся локальным приложением для пользователей компьютеров Apple. Figma является одним из самых мощных инструментов для проектирования, прототипирования и совместной разработки проектов. Это облачный инструмент, похожий на Sketch с некоторыми функциональными отличиями, такими как редактирование в реальном времени и кроссплатформенность. Все больше проектных команд переходят на Figma, основная цель перехода — автоматизация рутинных задач и ускорение рабочего процесса. Одной из инновационных функций, представленных Figma в самом начале, является совместный доступ к файлам. Возможность работы в режиме реального времени между людьми в команде перевернуло сознание людей в 2016 году. Программа решила проблему простоты и эффективности работы и коммуникации внутри продуктовых команд. Figma позволяет теснее взаимодействовать дизайнерам с не-дизайнерами. Дизайн долгое время был отделён от основного процесса разработки, включался на последних этапах или не имел влияния на принятие ключевых решений. Сейчас интерфейсы могут разрабатываться одновременно с продуктом, что позволяет давать обратную связь в обоих направлениях на протяжении всего процесса. Иными словами дизайн интегрируется в бизнес-процесс в качестве полноценного участника. Figma нацелена на то, чтобы быть больше, чем просто графическим редактором, компания выбрала направление развития схожее с путём, который проходило программирование несколько десятилетий назад. Компания хочет, чтобы пользователи не только были потребителями, но и с лёгкостью становились создателями, поэтому ставит акцент на создание платформы для совместного проектирования дизайн-систем, шаблонов и плагинов, созданных пользователями. Функциональное развитие программы могло идти по нескольким путям. Есть вариант развития на программном уровне пополнять инструментал множеством разных функций, вроде замены текста одной кнопкой. Такой подход имеет место быть, однако Figma 14

Функционал

избрала другой путь, перенеся принятие решения о добавлении и использовании дополнительных возможностей на плечи самих пользователей. Речь о плагинах. Одними из базовых принципов Figma как продукта является простота использования, лёгкая точка входа и, что важно, кросс-платформенность, соответственно, существуют ограничения диктуемые браузером в рамках Шрифты — неотъемлемая часть в создании дизайна. Графические редакторы которых существует и развивается приложение. Это важно представляют знать всё больше возможностей для которые дизайнеров, а некоторые позволяют для понимания решений, принимают создатели. расширить свой функционал с помощью плагинов «дополнительных Лёгкая точка входа — базовый набор— функций доступный всем. программных блоков, основной Появление Плагиныподключаемых же позволяют кдобавить то,программе». что в него не входит, нов Figma простого доступа к созданию плагинов создало дизайнеров и разработчиков технологически реализуемо внутридля браузера. Команда Figновое поле, внутри которого решаются глубокие посвящена ma даёт подробное описание того, проблемы. как создатьКнига плагин, делится созданию плагина призванного преодолеть парадокс выбора шрифта ис помочь подробной документацией и шаблонами самих плагинов разным дизайнерам подбирать шрифтовые функционалом, чтобыпары. даже дизайнер, который не писал до этого код или знаком только с основами JavaScript, справился с созданием плагина, если он заинтересован в этом. Цели у плагинов могут быть абсолютно разными. Они могут упрощать повторяющиеся или кропотливые задачи, например, создание градиентов, могут закрывать конкретные потребности какой-то компании, так появились плагины, создающие тёмную тему интерфейса, плагин, вычисляющий ошибки в отступах на макетах. Но какую бы задачу конкретный пример ни решал, основная цель использования плагинов — повышение производительности команды. Плагины — это коллективный прогресс, доступный всем пользователям.

Развитие Figma

Функционал

Слоган Figma на главной странице сайта. Стилевые элементы в виде курсоров разных пользователей визуализируют идею коллаборативности с первых секунд. 17

Создание плагинов

Глава Б

Cообщество

Публикации в Figma Community1

Совсем недавно запустилась бета-версия Figma Community — системы внутри приложения, где у пользователя есть возможность создать свой профиль и делиться созданными плагинами и шаблонами, а также подписаться на обновления интересных ему людей и лайкать понравившиеся материалы. Можно назвать это социальной сетью, но пока социальной механики там маловато, в действительности Figma Community — это ещё одно подтверждение, что Figma идёт по следам программирования в сторону развития opensource, а эта часть сервиса логичное продолжение этого пути. Тогда становится заметно, что сообщество в Figma — это дизайнерский и узкоспециализированный аналог GitHub — сервисе для хостинга IT-проектов и совместной разработке. 21

Создание плагинов

Предоставление лёгкого доступа к созданию и размещению плагинов для развития open-source систем — это только одна сторона медали. С другой же стороны Figma как компания растёт и ей становится все труднее поддерживать ценность для клиентов. С большим количеством клиентов компании становится сложнее удовлетворять все потребности и уникальные случаи использования приложения. Плагины помогают Figma бороться с сопротивлением ориентированности на неидеальных клиентов. По мере увеличения числа пользователей будет создаваться больше плагинов, что сделает продукт лучше для новых пользователей и сподвигнет на создание ещё большего количества проектов в программе.

Этапы проверки перед публикацией

Безопасность - Бизнес - Удобство - Легальность

Плагины должны быть безопасными, производительными и стабильными, тем более что они образуют экосистему программы, ориентированной на браузер. Пользователи должны быть уверены, что использование плагинов не подвергнет риску безопасность их данных и не повредит производительности программы. Поэтому в официальной документации описаны критерии для допуска плагинов к общему пользованию. У Figma есть централизованный процесс утверждения схожий с процедурой проверки приложения перед публикацей в AppStore. Поэтому, чтобы плагин опубликовали он должен соблюдать политику Figma в отношении безопасности, бизнеса, удобства использования и легальности. А именно, создатель перед отправкой должен убедиться, что отсутствуют ошибки и что сервер не «падает» при использовании плагина, что название и описание не содержит ненормативную лексику, представлены описания и картинки и что указаны контакты связи для пользователей, по которым они могут связаться с создателями.

Гайдлайны

Со своей же стороны Figma также придерживается принципов для того, чтобы использование программы оставалось максимально комфортным, а именно безопасность, стабильность, простота разработки и производительность.

Безопасность Плагины имеют доступ к файлу только Плагины не могут вмешиваться когда он непосредственно запущен в пользовательский интерфейс Figma и поведение, чтобы ввести пользователя в заблуждение (например, фишинг) Действие плагина ограничено текущим файлом

Стабильность Плагины не должны замедлять работу Figma, делая её непригодной для использования

Плагины не должны ломать ключевые инварианты продукта

Простота разработки Плагины должны быть достаточно просты в разработке, чтобы поддерживать динамичную экосистему. Большинство наших пользователей являются дизайнерами и могут иметь только умеренный опыт работы с JavaScript

Производительность Плагины должны выполняться достаточно быстро, чтобы поддерживать большинство сценариев использования, таких как поиск внутри слоёв в документе, генерации графиков и тд.

Разработчики должны иметь возможность использовать существующие средства отладки

Плагины не могут делать запросы как figma.com

Плагины не могут получить доступ к данным без добровольного согласия

Изменения в продукте Figma или внутренних API-интерфейсах должны редко, если вообще когда-либо, ломать существующие плагины

Разработка плагинов

Глава В

Ограничения Разработка плагинов связана с большим количеством ограничений. Доступ к объектам внутри программы происходит через Figma API, это дает разработчикам возможность просматривать и извлекать любые объекты или слои из файла, а также их свойства. API Figma основан на структуре REST. В документации говорится о том, что они поддерживают аутентификацию с помощью токенов Шрифты — неотъемлемая часть вЗапросы создании дизайна. Графические редакторы доступа и OAuth2. выполняются через конечные точки представляют HTTP всё больше возможностей дизайнеров, а некоторые позволяют с четкими функциямидля и соответствующими кодами ответов. расширить свой функционал помощью плагинов — «дополнительных Конечные точкиспозволяют запрашивать файлы, изображения, программных блоков, подключаемых к основной программе». Появление в Figma версии файлов, пользователей, комментарии, командные проекты простого доступа к созданию плагинов создало для дизайнеров и разработчиков и файлы проектов. новое поле, внутри которого решаются глубокие проблемы.API Книга посвящена Получив доступ, вы можете использовать Figma созданию плагина призванного преодолеть парадокс выбора шрифта и помочь для инспектирования JSON-представления файла. Каждый слой дизайнерам подбирать шрифтовые пары.представлен внутри файла узлом. или объект в файле будет Figma плагины же создаются с помощью ещё одного «интерфейса» — Figma Plugin API, и пишутся на JavaScript, а их пользовательский интерфейс создается с помощью HTML. Компания предоставляет подробную документацию и рекомендации по разработке. Например, одной из рекомендаций является использование TypeScript как основного языка программирования, руководствуясь идеей, что нужны только базовые знания HTML, CSS и JavaScript, а TypeScript поможет допустить меньше ошибок. Figma не настаивает на использовании TypeScript, а также не ограничивает в использовании различных библиотек таких как React или Vue.js для построения более сложных систем в среде плагинов.

Разработка плагинов

Получается, разработка плагина ничем не отличается от среды разработки веб-сайтов? Не совсем так, она всё же имеет некоторые отличия от использования JS для сайтов. Для того чтобы система плагинов была безопасной и стабильной, некоторые API браузера недоступны или требуют иного доступа. Из документации мы узнаём, что для повышения производительности компания решила использовать модель выполнения, в которой код плагина выполняется в основном потоке в «песочнице». Песочница — это минимальная среда JavaScript, которая не предоставляет API браузера. Это означает, что пользователю доступна вся стандартная библиотека JavaScript ES6, включая стандартные типы, JSON и Promise API, двоичные типы, такие как Uint8Array, и т. д. Но авторы обращают внимание, что API браузера, такие как XMLHttpRequest и DOM, недоступны напрямую из песочницы. Поэтому если есть необходимость в их использовании предлагается альтернативный вариант создание <iframe> с тегом <script> внутри кода, и выводить в плагин используя figma.showUI(). Внутри <iframe> возможно написать любой HTML и JavaScript и получить доступ к любым API браузера. Следующий пункт, на который обращают наше внимание, это то, что плагин может получить доступ к иерархии слоёв в документе, но не к API браузера. И, наоборот, Iframe может получить доступ к API браузера, но не к «сцене» Figma. Плагин и Iframe могут взаимодействовать друг с другом посредством передачи сообщений. Обязательным условием в коде плагина является выполнение в самом конце функции figma.closePlugin(), чтобы сообщить Figma о завершении его работы. Подводя итог, большие ограничения позволяют сохранить стабильность работы, поэтому Figma ставит ставки именно на это, но в то же время не делает создание плагинов узкоспециализированной и закрытой системой, как это делает Adobe, наоборот, старается показать как работать внутри этих ограничений и с теми технологиями, которые доступны.

Технологии

Для создания плагина Soroka были выбраны язык программирования JavaScript и библиотека React. 31

Классификация плагинов Шрифты — неотъемлемая часть в создании дизайна. Графические редакторы представляют всё больше возможностей для дизайнеров, а некоторые позволяют расширить свой функционал с помощью плагинов — «дополнительных программных блоков, подключаемых к основной программе». Появление в Figma простого доступа к созданию плагинов создало для дизайнеров и разработчиков новое поле, внутри которого решаются глубокие проблемы. Книга посвящена созданию плагина призванного преодолеть парадокс выбора шрифта и помочь дизайнерам подбирать шрифтовые пары.

Глава Г

Классификация плагинов

Анализ существующих плагинов

Наблюдая за появляющимися плагинами можно проследить некоторые тенденции в их создании и классифицировать на определённые группы по цели и тематике Шрифты — неотъемлемая часть в создании дизайна. Графические редакторы представляют всё больше возможностей для дизайнеров, а некоторые позволяют расширить свой функционал с помощью плагинов — «дополнительных Работа с текстомк основной программе». Появление в Figma программных блоков, подключаемых простого доступа к созданию плагинов создало для дизайнеров и разработчиков новое поле, внутри которого решаются глубокие проблемы. Книга посвящена созданию плагина призванного преодолеть парадокс выбора шрифта и помочь Основнаяшрифтовые часть плагинов работающих с текстом ориентирована дизайнерам подбирать пары. на замену текста или добавление «рыбного», а также существуют плагины осуществляющие перевод с одного языка на другой. Текстовых плагинов достаточно много относительно всех существующих.

Lorem Ipsum

Цвета и градиенты Одна из самых популярных тем в создании плагинов. Плагины для создания цветовых схем, палитр для подбора цвета или для дизайн системы активно появляются. Отличным примером быстрого роста этой группы является бум плагинов, позволяющих создать тёмную тему интерфейса, произошедший как реакция на включение тёмной темы в iOS и отражением популярности наличия двух цветовых версий интерфейсов в целом. Стоит отметить, что в этой категории наблюдаются плагины решающие более глубокие проблемы, чем создание палитры бренда, например с помощью «Color Blind» можно проверять свои интерфейсы на восприятие глазами людей, имеющих проблемы со зрением, а именно разные типы 35

Классификация плагинов

дальтонизма. Создание инклюзивного дизайна сейчас является одной из больших и важных тем, которые решаются многими дизайнерами в больших корпорациях, таких как Mail.ru, которые проводили целую конференцию, посвящённую инклюзивному дизайну. Возникновение плагинов с подобной идеей говорит нам о том, что использовать плагины в качестве решения проблем, кроме увеличения скорости и эффективности работы, возможно.

Color Blind

Stark

Векторная графика Очень большой группой являются плагины для работы с векторной графикой. Выравнивание кривых, добавление стрелочек, автоматическая изометрия — всё это широко доступно.

Simplify

Easometric

Анализ существующих плагинов

Пропорциональное изменение размера Увеличение объектов путём растягивания даже с помощью инструмента Scale часто влечёт за собой появление дробных значений в размерах, плагины этой категории устраняют такие нюансы.

Proportional Scale

Работа с данными В последнее время стало появляться большое количество плагинов, позволяющих наполнить макеты реальными данными из JSON и Google таблиц, или наоборот, вытащить данные из макетов для наполнения базы данных.

JSON to Figma

Chart

Классификация плагинов

Работа с компонентами Создание сразу нескольких компонентов или их удалённого переименования очень волнуют дизайнеров и они решают это с помощью плагинов

Unused Components

Шрифтовые плагины В большинстве своём пытаются визуализировать шрифты, но, пожалуй, это одна из самых маленьких категорий, возможно, изза большого количества подводных камней при создании.

Better Font Picker

Font Preview

Анализ существующих плагинов

Встроенный Iframe Добавление карт, картинок с Unsplash, анимации Lottie и другие плагины, использующие сторонние API браузера не многочисленны, но сделаны очень качественно или представлены крупными компаниями, что повышает их скачиваемость за счёт лояльности пользователей к бренду. Это наводит на мысль о тенденции к использованию продуктов прямо внутри экосистемы Figma и довольно хорошо воспринятое людьми. Больше не нужно заходить отдельно на сайт Unsplash за стоковыми фото, вот они непосредственно здесь, на холсте, на котором ты работаешь.

Unsplash

Lottie

Remove bg

Таким образом, становится понятно, что Figma одна из самых быстрорастущих и развивающихся продуктов на рынке, а система плагинов появившаяся совсем недавно представляет собой отчасти экспериментальный путь развития самой Figma и открывает для пользователей ещё одно поле в среде которого могут решаться проблемы, как касающиеся чисто функционала программы, так и более глубокие, социальные темы, коррелирующие с общими тенденциями в дизайне. 39

Шрифтовые плагины

Глава Д

Нюансы разработки

Шрифты — неотъемлемая часть в создании дизайна. Графические редакторы представляют всё больше возможностей для дизайнеров, а некоторые позволяют В выделенной классификации одну из строчек расширить свой функционалранее с помощью плагинов —плагинов «дополнительных занимают шрифтовые плагины, а это показательПоявление того, что тема программных блоков, подключаемых к основной программе». в Figma волнует пользователей, возникают какие-то преграды и проблемы простого доступа к созданию плагинов создало для дизайнеров и разработчиков во время работы со шрифтами в Figma. Их не так уж посвящена и сложно новое поле, внутри которого решаются глубокие проблемы. Книга заметить. Одна изпреодолеть крупных и замедляющих работу с программой созданию плагина призванного парадокс выбора шрифта и помочь особенностей является отсутствие визуальной репрезентации дизайнерам подбирать шрифтовые пары. шрифта. Выбор шрифта происходит из списка всех шрифтов, которые обозначены только названием. Для примера в графических редакторах Adobe селектор шрифтов также является списком, но каждый шрифт отображен шрифтом, который он обозначает. Соответственно в сознании складывается паттерн, что именно так и должен выглядеть список шрифтов, а отсутствие привычного повышает когнитивную нагрузку. На данный момент создано несколько плагинов с подобным действием — попыткой вернуть выбору шрифтов привычный вид. Better font picker действительно мимикрирует под интерфейс программы дублируя список шрифтов или Fontpicker, претендующий на некоторую роль штифтового менеджера за счёт наличия поиска и возможности добавить шрифт в избранное. Появление первого из них вызвало резонанс, о его существовании написали многие сообщества в социальных сетях. Тем не менее при детальном рассмотрении становится ясно, что отображаются далеко не все шрифты, а некоторые отображения некорректны, именно такой результат мы получали при создании прототипа собственного плагина в коде. Это связано в большей степени с ограничениями в разработке. Изучая как устроено общение плагина со шрифтами нашлись, как довольно логичные, вытекающие из принципов Figma, так и совершенно неожиданные ограничения. Список шрифтов установленных у человека на компьютере получить через интерфейс плагина невозможно, потому что Figma — это браузерное приложение и доступ к файлам на компьютере представляет огромную угрозу для безопасности данных пользователя, но если установлено десктопное приложение, то в нём возможно использовать все свои шрифты, но они не попадают в программу в виде файлов, а лишь передаются в виде хеша с названием и стилем. Звучит просто, но тут-то и открываются самые интересные и казусные моменты. 43

Шрифтовые плагины

Шрифты не имеют общего стиля оформления названия и стиля в файле, а так же имеют гораздо больше особенностей, чем fontFamily и fontStyle, которые могут быть считаны браузером. Так, такие параметры как толщина(Bold, Medium, Light и др.) могут быть как стилем шрифта, так и частью его названия, а обозначение различных начертаний, таких как Extended или Mono, часто содержатся в названии, но не всегда это содержится в fontFamily.

Oh, no, 44

Нюансы разработки

Совершенное безумие связано со специфическими вариациями шрифта, например, в процессе изучения было обнаружено начертание Rotalic, представляющее собой Italic с необычным наклоном. Шрифты — неотъемлемая часть в создании дизайна. Графические редакторы При проверке на обычной HTML странице оказалось, что представляютввсё больше возможностей дляначертания дизайнеров, а некоторые позволяют мы упёрлись ограничения браузера, такие просто расширить свой функционал с помощью плагинов — и«дополнительных не могут быть применены на веб-странице, а значит в самой программных блоков, подключаемых к основной программе». Появление в Figma Figma и как следствие в плагине. простого доступа к созданию плагинов создало для дизайнеров и разработчиков новое поле, внутри которого решаются глубокие проблемы. Книга посвящена созданию плагина призванного преодолеть парадокс выбора шрифта и помочь дизайнерам подбирать шрифтовые пары.

GT Haptik Trial Medium Rotalic

Rotalic 45

Шрифтовые плагины

Единственный выход, который может решить эту неразбериху, — это указывать название шрифта в формате PostScript name, которое хранится в его файле, но, как мы помним, доступ к файлам на компьютере пользователя мы получить не можем, а значит невозможно получить имена и корректно отображать шрифты. Именно поэтому так мало плагинов, затрагивающих тему шрифтов, ведь решение формальных задач в виде визуализации несёт в себе много подводных камней. В итоге разработчики редко касаются этой темы, а пользователи остаются наедине с огромным полотном строчек текста, это лишняя нагрузка даже для людей, которые имеют некоторый опыт работы со шрифтами и примерно знают какой именно они ищут. А как же быть новичкам? Легко потеряться в названиях. Представим себе начинающего дизайнера. Он регулярно

Нюансы разработки

PostScript имени в файле шрифта

Шрифтовые плагины

просматривет Behance и подписывается на все группы ВКонтакте и в Telegram, они публикуют огромное количество бесплатных шрифтов, а наш юный любитель красивых завитушек добросовестно скачивает многие или даже все гарнитуры. Подборки «10 лучших бесплатных шрифтов для вашего дизайна» тоже не остаются незамеченными. В итоге на компьютере нашего пользователя оказываются установлены тысячи шрифтов, не все качественные, некоторые сломанные или состоящие из знаков. Когда ты новичок ты не можешь распознать хорошая гарнитура или нет, не сформирован ещё эстетический вкус, а шрифты и картинки сохраняются с мыслью «может пригодится». Когда наступает пора выбрать конкретный шрифт в проекте, человек оказывается потерян среди огромного выбора разных и часто плохо применимых шрифтов. Но не нужно думать, что только совсем новички оказываются в такой ситуации, мы редко удаляем файлы на компьютере, тем более чистим шрифты, нужно потратить кучу времени и сил, чтобы разобрать все файлы накопившиеся со времён, когда ты скачиваешь всё вокруг, к тому же кто помнит все шрифты?

Потребнось

В конечном счёте каждый может оказаться перед белым листом в Figma совершенно не зная, какой шрифт выбрать и наобум нажимая на безликие названия в селекторе, запутываясь и загоняя себя в непонимание ещё больше. Глаз замыливается, а идеального претендента всё не находится. И проблема кроется намного глубже, чем в отсутствии визуального представления шрифтов в Figma, это лишь её маркер, вершина айсберга, психологическая проблема в самом парадоксе выбора. 49

Парадокс выбора

Глава Е

Парадокс выбора

Шрифты — неотъемлемая часть в создании дизайна. Графические редакторы представляют всё больше возможностей для дизайнеров, а некоторые позволяют Изо дня в день мы сталкиваемся с необходимостью выбора, расширить свой функционал с помощью плагинов — «дополнительных в большинстве случаевкполагая, чтопрограмме». он сделан на основе наших программных блоков, подключаемых основной Появление в Figma осознанных решений и логики, хотядля чаще всего рациональность простого доступа к созданию плагинов создало дизайнеров и разработчиков преувеличена, роль второстепенных факторов уменьшена. Мы новое поле, внутри которого арешаются глубокие проблемы. Книга посвящена склонны отрицатьпреодолеть что «на многие решения, в томшрифта числе очень созданию плагина призванного парадокс выбора и помочь важные, влияют наше настроение, предшествующий опыт, факторы дизайнерам подбирать шрифтовые пары. времени и места, обстановка, в которой решение принимается»2. Разбросу мнений и факторов влияющих на принятие решения и зависящие от случая учёные-психологи дали название — «шумы». Об этом же заявляет в своём манифесте графический дизайнер и искусствовед Владимир Кричевский говоря, что шрифты выбирают, основываясь на вкусовом предпочтении, традиции, типографической моде, литературном стиле, структурной сложности текста, по декоративным соображениям, с целью эпатажа или для внешнего эффекта и пр. Впрочем, он приходит и к выводу, что ограниченность выбора не самый плохой вариант. Процесс выбора шрифта усложняется ещё и тем, что большинство шрифтов «по своей природе универсальны, или, менее категорично, универсальность — безусловное благо»3. Если выбор шрифтов — это узкоспециализированная тема, то, с выбором фильма хоть раз сталкивался каждый. Можно бесконечно листать афиши фильмов, запоминать понравившиеся, но чем больше времени человек проводит за этим занятием, чем больше вариантов он просматривает, тем сложнее сделать какой бы то ни было выбор. В этом и заключается парадокс выбора — чем больше вариантов предоставлено, тем сложнее определиться. В 2000 году психологи Шина Айенгар и Марк Леппер из Колумбийского и Стэнфордского университетов опубликовали исследование о джемах. В обычный день на местном рынке люди предлагался демонстрационный стол с 24 различными видами джемов. Затем в другой день на том же месте людям дали только 6 различных видов варенья на выбор. Несмотря на то, что больше людей остановились у стола с 24 вариантами, только 3% пошли дальше, чтобы купить банку, в то время как во второй день треть из подошедших приобрели джем. Когда нам дают слишком много вариантов, нашему мозгу становится трудно выбирать из них и зачастую влечёт за собой, что человек вообще ничего не выберет. 53

Парадокс выбора

С такой психологической проблемой сталкиваются пользователи стриминговых сервисов, Netflix будет показательным примером попытки её решения. На главном экране онлайн-кинотеатра представлено множество вариантов фильмов и сериалов, воспринимаемые визуально, как полотно одинаковых единиц контента, не имеющие какого-либо простого параметра для сравнения друг с другом, требуется много времени, чтобы проанализировать и принять решение. Исследователи Netflix пришли к выводу, что в среднем если человек за 60-90 секунд не нашёл для себя что-то интересное, он покидает сервис. Любительские исследования на Medium предпринимают попытки найти решение обеих проблем, основываясь только на принципах UX дизайна. Автор статьи Anupam Pareek провёл ряд опросов, чтобы проанализировать пользовательский путь с самого начала. Оказалось, что пользователи предпочитают смотреть шоу или фильмы, рекомендованные их друзьями, в 3 раза больше по сравнению с предложениями Netflix, а механика поиска фильма в основном состоит из рекомендации друга или социальной сети, дальнейшего изучения в виде просмотра трейлера и информации о рейтингах, жанре и актёрском составе.

Кейс Netflix

«Вы когда нибудь пролистывали Нетфликс чтобы найти что посмотреть перед сном и просто выключали и ложились спать?» — задаётся вопросом другой человек — репортёр с ABC, в своём твиттере. Большинство оказывается солидарно с проблемой. Наличие слишком большого количества вариантов также приводит нас ко второй проблеме, аналитическому параличу. Аналитический паралич относится к ситуации, в которой человек или группа не в состоянии принять решение в результате чрезмерного анализа данных или чрезмерного обдумывания проблемы. Более того возникает побочный эффект в виде меньшей удовлетворённости от сделанного выбора. Воображаемая альтернатива заставляет сожалеть о принятом решении. Это явление экономисты называют стоимостью упущенных возможностей. Когда альтернативных вариантов много, легко представить себе привлекательные стороны отвергнутых альтернатив. Чем больше выбора тем больше ожиданий. Когда есть только один вариант и он плох, виноват — мир, а если выбора много, то люди винят себя, потому что они могли сделать выбор лучше. 55

Парадокс выбора

Чтобы не попадать в это состояние, некоторые специально выделяют отдельное время на то, чтобы составить список из фильмов и сериалов, которые более-менее могут понравится, то есть делают выборку из большого количества вариантов к меньшему, «то, что вам нужно, это курируемый список»4, говорит одна из опрошенных. Компания решила так же, запустив в 2019 году в виде теста «Коллекции», выходящие за рамки широких групп таких, как «Действие», «Драма», «Научная фантастика», «Романтика» и т.д. Согласно Netflix, названия подбираются экспертами из творческих групп компании и сгруппированы в коллекции на основе схожих факторов, таких как жанр, тон, сюжетная линия и черты характера. Эти более узкие подкатегории позволяют давать более конкретные и целевые рекомендации. Кейс Netflix хорошая иллюстрация совокупности двух психологических проблем — парадокса выбора и аналитического паралича, с которым и сталкиваются дизайнеры при выборе шрифтов, а также и пример того, какое решение может быть принято.

Системы подбора шрифтов

Парадокс выбора несомненно присутствует в шрифтовом мире, какие же сейчас существуют способы подбора шрифтов вне графических редакторов, какими приложениями и сервисами пользуются люди пытаясь преодолеть эту проблему? Есть несколько типов шрифтовых сервисов и соответственно несколько путей, которыми могут пойти страждущие. Во-первых, можно воспользоваться шрифтовыми менеджерами. Это приложения, установленные на вашем компьютере и отображающие все шрифты установленные на нём. Такими приложениями являются FontExplorer X и Fontbase. Они позволяют не только просмотреть все гарнитуры, но и увидеть начертания шрифта, все поддерживаемые символы и глифы, а также попробовать ввести свой текст. Кроме того у шрифтовых менеджеров есть отличная функция, которая даёт возможность отключить или удалить шрифт с компьютера, что при должной усидчивости может помочь избавиться от накопившихся неиспользуемых шрифтов. 57

Общее представление

Разработка плагинов

Системы подбора шрифтов

Другой путь это искать шрифт на сайтах шрифтовых сервисов, таких как Type.Today, такой способ часто используется в сценарии поиска шрифта для логотипа, потому что часто можно найти необычные шрифты, которые могут натолкнуть на построение собственного на основе найденного. На таких сайтах можно попробовать написать свой текст предложенными шрифтами, а также купить понравившийся шрифт для коммерческого использования.

Решения в вебе

Сайт Type.Today 61

Системы подбора шрифтов

Не всегда использование специализированных приложений помогает избавиться от проблемы выбора, подбор шрифта переносится за пределы рабочего пространства, отдельные шрифты рассматриваются поодиночке, создаётся эффект вакуума. Когнитивная нагрузка не исчезает, она находит новое проявление. Теперь мы видим шрифт, но мозгу нужно представить как он будет выглядеть в создаваемом дизайне, или как они будут сочетаться между собой, что ещё сложнее, в итоге в ход идут костыльные методы в виде фиксирования скриншотов и выведения на свои артборды. С проблемой вакуума справляется сервис с иной логикой — Fontstand. Это приложение для временной аренды шрифтов, ты можешь за определённую плату примерить шрифт на свои макеты и если всё подходит — купить. Эти сервисы универсальны и подходят для создания дизайна во всех программах.

Решения в вебе

Сайт Fontstand 63

Системы подбора шрифтов

Самое время вернуть наш разговор к Figma. Если это система с открытым сообществом какие способы решения этой проблемы представляет сама Figma? В блоге Figma публикует курируемые подборки шрифтовых пар. Они представляют собой статьи о каждом избранном шрифте и файле, в свободном доступе, конечно, с его шрифтовыми парами. Есть и другой путь к файлам шрифтовых пар, через тот же блог, но из раздела с классификацией шрифтов: гротеск, антиква, брусковый. Эти подборки уже лучше решают проблему с визуальным подбором шрифтовых пар, но находятся в отдельных файлах, которые нужно искать и возвращаться к ним каждый раз или копировать темплейты себе. Тем не менее это наиболее близко к идее реализуемой в нашем плагине. Google Fonts — отличная библиотека шрифтов, доступная бесплатно и абсолютно каждому, кроме того шрифты из неё по умолчанию доступны в Figma. Type. Today кроме сайта запустил свой плагин в Figma, в котором можно посмореть как выглядит выбранный текстовый блок, написанный их шрифтами. Смысл плагина в том, чтобы посмотрев шрифт в работе, иметь возможность сразу купить лицензию. Обобщая всё вышесказанное, проблема выбора прослеживается во многих аспектах жизни и подбор шрифта не является исключением, предлагаемые инструменты для обхода пользователем этой проблемы такие, как шрифтовые менеджеры, безусловно, хороший и их пример будет примером для создания нашей собственной системы.

Решения в Figma

Плагин Type.Today в Figma 65

Soroka Plugin Шрифты — неотъемлемая часть в создании дизайна. Графические редакторы представляют всё больше возможностей для дизайнеров, а некоторые позволяют расширить свой функционал с помощью плагинов — «дополнительных программных блоков, подключаемых к основной программе». Появление в Figma простого доступа к созданию плагинов создало для дизайнеров и разработчиков новое поле, внутри которого решаются глубокие проблемы. Книга посвящена созданию плагина призванного преодолеть парадокс выбора шрифта и помочь дизайнерам подбирать шрифтовые пары.

Глава Ё

О Soroka Наконец, рассказав предысторию и погрузив читателя в контекст, в котором реализуется «Soroka», можно перейти к подробному разбору. Шрифты неотъемлемая часть в создании дизайна. Графические редакторы Наш —продукт представляет собой плагин для Figma представляют всё больше возможностей для дизайнеров, а некоторые позволяют с курируемой подборкой шрифтовых из Google расширить свой функционал с помощью плагинов —пар «дополнительных программных блоков, подключаемых к основной программе». Появление в Figma Fonts, основанных на шрифтовых парах, собранных простого доступа к созданию плагинов создало для дизайнеров и разработчиков Figma. Решение создавать сервис в среде плагинов было новое поле, внутри которого решаются глубокие проблемы. Книга посвящена принято не случайно. привязываемся к конкретной созданию плагина призванногоМы преодолеть парадокс выбора шрифта и помочь дизайнерам шрифтовые пары. системе, подбирать да, остаётся вакуумность внутри самого плагина, но внимание не рассеивается, а сохраняется внутри одного окна браузера. По сути мы создаём дополнительный функционал графического редактора, доступный по нажатию кнопки, который можно вызвать, когда он будет необходим. Используя Photoshop вам не всегда нужна функция «искажение», но когда она понадобится, вы знаете, где её найти. Так и плагин встраивается в ваше приложение и становится дополнительной кнопкой в его интерфейсе.

Josefin Sans + Cardo / Josefin Sans + A One / Josefin Sans + Lato / Josefin San / Lora + Merriweather / Lora + Source S tu /Lora + Nunito / Lora + Alegreya / Ub tu + Rokkitt / Ubuntu + Cabin / Ubuntu + / Nunito + Lora / Nunito + Alegreya / Nu to / Source Sans Pro + Ubuntu / Source Montserrat / Source Sans Pro + Alegrey / Roboto + Rokkitt / Roboto + Nunito / R Montserrat / Open Sans + Bitter / Open Domine / Raleway + Merriweather / Rale way + Cabin / Raleway + Open Sans / Ra / Lato + Karla / Lato + Merriweather / M + Francois One / Montserrat + Karla / M Sans / Montserrat + Hind / Montserrat + На официальных сайтах шрифты показаны крупно и красиво, с любовью ко всем элементам в каждой букве, но такой принцип отображения в контексте подбора шрифтов для проекта не эффективен, понятное донесение желаемой информации до пользователя—чисто дизайнерская задача, поэтому для плагина собраны шрифтовые пары, гораздо быстрее визуально считывается сочетаемость знаков гарнитур, что позволяет не пытаться представить отдельно подобранные шрифты в сочетании, пользователь сразу выбирает систему шрифтов.

Abril Fatface / Josefin Sans + Yeseva ns + Playfair / Josefin Sans + Fira Mono Sans Pro / Lora + Roboto / Lora + UbunШрифты — неотъемлемая часть в создании дизайна. Графические редакторы buntu + Lora / Ubuntu +дизайнеров, Kreonа некоторые / Ubunпредставляют всё больше возможностей для позволяют расширить свой функционал с помощью плагинов — «дополнительных программных блоков, подключаемых программе». Появление в Figma + Source Sans Pro /к основной Ubuntu + Prompt простого доступа к созданию плагинов создало для дизайнеров и разработчиков новое+ поле, внутри которого решаются глубокие проблемы. Книга посвящена unito Open Sans / Nunito + Roboсозданию плагина призванного преодолеть парадокс выбора шрифта и помочь дизайнерам подбирать шрифтовые пары. e Sans Pro + Lora / Source Sans Pro + ya / Roboto + Archivo / Roboto + Lora Roboto + Space Mono / Open Sans + n Sans + Source Sans Pro / Open Sans + eway + Bitter / Raleway + Roboto / Ralealeway + PT Sans / Lato + Abril Fatface Montserrat + Source Sans Pro / Lato Montserrat + Cabin / Montserrat + Fira + Inconsolata/ 52 шрифтовые пары

Принципы Soroka Ставя перед собой целью избавление дизайнеров от психологических трудностей выбора и их последствий, единственным решением было создание искусственных ограничений, как бы это ни было парадоксально для нашего свободного сознания, даже Кричевский приходит к выводу, что «ограниченность или отсутствие выбора — отнюдь не худшая 5 Шрифты — неотъемлемая часть в создании дизайна. . Таким Графические образом, мыредакторы выстраиваем основа для конкретного выбора» представляют первый всё больше уровень возможностей ограничений, длясвязанный дизайнеров, непосредственно а некоторые позволяют расширить свой с выборкой функционал используемых с помощью шрифтов. плагинов Как — «дополнительных известно, основой программных блоков, для подобранных подключаемых шрифтовых к основной пар являются программе». гарнитуры Появление Googв Figma простого доступа le Fonts. к созданию Это библиотека плагиновшрифтов, создало для доступная дизайнеров каждому и разработчиков из любой новое поле, внутри точки которого мира абсолютно решаются бесплатно, глубокиеапроблемы. значит не будет Книга стоять посвящена созданию плагина вопрос призванного о легальности преодолеть их использования парадокс выбора в своихшрифта проектах. и помочь дизайнерам подбирать Предоставляя шрифтовые лицензионные пары. шрифты мы избавляем неопытных дизайнеров от использования некачественных, пиратских или побитых файлов шрифтов. Google Fonts по умолчанию источник качественных и работающих шрифтов. Выбирая их для шрифтовых пар мы создаём библиотеку базовых, шаблонных сочетаний. Так как Google широко применяется по всему миру, постепенно добавляются локализации для разных языков. У абсолютного большинства шрифтов, используемых в плагине, доступна кириллица, что дополнительный плюс, потому что «гарнитурный ассортимент русского шрифта беднее»6. Со стороны разработки выбор Google Fonts ещё более оправдан, эти шрифты доступны в Figma по умолчанию из облака и в отличии от любых других шрифтов, установленных на компьютере, исключают риски некорректного отображения как в самом плагине, так и на рабочем пространстве, что означает независимость от файлов шрифта на компьютере пользователя и обеспечит стабильность в работе самого плагина. Второй уровень ограничений в системе устройства плагина связан с визуальным представлением шрифтовых пар и решениями интерфейса. Собранные шрифтовые пары в интерфейсе плагина сложены в условные папки с названием шрифта, внутри которого находятся шрифтовые пары к нему относящееся. Было бы глупостью отображать более пятидесяти шрифтовых пар подряд никак не разграничивая, ведь мы хотим снизить когнитивную нагрузку пользователя при выборе шрифта, а огромное количество однородной информации нисколько не приближает нас к ней, кроме того на первый план выступает и удобство пользования плагином, поле принципов UX. Для повышения удобства использования на помощь приходит закон Хика, основную идею которого можно описать фразой: «Среднее время реакции является линейной функцией средней неопределенности (или информационной энтропии). При этом неопределенность 73

Soroka plugin

возрастает логарифмически с числом увеличения альтернатив»7. То есть с увеличением количества вариантов увеличивается время реакции выбора. Стоит понимать, что этот закон применим только в случае принятия быстрых решений в соответствующем контексте, речь не о глобальном выборе, а о парадигме времени реакции, поэтому упоминание принципа в контексте парадокса выбора было бы некорректным. Необходимо ограничить количество предлагаемых пользователю вариантов, что и было сделано путём структуризации контента. Шрифтовые пары разделились на группы собранные под один «главный» шрифт. Это позволило уменьшить количество до 4-6 шрифтовых пар обозреваемых в один конкретный момент времени, а значит значительно улучшило качество восприятия информации пользователем, а значит приблизило нас к упрощению принятия решения. На карточках пар есть звёздочки для добавления понравившейся шрифтовой пары в избранное. Избранное — блок над всеми папками, он всегда находится в открытом состоянии, это позволяет быстро найти избранные пары.

Решения интерфейса

Шрифтовые пары собраны по папкам 76

Открытая папка со шрифтовыми парами для Source Sans Pro 77

Карточки в избранном 78

Soroka plugin

Сами карточки представляют собой крупные две буквы каждого шрифта из пары, обладающие их характерными элементами и звёздочку для добавления шрифта в избранное. Словно заголовок или игральная карта они несут в себе громкое высказывание, чтобы обратить внимание, но не перегрузить информацией.

Интерфейс карточек

При наведении на карточку превью меняется, информации становится больше, а текст как бы идёт на удаление — две буквы шрифта сменяются двумя словами, которые в свою очередь меняются на короткий блок абстрактного текста демонстрирующий сочетаемость. 81

Все карточки. Сочетания в буквах 83

Все карточки. Сочетания в словах 85

Все карточки. Сочетания в фразе 87

Soroka plugin

При клике на карточку открывается статья о шрифтах конкретной шрифтовой пары, набранная ими же. Первый шрифт, шрифт в названии папки — для заголовков, второй для наборного текста. Статья имеет несколько функций, одна из которых, образовательная. Помня, что в основном наша целевая аудитория молодые дизайнеры, им может быть интересно узнать больше о конкретных шрифтах и об их создателях. Вторая функция тесно связана с механикой. Статья выступает подробным примером использования шрифтовой пары в действии, а именно в интерфейсе. Абстрагируясь от плагина можно назвать её неким лендингом, на котором шрифтовая пара раскрывается как в текстовой части, так и в виде компонентов интерфейса, например, блока с именем дизайнера. Создавая эту часть плагина как шаблон использования конкретных шрифтовых пар, нельзя было не включить кнопку экспорта на артборд. Добавление статьи на рабочую область позволит сохранить пример шрифтовой пары непосредственно в том файле и на той странице, в которой работает пользователь. Иногда важно держать перед глазами и визуально сопоставлять варианты.

88–89

Состав статьи о шрифтовой паре

Экспорт как шаблон на артборд

Вернуться к шрифтовым парам

Смена языка

Обложка лонгрида

Заголовок

Текстовый блок

Ссылка

Заголовок

Текстовый блок

Карточка дизайнера

Описание дизайнера

Карточки-ссылки на другие статьи

Копирайт

Soroka plugin

В создании плагина нельзя было обойти стороной фильтрацию предоставляемой информации. Блок фильтров состоит из четырёх блоков: выбор превью по умолчанию, выбор языка, выбор сочетания и поиск. Выбор языка другими словами — фильтр по локализации, есть ли кириллические или латинские начертания. Фильтр по сочетаемости сложнее, он представляет собой два выпадающих списка с классификациями шрифта для фильтрации по сочетаемости: антиква + антиква, гротеск + антиква, гротеск + гротеск, моноширинный + моноширинный, моноширинный + антиква, моноширинный + гротеск. Выбор дефолтного превью — это настройка того, как выглядят карточки до наведения на них курсора (все три состояния можно увидеть по наведению в любом случае), можно заметить, что этот селектор выглядит иначе, это сделано намеренно, потому что это скорее паттерн переключения табов, который мы к тому же видим на самих карточках в горизонтальном расположении, горизонтальность сохранена и в меню. В поиске можно найти шрифтовые пары по названию шрифтов в них содержащихся.

92–83

Фильтр вида карточки

Удачный поиск 94

Неудачный поиск, ничего не найдено 95

Языки Весь интерфейс Soroka на данный момент сделан только на английском языке. Это осознанный шаг, а не дань моде, так как мы запускаем плагин на платформе Figma. Запуск плагина — это запуск в open-sourse, поэтому английский становится основным языком как международный и язык в сообществе по умолчанию. На следующих этапах работы над плагином будет добавлен русский язык, но не для всего. Язык интерфейса и обложка в community останутся только на латинице, в то время как карточки шрифтовых пар и сайт-лендинг обретут локализацию. Нет необходимости переводить интерфейс, «serif», «sans serif», «favourites» — устоявшиеся фразы в любом графическом редакторе, поэтому внедрение дополнительного функционала не станет преобразованием работы дизайнера, в отличии от сайта и страницы шрифтовой пары, которые несут дополнительный информационный характер, поэтому донесение на удобном пользователю языке поможет в её усвоении. В контексте выбора шрифтов перевод статьи на русский помогает посмотреть различия в работе шрифтовых пар на кириллице и латинице. В большинстве, но не во всех шрифтовых парах на данный момент есть кириллица, поэтому, к сожалению, некоторые из страниц остануся только на латинице. Наличие в шрифтах кириллицы и латиницы показывается на обложке.

Кириллица

Latin

Страницы шрифтов

Интерфейс

Лендинг

Страницы шрифтов Страница плагина в Figma Лендинг

Дизайн-система плагина Soroka Шрифты — неотъемлемая часть в создании дизайна. Графические редакторы представляют всё больше возможностей для дизайнеров, а некоторые позволяют расширить свой функционал с помощью плагинов — «дополнительных программных блоков, подключаемых к основной программе». Появление в Figma простого доступа к созданию плагинов создало для дизайнеров и разработчиков новое поле, внутри которого решаются глубокие проблемы. Книга посвящена созданию плагина призванного преодолеть парадокс выбора шрифта и помочь дизайнерам подбирать шрифтовые пары.

Глава Ж

100

Дизайн-система

Посмотреть в Figma

В системе представлены все состояния динамичных частей в интерфейсе, а именно поля ввода, селекторы и кнопки. Карточки шрифтовых пар несомненно входят в дизайн-систему, все составляющие карточки взаимозаменяемы, и сама карточка имеет три состояния при проведении мышкой над ней. Все элементы дизайн-системы построены на компонентах. Благодаря чётким размерам несмотря на различия в высоте у разных шрифтов, контент внутри карточки сбалансирован. Кроме основопологающих составляющих интерфейса продуманы все «уведомления» в ответ на действие пользователя. Они нейтрально серые, кроме ошибки, сделанной акцентно красной, чуть шире поля карточек и появляются всегда внизу плагина. 101

Дизайн-система

102

Карточка шрифта

Начальное состояние

Шрифты — неотъемлемая При наведении часть в создании дизайна. Графические редакторы представляют всё больше возможностей для дизайнеров, а некоторые позволяют расширить свой функционал с помощью плагинов — «дополнительных программных блоков, подключаемых к основной программе». Появление в Figma простого доступа к созданию плагинов создало для дизайнеров и разработчиков Добавлено в избранное новое поле, внутри которого решаются глубокие проблемы. Книга посвящена созданию плагина призванного преодолеть парадокс выбора шрифта и помочь дизайнерам подбирать шрифтовые пары.

Сочетание в буквах

Сочетание в словах

Сочетание в фразе

Названия шрифтов в паре

103

Дизайн-система

Фильтр языка сортирует шрифтовые пары по наличию в них кириллического или латинского начертания

104

Фильтр языка

Селектор закрыт и пуст

Шрифты — неотъемлемая часть в создании дизайна. Графические редакторы представляют всё больше возможностей для дизайнеров, а некоторые позволяют расширить свой функционал с помощью плагинов — «дополнительных программных блоков, подключаемых к основной программе». Появление в Figma выбрано простого доступа к созданию плагинов создало дляНедизайнеров и разработчиков новое поле, внутри которого решаются глубокие проблемы. Книга посвящена созданию плагина призванного преодолеть парадокс выбора шрифта и помочь дизайнерам подбирать шрифтовые пары.

При наведении

Выбрано

Селектор закрыт и заполнен

105

Дизайн-система

Селектор закрыт

Селектор открыт

Изменяющиеся табы на карточках

106

Фильтр вида карточки

Фильтр по виду карточки изменяет дефолтное отображение карточки до наведения

107

Дизайн-система

В селекторе данного типа нет незаполненного состояния, по умолчанию стоит Sans Serif + Sans Serif, однако это не влияет на фильтрацию пока человек не выберет начертание самостоятельно

108

Фильтр по начертанию

Селектор закрыт

Выбрано

109

Дизайн-система

Начальное состояние

В фокусе

Заполненное поле

110

Поиск и кнопки

Несколько видов кнопок: с иконкой слева, с иконкой справа и без иконки

111

Дизайн-система

112

Уведомления

Для создания эффекта используется тень с непрозрачностью 8% и размытием x: 1, y: 6, blur: 15, spread: 0 и размытие фона с blur: 15 Шрифты — неотъемлемая часть в создании дизайна. Графические редакторы представляют всё больше возможностей для дизайнеров, а некоторые позволяют расширить свой функционал с помощью плагинов — «дополнительных программных блоков, подключаемых к основной программе». Появление в Figma простого доступа к созданию плагинов создало для дизайнеров и разработчиков новое поле, внутри которого решаются глубокие проблемы. Книга посвящена созданию плагина призванного преодолеть парадокс выбора шрифта и помочь дизайнерам подбирать шрифтовые пары. #373746, 20%

#EF4C30, 20%

113

Дизайн-система

PT Sans 12px regular #2A2921

15px

15px 15px

PT Sans 12px bold #FFFFFF

PT Sans 12px bold #AEAEAE

114

Размеры и шрифты

PT Sans 14px regular #2A2921

40px Шрифты — неотъемлемая часть в создании дизайна. Графические редакторы представляют всё больше возможностей для дизайнеров, а некоторые позволяют расширить свой функционал с помощью плагинов — «дополнительных программных блоков, подключаемых к основной программе». Появление в Figma 23px простого доступа к созданию плагинов создало для дизайнеров и разработчиков новое поле, внутри которого решаются глубокие проблемы. Книга посвящена 23px созданию плагина призванного преодолеть парадокс выбора шрифта и помочь дизайнерам подбирать шрифтовые пары. 23px

13px

Шрифт папки 24px #2A2921

115

Построение бренда

Глава З

118

Название Плагин Soroka — это не только плагин, это бренд, имеющий свою продуманную и проработанную систему. Нейминг важная составляющая бренда, один из способов коммуникации с пользователем. В основе метафоры Soroka заложены ассоциации с коммуникацией. Шрифтовая пара — это прежде всего про коммуникацию пользователя с объектами, носителями шрифта. Эта мысль стала основой нейминга. Soroka — аллитерация русского слова сорока. Это сделано, потому что латиница понятна в любом уголке мира, что позволяет спокойно заходить сразу на международный уровень внутри Figma Community. Птица сорока так или иначе присутствует в фольклоре разных стран и часто ей приписывают магические свойства. В России ей часто приписывают свойство обращать внимание на всё блестящее, так же как дизайнеры часто обращают внимание на разные шрифты с интересными завитушками, которые непременно нужно скачать, подобно сороке крадущей блестяшки. Кроме этого, слово похоже на цифру сорок, что ассоциируется с большим количеством в данном случае шрифтов, скаченных дизайнером. Другой элемент присутствия сороки можно увидеть в детской пальчиковой игре «Сорока-белобока»:

Сорока-белобока кашку варила, деток кормила. Этому дала, Этому дала, Этому дала, Этому дала, А этому не дала: Ты дров не носил, печку не топил, Тебе каши не дадим! Можно заметить, что здесь сорока совершает выбор кому дать кашку, а в нашем плагине осуществляется выбор шрифта. Другое немаловажное для понимания идеи выражение — «сорока на хвосте принесла», так говорят, про новости или сплетни, что делает из птицы инструмент общения и получения информации. Такой образ сороки представлен и в западной культуре. На английском сорока — magpie. В более ранней культуре эту птицу называли просто «pie», но позднее прибавился корень «mag» в значении «chaterer», то есть болтун. В англоязычном фольклоре на сороках даже гадают судьбу, существует поверье, что когда видишь сорок, нужно непременно их сосчитать, и от количества 119

зависит, что тебя ждёт (очень напоминает наше кукование кукушки и количество прожитых лет):

One for sorrow Two for joy Three for a girl Four for a boy Five for silver Six for gold Seven for a secret never to be told Eight for Heaven Nine for Hell Ten for the Devil himself. Соответственно одна сорока к несчастью, а две уже к радости, так что продолжая построение надуманных связей, шрифтовая пара здесь очень уместна. Как итог можно сказать, что сорока и в русской и в западной культуре плотно ассоциируется с элементами коммуникации, что делает это название идеальным для нашего продукта и способствует не осознанному построению правильного ассоциативного ряда у пользователя.

120

121

Tone of voice Ясный. Мы стремимся к ясному общению и простым объяснениям

Дружелюбный. У нас дружеский, непринуждённый и разговорный тон

Любопытный. Мы всегда стремимся узнавать новое

Оптимистичный. Мы идеалистичны и оптимистичны в своих словах и действиях

122

Важным этапом построения бренда является определения интонации, с которой продукт «разговаривает», для Soroka определились следующие векторы: ясный, дружелюбный, любопытный и оптимистичный. На tone of voice основаны тексты в интерфейсе. Это фраза из пустой карточки избранного, из оповещений появляющихся в ответ на совершённые пользователем в плагине действия — добавления в избранное, экспорт на артборд или же неожиданная ошибка. Интонация определила и судьбу слогана. Finding harmony among disparate fonts или Поиск гармонии среди разрозненных шрифтов — фраза, которая встречает пользователя на обложке в Figma Community, она вселяет надежду и является смысловой выжимкой ощущения, которое должно возникнуть от использования плагина.

123

Для более глубокого понимания как мы как бренд хотим разговаривать с нашими пользователями и как развивать бренд и стиль в дальнейшем, было продумано несколько майндсетов, на основе которых придуманы три персонажа, которые должны помочь проследить в каких точках происходит их контакт с Soroka. Можно выделить несколько типов образа мысли потенциальных пользователей плагина Soroka: искатель, изучатель, фиксатор.

Искатель Никита, 21 год 1) Мотивация Никита дизайнер, занимается он этим совсем недолго, поэтому сомневается в каждом своём решении, сейчас он делает лонгрид в Figma и никак не может продвинуться дальше, Никита сидит уже несколько суток над одной проблемой — какой шрифт выбрать. Он бесконечно нажимает на клавиатуре клавишу вниз, перебирая каждый шрифт в селекторе Figma. Думает, что шрифт не отражает характер того, что он пишет, и вообще, они все какие-то дурацкие... Разочаровавшись в переборе, злясь на себя за непонимание того, что ему нужно, Никита начинает гуглить подборки шрифтов и натыкается на сайт нашего плагина. Он читает описание и расплывается в улыбке, кажется он нашёл своё спасение — шрифтовые пары да ещё и прямо в Figma. Юный дизайнер устанавливает плагин. — Тачпоинт: Лендинг 2) Знакомство Никита открывает плагин и начинает постепенно смотреть все шрифты, он открывает каждую папку, наводит мышкой на каждую карточку и добавляет в избранное понравившиеся. После этого он смотрит на избранные и заходит в карточки шрифтовых пар, читает информацию о некоторых шрифтах. Конечно, даже здесь он не может определиться с одной парой, поэтому тройку лучших он экспортирует себе на артборд

User stories 124-125

—Тачпоинт: Плагин

Изучатель Матвей, 19 лет

Фиксатор Арина, 22 года

1) Мотивация

Матвей дизайнер молодой, Арина любит Figma и следит за каждым Шрифты — неотъемлемая часть в созданииобновлением. дизайна. Графические редакторы но не пугливый, не изобретает Когда запустилось представляют всё больше возможностей для дизайнеров, некоторые велосипед, а переиспользует готовое. сообщество, онаа была однойпозволяют расширить функционал помощью плагинов — кто «дополнительных Увидев постсвой в Telegram о том, счто скоро из первых, создал в нём страницу. программных блоков, подключаемых к основной программе». Появление в Figma появится плагин Soroka матвей не Ей интересно попробовать себя простого доступа к созданию плагинов создало длясферах, дизайнеров и разработчиков задумываясь переходит по ссылке и в разных поэтому она решает новое поле, которого решаются глубокие Книга посвящена попадает на внутри лендинг. Он читает всё сделатьпроблемы. свой собственный плагин. созданию плагина преодолеть парадоксчто выбора шрифта и помочь описание, отмечает,призванного что сайт выглядит Её мучило, нельзя подчёркивать дизайнерам подбирать шрифтовые пары. текст с применённым стилем, и она «прикольно», и сохраняет его в закладки. Он оставляет свою почту, решила сделать плагин, который бы чтобы после на неё пришло письмо решил эту проблему. Для поиска о запуске плагина. вдохновения и референcов Арина начала просто искать разные плагины, — Тачпоинт: Лендинг связанные с текстом и наткнулась на наш. Он показался ей довольно 2) Знакомство необычным и очень объёмным по сравнению с остальными, поэтому она Через несколько месяцев он получает решила изучить его поподробнее. письмо на почту о том, что запущена бета-версия плагина. Ему всё ещё —Тачпоинт: Figma Community интересно, что там нового, поэтому он переходит на обновлённый 2) Знакомство лендинг и смотрит, что интересного там теперь. Но Матвей не хочет Открыв страницу плагина, она читает быть тестировщиком, потому что описание, переходит на лендинг, не видит смысла использовать листает его, оценивает визуал сайта то, что ещё не готово, а ещё его и возвращается к плагину. Перед оталкивает необходимость обратной Ариной не стоит проблема выбора связи, он хочет только получать, шрифта, её интересует сам факт но не отдавать. существования Soroka. Она открывает его, нажимает на всё без конкретной —Тачпоинт: Почтовая рассылка последовательности, быстро составляя представление о продукте. Кроме этого, так как ей интересно всё, она смотрит, как устроен плагин изнутри, проинспектировав с помощью строки разработчика. Так же быстро сделав выводы и пометив решения она закрывает плагин. — Тачпоинт: Лендинг + Плагин 125

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

3) Артборд Итак, у Никиты есть четыре фрейма: три шаблона использования шрифтовых пар и один его собственный лонгрид. Он внимательно смотрит на все борды сравнивая шрифты, применяет к своему проекту шрифтовые пары из шаблона, внимательно создаёт аналог, учитывая высоту строк и расстояние. И о чудо, Lora + Roboto удовлетворяют все желания дизайнера. — Тачпоинт: Плагин + Шаблон 4) Возвращение Никита, помня положительный опыт работы с плагином, в следующем проекте сразу открывает его, потому что знает, что найдёт в нём то, что нужно, и выбирает шрифтовую пару на самом раннем этапе работы, избегая лишней траты времени и нервов 5) Свободное время Спустя год Никита перестал бояться шрифтов, за это время он узнал много нового и наработал навыки. Теперь он иногда открывает плагин, чтобы почитать об истории создания шрифтов и о их дизайнерах. Ура, мы помогли хотя бы одной живой душе!

User stories 126-127

3) Запуск

3) Возвращение

Наступает момент Икс и плагин В процессе разработки своего плагина запускается, на почту приходит письмо Арина вспоминает, что некоторые с радостной новостью, но Матвей похожие решения в коде были видит эту новость в очередном реализованы в Soroka, она находит его паблике и вспоминает о том, что снова, для удобства, она переходит Шрифты неотъемлемая часть в созданиина GitHub дизайна. иГрафические редакторы он читал — на сайте. Переходя по ссылке изучает код там. До скорых представляют большеFigma возможностей для дизайнеров, он попадает навсё страницу встреч, Арина! а некоторые позволяют расширить функционал с помощью плагинов — «дополнительных Community, свой где видит уже знакомое программных подключаемых к основной программе». Появление в Figma ему описание.блоков, Он немедленно простого доступа к созданию плагинов создало для дизайнеров и разработчиков устанавливает плагин. новое поле, внутри которого решаются глубокие проблемы. Книга посвящена созданию плагина призванного преодолеть парадокс выбора шрифта и помочь —Тачпоинт: Figma Сommunity дизайнерам подбирать шрифтовые пары. 4) Непредсказуемость Матвей— веб-дизайнер, у него профессиональный интерес ко всем новым инструментам, его интересует механика, что реализовано и как выглядит, поэтому он смотрит, как работает ховер, заходит в разные карточки шрифтов и читает некоторые тексты. Матвей непременно нажимает на все фильтры, смотрит, что происходит. — Тачпоинт: Плагин 5) Возвращение Матвей запоминает функционал плагина и через время, когда он решает использовать шрифт от Google Fonts в своём проекте, он открывает плагин, и воспользовавшись поиском находит пары к этому шрифту. Сравнивая, незаходя во внутрь карточки, он быстро выбирает понравившееся сочетание, и чтобы не потерять, добавляет пару в избранное. После у Матвея появился новый проект, в качестве референса он находит в закладках наш обновлённый лендинг, делает несколько скриншотов и использует это в своём проекте. Это приятно, спасибо, Матвей!

127

Bold Italic

Bold

Ключевые принципы Figma — открытость, доступность, community-driven подход, а также безопасность, поэтому в логотипе использована Helvetica Neue, как доступный на каждом или почти устройcтве

128

Italic

У стиля нет цели перекричать кого-то, сами шрифты несут много нагрузки, стиль должен быть ненавязчивым и обрамлять сам продукт

Custom

Thin Italic

Light

Разнообразие начертаний внутри одного логотипа отражает вариативность сочетания шрифтов

129

UltraLight

В конце элемент, преобразованный из звёздочки так, что напоминает след от птичьей лапки

#2A2921

#AEAEAE

#D7D7D4

#E1E1E1

#EFEFEF

#F6F4F3

#FFFFFF

— Все чёрные элементы интерфейса

— Табы Шрифты — неотъемлемая часть в создании дизайна. Графические редакторы Ховер представляют — всё больше возможностей для дизайнеров, а некоторые позволяют — Фон обложексстатей расширить свой функционал помощью плагинов — «дополнительных программных блоков, подключаемых к основной программе». Появление в Figma простого доступа к созданию плагинов создало для дизайнеров и разработчиков новое поле, внутри которого решаются глубокие проблемы. Книга посвящена созданию плагина призванного преодолеть парадокс выбора шрифта и помочь — Обводка карточек пары. дизайнерам подбирать шрифтовые — Альтернативный серый

— Текст пустых избранных — Фон обложек статей

— Фон обложки для Figma Community — Светло-серый

— Фон плагина

— Цвет карточек и кнопок интерфейса

Построение знака Первоначально знак в логотипе возник из шрифтовой звёздочки путём отсекания двух лучиков. После были наложены направляющие под ровными углами и знак был перестроен.

0°

15°

75°

45°

132

15°

133

134

Использование знака и логотипа

Знак используется в качестве элемента паттерна для обложек страниц шрифтовых пар. При этом он располагается как следы от птиц на снегу. Этот же принцип задействован и в обложке для Figma Community с тем отличием, что там он выступает в качестве фона, то есть берёт на себя меньше внимания, но закрепляет визуальное представление бренда. Лапка же выступает и в качестве иконки для плагина как маленький, но активный элемент. Обложка для Figma Community — это выжимка из разных составляющих бренда, которая должна быстро донестии до пользователя максимум информации о плагине и бренде. Она содержит видео с примером работы плагина, потому что Soroka содержательно объёмнее, чем многие плагины, невозможно ограничится одной картинкой для отображения минимального функционала. Кроме этого она содержит в себе логотип, элементы стиля в виде лапок и слоган. Важно указать ключевой функционал в нескольких фразах, чтобы человек быстро понял в чём дело и не ушёл не установив плагин. 135

Знак в ссылках-бложках страниц шрифтовых пар 136

Знак в иконке Figma Community 137

Использование знака и логотипа

Посмотреть обложку в формате gif

138

Обложка Figma Community

139

Запуск проекта

Глава И

142

Этапы запуска Запуск проекта предполагается в несколько этапов. Первый — запуск лендинга. На лендинге видео-прототип будущего плагина и призыв оставить свою почту. Вторым этапом будет расширение лендинга: добавление информации о плагине, перевод на русский язык. Также на данном этапе добавляется раздел с книгой, в котором будет рассказано про данную книгу с возможностью почитать её на внешнем ресурсе. Важным элементом второго этапа является запуск бета-тестирования плагина в коде или в интерфейсе, поэтому на собранные почты будет выслано приглашение поучаствовать в тесте. Третий этап — запуск плагина в Figma, заполнение лендинга подробной информацией о Soroka и добавление ссылки на плагин. Для повышения цитируемости с целью приявления большего числа пользователей предполагается опубликовать проект на Product Hunt, а так же рассылать в различные телеграмм-каналы, шейры в Facebook в данном случае не очень уместны, так как это узко-специализированное приложение, выйдя за пределы своего окружениия оно потеряет свою значимость.

Анонс

143

Тестирование

Запуск

Веб-версия лендинга 144

Мобильная версия лендинга 145

Видео Для публикации лендинга необходимо было получить видео, которое отображает минимальный функционал плагина Soroka. В качестве такого видео выступает запись экрана собранного прототипа из нескольких этапов: наведение на карточки, чтобы получить превью в разных видах, удаление из избранного, открытие папки шрифта, переход в карточку пары и нажатие на экспорт, чтобы получить push-уведомление. Границы плагина в прототипе поставлены в соответствии с предполагаемым размером самого плагина, а именно 768×768px. Обложка плагина в Figma может быть в формате gif, поэтому первые 8 секунд проведения мышкой над карточками из большого видео, предназначенного для лендинга, стало её частью.

Посмотреть протоип в Figma

146

Наведение на карточки в прототипе 147

Прототип плагина Soroka

148

Общее представление

Разработка плагинов

149

Заключение

Выводы и планы на защиту

Февраль

Февраль – Март

Апрель — Май

К защите ВКР

После защиты

152

2021 Финальный продукт реализованный к защите ВКР — опубликованный плагин Soroka с выше описанным функционалом. Для достижения результата необходимо пройти несколько ключевых точек: Шрифты — неотъемлемая часть в создании дизайна. Графические редакторы представляют всё больше возможностей для дизайнеров, а некоторые позволяют расширить свой функционал с помощью плагинов — «дополнительных программных блоков, подключаемых к основной программе». Появление в Figma 1) Сборка прототипа в коде простого доступа к созданию плагинов создало для дизайнеров и разработчиков новое поле, внутри которого решаются глубокие проблемы. Книга посвящена созданию плагина призванного преодолеть парадокс выбора шрифта и помочь дизайнерам подбирать шрифтовые пары.

2) Бета-тестирование плагина и внесение корректировок, основанных на проведённом исследовании 3) Публикация в Figma 4) Разработка плагина на JavaScript 5) Доработка сайта

6) Добавление новых шрифтовых пар 7) Создание веб-версии плагина 153

Вывод Найти выход из парадокса связанным с подбором шрифта не так уж просто, создание плагина Soroka для приложения Figma призвано решить эту проблему Шрифты неотъемлемая частьуровне в создании дизайна. Графические редакторы хотя бы— на локальном данного графического представляют всё больше возможностей для дизайнеров, а некоторые позволяют редактора. исследование стало основой для расширить свойПроводимое функционал с помощью плагинов — «дополнительных программных блоков, подключаемых к основной программе». Появление в Figma принятия ключевых решений разработки плагина. Полное простого доступа к созданию плагинов создало для дизайнеров и разработчиков погружение в контекст создания плагинов, изучение новое поле, внутри которого решаются глубокие проблемы. Книга посвящена истории Figma и документации разработчиков, также созданию плагина призванного преодолеть для парадокс выбора шрифта иапомочь дизайнерам пары. позволило исключить риски, проверкаподбирать гипотезшрифтовые на практике связанные с реализацией задумки и принять правильные решения в рамках заданных средой ограничений. Освещение и изучение поблемы нащупанной в плагине и рассмотрение реализованных кейсов других компаний позволило сделать осознанные решения в интерфейсе способные решить потребности пользователей. Книга стала дневником реализации плагина от погружения в контекст до дизайн-системы и построения фирменного стиля продукта.

Источники

Тексты, изображения

Прочитано, усвоено и процитировано Данные опросов: URL: https://uxtools.co/survey-2019/ URL: https://uxtools.co/survey-2018/ URL: https://uxtools.co/survey-2020/ Документация и официальная информация Figma: (1)URL: https://www.figma.com/about/ URL: https://www.figma.com/plugin-docs/api/ URL: https://www.figma.com/plugin-docs/whats-supported/ URL: https://www.figma.com/font-types/ Про развитие Figma и плагинов: Anna Escher. Figma now lets interface designers collaborate on projects//28.09.2016. URL: https://techcrunch.com/2016/09/28/ design-tool-figma-launches-multiplayer-collaboration-mode-for-interface-designers/?guccounter=1&guce_referrer=aHR0cHM6Ly9zZWFyY2gudGVjaGNydW5jaC5jb20vY2xpY2svX3lsdD1BMktMZlJ0VG5wOWZFaWNBa3ZDbkJXVkg7X3lsdT1ZMjlzYndOaVpqRUVjRzl6QXpFRWRuUnBaQU1FYzJWakEzTmovUlY9Mi9SRT0xNjA0MzI1MDc1L1JPPTEwL1JVPWh0dHBzJTNhJTJmJTJmdGVjaGNydW5jaC5jb20lMmYyMDE2JTJmMDklMmYyOCUyZmRlc2lnbi10b29sLWZpZ21hLWxhdW5jaGVzLW11bHRpcGxheWVyLWNvbGxhYm9yYXRpb24tbW9kZS1mb3ItaW50ZXJmYWNlLWRlc2lnbmVycyUyZi9SSz0yL1JTPUIwTVdZMkV1aVlzemVIRTNaRE4zbnhIS3Izcy0&guce_referrer_ sig=AQAAAJrJFDZ8WF_X1YkOH-te5Lijvn63pqFzl64SB8ZwVfbvb0UfwPGK7e8zZVeirEPvACraHISwRnNlAE-mOM7ZJI43-ehomj7PH8DPJFXY7wQCcf4KXAPY993WS4ZSnpy5bUPCFO09jiUowA5_KUe0KhQx8mX7u4gRWzVq5r-0PMqJ Kevin Akwok. Why Figma Wins//19.06.2020. URL: https://kwokchain. com/2020/06/19/why-figma-wins/ Ben Kopf. The Power of Figma as a Design Tool//https://www.toptal. com/designers/ui/figma-design-tool Проблема и решение: (2)Журнал SberKnowledge#21. Принятие решений. Человек нерациональный//2019. URL: https://cs.sberbank-school.ru/storage/8a/6f/02ca-6ce0-11ea-8ec6-005056011b68/H3E22NMnFurj-

FRQ1w72HUzTb06nL1jVIKbUI3xVp/ Anupam Pareek. Breaking paradox of choice — Netflix case study//18.12.2019. URL: https://uxplanet.org/breaking-paradox-ofchoice-netflix-case-study-7f29107d1e2b James Chen, Gordon Scott.Analysis Paralysis//07.04.2020. URL: https://www.investopedia.com/terms/a/analysisparalysis.asp Шрифты — неотъемлемая часть в создании дизайна. Графические редакторы представляют всё больше возможностей для дизайнеров, а некоторые позволяют Robert Taibbi L.C.S.W. Do You Have Analysis Paralysis?Overthinkрасширить свой функционал с помощью плагинов — «дополнительных ing everything can make everyday life a challenge/ /24.04.2019.в URL: программных блоков, подключаемых к основной программе». Появление Figma https:/ /www.psychologytoday.com/intl/blog/fixing-families/201904/ простого доступа к созданию плагинов создало для дизайнеров и разработчиков do-you-have-analysis-paralysis новое поле, внутри которого решаются глубокие проблемы. Книга посвящена созданию плагина призванного преодолеть парадокс выбора шрифта и помочь (7)Вадим шрифтовые Шлячков.Закон Хика, который мы потеряли дизайнерам подбирать пары. в интерпретации//09.07.2019. URL: https://v-shliachkov.medium.com/%D0%B7%D0%B0%D0%BA%D0%BE% D0%BD-%D1%85%D0%B8%D0%BA%D0%B0-%D0%B A%D0%BE%D1%82%D0%BE%D1%80%D1%8B%D0%B9%D0%BC%D1%8B-%D0%BF%D0%BE%D1%82%D0%B5%D1%80%D1%8F%D0%BB%D0%B8-%D0%B2-%D0%B8%D0%BD%D1%82%D0%B5%D1%80%D0%BF%D1%80%D0%B5%D1%82%D 0%B0%D1%86%D0%B8%D0%B8-2d577e005a69 URL: https://lawsofux.com/hicks-law Sarah Perez.Netflix tests human-driven curation with launch of ‘Collections’//23.08.2019. URL: https://techcrunch.com/2019/08/23/netflix-tests-human-driven-curation-with-launch-of-collections/ (4)Paul Donoughue.Netflix, ‘show-verload’, and the paradox of choice in the streaming age//03.09.2019. URL: https://www.abc.net.au/ news/2019-09-04/in-a-world-of-infinite-content,-how-do-youchoose/11473294 (3,5,6)Владимир Кричевский. 25 полемических суждений не в пользу шрифтоцентризма//09.04.2014. URL: https://typejournal.ru/articles/ Krichevsky-Manifesto Про сорок: Rupert Taylor.The Folklore of Magpies//23.09.2019. URL: https://owlcat ion.com/humanities/The-Folklore-of-Magpies

Использованные изображения Стр. 16 — Скриншот с сайта Figma (figma.com) Стр. 21 — Скриншот с сайта Figma Community (figma.com/community) Стр. 29 — Message passing (https://www.figma.com/plugin-docs/howplugins-run/) Стр. 35 — Обложка плагина «Lorem Ipsum» (https://www.figma.com/ community/plugin/736000994034548392/Lorem-ipsum) Стр. 36 — Обложка плагина «Color Blind» (https://www.figma. com/community/plugin/733343906244951586/Color-Blind); Обложка плагина «Stark» (https://www.figma.com/community/plugin/732603254453395948/Stark); Обложка плагина «Simplify» (https://www.figma.com/community/plugin/809139536998662893/ Simplify); Обложка плагина «Easometric» (https://www.figma.com/ community/plugin/750743440401413268/Easometric); Стр. 37 — Обложка плагина «Proportional Scale» (https://www. figma.com/community/plugin/756895186298946525/Proportional-Scale); Обложка плагина «JSON to Figma» (https://www.figma. com/community/plugin/789839703871161985/JSON-to-Figma); Обложка плагина «Chart» (https://www.figma.com/community/plugin/734590934750866002/Chart) Стр. 38 — Обложка плагина «Unused Components» (https://www. figma.com/community/plugin/838413521721548186/Unused-Components); Обложка плагина «Better Font Picker» (https://www.figma. com/community/plugin/739922281164562258/Better-Font-Picker); Обложка плагина «Font Preview» (https://www.figma.com/community/ plugin/890494567122693015/Font-Preview) Стр. 39 — Обложка плагина «Unsplash» (https://www.figma.com/ community/plugin/738454987945972471/Unsplash); Обложка плагина «LottieFiles» (https://www.figma.com/community/plugin/809860933081065308/LottieFiles); Обложка плагина «Remove BG» (https://www.figma.com/community/plugin/738992712906748191/ Remove-BG) Стр. 46 — Скриншот приложения «Шрифты» Стр. 55 — Скриншот поста в Твиттер с сайта (https://www.abc.net.

au/news/2019-09-04/in-a-world-of-infinite-content,-how-do-youchoose/11473294) Стр. 58–59 — Скриншот приложения Font Explorer Стр. 61 — Скриншот сайта type.today Шрифты — неотъемлемая часть в создании дизайна. Графические редакторы Стр. 63 — Скриншот сайта fontstand.com представляют всё больше возможностей для дизайнеров, а некоторые позволяют расширить свой функционал с помощью плагинов — «дополнительных Стр. 65 — Скриншот плагина type.today screen shooter (https:// программных блоков, подключаемых к основной программе». Появление в Figma www.figma.com/community/plugin/755467873814160138/type.toпростого доступа к созданию плагинов создало для дизайнеров и разработчиков day-screen-shooter) новое поле, внутри которого решаются глубокие проблемы. Книга посвящена созданию плагина призванного преодолеть парадокс выбора шрифта и помочь дизайнерам подбирать шрифтовые пары.

Finding harmony among disparate fonts

soroka.tools Формат 70×100/16, Гарнитура Basis Grotesque Pro Тираж Исследование экосистемы плагинов графического редактора Figma, процесса изучения и подбора шрифтовых пар, разработка плагина для подбора шрифтовых пар в Figma