Дизайнер vs програміст: правильний спосіб подавати макети програмістам

Якщо ви думаєте, що найкраще передавати макети програмісту в .psd, або .png – ви помиляєтеся.

sketch-zeplin

Пекельна рутина

Я, як програміст, довий час мав справу з макетами від дизайнерів. Переважно це були картинки в jpg або png, або ще гірше у psd. І це була дуже велика мука працювати з цим.

Якими інструментами ви думаєте я користувався для знаходження відстаней і пропорцій у зображенні? Не повірити, але я використовував програми для скріншотів (які можуть скріншотити частину зображенні і при цьому показують пікселі). Також на допомогу приходили лінієчки, хоча попередній спосіб був все ж зручніший. Оскільки пікселі ніколи не співвідносяться із пойнтами (при розробці IOS) додатків, доводилося проводити різні математичні дії, щоб вирахувати точні показники. Для десктопу було простіше, бо пікселі збігалися із моїми пойнтами (принаймні з піксель-перфектними макетами під mac).

Наступне – кольори. Їх доводилося висмикувати з макетів пипеткою, або висмикувати із дизайнерів шляхом тривалих і дуже недоречних перемовин, бо чомусь всі кольори позначити у rgb на макетах – це дуже складне завдання…

Ресурси (асети) у вигляді картинок – це все доводилося вибивати із дизайнерів, тому, що самі і добровільно вони ніколи цього не роблять, тим більше не роблять це правильно.

І як ви думаєте, чи виходили результати дуже класними і дуже швидко? Як ви можете здогадатися, результати виходили “приблизними” і дуже “поступово”, подекуди перетворюючись на справжнісіньку муку.

Світло в кінці тунелю

Отака сумна історія пов’язана із роботою над UI у епоху шаленої автоматизацїі та цілої купи різноманітних утиліт, створених для полегшення розробки. Але про них чомусь мало хто знає!

Особисто я про них нічого не знав до того, як отримав макет, створений утилітою, спеціально розробленою для того, щоб передавати макети програмістам! “Ова! Таке буває!” – з неймовірним здивуванням подумав я, коли побачив це дивно на власні очі. Проаналізувавши ситуацію, я вирішив, що зважаючи на те, що зараз 2016 рік, моє здивування – це щось подібне до здивуванню від мобільного телефона у 2000 чи телевізора у 1970, або автомобіль у 1920-х… Тобто, якщо ви про ці штуки не знали і не бачили, то це тому, що ви зовсім темний невіглас, що безнадійно відстав від технологій.

Чарівний “дирижабль”

Програмою, яка відкрила мені очі, на те, якою має бути передача макетів дизайнерами програмістам був Zeplin. Вона доступна у вигляді десктопного додатку і через веб. Її розробили турки (так, там теж є толкові програмісти і дизайнери). І вона мені дуже до вподоби.

download

Чому? Бо нею дуже легко користуватися, можна бачити всі кольори, відстані та дуже зручно завантажувати потрібні ресурси у потрібних вирішеннях! І це все без жодних додаткових зусиль і “кустарних” методів. До того ж для одного проекту вона цілком безкоштовна.

Завдяки плагіну в чи , ця апка перетворює артборди в готові макети для використання програмістами: у web, IOS чи Android.

Фактично увесь її функціонал і простота налаштування і використання показані на цих трьох відео:

Я не збираюся стверджувати, що вона єдина чи найкраща, просто я познайомився тільки з нею і можу її рекомендувати. Напевно, вибір подібних утиліт вже чималий і, можливо, Zeplin далеко не найкраща, якщо є бажання можете дослідити ринок… Але головний висновок: не мучайте програмістів, користуйтеся інструментами, які всім полегшують життя! Автоматизація рулить!

Позначки:

One Comment

  1. Anatolii

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

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься.