1. проектна команда
2. Дизайнери
3. розробники
4. Менеджер
5. Оптимізуємо роботу дизайнерів і розробників
6. Що це за інструменти і як вони працюють
7. Avocode
8. Перші кроки
9. Як завантажити свій дизайн
11. Інструменти
12. взаємодія
13. вартість продукту
14. Sympli
16. Як завантажити дизайн
17. Користувальницький інтерфейс
18. Інструменти
19. Взаємодія
20. Бонус: щасливі розробники
21. ВАРТІСТЬ
22. Zeplin
23. Перші кроки
24. Як завантажити дизайн
25. Огляд призначеного для користувача інтерфейсу
26. Спільна робота
27. ВАРТІСТЬ
28. Поради щодо вибору інструменту
29. Висновки

Дизайнери, розробники і менеджери часто працюють в стислих часових рамках і змушені вести кілька проектів одночасно. Крім цього, команда повинна швидко давати зворотний зв'язок для своїх замовників або клієнтів. Найменша зміна продукту в контексті призначеного для користувача інтерфейсу або взаємодії з продуктом на рівні користувача взаємодії повинні знаходити відображення в документації, щоб у дизайнерів і розробників завжди була актуальна інформація про продукт.

Наявність стайлгайда значно скорочує вірогідність того, що команда зіткнеться з серйозними проблемами, втілюючи дизайн в життя. Але важливо не стільки наявність гайда, скільки його актуальність. Неактуальна або суперечлива інформація може ввести в ступор самого досвідченого розробника: йому доведеться гадати, як правильно визначити той чи інший елемент призначеного для користувача інтерфейсу в коді. Це забирає багато сил і часу і перетворюється в нескінченну головний біль для команди (особливо якщо в розробці знаходиться складний додаток).

У цій статті ми розглянемо процес створення стайлгайда, процедуру передачі дизайну і моменти взаємодії між учасниками команди. Ми також пройдемо по поліпшеному взаємодії і покажемо, як можуть допомогти дизайнерам і розробникам хороші інструменти.

проектна команда

Як правило, програмний продукт розробляє команда з дизайнерів, розробників і проектних менеджерів. У кожного учасника команди є свої специфічні потреби.

Дизайнери

Коли дизайнер підготував макет, він передає його розробнику. Часто це виглядає просто як експорт PNG і підготовка специфікації з усіма необхідними анотаціями. Для великого проекту підготовка специфікації може бути великим головним болем, тому що дизайн може часто змінюватися. Таким чином, традиційні (статичні) стайлгайди застарівають практично миттєво.

Підготовка специфікації жахливо втомлює, і якщо вона робиться вручну, то займає страшенно багато часу. Крім того, кожен дизайнер робить її по-різному. В кінцевому рахунку багато дизайнерів більше займаються підготовкою специфікації, а не дизайном. Кожна хвилина, яку дизайнер витрачає на опрацювання документації, - це втрачена хвилина, але ж її можна було використовувати, щоб поліпшити існуючий макет або приступити до нового.

Якщо ви хочете зберегти час і нерви дизайнерів - просто зробіть так, щоб вони не займалися підготовкою специфікації.

розробники

Вивчення специфікації - це не свято. Розробникам часто доводиться уточнювати у дизайнерів інформацію про деталі, які недостатньо добре описані в специфікації, або, гірше того, користуватися Photoshop і Sketch, щоб отримати ці відомості.

У більшості випадків вони змушені вручну перетворити все розміри активів відповідно до вимог платформи (наприклад, перетворення пікселів в точки, які не залежать від щільності і розміру екрана). Часто у них немає достатньо докладних даних про візуальному дизайні - вони змушені додумувати деталі, а це призводить до візуальних невідповідностей.

Навіть якщо розробник успішно втілив у життя початковий дизайн, є ймовірність, що він зміниться і розробнику треба буде пройти по всіх колах пекла знову. Це зовсім не гнучкий підхід.

Менеджер

Роль проектного менеджера передбачає організацію найбільш ефективних процесів, і в першу чергу це стосується взаємодії між усіма учасниками команди. Все в команді повинні бути однаково інформовані про зміни в дизайні. Багато проектів створюють розподілені команди, і це змушує менеджерів створювати єдиний канал для взаємодії.

Сучасні інструменти, такі як Slack, дозволяють створити такий канал, але це не вирішує головну проблему - необхідність відстежувати зміни і надавати по ним зворотний зв'язок. Всі менеджери знають, що таке безладні листи з купою вкладень щодо змін в дизайні від всіх членів команди.

