Протягом останніх кількох місяців я користуюся програмою Sketch для створення дизайну інтерфейсів і хочу поділитися деякими міркуваннями щодо її використання. Програма дуже непогана, але я не хочу вам її нав'язувати і люто агітувати переходити на неї, тим більше що це не універсальне рішення і підходить не всім.
Кому підходить Sketch?
Вам варто працювати в Sketch, якщо ви:
- працюєте на Mac (версії під PC поки не передбачається),
- займаєтеся в основному інтерфейсами (НЕ ілюстраціями, графічним дизайном, Фотоманипуляции і т. п.)
- розумієте, як програмісти працюватимуть з вашими вихідними файлами (формат «.sketch»), або ви самі будете експортувати всю графіку для верстальників або програмістів.
плюси Sketch
1. вузькопрофесійних інструмент для дизайну інтерфейсів
Sketch строго заточений під дизайн інтерфейсів. Тут немає, як в Photoshop, інструментів для створення тривимірної графіки, редагування фотографічних зображень, анімації кадру та іншого, ніж навантажений складний і важкий продукт від Adobe. Це дозволяє розробникам Sketch швидше і частіше виправляти баги і додавати новий функціонал.
Sketch можна порівняти з хірургічним скальпелем, протиставивши його швейцарському ножа під назвою Photoshop.
2. Експорт графіки
Варіанти експорту обраного графічного елементу під різні дозволи
У Sketch особливо зручно реалізований експорт графіки. Створюєте дизайн програми, наприклад, під retina-дисплей, а потім налаштовуєте для кожного з елементів експорт в декількох дозволах. Програма розкладе всю графіку у відповідних розмірах по папках. Дуже зручний і для розробника інструмент. Я настійно рекомендую розробникам мобільних додатків опанувати Sketch, так як програма стає все більш актуальною в цій галузі.
Мій знайомий дизайнер-іконщік довго пручався переходу на Sketch, не піддавався на умовляння. Однак, коли виникла необхідність генерувати одну і ту ж іконку в безлічі різних дозволів, він був у захваті від можливостей програми. Тепер для наших проектів від малює ікони в Sketch.
Крім експорту окремих елементів дуже зручна функція експорту артбордов (при необхідності зберегти кожен екран у вигляді окремого файлу) і слайсів (якщо потрібно створити превью з декількох екранів, або будь-якого окремого фрагмента додатки).
3. Простота інтерфейсу
Блоки властивостей об'єкта розгортаються при зверненні до них
У порівнянні з ускладненим інтерфейсом Photoshop, інструментарій Sketch простіше, зручніше і інтуїтивно зрозуміліше. У ньому немає безлічі зайвих панелей, розставлених навколо робочої області. Все, що потрібно, показується в процесі роботи.
Наприклад, інструменти редагування векторних форм з'являються тільки тоді, коли ви починаєте редагування векторного об'єкта. Другий приклад: поки ви не надали певну властивість об'єкту, опис цієї властивості знаходиться в згорнутому стані.
У програмі передбачені поєднання клавіш. істотно прискорюють роботу.
4. Зручна робота з текстом
Робота з текстом в Sketch відмінно адаптована під екрани:
- красивий рендеринг тексту (ніяких «мутних» режимів відображення типу crisp, smooth і т. п.);
- зручна настройка текстових блоків в режимах auto і fixed;
- при зміні вирівнювання (left, centered, right) в режимі текстового блоку auto текст не стрибає, як в Photoshop;
- автоматично встановлюється адекватний інтерліньяж (дрібниця, а приємно);
- панель спецсимволов (Ctrl + ⌘ + Пропуск).
5. Пипетка
У Sketch нарешті вирішена проблема зручної роботи піпетки.
- зручний зум, а, відповідно, висока, піксельна точність при виборі кольору;
- можливість вибору кольору за межами програми.
6. Cимвол
У Sketch можна створювати власні бібліотеки символів і редагувати їх
Символи я б помістив на більш високе місце в списку плюсів програми, якби їх функціонал був краще опрацьований. Хотілося б мати можливість трансформувати символи в режимі 9-slice (з призначенням зон, зміст яких не повинен трансформації), а також можливість створювати складні символи (як це зроблено в Fireworks. Наприклад). Останнє допомогло б створювати символи для різних станів кнопок - дуже корисний для дизайну інтерфейсів функціонал.
7. Регулярні оновлення
Програма регулярно оновлюється через App Store: виправляються баги і додаються новий функціонал.
8. Прийнятна ціна
Програма Sketch варто 3290 рублів. Ви можете встановити собі кілька копій програми на різні комп'ютери, за умови, що ними будете користуватися тільки ви особисто. Для порівняння використання Photoshop протягом року вам обійдеться в 3600 в рік (або 300 рублів щомісяця).
9. Утиліта Sketch Mirror
мінуси Sketch
1. Немає сумісності з продуктами Adobe
Часто програмі ставиться в докір відсутність сумісності з Photoshop. Робочі файли Sketch не відчиняються в інших програмах, Sketch не дозволяє зберігати файли в форматі psd. В цьому випадку можуть виникати складнощі при роботі в командах, або при передачі проекту від одного дизайнера до іншого.
Хоча, все ж з деякими сторонніми форматами програма працює: Sketch відкриває файли у форматі eps і svg.
2. Проблеми при роботі з великими файлами
Якщо ви працюєте над додатком з безліччю екранів, то програма може «гальмувати» (на момент написання цієї замітки була актуальна версія Sketch 3.1.1). Велика кількість візуальних ефектів типу блюра і тіней також може уповільнювати роботу програми 1.
3. Недосконалі векторні інструменти
Інструменти для малювання в Sketch залишають бажати кращого, вони поки недосконалі і у багатьох дизайнерів викликають роздратування. В цьому плані Illustrator як і раніше залишається неперевершеним. До речі, векторні форми, створені в Illustrator добре копіюються безпосередньо в Sketch (⌘ + C → ⌘ + V).
На сьогоднішній момент найкориснішим плагіном, на мій погляд, є Sketch Measure. Він дозволяє швидко створювати обміри для макетів: показувати розміри елементів, відстані між ними, вказувати їх колір, параметри тексту і т. П. Все обміри створюються у вигляді окремих шарів в документі. Ця інформація стане в нагоді програмістам при роботі над макетами, а також при створенні гайдлайни.
Плагін Sketch Measure
Корисні посилання
Примітки
2. Під час написання цієї замітки вийшла бета-версія Sketсh 3.2, яка, по завіреннях розробників, краще справляється з великими файлами.