Организация рабочего процесса по вебдизайну в Adobe Illustrator — как лучше?

Question

[Нерон Лордов]

Нужны рекомендации по организации всех частей дизайн макета интерфейса:
- Внешняя структура: файлы, папки, их порядок и наименования
- Внутренняя структура: стили, цвета, артборды внутри *.ai

Есть неплохое руководство
https://guides.area17.com/design-techniques

Разжевано всё, вплоть до сетки. Но не подходит хотя бы по одной простой причине - там рекомендуется всю внутреннюю структуру организовывать внутри одного макета *.ai. То есть, делается дизайн сайта, все странички и их мобильные версии рисуются внутри одного *.ai.

У такого подхода есть важный недостаток. Люстра имеет ограниченное рабочее поле и не позволяет создавать в нём свыше 100 артбордов. Как следствие, макеты и их части распихиваются по слоям (в руководстве по ссылке есть скриншот панели слоев со списком 146 слоёв - а в каждом слое еще бог весть сколько векторных и растровых объектов). Переключать слои в люстре - гораздо геморройнее, чем выбирать нужные файлы в проводнике. Это во-первых, а во вторых люстра очень не любит нафаршированные под завязку файлы - она начинает тормозить.

Соответственно, макет нужно рассечь на части, каждая часть в отдельном файле. Здесь появляется новая проблема - поддержание единой библиотеки цветов и стилей шрифта. Если клепать всё в одном *.ai - добавление или изменение одного из глобальных цветов / стилей шрифта не вызывает проблем, все изменения сразу расползутся по всем объектам в файле. А если нужно добавить/обновить цвет/стиль сразу в несколько *.ai?

Понятно, что цвета и стили шрифтов можно сохранить как отдельные файлы *.ai и подгружать их в палитру макета. Проблема такого решения - палитры не обновляются автоматически, как например в случае обновления подлинкованных файлов. Нужно их заново подгружать, если произошли изменения. То есть, если макетов страниц много - придется проделывать достаточно долгую и нудную работу: открываем каждый файл, заново грузим туда цвета и стили шрифтов, сохраняем, закрываем, открываем следующий файл... И ладно, если этот процесс коснется только одного человека, но ведь над файлами работают несколько людей (как минимум - дизайнер и разработчик).

Возможно есть какие-то плагины/скрипты/лайфхаки/трюки по автоматизации таких нюансов? Подскажите.

UPD