Менеджери повинні бути інформовані про поточний стан продукту. Вони повинні залишатися на вершині процесу проектування і мати можливість в одному місці переглядати будь-які зміни, легко порівнювати, як виглядають різні версії дизайну, і в реальному часі їх обговорювати.

Оптимізуємо роботу дизайнерів і розробників

Створення специфікації для дизайну включає в себе визначення розмірів елементів, їх положення, колірних схем, шрифтів, відстані між елементами і купу інших характеристик і властивостей об'єктів. Кожен елемент дизайну несе в собі перелік характеристик, які потрібно враховувати і відображати в специфікації.

Потрібен міст між дизайном і розробкою - інструмент, який би спростив і прискорив підготовку специфікації і розробку продукту в цілому, а також гарантував би, що ви (дизайнер, розробник, менеджер) позбудетеся від вічного питання: «А де подивитися останню доопрацювання по дизайну? ».

На щастя, такі інструменти існують. Вони використовують макети Photoshop або Sketch і автоматично готують специфікації для розробників. Ці специфікації включають в себе фрагменти коду і графічні об'єкти (іконки і зображення). Інструменти також дозволяють відстежувати зміни між версіями дизайну.

Що це за інструменти і як вони працюють

Це Avocode, Sympli і Zeplin. Вони позиціонуються як інструменти для спільної роботи дизайнерів призначених для користувача інтерфейсів і фронтенд-розробників і націлені на процес перекладу макета з Photoshop або Sketch в код. Потрібно просто завантажити макет дизайну, і інструменти перетворять його в специфікацію і стайлгайд, який буде адаптований під потреби вашої платформи. Ці інструменти дозволяють:

• вивчати дизайн, підготовлений в Photoshop або Sketch, без необхідності використання оригінальних програм і швидко отримувати розміри відповідно до платформою, для якої ведеться розробка;
• отримувати всі необхідні елементи дизайну, такі як зображення і іконки, а також всі властивості об'єктів (шрифти, кольори, і розміри);
• експортувати ресурсні файли для будь-яких елементів, будь то текст, кнопка або щось ще;
• додавати коментарі або замітки для членів команди прямо в поточному макеті.

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

Повторю, що це інструменти для перегляду, а не для редагування або інтерактивного прототипирования. Це не редактори зображень, вони не дозволяють створювати нові дизайни або прототипи. Щоб уявити початковий дизайн, будуть потрібні Photoshop або Sketch.

Avocode

Цей інструмент орієнтований більшою мірою на веб-розробку. Процес створення сайту починається з дизайну в Photoshop або Sketch. Однак, як тільки дизайнер завершить готувати макет, фронтенд-розробник буде готовий приступити до розробки. Для цього у нього будуть все необхідне: макет буде перетворений в специфікацію з окремими зображеннями і CSS-стилями. Творці Avocode називають його мостом між дизайнерами і розробниками.

Перші кроки

Перш ніж почати використовувати Avocode, потрібно зареєструватися та отримати обліковий запис. Avocode не надає безкоштовних акаунтів під один-два проекти, і на знайомство з продуктом у вас буде тільки два тижні тріального періоду.

Сервіс складається з двох частин: веб-менеджер і десктопних програм. Avocode працює з дизайн-макетами в рамках проекту, і в першу чергу необхідно буде створити свій проект. Щоб зрозуміти, що з себе представляють проекти, можна подивитися демо-проект, який буде створений при реєстрації аккаунта (по суті це Лендінгем).

Як завантажити свій дизайн

Після створення проекту потрібно буде завантажити дизайн. Є два варіанти: підключити свій аккаунт Dropbox і вказати файл дизайну звідти - або завантажити свій дизайн з локальної машини.

Користувальницький інтерфейс

Тепер можна зрозуміти, які плюси дає Avocode. Для цього потрібно встановити десктопних програм. Веб-додаток Avocode обмежена в функціональності і не підходить для інспектування дизайну в деталях - воно дозволяє лише відстежувати глобальні зміни дизайну (такі як ревізії) і коментарі до них.

Отже, ви встановили і запустили Avocode. Ваше перше відчуття - дуже знайомий інтерфейс, схожий на Photoshop: ті ж колірні схеми і схожість розташування інструментів.

В основному вікні ви побачите назву свого проекту з мініатюрною проекцією його дизайну і датою останньої активності.

