Новый способ упорядочить все ваши дизайнерские вдохновения

Большинство творческих людей, таких как дизайнеры продуктов и цифровые художники, знакомы с Pinterest. Люди используют его, среди прочего, для создания и сбора досок вдохновения для дизайна веб-сайтов, картин и архитектуры. Pinterest был частью моей жизни в течение долгого времени, и моя первая коллекция датируется 2012 годом. Однако по мере того, как моя карьера развивалась, и я стал дизайнером продуктов, этот инструмент стал менее актуальным для меня, поскольку многие аспекты не соответствуют моим Персона дизайнера пользовательского интерфейса. Вместо того, чтобы зацикливаться на Pinterest, я нашел скрытую жемчужину инструмента под названием Eagle для организации моей доски настроения и ресурсов для дизайна. Этот пост будет посвящен способам и причинам, по которым я отказался от Pinterest и перенес все свои профессиональные рабочие процессы в приложение Eagle.

Почему Pinterest не подходит для продуктового дизайна?

На данный момент я работаю над дизайном мобильного и веб-приложения Fintech. Поскольку я начинаю с нуля, мне нужно настроить дизайн-систему, изучить сотни вариантов дизайна панели инструментов и изучить варианты шрифтов, цветовые палитры, образцы иконографии, дизайн веб-сайтов, сигналы уведомлений и шаблоны для мобильных устройств. Для меня было бы невозможно создать полный список вдохновения на Pinterest, поскольку он содержит разные типы ресурсов. Чтобы сделать каждую из этих вещей, которые я упомянул выше, вам понадобится инструмент, который понимает определенный формат файла и может черпать вдохновение из разных источников.

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

Давайте начнем!

Что касается инструментов, то Eagle и Pinterest занимают достойное место в экосистеме коллекции вдохновения. Я объясню, что я имею в виду, в конце поста. Но, как уже упоминалось, для создания доски настроения для продукта требуется инструмент для решения сложных вариантов использования, с которыми Pinterest не справится. Я разобью свой процесс сборки и миграции на 10 причин, почему и как я использую Eagle. Надеюсь, эти причины могут побудить вас изучить этот будущий инструмент для организации вашего вдохновения.

01 • Быстрый импорт вдохновения

Многие из моих вдохновений хранятся в отдельных папках на Dribbble , Behance и Pinterest, которые не взаимодействуют друг с другом. Из-за этого я вынужден вручную загружать изображения из каждого из этих источников в Miro. Однако через некоторое время производительность Miro ухудшается, поскольку он не может одновременно обрабатывать сотни изображений. Приложение Eagle помогает мне решить две самые насущные проблемы в описанном выше потоке —

1. Пакетное извлечение изображений из Pinterest, Behance и Dribbble для их хранения в одном месте. Это экономит мне время, а также помогает хранить все мои идеи в одном месте.
2. Инструмент не ломается, когда необходимо обработать большой набор изображений. На самом деле, во время моего интенсивного использования мне кажется, что он был создан для этого.

Знаете ли вы, что некоторые сайты, такие как Behance , блокируют щелчок правой кнопкой мыши, из-за чего люди не могут загружать изображения? К счастью, Eagle-app преодолевает это ограничение JavaScript.

02 • Ресурсы сообщества

Когда я перешел из Sketch около пяти лет назад, поддержка сообщества в Figma была важной функцией, которая даже по сей день помогает мне учиться у других дизайнеров, загружать бесплатные ресурсы, созданные другими дизайнерами, и общаться с людьми, которых я никогда не мог встретить лично. Я могу сказать, что причина, по которой люди используют Pinterest, заключается в том, что они могут просто прикреплять изображения других людей и создавать свои доски вдохновения. С Eagle я могу отвлечь свое внимание на его Сообщество для сбора ресурсов, а не только для вдохновения. Например, я могу загружать шрифты, значки и иллюстрации для своей работы по дизайну пользовательского интерфейса.

03 • Пометка изображений и фильтрация

Сортировка изображений после сбора мегатонн вдохновения в моем мудборде — это кошмар. Eagle позволяет мне помечать все мои ресурсы несколькими ключевыми словами, что позволяет мне получать наиболее подходящее изображение быстрее, чем когда-либо прежде. Чтобы привести пример, мне нужно собрать снимки из Revolut. Снимки можно разделить на следующие категории:

1. Маркетинговые / рекламные кампании
2. Сайт складывается
3. Шаблоны приложений
4. Изображения App Store и Play Store

04 • Охота по цветовой палитре

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

Функция цветовой палитры Eagle замечательно фиксирует значения HEX, RGB, HSL и CMYK для каждого цвета и позволяет копировать их в буфер обмена для дальнейшего использования в другом инструменте дизайна.

05 • Поддержка 90 типов форматов файлов

