Как программа Eagle помогает дизайнеру собирать и использовать референсы

Меня зовут Елена Снегирёва, я — UX/UI-дизайнер в Студии Валерия Комягина. Проектирую и создаю дизайн сайтов и сервисов. Решила поделиться личным опытом использования полезной программы для сбора референсов.

Референсами я называю примеры решений по дизайну. Например, как выглядит первый экран, слайдер или страница товара. Как работает форма или анимация у кнопки. Какие используются цвета, типографика, сетка — или как выглядит вся страница целиком.

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

Чтобы решить задачу, я исследую бизнес клиента. Изучаю сайты лидеров в отрасли и сайты, которые клиент привел в брифе. Это референсы, которые помогут понять задачу и учитывать контекст проекта.

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

В каждом проекте Figma мы создаем страницу референсов, рядом с макетом на полях тоже могут оказаться скрины со ссылкой на источник. Но вот начинается другой проект, и возникает вопрос: как найти «ту фиолетово-красную карточку со стрелкой», которая мне попадалась весной?

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

Раньше у меня были доски в Pinterest и на Behance, закладки в браузере и Instagram, сообщения в чате Save Message в Telegram. Я сохраняла скрины со ссылками на источник в проекте Figma, где были страницы с категориями.

Но есть сложность — много изображений Figma долго грузит, да ещё и снижает качество изображений. Когда приходила новая задача, искать собранные рефы мне приходилось в нескольких разных источниках.

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

Eagle — это программа для ведения библиотеки файлов. Наши разработчики назвали бы её файловый менеджер.

В библиотеку Eagle я сохраняю скрины, фото, видео, векторы, ссылки, документы, шрифты и другие файлы.

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

Можно сохранять и скрины страниц полностью: лендинг недвижимости, главная страница интернет-магазина. Это самая тяжелая папка, которую я назвала Web. Здесь я всегда использую фильтры, без них разобраться сложно.

При сохранении я могу оставить заметку, например, чем интересен этот реф. Присваиваю нужное имя и свой рейтинг. Обязательно присваиваю файлу тэг: например, корпоративный, beauty, fashion, Behance, UPROCK. Все эти признаки помогают быстро найти нужный референс и сделать подборку.

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

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

Если вы привыкли пользоваться горячими клавишами, то вот они: Alt+3 (скриншот видимой области), Alt+4 (сохранить всю страницу целиком), Alt+0 (сохранить ссылку в Eagle). При этом у референса будет сохранен URL, с которого вы сделали скрин. Всегда можно перейти по ссылке и вспомнить источник рефа, например, посмотреть анимацию у кнопки.

Если потянуть за изображение, например, за логотип или фото, можно сразу сохранить его в нужную категорию. Так я часто сохраняю фото из фотобанка или с сайта клиента, чтобы потом загружать в проект.

Референс из базы можно перетащить на страницу в Figma. Если вы делаете скрин страницы сайта целиком, лучше сделать экспорт на компьютер и вставить изображение в Figma через плагин Insert Big Image. В этом случае не снизится качество изображения. Потому что Figma уменьшает разрешение крупных изображений.

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

Если открыт Eagle, можно зажать клавиши Ctrl+Shift+E и сделать скриншот экрана, без привязки к браузеру. Программа позволяет сохранить и состояние наведения. Мало какие программы помогут вам заснять, как выглядит выделенный пункт меню, ведь это состояние прекращается, когда вы включаете скриншотер.

Расширение для браузера делает в меню правой кнопки мыши доступной функцию Сохранить видео в Eagle. Особенно это удобно, если видео в формате webp.

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

Каждый шрифт, который я использую в проекте в виде файла TTF, тоже сохраняю в библиотеке Eagle. Это очень удобно при работе сразу на двух компьютерах. Стоит мне в Eagle нажать на зеленую круглую кнопку, и шрифт для компьютера считается установленным. Чтобы выбрать шрифт, смотрю превью и вижу гарнитуру.

Когда коллеги просят поделиться шрифтом, я быстро делаю экспорт из Eagle или просто выделяю файлы шрифта в его папке в базе — и перетаскиваю в папку на Google-диск.

Ссылки с YouTube попадают в «умную» папку Eagle — вы сами можете задать правила для такой папки.

Статьи и полезные сервисы я сохраняю ссылкой. Eagle открывает формат URL как браузер. Здесь можно читать статью или зайти на сайт сервиса прямо в Eagle, а не отвлекаться, чтобы запустить браузер. Часто я именно так открываю сайт с символами Юникода, чтобы скопировать знак длинного тире или кавычки-ёлочки.

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

Eagle выручает меня, когда нужно сделать скриншот из фильма, не выходя из просмотра. Иногда мне нравится, как оформлены титры или заставка. Это тоже дизайн.

Например, смотрю фильм «Власть» с Кристианом Бейлом и… думаю об интернет-магазине наживок для рыбаков. В титрах к этому фильму очень удачно обыграли наживки. Мне понравился цвет, композиция и шрифт. Если я вижу в кадре удачную композицию и цветовую схему, то делаю скрин. Интерьер из любимого фильма пригодится для разговора с дизайнером интерьеров.

В библиотеке Eagle можно кадрировать изображение, повернуть, отразить по горизонтали, сделать пометку, изменить масштаб просмотра. Есть и навигатор по изображению.

Интерфейс у программы имеет светлую и темную тему, чтобы можно было выбрать, на чьей ты стороне :) Для наглядности у папок могут быть разные иконки и цвета. Программа Eagle сделана для дизайнеров, фотографов и визуализаторов — вам будет приятно ей пользоваться.

Недавно у Eagle появилась функция работы с аудио. Есть API. Надеюсь, когда-нибудь выйдет и мобильное приложение, чтобы сохранять референсы с помощью телефона.

Библиотека может располагаться либо на локальном диске компьютера, либо в облаке, но всегда на стороне пользователя. Нужно свободное место под файлы.

Можно вести несколько библиотек и переключаться между ними. Я работаю и в офисе, и дома на ноутбуке, поэтому мне подходит хранение в облаке, чтобы иметь доступ к базе с разных компьютеров. На моём Google-диске занято уже 15Гб, это 3 000 файлов. Чем крупнее база, тем дольше она грузится. Например, в дороге или при падениях скорости интернета ожидание будет долгим.

Если добавить диск с базой и папку с cache в исключения для брандмауэра (Windows), то Eagle будет грузить файлы в разы быстрее, потому что будет избегать проверки. Программа сама сообщит вам о такой возможности.

Eagle — платная программа. За 29,95$ вы получаете доступ с двух компьютеров навсегда. Покупка возможна только через PayPal. Попробовать программу можно бесплатно в течение 30 дней. Есть скидки для студентов и преподавателей. Я повышаю уровень на курсах — отправила сертификат об обучении и получила скидку.

Если после моего рассказа вы поняли, что с такой программой работа с референсами приобретет новые грани, поверьте, так оно и будет! Это не рекламная статья, а просто моё желание рассказать о полезном инструменте. Работая в Eagle, мой внутренний перфекционист радуется и раскладывает всё «по полочкам». Больше мотивации пополнять библиотеку, потому что это просто и удобно, собрано в единую систему. Делитесь в комментариях своими впечатлениями от использования программы и рекомендуйте коллегам, если вам понравилось.

Автор статьи: Елена Снегирёва, UX/UI-дизайнер в Студии Валерия Комягина (SVK.Digital).

На обложке использована иллюстрация с сайта программы eagle.cool (в некоммерческих целях).