7 заметок с тегом

Работа

Проектная папка дизайнера. Часть 2

Изучив комментарии на Хабре на Хабре к предыдущему посту о проектной папке, решил перестроить процесс, связанный с версиями файлов и их хранением. Умные люди говорили, что в наше время неправильно дублировать файлики вручную, создавая архив версий, а нужно пользоваться современными технологиями Git, Subversion и подобными. В этом посте напишу о системе к которой пришёл и с удовольствием теперь пользуюсь.

Решений для сохранения версий файлов великое множество. Для меня, как дизайнера, ключевыми являются следующие параметры, которым должна отвечать система:

  1. Я сам должен определять в какой момент создать точку восстановления файла;
  2. Иметь возможность посмотреть что изменилось в файле (чаще всего в графическом);
  3. Загружать файл и его версии в онлайн-хранилище;
  4. Получать неограниченный срок хранения файлов и их версий;
  5. Приватность. К данным, без моего ведома, не должны иметь доступ посторонние;
  6. Низкая стоимость.

Dropbox

Да-да, не удивляйтесь. Не знал, но Дропбокс умеет хранить историю изменения файлов. Очень удобное решение, для хранения и доступа к файлам из любой точки мира. Легко делиться материалами и не нужно думать об их загрузке, достаточно установить приложение, которое само будет выгружать файлы и историю их редактирования. Но этот плюс является и минусом, т. к. новые версии файлов создаются после каждого сохранения автоматически. Во-вторых, нельзя сравнить что именно поменялось в файле, не откатив его назад. Без покупки дополнительного «Расширенного журнала версий» (EVN), который стоит 40 баксов в год, файлы хранятся только 30 дней. Бесплатно дают 2 ГБ, остальное за ежемесячный платёж от $8,25. Получаем, минимум 140 долларов в год и не полное соответствие требованиям. Едем дальше.

Google Drive

Все те же преимущества и недостатки что и у Дропбокса. Но в Google Drive больше 30 дней версии не хранят в принципе, что неприемлемо. Сразу пропускаем.

Invision

Второе открытие, которое я сделал, подготавливая этот пост (спасибо Сергею за наводку). Сервис, который знаком и любим многими дизайнерами оказывается ещё умеет хранить версии файлов. Для этого нужно использовать их утилиту — «Desktop sync app». Ничего дополнительно оплачивать не нужно. Из минусов — нет превью для файлов Sketch и не продумано взаимодействие для пользователей, который хотят использовать «Inspect Mode». Дело в том, что для работы инспектирования кода, макеты должны быть загружены через плагин «Craft». И тут возникает конфликт, т. к. «Desktop sync app» занимается тем же самым, но не «разбирает» макет по составляющим, соответственно «Inspect Mode» у него недоступен. Приходиться выбирать между историей версий файла и инспектором кода. Т. к. в нашей команде инспектор кода используется верстальщиками и программистами — выбор в пользу Inspect Mode

Cornerstone 3

Судя по всему, самое популярное subversion-решение под мак. Очень красивая программа. Из минусов — нет своего хранилища в облаке. Можно, конечно, разместить папки с файлами и бекапами в директории стороннего облачного сервиса, например Яндекс.Диска. Но есть и второй минус — стоимость $69. Не сказать, что сильно дорого и я готов был попробовать поработать с программой (есть триальный период 14 дней), но заметил еще один недостаток — нет превью файлов Sketch. Возьмём на заметку, но поищем ещё.

GitHub

Это решение использовал раньше, когда активно занимался вёрсткой. Отвечает всем требованиям, которые я описал выше. Есть свой десктопный клиент, что важно для тех кто не владеет командной строкой. Приватные репозитории (онлайн-хранилища) платные, от $7 в месяц. Отличный вариант, но не идеальный.

Bitbucket

Я остановился на хранилище Битбакет в связке с клиентом SourceTree. Битбакет я предпочел ГитХабу за бесплатные приватные репозитории. Причем, я могу их создавать сколько угодно, ещё и до 5 пользователей пригласить для работы над проектом. Если больше 5 юзеров подключены к репозиторию, то нужно платить от $10 в месяц. В общем, отличное предложение.

