Eagle для референсов UX/UI дизайна

Всем привет! Хочу рассказать, как открыл для себя новый опыт хранения и структуризации референсов для UX/UI дизайна.

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

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

Я пробовал все возможные сервисы: Pinterest, Toby, Behance, Dribbble (до сих пор не могу смириться с тем, что он каждый день просит меня залогиниться), я пробовал сохранять в соц. сетях и мессенджерах, и даже просто хранил скринами на компьютере, но все оказывалось не удобным. Как минимум потому, что я использовал все и сразу, и в итоге хорошие идеи оказывались разбросаны по разным местам, и в нужный момент я не мог найти идею, которую сохранял.

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

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

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

Как говорил знающий человек, с чем я полностью согласен:

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

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

По ходу нахождения новых рефов, я создаю категории (папки), по которым в будущем буду находить их. В целом больше всего здесь мне нужны ветки Web design и UX/UI (интерфейсы).

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

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

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

Например в первую очередь тегами я делю все найденные решения нa Mobile/Desktop, на Dark/Light. Во время процесса дизайна, я уже знаю для какого устройства, и какая тема мне нужна, и такие фильтры упростят поиск.

Например если в данный момент я хочу найти идею для демонстрации дашборда на мобильной версии, я нажму [J] для перехода в папку Dashboards, и выберу фильтр [Alt+T на Windows] Mobile.

Помимо сквозной фильтрации, тегами я отмечаю какие детали мне понравились в макете. Например если на сайте в блоке с обратной связью мне понравился Active состояние для инпута, я сохраню реф в папку с формами обратной связи, и добавлю тег Active. Состояние Active нельзя отнести у моим категориям, и тег тут отлично подходит.

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

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

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

Уверен, что мои методы не вершина мастерства структурирования данных, и на этом поле мне еще есть куда развиваться.