{"id":9131,"title":"CRM-\u0441\u0438\u0441\u0442\u0435\u043c\u044b \u2014 \u044d\u0442\u043e \u0447\u0442\u043e-\u0442\u043e \u043d\u0430 \u0431\u043e\u0433\u0430\u0442\u043e\u043c. \u0418\u043b\u0438 \u043d\u0435\u0442!","url":"\/redirect?component=advertising&id=9131&url=https:\/\/vc.ru\/promo\/320668-predprinimatelyam-ne-nuzhen-crm-partner-salesforce-obyasnyaet-pochemu-my-ne-pravy&placeBit=1&hash=737d7f6a70b711e4597167ca03452a69967df2ee861f60beeefbea5b58cf8663","isPaidAndBannersEnabled":false}

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

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

Что такое референсы и зачем они нужны

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

Повышаем насмотренность

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

Всегда учитываем задачи конкретного проекта

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

Eagle — программа для хранения референсов

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

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

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

Как я собирала референсы до Eagle

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

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

Почему я перешла на Eagle

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

Как работает Eagle

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

Что можно сохранять и как наводить порядок

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

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

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

Можно создать понятный каталог референсов

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

Это экономит время при выполнении конкретной задачи

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

Расширение Eagle для браузера — настоящий помощник

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

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

Изображения сохраняются быстро, но есть хитрость

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

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

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

Чем еще полезна программа Eagle

Скриншотер от 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

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

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

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

0
0 комментариев
Популярные
По порядку
Читать все 0 комментариев
Почему аренда самоката стоит как каршеринг и зачем отказываться от франшиз: интервью с главой Whoosh Дмитрием Чуйко Статьи редакции

До продажи бизнеса есть ещё «как минимум» два года, а пока Whoosh подумывает о запуске в Европе и учится сам собирать электросамокаты.

Сооснователь и гендиректор Whoosh Дмитрий Чуйко
Использование YOLOv5 для задачи детекции

Ликбез по нейронным сетям

«Она похожа на соль — улучшит любое блюдо, если не переборщить»: как инженер-пианист создал гитарную педаль Big Muff Статьи редакции

Майк Мэтьюс бросил работу в IBM, чтобы дарить гитарам звучание, как у Хендрикса и The Rolling Stones, и придумал «золотой стандарт» педалей с искажением: её в своих записях использовали Pink Floyd, The White Stripes и Depeche Mode.

Майк Мэтьюс Vintage Guitar
Как я стал резидентом ОЭЗ «Технополис Москва» — опыт компании «ХайТэк»

Опытом работы на территории особой экономической зоны столицы делится генеральный директор НТЦ «ХайТэк» Алексей Алясев.

Пресс-служба ОЭЗ «Технополис Москва».
Модемы, роутеры и интернет-центры Yota можно приобрести на Avito, OZON и «СберМегамаркет»
Китайский стартап по производству сельскохозяйственных роботов FJDynamics привлёк $70 млн Статьи редакции

Компания хочет упростить ручную работу в строительстве и садоводстве.

Аборты и эвтаназия — убийство, а геноцид с целью сделать всех счастливыми — правильно

Какие еще моральные суждения выносит искусственный интеллект?

VELES BLOG Рассказываем как себя вести, чтобы заработать с Veles
null