Двічі клікнувши по проекту, ви перейдете до детального опису дизайну: переліком шарів, груп елементів і їх властивостей - в загальному, все, що є PSD-файл. Внизу ви побачите перелік доступних інструментів.

Перший інструмент, який ми будемо використовувати, називається Select Tool. За допомогою нього можна виділяти будь-який шар і отримувати детальну інформацію по його властивостями в правій панелі.

Давайте виділимо шар з кнопкою call to action. Сайдбар миттєво показує CSS для неї. Як бонус, Avocode дає нам можливість копіювати властивості у вигляді Less / Sass-коду:

Решта інструментів ми розглянемо в наступній секції, а поки давайте ще трохи дізнаємося про користувальницький інтерфейс і можливості Avocode.

Avocode легко вирішує таку часту завдання, як отримання зображення в різних дозволах. Експорт зображень працює просто чудово, можна задати правила, які дозволять вивантажувати зображення в самих різних конфігураціях (наприклад, в форматах JPG, PNG, SVG або пропорціях 1x, 2x, 4x).

Панель інформації в лівій частині екрана дуже важлива для опрацювання дизайну. Використовуючи її, ви можете, наприклад, отримати список шрифтів з посиланнями на них в Adobe Typekit і Google Web Fonts.

Інструменти

Дуже зручний Measure Tool. За допомогою нього можна виділяти елементи і бачити відстань щодо інших елементів. Візьмемо для прикладу виділений шар з кнопкою Get started now.

Наступний інструмент - Color Picker. Він виправдовує свою назву, тому що дозволяє визначити і скопіювати колір з його HEX-кодом в кліпборд. Значення квітів можна додати як властивість проекту. Це дозволить створювати колірні схеми для своїх дизайнів - величезна перевага для тих, у кого в роботі кілька проектів.

І наостанок - інструмент Slice. Він дозволяє зробити експорт виділеної ділянки макета як зображення або як стильову схему:

Для кожного з інструментів є «гарячі клавіші», що дуже корисно для просунутих користувачів.

За рамками основного набору інструментів є відмінна функція - напрямні для макета. Ті, хто використовує Avocode вперше, можуть здивуватися наявності такої можливості: вона захована за маленькою кнопкою в правому нижньому кутку екрану. Avocode підтримує і напрямні, створені в Photoshop або Sketch, і ті, що користувач створив сам. Якщо у вас є напрямні в оригінальному документі - не сумнівайтеся, що вони з'являться і в Avocode.

Повернемося до веб-додатку. Може здатися, що його функція лише декоративна, але це не так. Avocode дозволяє візуально порівнювати дві ревізії, і ця функціональність доступна в веб-додатку - менеджери повинні бути в захваті.

взаємодія

Avocode дозволяє залишати коментарі до окремих ділянок дизайну. Це дає можливість обговорювати дизайн прямо в контексті макета. Всі учасники проекту відразу отримують про це повідомлення.

вартість продукту

Avocode коштує $ 10 в місяць для проектів, які мають на увазі інтеграцію з Slack і редагування повноважень (Business). Якщо у вас невелика команда (один-три людини) і немає необхідності в налаштуванні дозволів, ви можете обмежиться планом за $ 7 на місяць (Garage).

плюси:

• Avocode можна використовувати на всіх основних платформах (Mac, Windows, Linux).
• Інтерфейс на зразок Photoshop, багато функцій і продумані деталі.

мінуси:

• Avocode орієнтований в основному на веб-розробку. Робота з макетами для iOS і Android значиться тільки в планах.
• Немає безкоштовного плану. Після тріального періоду потрібно зареєструвати регулярний платний план.
• На відміну від Sympli і Zeplin, Avocode не дозволяє вивчати деталі макета в веб-інтерфейсі, для цього потрібно десктопних програм).

Sympli

