Анализировать примеры отличных дизайн-решений для UX/UI дизайнера в начале обучения просто необходимо. Так мы тренируем насмотренность и подсознательно откладываем в голове работающие примеры, чтобы потом применить их на своих макетах.
Для создания такой базы знаний я создал файл в Figma и загружал в отдельные страницы примеры удачных хедеров, слайдеров, контактных блоков и прочее, но об этом ниже. Сначала всё идёт хорошо. Если мне нужен был референс блока сайта, то я смотрел подходящий пример среди десятка сохранённых скриншотов. Но даже самому ленивому дизайнеру нужно пополнять такую библиотеку.
Так у меня появилось более 50 скриншотов каждого из каждого блока сайта, которые нужно было сначала прогрузить, чтобы выбрать подходящий. У меня 8gb оперативной памяти и всё чаще Figma перегружала систему и вылетала. Так появилась потребность в новом способе организации.
Знакомство
В дизайн-чатах я всё чаще видел разговоры о неком Eagle, который описывали как лучший способ организовывать референсы. Но была одна проблема — мне надо было перебросить скриншоты в Eagle, поэтому я долго откладывал загрузку. За один вечер я мог по несколько десятков раз перезагружать файл с библиотекой Figm'ы, чтобы прогрузить скриншоты для экспорта. Нервов хватало на папку с одним видом блоков на вечер. За полторы недели я полностью пересел в Eagle. Это было вау.
Я выбрал Eagle, потому что больше не надо было ждать десятки минут, для просмотра обычных jpg картинок. Потому что установив разрешение в Chrome, можно перетаскивать скриншоты в Eagle в два клика. И ещё потому, что поиск изображений по цветам, форматам изображений нигде ещё не был так удобен.
Секрет фирмы
Я как дизайнер использую разделение сайта по таким логическим группам: обложка, контентные блоки (фото+текст, текст, фото), видеоплеер, карточки, клиенты-награды, команда, контакты\местоположение с картой, подвал, преимущества и списки, слайдер, страница товара, таблица, тезисы-цифры, фильтр, форма обратной связи.
На любой раздел сайта можно подобрать подходящий референс, а также посмотреть полный сайт, который я обычно указываю в заметке к каждому скриншоту. Тут важно понять, что слепое копирование чужого решения не сделает вас лучше как профессионала. Важно анализировать именно логику расположения элементов и сетку, адаптировав для своего проекта.
Выводы
Eagle — явно стоит того. Вы можете попробовать пробный период в месяц и решить это для себя. Но я не знаю ни одного дизайнера, который попробовал бы Eagle и отказался бы от него в последствии. У современного дизайнера появляется всё больше инструментов для создания качественных работ, не отвлекаясь на мелочи. Мы ушли от типографского станка Гутенберга, так давайте уйдём и от «Something went wrong. Reloading Figma may fix this» от JPG.