Обучайся бесплатно с WAYUP Premiere сегодня вечером

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

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

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

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

Тут вам придет на помощь такой полезный инструмент как 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 и хорошо продуманный набор инструментов

Минусы:

  • В настоящее время поддерживает только веб-разработку
  • Отсутствие бесплатного плана (по окончанию пробного периода, необходимо купить платный аккаунт)
  • Нет возможности изучать детали дизайна в веб-приложении, только в установленном на ПК

Вот и пришло время отказаться от статичных спецификаций, и начать пользоваться современными инструментами, призванными значительно упростить вашу жизнь в качестве дизайнера.

Как вам материал?