Sympli - це не просто інструмент для передачі дизайну, а повноцінна платформа для спільної роботи, яка ідеально вписується в стандартний процес розробки продукту, включаючи процеси передачі макетів Photoshop (підтримка XD з'явиться найближчим часом) або Sketch, а також імпорт дизайну в Android Studio і Xcode. Цей інструмент сильно прискорює розробку програмного продукту.

Найбільше достоїнство Sympli - повноцінна інтеграція з Xcode і Android Studio,. Це робить його повноцінним ланкою ланцюга в процесі втілення початкового дизайну в в фрагментах коду.

Перші кроки

Першим, що ви побачите на Sympli.io, буде секція How it works - вона розповість, що потрібно знати користувачеві, який працює з продуктом вперше. Користувач повинен зареєструватися і створити новий проект. Sympli підтримує проекти для вебу, Android і iOS. Після цього можна завантажувати свій дизайн.

Як завантажити дизайн

Sympli дозволяє завантажувати дизайн за допомогою плагіна для Photoshop або Sketch (зробити це безпосередньо, як в Avocode, неможливо). Всі завантажені макети з'являються в «хмарі». Для компаній, які вимогливі до безпеки даних або не використовують «хмарні» технології, Sympli надає корпоративні опції для локального розгортання продукту.

У порівнянні з Avocode і Zeplin в Sympli досить гнучкі настройки експорту ресурсів.

Плагін Sympli для Sketch дозволяє експортувати приховані ресурси (якщо в макеті представлено кілька станів для одного і того ж контрола), а також він сам валідірует імена ресурсів відповідно до вимог платформи. Sympli не просто перетворює окремі елементи дизайну за вимогами платформи - він робить їх максимально придатними для безпосереднього кодування в Android Studio і XCode.

Розробники також можуть застосовувати правила найменування елементів, щоб імена задавалися автоматично кожного разу, коли дизайнер поставляє новий макет.

Sympli особливо виділяє момент з командним взаємодією і позначає це питання задовго до безпосередньої передачі дизайну. Інструмент може бути орієнтований під одночасну роботу над макетом відразу декількох дизайнерів. Тому, як тільки в системі з'являється інформація про першому дизайні, менеджер проекту може запрошувати людей для спільної роботи. Потрібно лише відправити пряме посилання або вказати в формі електронні адреси членів команди. Усі зацікавлені особи отримають повідомлення.

Користувальницький інтерфейс

Sympli - веб-додаток. Остання завантажена в «хмару» ревізія дизайну завжди доступна безпосередньо за посиланням. При необхідності можна відправляти посилання на конкретний вікні керування.

Sympli автоматично зберігає всі кольори і шрифти, які використовуються в проекті. Ці активи зберігаються в Summary проекту. Інструмент сам знаходить множинні використання одного і того ж кольору або шрифту в шарах, групує їх у вигляді розширюється списку і дає їм імена (при необхідності їх можна змінити). Система синхронізує всі подібні зміни.

Sympli не просто групує всі використовувані шрифти та кольори, але дозволяє командам використовувати ці властивості в інших проектах. Ця функціональність називається Brandbooks. Ви можете включити в проект файли шрифтів і квітів, які використовуються у вашій компанії (з унікальними іменами цих шрифтів) - і розробники миттєво отримають до них доступ. Це сильно полегшує створення безлічі проектів для одного бренду.

Всі кольори та шрифти представлені відповідно до специфіки платформи, так що нічого не потрібно переводити вручну.

Sympli також дозволяє вивантажувати все ресурси в форматі Bitmap або Vector. Обидва генеруються автоматично, розробникам залишається тільки вибрати один з них.

Тут теж можна порівнювати ревізії дизайну за версіями. Для цього потрібно відкрити проект і натиснути на кнопку Version. Зовсім скоро буде доступний принципово новий механізм порівняння, в якому можна буде порівнювати ревізії «пліч-о-пліч».

Інструменти

Першим інструментом, який ми використовуємо, буде Layers. За допомогою нього можна виділяти в макеті шари і спостерігати їх властивості в правій панелі. Досить очевидний інструмент, але користуватися ним зручно і приємно, тому що всі дані в правій панелі оновлюються автоматично:

Наступний інструмент - Rulers. Він показує відносне положення будь-якого виділеного елемента в макеті. Як бачите, все розміри представлені в одиницях платформи (points для iOS, dp для Android і пікселі для веб-проектів).

Взаємодія

Як було сказано, Sympli пріділяє много уваги комунікацій в команді. В панелі ІНСТРУМЕНТІВ є Spots, Який націленій на ті, щоб сделать спільну роботу легше. З его помощью можна віділяті в макеті секції и об'єкти, Які вімагають Додатковий уточнення, и опрацьовуваті ЦІ моменти в самому дізайні. Можна сказати, що завдяки Spots всі дефекти і шорсткості проекту завжди на виду.

Крім цього, Sympli відмінно інтегрований зі Slack. Механізм повідомлення про зміни дизайну або нової Spot-записи миттєво сповістить про це всі зацікавлені сторони.

Бонус: щасливі розробники

Як було сказано, величезна різниця Avocode і Zeplin в тому, що Sympli надає плагіни до студій розробки Android Studio і Xcode. Це дозволяє практично миттєво перенести макети з Photoshop і Sketch в код.

Розширення для IDE надають ряд відмінних можливостей - наприклад, «розумної» синхронізації ресурсів. Ця функція включає в себе візуальний діалог об'єднання ресурсів - він показує, як ваш поточний дизайн буде виглядати в IDE після синхронізації. Це дозволяє включати або виключати будь-які ресурси.

Мені здається приголомшливою функція візуального втілення дизайну в сторіборди -разработчик можуть робити drag-and-drop дизайну з мокап в проектувальник інтерфейсу IDE, і дизайн буде втілений так само, як в первісному мокап (абсолютно все, включаючи конфігурацію і все runtime властивості):

Ще більше порадує розробників то, що Sympli не створює third-party залежностей в проектах, а також не змінює технічних вимог до збірок. Так що розробникам не потрібно буде вивчати нові фреймворки або включати в проекти додаткові бібліотеки, щоб користуватися такими чудовими можливостями.

ВАРТІСТЬ

Вартість Sympli залежить від кількості проектів. Сервіс надається безкоштовно для одного активного проекту. Основний план Pro надається за $ 25 в місяць. Він розрахований на 8 активних проектів одночасно. У платної необмежена кількість членів команди, які беруть участь в проекті, а також вони надають повноцінну технічну підтримку.

плюси:

• Користувачам не потрібно встановлювати окремий додаток на локальну машину. Все, що потрібно, є в багатофункціональному веб-додатку.
• Sympli підтримує і веб, і мобільні проекти (iOS і Android).
• Розширення для XCode і Android Studio дозволяють транслювати дизайн прямо в код і дають розробникам додаткову гнучкість в операціях з перенесення дизайну.
• Додатковий набір корисних функцій, таких як Brandbooks (дає можливість перевикористання стайлгайдов), і версійність дизайну.

мінусі:

• Sympli занадто аскетичний. Інтерфейсу пішла б на користь велика «людяність» і частка персоналізації.

Zeplin

Zeplin - ще один інструмент для спільної роботи дизайнерів UI і фронтенд-розробників. Дизайнери експортують файли з Photoshop або Sketch в Zeplin, і він відображає всі властивості дизайну для розробників.

Перші кроки

На сайті Zeplin.io миттєво помічаєш приємні деталі на зразок мультиплікаційного дирижабля. Це створює потрібний настрій ще до використання продукту і привносить частку легкості в сам процес.

Після реєстрації користувачеві насамперед запропонують подивитися базовий курс роботи з інструментом. Його цілком достатньо, щоб почати повноцінну роботу з Zeplin.

Подібно Avocode, Zeplin просить вас встановити десктопних програм і створити проект. Додаток запитає, який тип проекту ви хочете створити. На відміну з Avocode, Zeplin, крім веб-проектів, підтримує Android і iOS. У нашому випадку ми виберемо iOS.

Прийшов час завантажувати сам дизайн. Щоб зробити цей процес очевидним і передбачуваним, Zeplin призводить дуже детальну інформацію на сторінці, де повинен бути дизайн: вам покроково пояснюють, що зробити, щоб на цій сторінці з'явився ваш дизайн.

Як завантажити дизайн

Zeplin може перешкоджати завантаженню дизайн безпосередньо, через веб-додаток. Завантаження здійснюється з використанням плагіна Photoshop або Sketch, механізм дуже схожий на той, що ми бачили у Sympli. У звичайній ситуації після установки Zeplin плагін буде доступний без будь-яких додаткових дій, так що завантаження дизайну - це питання кількох кліків. У самому Photoshop або Sketch можна експортувати дизайн цілком або виділити окремі об'єкти дизайну, позначивши їх як exportable.

Щоб побачити всі ресурси в додатку Zeplin, потрібно позначити шари як exportable. Додаток Zeplin нам допомагає, розповідаючи, як це зробити, крок за кроком:

Коли дизайн буде завантажений, учасники команди зможуть приступити до спільної роботи. Менеджер проекту може відправити пряме посилання або запросити окремих учасників по email:

Цікава можливість демонстрації дизайну (різниця між демонстрацією або повноцінною роботою в тому, що в першому випадку не потрібно додавати в проект окремих людей як учасників команди) з метою отримання відгуків. Робиться це за допомогою елемента меню Share, який знаходиться поруч з Scene:

Огляд призначеного для користувача інтерфейсу

У багатьох продуктів, націлених на поліпшення робочої продуктивності, сухі і позбавлені емоцій інтерфейси. Zeplin абсолютно не такий - він перетворює процес, який здається нудним і одноманітним, в забавне дійство. Здається, що все відбувається само собою, - настільки це просто і очевидно. Ви просто завантажуєте свій дизайн - і ось перед вами готові специфікації, підігнані під норми платформи.

У порівнянні з Avocode і Sympli інтерфейс Zeplin позбавлений всіх додаткових інструментів, в ньому тільки найнеобхідніше для роботи. Додаток схоже більше на перегляд дизайну з можливістю експорту деталей цього дизайну. Як розробник ви можете виділити шар і побачити все його властивості:

Всі розміри будуть відображатися відповідно до вимог платформи (у нас iOS-додаток, так що це буде pt). Також можна подивитися колірну палітру і при необхідності перейменувати колір.

Якщо ви помітили зображення як exportable в Sketch, ви побачите їх в переліку ресурсів для свого проекту в Zeplin:

Всі використовувані кольори і шрифти в проекті відображаються в папці Styleguide. Завжди можна зробити експорт будь-якого з цих ресурсів, щоб використовувати його в проекті. Zeplin підготує код сниппета відповідно до вимог платформи. В цілому, створення дизайну для iOS і Android стає приємним заняттям.

Розробники можуть переглядати і копіювати стилі в форматі CSS для вебу, XML-ресурси для Android, UI Font або UI Label екстеншени для iOS. Ось варіант для веб-проекту:

І ще один - для iOS:

Спільна робота

Так як Zeplin представлений у вигляді веб-додатки і stand-alone десктопного додатка, його можна використовувати практично повсюдно. У будь-якого макета дизайну в Zeplin є власна посилання, яку можна побачити в правому нижньому кутку екрану.

Zeplin також дозволяє залишати коментарі для колег прямо в макеті.

ВАРТІСТЬ

Ціна передплати залежить від числа активних проектів. Сервіс надається безкоштовно для одного проекту. Найбільш популярний план Growing business, який коштує $ 25 в місяць і підходить для одночасної роботи над 8 проектами. Усі платні плани не обмежують чисельність команди.

плюси:

• Інтуїтивний мінімалістичний інтерфейс. Сам додаток дружелюбно і викликає посмішку у того, хто ним користується.
• Zeplin підтримує веб і мобільні проекти (iOS і Android).

мінусі:

• Zeplin не дозволяє відстежувати версії дизайну, а також візуально порівнювати два варіанти дизайну.
• Ні інтеграції з IDE, і розробникам потрібно вручну переносити всі ресурси з Zeplin в IDE XCode і Android Studio.

Поради щодо вибору інструменту

Avocode відмінно підходить для веб-розробки. Якщо ви націлені в основному на мобільну розробку, краще звернути увагу на Sympli або Zeplin.

Варто приділити увагу Sympli, якщо ви хочете повноцінної інтеграції з XCode або Android Studio: інструмент заощадить час на перекладі дизайну з мокап в середу розробки.

Sympli ідеально підходить для великих команд, коли кілька дизайнерів одночасно працюють над одним проектом і потрібно відстежувати зміни за версіями. Приємний момент - в блозі Sympli регулярно з'являється інформація про нові можливості, які з'являться в релізі.

Варто розглянути Zeplin, якщо у вас відносно невеликий проект, який не вимагає численних і частих змін дизайну або візуального порівняння різних ревізій.

Висновки

Всі розглянуті інструменти пропонують гарні рішення для того, щоб побудувати міст між дизайном і розробкою, і для поліпшення роботи команди в цілому. Часом це дається нелегко: потрібно знаходити баланс в роботі дуже різних типів груп з різними потребами. Але Avocode, Sympli і Zeplin ідеально вписуються в процес передачі дизайну в розробку, надаючи чудовий механізм швидкого створення динамічних специфікацій.

Так що сміливо говорите «ні» статичним, складним для розуміння і часто незв'язним специфікаціям. Прийшов час використовувати сучасні інструменти, щоб переводити дизайн в код без втрати сил. Заощаджену енергію завжди можна направити на те, що дійсно важливо, - функціональність, дизайн і опрацювання взаємодії з користувачами.