Найти тему

Оптимизация рабочего процесса для UI/UX-дизайнера: как создать свою базу знаний

Оглавление

Мы все стремимся совершенствовать свои навыки и оптимизировать работу, чтобы она была удобной и не занимала много времени. Чтобы создавать действительно качественные UI/UX-решения, дизайнеру необходим развитый вкус, глубокое понимание трендов, анализ лучших практик в своей сфере.

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

Мой опыт

В начале своего пути я, как и многие, задавалась вопросом, как систематизировать материалы с идеями, где хранить ссылки и заметки. Я перепробовала разные варианты:

1. Закладки в браузере. К сожалению, впоследствии было сложно понять, почему конкретный сайт или материал понравился. Практически использовать этот метод не удалось.

2. Сервисы Behance, Pinterest,Awwwards, Dribbble, Dprofile.Недостаток — все материалы хранились в разных местах, что требовало много времени на поиск. Невозможно было сравнить медиафайлы по одной теме, так как все хранились отдельно.

3. Хранение в Figma. В Figma я создала файл с тематическими папками: сайты, шрифты, постеры, анимация, эффекты. Внутри папок вставляла скриншоты, фотографии, ссылки, делала пометки. Сначала было удобно искать материалы в одном месте, сравнивать медиафайлы, переходить по ссылкам. Но из-за большого количества материалов файл перестал загружаться, приходилось ждать по 5 минут.

Рабочее пространство в Figma
1.Папки (страницы) по тематикам
2.Секции внутри папки (страницы) по узким тематикам
Рабочее пространство в Figma 1.Папки (страницы) по тематикам 2.Секции внутри папки (страницы) по узким тематикам

Программа Eagle

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

Преимущества программы

Я использую Eagle уже месяц и хочу поделиться своим опытом. Эта программа — просто находка для дизайнера!

• Теперь я не трачу время на поиск нужного файла, а могу сосредоточиться на творчестве.

• Благодаря быстрой загрузке и удобной навигации, я могу эффективно работать с большими коллекциями файлов и не терять драгоценное время.

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

Условия использования

Eagle предлагает 30-дневный бесплатный период, после которого вы можете приобрести программу по единовременной цене $29.95 и пользоваться ей навсегда.

Скидка: вы можете получить скидку на покупку программы.

1. Если вы являетесь студентом или преподавателем 30 % скидка
Как получить - сайт

2.Поделитесь своим опытом и получите БЕСПЛАТНЫЙ лицензионный ключ Eagle!
Как получить - сайт

Как начать работать с программой.

1.Установить программу на официальном сайте Eagle - https://ru.eagle.cool/

2.Организовать рабочее пространство.
Как я организовала своё рабочее пространство. Создала тематические папки: сайты, блоки, UI KIT, портфолио и т.д. Затем я начала создавать вложения в этих папках, например в папке «сайты», я квалифицировала часто встречающиеся типы сайтов: студии, корпоративные сайты, агентства, мероприятия, рестораны/кафе, интернет-магазины и т.д.
Для удобства я иногда применяю теги, чтобы разделить файлы по категориям, например, "спорт", "мебель", "украшения", "архитектор". В Eagle мне удобно быстро перемещаться по папкам и находить нужный материал.

Рабочее пространство в eagle
1.Папки по тематикам
2.Вложения в папке
3.Разделы во влажении
Рабочее пространство в eagle 1.Папки по тематикам 2.Вложения в папке 3.Разделы во влажении

Интерфейс

Информация о файле. В библиотеке предусмотрена функция предварительного просмотра: при нажатии курсора на материал фотография увеличивается на весь экран. При необходимости можно работать с отдельными материалами, редактируя их: обрезать, объединять, создавать копии, перемещать в другую папку. Очень полезно оставлять комментарии – при просмотре можно вспомнить, почему понравилась данная картинка. В правой панели меню появляется подробная информация о файле: цвета, присутствующие на фотографии, с кодом RGB, название файла, веб-сайт, теги, примечания, категории, комментарии, а также параметры изображения (размер, объем, тип дата создания).

Информация о файле
Информация о файле

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

Поиск по фильтрам
Поиск по фильтрам

Если вам сложно разобраться как работает программа, то можете воспользоваться бесплатным обучением от Eagle - сайт

-6

Как сохранять медиафайлы в Eagle

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

Как же добавлять файлы в Eagle? Все очень просто!

1.Для начала нужно установить в браузер расширение Eagle- https://en.eagle.cool/extensions
На сайте указаны браузеры, в которых работает расширение: Chrome, Safari, Firefox, Edge. Я попробовала в Яндекс, там тоже поддерживается.

2.В любом сервисе, приложении, сайте сохраняйте материалы, вот несколько вариантов:

1) Перетаскивание. Просто зажимаете изображение и перетащите в нужную папку.

-7

2) Alt + Щелчок правой кнопкой мыши

-8

3) Контекстное меню

-9

Вы можете сохранить не только отдельные файлы с сайта, но и целые страницы, их фрагменты или даже несколько файлов одновременно, группируя их по темам. Хочу поделится сочетанием горячих клавиш, которые я часто использую: Alt+2 – снимок выбранной части. Alt+3 – снимок видимой части экрана. Alt+4 – снимок всей страницы.

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

Как экспортировать файлы в другие приложения

С помощью Eagle можно экспортировать файлы любых форматов в стороннее приложение, например, в Figma, Adobe Photoshop, Adobe Illustrator и т.д.

Варианты:

1) Вы можете просто перетащить выбранный файл и перенести его в другие приложения.

2) Вы также можете скопировать файл и вставить его в другое место горячими клавишами ctrl+c, ctrl+v.

Как делиться своими ресурсами или работами

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

1)Щелкните правой кнопкой мыши файл или папку, которые вы хотите экспортировать. Выберите "Экспорт" и нажмите "Экспортировать

-10

2)Просто выберите «Экспорт на компьютер» и сохраните.

-11

Форматы в котором можно экспортировать:

1)Eaglepack - это тип файлов, доступный только пользователям Eagle. Все изображения или папки можно сохранять в виде Eaglepacks, импортировать в них и экспортировать на компьютеры. Eaglepack сохраняет не только содержимое, но также классификацию и информацию об активах. Детали, включая URL-адреса, теги и примечания, останутся прежними.
2) Экспорт на компьютер. Если вы экспортируете папку с подпапками, иерархия папок останется такой же, как в оригинале в Eagle.
3)Экспорт определенных файлов в определенном формате. Нажмите на файл, который хотите экспортировать, и выберите «Экспорт в определённом формате/размере».

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

Спасибо, что прочитали статью. Я надеюсь, мой опыт ускорит ваш процесс работы и вы правильно оптимизируете своё рабочее пространство с медиафайлами.
-12

Мои контакты:

Телеграмм
Вконтакте
Behance
Инстаграм - *Признаны экстремистскими организациями и запрещены на территории РФ