Сравнительная таблица изученных решений.

Теперь расскажу как организован процесс работы.

Первым делом регистрируемся на www.bitbucket.org и скачиваем SourceTree (Есть под Мак и Виндоус).

Кстати, SourceTree можно использовать и в качестве клиента для GitHub

Запускаем SourceTree и добавляем новый проект «New Repository» → «Create Local Repository».

Выбираем директорию где будет храниться проект и архив его версий. Т. к. я сохраняю файлы ещё и в онлайн, то ставлю чекбокс «Also create remote repository».

Можно не загружать файлы в онлайн, а создавать хранилище только у себя на диске, или в директории облачного сервиса. Тогда вы никак не будете зависеть ни от ГитХаба, ни от Битбакета.

Теперь положим какой-нибудь файл в созданную папку. Пусть это будет фотошоповский файлик hello.psd. После сохранения файла в папку в SourceTree появилось уведомление, что директория изменилась, а справа небольшая превьюшка содержимого файла.

Если файл больше 5МБ, то превью показываться не будет. Для решения открыть «Preferences» → «Diff». Установить «Size limit (binary)», например 50,000 KB. Превьюшки создадутся без ограничений.



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

Создадим «Точку восстановления» (В терминологии Git такая точка называется Commit). Для этого отметим файлы для которых создастся версия в хранилище (я обычно выбираю все), напишем комментарий и жмём «Commit», для создания точки восстановления.

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

Перекрасим заголовок в другой цвет и сохранимся. SourceTree заметил манипуляции и в превью-окне показывает 2 изображения «Было» и «Стало».

P. S. Не смог найти как сделать превью крупнее, если кто-то из экспертов посоветует — буду признателен. Самое крутое в том, что превью создаётся даже для файлов Sketch, что мега-круто и больше ни одна программа из просмотренных не может.

«Закоммитим» изменений и отправим на сервер.

Для чистоты эксперимента внесём третью правку, отправив на сервер и её.

Понадобилось «откатиться» к первой версии файла или взять оттуда пару слоёв? Попробуем. Перейдём в сайдбаре программы во вкладку «History» и выберем первый коммит. Если дважды кликнуть по превью, то в Фотошопе откроется первая версия файла. Берём из него любые слои или пересохраняем как основной файл. Это очень удобно и просто.

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

2017   Работа

Work: Структура проектной папки дизайнера

Заказчику понадобилось изображение, созданное 3 года назад или закончился тираж визиток двухгодичной давности? Внести коррективы в макет сайта которому уже 5 лет или откатиться на версию, которая была отклонена на прошлой неделе? Для всех вышеперечисленных вопросов полезно хранить и быстро находить файлы. Делюсь наработками и структурой папок, которые облегчают задачу.

Используем облака

Все рабочие файлы размещены в папке «work», которая лежит в «облаке» Яндекс.Диска. Таким образом, всегда есть доступ к файлам из любой точки мира, плюс, данные хранятся в двух местах: на компьютере и на сервере, что даёт надежду на их сохранность в случае форс-мажора.

Бекап данных

Для большей надёжности, раз в год все рабочие файлы загружаю на Google Drive, в созданный специально для бекапа аккаунт. Так как файлов много, а гугл бесплатно даёт всего-лишь 15 ГБ, приходится хитрить. Когда делаю бекап данных, оплачиваю месяц хранилища на 100 ГБ, заливаю файлы и отменяю подписку. Цена вопроса — 139 рублей, а спокойствия на миллион. Причём, это именно отдельный аккаунт. Файлы в хранилище не трогаю до следующего года, что предохраняет их от случайных удалений, поломок и прочих ненастий.

Структура папки «work»

состоит из 3-х директорий:

  • «01_current» — проекты «в работе»;
  • «02_support» — часто редактируемые проекты;
  • «03_final» — завершенные работы.