На форумах Эдоуби мне насоветовали заюзать Creative Cloud Libraries. По официальному и пользовательским описаниям - вроде то, что нужно, омг!11 (all you're assets will be linked) Но и тут я обломался. Да, можно создать, например, стиль текста, добавить его в СС-библиотеку и потом в любом документе удобно его применять. Только загвоздка в том, что в СС-библиотеке нельзя никак менять стиль. Его можно сдублировать. Переименовать. Удалить. Но не изменить. И когда применяешь стиль из СС-библиотеки, он к ней не линкуется - он добавляется в стили самого документа. Соответственно, это какой-то феерический звиздёж и не более. Принцип линка тут не соблюдается.

Думаем дальше.

Comments

[tnc4401]

Creative Cloud Libraries - страдания! Адоб только обещает, они никогда не работали(((

[Нерон Лордов]

tnc4401: да пипец блин, не ожидал такой подставы. Нах этот криэйтив клауд нужен тогда вообще?

Answer 1

[Pavel Designer]

Вот по описанным причинам ребята и делают всё в одном файле :) Тут выбирать что удобнее именно для себя — разделять файлы и перекрашивать по необходимости вручную каждый или же бояться тормозов программы, но менять любые стили сразу везде. Тут можно еще порекомендовать написать свой скрипт/экшен для подобных целей, готовые мне не встречались (хотя вопросы периодически задают и здесь и на иностранных ресурсах).

А про хранение файлов напишу вкратце.
Если проект большой, с задачами разного рода, то делается папка big-project-name. Внутри неё лежат папки по задачам: banners, icons, site и т.п. В каждой папке конкретная задача. Если проект простой и путаться негде, то можно не разделять на подпапки. Все названия папок и файлов я всегда пишу с маленькой буквы и на английском, так удобнее.
Внутри папки company-site (возьмем пример с сайтом) лежат папки source (со всеми материалами, предоставленными заказчиком), img (с разной исходной графикой, которая используется в проекте), preview (или images или типа того, я в такую папку складываю макеты для согласования и расшариваю для доступа клиенту — чтобы не пересылать кучу файлов, а иметь одну папку с актуальными макетами) и любые другие служебные папки, которые могут понадобиться по ходу работы.
В корне этой папки ведется работа и находятся исходники вида name_xxxx_yyy_zzz, где name — это название клиента или проекта (указываю всегда чтобы находилось через поиск), xxxx — обозначение вида задачи (site, app, icons и т.п.), yyy — уточнение что в этом файле (если сайт/приложение, то main, contacts, news и т.п., если иконки, то их размер, например), zzz — версия файла — она может быть просто цифровой (001, 002, 024), а может быть и датой сохранения, иногда требовалось подобное (16-11-23 – год-месяц-день, удобно следить). Таким образом, получаются имена файлов sber_icons_128px_001, sber_insurance_lk_012 или ph_cafe_menu_16-10-05. Когда требуется версия с переведённым в кривые контентом, то в конце можно добавить -curved.
Я предпочитаю разделять смысловые части с помощью подчеркивания "_", а вместо пробела в словах использовать минус "-" (sber-bank_site_one-two_004).

Если собирается много файлов одной задачи, то они собираются в подпапку как описано в самом начале.
Когда собираются несколько версий одного макета, то я создаю папку old (или revisions, кому как удобнее) и скидываю туда все старые версии, а в корне задачи остаются лишь актуальные. Это помогает не запутаться в куче версий и, в то же время, держать их рядышком. Если важно сохранить даты подобных «срезов», то в папке old делается подпапка с нужной датой.

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

Comments

[Нерон Лордов]

Подержу пока вопрос без решения, чтобы народ не стеснялся отписывать.

Тут можно еще порекомендовать написать свой скрипт/экшен для подобных целей

Не умею я блин.. :( Не подскажешь, на каких хороших ресурсах (рус/англ) тусят нам подобные, где можно пообщаться?

--

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

[Нерон Лордов]

бояться тормозов программы, но менять любые стили сразу везде.

Пока приходится выбирать "бояться", т.к. фарш в файлах просто делает работу невозможной. Дело как в железе, так и в собственных мозгах - запутаться ооочень легко)

[Pavel Designer]

Nekto_Habr: на стакэкчендж, форуме Адобе, рудтп - первое что на ум приходит. У печатников ребята в принципе толковые. Я когда в типографии работал, один из допечатников и писал нам скрипты для раскладок в Индизе и т.п. Можно и на фрилансе поискать опытного в написании скриптов под Адобе.

Answer 2

[Илья В.]

Все в одном ai файле делаю. Да, бывает притормаживает, но в разных файлах это бред делать.
Отдельные артборды под стили, кнопки, итд.
Отдельные ряды артбородов под разные девайсы. Обычно уникальных страниц штуки 3-4, а остальные их копии.
Вот экспорт в фотошоп это реальная проблема, но мой верстальщик научился в люстре работать)))

Comments

[Нерон Лордов]

Ну когда страниц 3-4 это неплохо, да, хотя и в таком случае рабочее поле может затрещать от натуги (странички-то в разных разрешениях еще надо рисовать). А вот десяток макетов уже не поместятся рядом, если не прятать что-то.

*вздыхаю*

[Pavel Designer]

Замкнутый круг: Адобе не сделают пока половина не перейдет на Аи и не затребует революцию в расширении функционала, а большинство не переходят потому что многие недизайнеры не умеют работать в ПО кроме Фш из-за отсутствия плагинов/сервисов :) Выход: подбирать команду и работать только с ней, налаживая взаимодействие.

[Нерон Лордов]

Pavel Designer: я вообще удивляюсь - выкинуть из люстры 90% функционала и добавить 4-5 фишек чтобы получить отличный инструмент для дизайна интерфейсов. А они XD начали городить. Блин хоть свой костыль велосипедь. Хотя бы скрипт под люстру, а то ведь не дождёмся, зараза. Жаль не умею программить. Может стартап замутим?) Рисёч сделан, продукт востребован, ЦА определена - будем барыжить по 10 баксов, чтоб даже самые пропираченные дизигнеры купили, наберём продаж на лимон грина и завернём всю байду тому же адобу или другой корпорации.

[Pavel Designer]

Nekto_Habr: ага, осталось лишь найти десяток хороших программистов-энтузиастов)

[Нерон Лордов]

Pavel Designer: Да ладно? 10 программистов чтобы написать скрипт? Не, ну ладно двое - десяток-то чем заниматься будут?)

[Pavel Designer]

Nekto_Habr: не скрипт, а редактор с блэк джэком и шлюхами) Для скрипта и стартап не нужен. Да и кто скрипты продаёт? Их бесплатно, а вот программы или плагины продают.

[Нерон Лордов]

Pavel Designer: скрипты еще как продают, и зачастую - продают их производители программ и плагинов) ну, редактор пилить долго больно, да и конкурировать не сможем долго - нужно подниматься на более приземлённых вещах)

[Pavel Designer]

Nekto_Habr: ну ладно. Просто я не видел продающихся скриптов — все в свободном доступе обычно и совершенно бесплатно (во всяком случае для Аи).