Photoshop, Sketch інструментарій UI/UX-дизайнерів: що вибрати для розробки інтерфейсів?

Останнім часом питання інструментарію UI/UX-фахівців стоїть дуже гостро: ЯКЕ З "ЄДНАННЯ ДЛЯ РОЗРОБКИ ІНТЕРФЕЙСІВ? Ми в нашій компанії також гаряче обговорюємо це питання. І дискусія часто мають дуже гострий характер. Що вибрати для роботи? Який редактор більш функціональний для того чи іншого завдання дизайнера? Перелік наших завдань досить широкий, починаючи зі створення фірмового стилю і закінчуючи повним циклом розробки складних діджитал продуктів. Наприклад, мобільних додатків для управління системами розумного будинку, повнофункціональних e-commerce систем.

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

Останні років двадцять найпопулярнішим графічним редактором для дизайнерів залишався Adobe Photoshop. Однак, нещодавно першість компанії Adobe на ринку інструментарію для digital дизайнерів похитнулася, в 2012 році компанія Bohemian Coding випустила Sketch. Sketch - це професійний векторний графічний редактор, заточений безпосередньо під створення графічних інтерфейсів: веб, мобільних додатків, десктопних програм та інших. На даний момент актуальною версією є Sketch 3. За ці 3,5 року компанія Bohemian Coding виконала величезну роботу з поліпшення свого продукту, зафіксувало безліч багів, наростило функціональність і власне виростила сер'єзного конкурента Photoshop. Відразу хочу внести важливу ремарку: я не розглядаю Sketch як безпосереднього конкурента Photoshop. Однозначно, призначення цих програм спочатку різне, відповідно, те, що для одного буде перевагою, для іншого може бути сер'єзним недоліком. Тому правильно було б зробити не порівняльний огляд, як це роблять багато хто, а висвітлити основні переваги і властивості кожного з редакторів для конкретного кейса.

Призначення

Саме тому вважаю коректним першим пунктом показати призначення кожної з програм.

Photoshop в основному працює з растровими зображеннями, однак має деякі векторні інструменти. Він незамінний для ретуші фото, обробки зображень. Але функціонал призначений для роботи з векторною графікою в ньому досить умовний. Багато шанувальників Adobe заперечать мені, але тоді виникає логічне питання: навіщо в арсеналі Adobe є окремий векторний редактор Illustrator, якщо Photoshop вміє все? Саме наявність двох інтерфейсів ускладнює роботу і вимагає додаткового часу при вирішенні завдань по роботі з векторною графікою.

Sketch же спочатку заточений на роботу з вектором, оскільки розробка інтерфейсів передбачає створення прототипів, фреймворків, іконок, UI-елементів, а часто ці елементи повинні бути векторними.

Таким чином, щоб вибрати яким з редакторів користуватися, потрібно зрозуміти, які завдання доведеться вирішувати за допомогою даного інструментарію.

Вартість

Другим за рахунком, але не за значимістю, параметром для вибору того чи іншого редактора є вартість і спосіб оплати даного програмного забезпечення. Придбати Photoshop можна виключно за підпискою! Вартість щомісячного використання редактора становить 20 $, і для різних регіонів ця цифра може змінюватися. Але суть залишається та ж. На відміну від Adobe компанія Bohemian Coding пішла по зворотному шляху: Sketch продається за 99 $, це одноразовий платіж і всі оновлення користувач отримує безкоштовно. Можливо надалі фінансова стратегія компанії зміниться, але поки вони завойовують ринок таким чином. Саме цей фактор, напевно, зіграє роль у масштабах компанії. Хоча і для фрілансерів чималозначимим є фінансове планування своїх ресурсів.

Мультиплатформенність

Ще одним значущим аргументом у виборі інструментарію для дизайнерів стане платформа, на якій працює той чи інший софт. У нашій компанії дизайнери працюють виключно на Mac пристроях і більшість front-end розробників теж. Тому той факт, що Sketch існує виключно для OS X, не став для нас проблемою. А ось для дизайнерів, у розпорядженні яких Windows пристрої, це явно не вирішувальне питання. Звичайно, можна заморочитися і поставити емулятор OS X на вінді, проте нічого путнього з цього може не вийти, максимум ви завантажите свій процесор і операційну систему обробкою непотрібних процесів. На відміну від Sketch, Photoshop має окремі версії для Windows і OS X. Тому в питанні мультиплатформенності незмінним лідером залишається Adobe Photoshop. Але, знову-таки, те, що на перший погляд здається недоліком, є сильною перевагою в конкретних умовах. Оскільки Sketch існує тільки під Mac, в ньому весь створюваний контент відмальовується за допомогою засобів маківської осі, використовується стандартний графічний движок від Apple. Саме цим розробники домоглися максимальної продуктивності та швидкості роботи.

Швидкодія і обсяг завантажувального файла

Будучи нативним Cocoa додатком, Sketch по мінімуму використовує нестандартні інтерфейсні елементи, тому він має маленький обсяг. Завантажувальний файл важить всього близько 22 Мб. Він досить добре оптимізований, на відміну від Photoshop, обсяг установчого файлу якого становить близько 1 Гб.

Інтеграція

Важливим моментом для будь-якого інструментарію є його здатність інтеграції з іншим софтом. Наприклад, після того, як макет сайту повністю опрацьований і готовий до передачі у відділ front-end розробки, стає питання безпосередньо самої передачі вихідців для подальшого розвитку проекту. На сьогоднішній день і Sketch, і Photoshop мають серйозні засоби інтеграції. Обидва редактори можуть експортувати матеріали в софт для комунікації між розробниками і дизайнерами, такі як Avocode, Zeplin та інші. Якщо розглядати цей кейс для компанії, то дане рішення вкрай важливо, воно допомагає заощадити гроші на додаткові екземпляри графічних редакторів для front-end розробників.

Навчання

Якщо ви вирішили освоїти Photoshop або розширити свої знання про даного графічного редактора, то у вашому розпорядженні маса освітніх джерел. Існують навчальні ресурси як платні, так і безкоштовні. Якість матеріалів також дуже сильно різниться: від примітивних статей неавторитетних авторів до ідеально структурованих послідовних відеоуроків кваліфікованих професійних тренерів. В силу того, що Sketch відносно молодий софт, то і кількість навчальних ресурсів не можна порівняти менше, ніж у Photoshop. І, як правило, це платні матеріали. Наприклад, на відомому освітньому ресурсі Udemi менше 40 курсів по Sketch. Однак, вже існують і огляд від практиків Sketch. Сподіваюся, з часом кількість навчальних метріалів у мережі буде збільшуватися прапорційно зі зростанням популярності графічного редактора Sketch.

Конкуренція - двигун прогресу

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

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

Що ви вибираєте для розробки інтерфейсів?

38.93% Sketch 3 197

48.22% Photoshop 244

25.3% Інше ПЗ 128

Проголосували 506 користувачів. Утрималися 220 користувачів.