Обратите внимание, названия всех проектных папок и файлов на английском, чтобы избежать возможных проблем с кодировкой. Пробелы заменены на подчёркивание по той же причине.

Цифры в названии нужны для правильной сортировки по алфавиту в менеджере файлов.

Теперь подробней о каждой из директорий.

Папка «01_current»

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

Структура папки любого проекта:

«01_incoming»

В папке «Входящие» храню полученные от клиента материалы: Техническое задание, брифы, брендбук, фотографии, тексты и пр.

«02_inspiration»

В папке «Вдохновение» складываю все материалы, которые помогут в работе. Сайты конкурентов, интересные дизайн-решения, цветовые палитры, мудборды, интересные фотографии из фотобанков (в виде превьюшек).

«03_development»

Основная рабочая папка — «Разработка». Её структура зависит от размера проекта. Если проект небольшой, то файлы хранятся в ней без дополнительной группировки.

В больших проектах внутри «03_development» создаются подпапки, такие как «img» — для фотографий, картинок иллюстраций, «vector» — для векторных иллюстраций, логотипов, иконок, «wireframes» — для прототипов сайта. Рабочие файлы размещены в корневой директории.

Классная фича macOs — отображение колонками с сортировкой по программе. Навигация становится быстрой и наглядной.

Так же, создаю в «03_development» папку со шрифтами «_fonts», и папку «_archive» для хранения версий файлов.

Если в файле планируется вносить большое количество изменений, то создаю его дубликат, а старую версию переношу в папку «_archive».

Все файлы называю согласно правилу:
- Номер (например, номер раздела в структуре сайта. Используется не всегда, а только если нужна сортировка);
- Название;
- Версия.
Файл, который называется «03_services_04.psd», сообщает слева-направо, что это третий раздел сайта, который называется «Услуги», и перед нами 4-я версия файла. Если мы откроем папку «archive», то найдём там «03_services_01.psd», «03_services_02.psd», «03_services_03.psd» которые хранят предыдущие итерации раздела.

С использованием Sketch и артбордов стало проще, файл называется по имени проекта, например «pinhost_04.sketch» (четвёртая версия сайта PinHost).

«04_final »

Папка «Финал» хранит последние версии файлов, которые будут передаваться заказчику. Здесь не должно быть файлов со старыми версиями проекта, только актуальные данные. Название файла, отправленного в эту директорию, не должно содержать номер версии. Например, файл который назывался «03_services_04.psd» после завершения работ и дублирования в папке «Final» должен носить название «03_services.psd».

Получается, последние версии файла хранятся в двух папках — «03_development» и «04_final», но с различными названиями, благодаря чему, вероятность утери файла стремиться к нулю.

Для передачи исходников заказчику расшариваю папку в облаке и отправляю ссылку.

Папка «02_support»

Имеет такую же структуру, как и «01_current». В ней размещены проекты, к которым приходится часто, и в течении длительного времени обращаться. Если работа над проектом ведётся уже больше полугода, или периодичность обращения к проекту чаще чем раз в месяц, то проекту самое место в «02_support». Раз в 3−4 месяца провожу ревизию и перемещаю неиспользуемые папки в «03_final».

Папка «03_final»

Содержит все сделанные ранее проекты. Если нужно вернуться к каком-то проекту, то его папка перемещается в «01_current», до окончания работ. После чего проект возвращается в «03_final». Сейчас задумываюсь над тем, чтобы «раскидать» все работы по годам, но сомневаюсь, что удобно будет находить нужный проект.

Итоги

Описанная структура позволяет хранить версии файлов, не используя TimeMachine (она тоже нужна и работает) и быстро находить необходимые данные. Правильная структура проектов — один из приёмов, применив который пару раз, уже не можешь вернуться к бардаку в файлах.

2017   Посоветовал   Работа

UI mLingos.app for iOs

Работаю над дизайном новой версии интефейса приложения для изучения иностранных языков mLingos.

2016   Портфолио   Работа

«Заглушки» для PinSpb b2b

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

2016   Портфолио   Работа