Я сохранил множество ресурсов и активов в своей библиотеке Eagle, и я поражен, увидев диапазон типов файлов, которые поддерживает инструмент. Он может обрабатывать 90 типов файлов , включая все типы изображений, 3D-объекты на основе объектов, файлы на основе инструментов, такие как Fig/PSD/Ai, видео, аудио, шрифты, изображения-RAW и форматы на основе документов, такие как XLS и DOC. . Чтобы привести вам пример, несмотря на то, что Figma теперь принадлежит Adobe, я не могу просто открыть и просмотреть векторные ресурсы Adobe, такие как ресурсы AI, EPS или PDF, в Figma. Унифицированное решение, поддерживающее большое количество типов файлов, идеально подходит для любого креатива.

06 • Сохранение прямой ссылки

При разработке целевых страниц сохранение веб-ссылок становится важным. Снапшоты того или иного раздела — обычное решение, которое не совсем подходит. Обычно мне требуется как сохранение активной ссылки, так и снимок веб-сайта. Инструмент на основе плагина Chrome — FireShot — отличный вариант для захвата всего веб-сайта, а в сочетании с Eagle вы также можете сохранить активный URL-адрес веб-сайта. Самое приятное в сохранении URL-адресов Eagle заключается в том, что он открывает веб-сайт внутри инструмента, что отлично подходит для уменьшения отвлекающих факторов и удержания меня в рабочем процессе.

07 • Управление вложенными папками

Связывание одной папки с другой для создания отношений родитель-потомок при сборе изображений из схожих источников отлично подходит для информационной иерархии и управления. Pinterest, к сожалению, не поддерживает вложение досок, но Eagle поддерживает. В моем случае мне пришлось разделить все изображения Playstore и Appstore отдельно, а также иметь отдельные папки для каждого приложения, где я захватил длинный список предварительных просмотров приложений. Я нашел привлекательную ссылку поддержки , которая объясняет все операции с папками, которые пользователь может выполнять с помощью приложения Eagle.

08 • Поиск дубликатов

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

09 • Работает из буфера обмена или перетаскиванием

Как вы, возможно, уже поняли из моего опыта, создание хорошо продуманной доски настроения — непростая задача. Это требует много работы и заполнения имен изображений, описаний и других значений, которые я считаю довольно обыденными. Обычно я трачу 2–3 часа на то, чтобы сделать снимки экрана из нескольких источников, а затем упорядочить эти снимки экрана в логические структуры папок. Поскольку количество скриншотов может быть от 200+, функция перетаскивания пригодится. В отличие от Pinterest, я могу перетаскивать более 200 неорганизованных изображений в Eagle и выбирать, оставить их как есть или упорядочить позже, когда мне нужно. Приложение не заставляет меня называть каждый из моих файлов. Обычно я заканчиваю категоризацией и массовым переименованиеми пометить их менее чем за 10 минут. Я также могу напрямую копировать и вставлять изображения из буфера обмена, что очень удобно при работе с такими инструментами, как Figma или Confluence.

10 • Отлично подходит для мудборда дизайн-системы

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

В итоге я собрал гораздо больше, чем просто мобильные и веб-вдохновения. Полный пакет состоял из ежегодных финтех-отчетов, цветовых палитр, потоков приложений, шаблонов дизайна, скриншотов Playstore/AppStore, тонов уведомлений, логотипов, значков, иллюстраций и реальных коллекций URL-адресов веб-сайтов.

Есть еще одна вещь…

Несмотря на все замечательные вещи, которые я могу сделать с Eagle, есть одна мелочь, которую, как мне кажется, можно улучшить. Eagle — это прежде всего локально устанавливаемый клиентский инструмент. Это означает, что я не могу просматривать свои изображения на мобильном устройстве и не могу получить доступ к своему вдохновению с онлайн-устройства, такого как iPad. Я по-прежнему могу создавать резервные копии всей моей библиотеки на Google Диске или в Dropbox, но я не могу просматривать их, если у меня нет доступа к моему ноутбуку. Хотя это не является нарушением условий сделки, это не идеально. Начиная новый проект, я часто одержим сбором вдохновения время от времени, что означает, что я склонен собирать изображения во время таких занятий, как поездки на работу.

Я надеюсь, что Eagle в своей будущей версии сможет поддерживать работу с мобильными устройствами. Это может быть особенно сложно решить при работе с большими типами файлов, но один из способов показать только ресурсы PNG, JPEG, WEBP, GIF, MP3 и MP4 в онлайн-версии, а другие сложные типы файлов могут быть заблокированы для предварительного просмотра. Это решение может охватывать широкий набор коллекций на основе изображений.

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

Конечные примечания

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

Это конец этого короткого, но, надеюсь, проницательного чтения. Спасибо, что дошли до конца. Надеюсь, вы что-то извлекли из этого.

‍ Присоединяйтесь к моему контенту или переходите в мои личные сообщения на LinkedIn , Twitter , Figma , Dribbble и Substack . Комментируйте свои мысли и отзывы или начните разговор!