Веб-дизайнерам и программистам зачастую приходится работать в условиях ограниченного времени, не говоря уже о необходимости одновременно вести несколько проектов. Но даже не это самое сложное в работе над очередным проектом, а правильное и четкое взаимодействие дизайнера с разработчиком, отчего, по сути, и зависит успех результата.
Порой даже самый опытный кодер может оказаться в полном ступоре из-за противоречивой информации, полученной от дизайнера, когда он вынужден часами биться над тем или иным элементом интерфейса, пытаясь понять, как его определить в написанном коде. Подобные моменты сильно тормозят работу над проектом и нередко могут привести к серьезным проблемам.
Если вы дизайнер, то наверняка уже столкнулись с такой проблемой, как подготовка спецификаций для программиста и в полной мере осознали, насколько утомительной она может стать, особенно, когда речь идет о большом проекте, с постоянными изменениями и доработками.
Создавая спецификацию, дизайнер должен определить размер всех элементов, а также их положение. Задокументировать схему цветов, используемые шрифты, точное расстояние между всеми элементами дизайна и остальные имеющиеся характеристики. При этом каждый объект или элемент имеет целый список определенных параметров, которые должны быть отражены в подготавливаемой спецификации. А ведь это ценное время можно было бы потрать с куда большей пользой!
Тут вам придет на помощь такой полезный инструмент как Avocode, который станет, своего рода, мостом между вами и разработчиком, а главное – упростит процесс подготовки спецификации, позволяя отслеживать любые изменения между последними версиями веб-дизайна.
Данный инструмент переводит готовый макет из Photoshop или Sketch в готовый код. Также он позволяет:
- работать с дизайном без нужды использовать программу, в которой был создан макет, быстро получая все размеры, соответствующие вашей платформе;
- получение всех элементов разработанного дизайна, а также свойств цветов, шрифтов и так далее;
- экспорт всех ресурсных файлов;
- добавление комментариев в макете.
Таким образом, программист и веб-дизайнер могут сотрудничать в едином рабочем пространстве, где вся информация существующих элементов будет адаптироваться с учетом специфики каждого из них.
НАЧАЛО РАБОТЫ
Для того чтобы начать пользоваться Avocode, необходимо пройти регистрацию и затем получить свой аккаунт. Однако, для ознакомления с инструментом у вас будет всего двухнедельный пробный период: сервис предоставляет пользователям только платные аккаунты.
Avocode имеет два варианта – приложение для веб и ПК. В первую очередь вам придется заняться созданием проекта, потому как инструмент работает с любыми макетами только в рамках конкретного проекта. Или же вы можете просмотреть демо, созданное вместе с вашей регистрацией, чтобы понять, как работает этот инструмент.
ЗАГРУЗКА МАКЕТА ДИЗАЙНА
После того как вы создадите свой проект, вам потребуется загрузить макет дизайна, любым из двух способов. В первом случае, это можно сделать, подключив учетную запись Dropbox и выбрав необходимый файл оттуда. Второй вариант – загрузка дизайна непосредственно с вашего компьютера.
ОБЗОР ПОЛЬЗОВАТЕЛЬСКОГО ИНТЕРФЕЙСА
Чтобы понять все плюсы Avocode, лучше всего установить на свой компьютер приложение, потому как его веб-аналог ограничен в том, что касается функций и позволит лишь следить за крупными изменениями в макете и просматривать комментарии, при этом вы не сможете проверять дизайн детально.
Как только вы установите приложение и запустите его, то сразу почувствуете себя в своей атмосфере: интерфейс Avocode очень напоминает Фотошоп – цветовой схематизм и почти одинаково расположенные рабочие инструменты .
В главном окне показано наименование вашего проекта с небольшим превью рабочего дизайна и последняя дата активной деятельности.
Для перехода к подробному описанию вашего дизайна, нужно сделать двойной клик по проекту. Там вы найдете список групп элементов с их свойствами и список слоев, а чуть ниже будут представлены все доступные вам инструменты.
Первым инструментом для использования будет Select Tool, с ним вы можете выбрать отдельные слои или несколько слоев, а затем увидеть их свойства в панели, расположенной справа.
Далее выбирайте слой кнопкой призыва к действию. При выборе элемента PSD-файла, боковая панель покажет CSS для этого элемента. В качестве бонуса, Avocode также дает вам опцию копирования кода LESS или Sass.
Вы можете выбрать изображение и посмотреть его размеры. Кстати, параметры экспорта изображений в Avocode тоже весьма хороши. У вас есть возможность настроить различные принципы загрузки изображений, позволяющие их экспортировать с любым количеством конфигураций, включая JPG, PNG и SVG, а также с правильными пропорциями, где “1х” означает исходный размер.
В инфо-панели с левой стороны есть вся важная информация о дизайне. Вы даже можете получить общедоступную ссылку, чтобы поделиться дизайном с кем захотите. Но самок лучшее в этой панели то, что тут перечислены все шрифты, с линками на Typekit и Google Web Fonts, так что вы можете легко использовать их в вашем проекте.
ИНСТРУМЕНТАРИЙ
Очень полезен инструмент Measure tool: выберите элемент, а затем наведите курсор на другие элементы, чтобы посмотреть расстояние по отношению к выбранному вами элементу. Выбрав кнопку Get started now, вы увидите его расположение относительно верхних элементов, находящихся слева и справа.
Следующий инструмент – это палитра, которая определяет цвет и копирует его шестнадцатеричное значение в буфер обмена. Вы также можете добавить этот цвет в качестве свойства для вашего дизайна. Благодаря этому инструменту, вы сможете быстро создать цветосхему для вашего проекта.
Заключительный инструмент - Slice, предоставляющий возможность экспортировать выбранную часть дизайна, как изображение или схему стиля.
Хорошая вещь заключается в том, что каждый инструмент имеет комбинацию горячих клавиш, а это, согласитесь, очень удобно для пользователей, которые используют клавиатуру, чтобы быстро переключаться между опциями.
Еще одной крутой особенностью Avocode является использование направляющих. Однако, в первый раз пользователь может удивиться доступности этой опции, потому что функция скрыта под маленькой кнопкой в нижней части экрана, по правую сторону. К слову сказать, Avocode поддерживает как пользовательские направляющие, так и те, что были разработаны в Фотошопе или Sketch. Поэтому, если ваш документ имеет направляющие, то они будут непременно отображаться в программе.
С помощью Avocode, вы можете с легкостью визуально сравнить изменения в макете дизайна. Более того, вы также можете получить доступ к этой функции в разделе “Детали дизайна” в веб-приложении.
СОТРУДНИЧЕСТВО
Avocode позволяет вам оставлять заметки в конкретной области дизайна, предоставляя возможность обсудить изменения дизайна с кем-либо в одном месте и мгновенно.
Просто выделите область, которую вы хотите обсудить, напишите ваше сообщение и нажмите кнопку отправки. Все члены вашей команды мгновенно получат уведомления.
СТОИМОСТЬ
Avocode стоит $ 10 в месяц на одного пользователя для бизнес-плана, который имеет интеграцию с Slack и администрацию полномочий. Если же ваша команда состоит из одного до трех человек, и вам не требуется управление полномочиями, то вы можете выбрать план «Garage», который обойдется вам в $ 7 в месяц на одного пользователя.
И напоследок, давайте рассмотрим положительные и отрицательные стороны данного продукта.
Плюсы:
- Мульти-платформенная поддержка
- Схожесть интерфейса с Photoshop и хорошо продуманный набор инструментов
Минусы:
- В настоящее время поддерживает только веб-разработку
- Отсутствие бесплатного плана (по окончанию пробного периода, необходимо купить платный аккаунт)
- Нет возможности изучать детали дизайна в веб-приложении, только в установленном на ПК
Вот и пришло время отказаться от статичных спецификаций, и начать пользоваться современными инструментами, призванными значительно упростить вашу жизнь в качестве дизайнера.