Огляд ескізу та рейтинг

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

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

Порівняно недавня концепція Sketch (2008 р.) Була зосереджена на спільному дизайні екранів, тому вона має перевагу над Photoshop, який дебютував на 30 років раніше, коли слово screen було пов'язане з вимірюванням щільності півтонів. Дизайнери почали спиратися на Adobe Photoshop для організації та передачі файлів дизайну інтерфейсів, тому що це найкращий інструмент у вікні для виконання роботи, а не тому, що це був інструмент, побудований спеціально для цієї мети.

Однак Sketch не один в дизайнерському просторі UX. Adobe XD (XD означає Experience Design), випущений у 2016 році як частина Creative Cloud Adobe для Windows та Mac, також є інструментом на основі векторних інструментів для проводів кадрів та створення прототипів інтерактивного проходження кліків.

Другим конкурентом на основі векторів, який рекламується як "найпотужніший інструмент дизайну екранів у світі", є Studio із платформи управління системою важкої ваги InVision (безкоштовно за один прототип, 25 доларів на місяць за необмежену кількість прототипів). На відміну від Sketch та XD, Studio має вбудований вдосконалений модуль анімації. Роботу, виконану в Sketch, можна синхронізувати з платформою InVision, використовуючи власний плагін Craft Manager. Adobe пропонує безкоштовну програму XD для початківців, яка має обмежене (2 Гб) зберігання та використання частини колекції Adobe Fonts. Повна версія XD доступна в рамках підписки Adobe Creative Cloud (CC) від 20, 99 дол. США на місяць для одного додатка або від 54, 99 дол. США на рік для всіх додатків Creative Cloud, включаючи Illustrator, InDesign та Photoshop.

Ескіз використовує варіант для моделі передплати, яка коштує 99 доларів на рік на пристрій (або на комп’ютері, або на мобільному пристрої) для приватних осіб. Це включає один рік оновлень та Sketch Cloud (для обміну в Інтернеті та співпраці), після чого ви можете зберегти та використовувати свою поточну версію назавжди або поновити на 69 доларів на рік, щоб відновити регулярні оновлення та вигоди у хмарі. Обсяг ліцензування коливається від 64 доларів на рік на пристрій для двох до дев'яти пристроїв до 49 доларів США на 50 або більше пристроїв.

Варто зазначити, що купуючи ліцензію, ви маєте право лише на одне місце (для використання лише на одному комп’ютері). Якщо ви використовуєте декілька Macs, таких як робочий стіл і ноутбук, вам не пощастило, і вам потрібно буде придбати два місця. Багато додатків на основі передплати дозволяють два місця за ліцензією - хороший поворот для тих працьовитих творців, які працюють на робочому столі в офісі та на своєму ноутбуку вдома. Пов’язана незручність полягає в тому, що якщо ви хочете використовувати Sketch на новому Mac або якщо вам довелося переформатувати диск, вам слід скасувати реєстрацію Sketch зі старої машини / диска та повторно зареєструватися.

Починаємо

Ескіз - оснащення, яке можна завантажити з сайту компанії (sketchapp.com); є безкоштовна 30-денна пробна версія, без кредитної картки. Ескіз вимагає MacOS 10.13.4 (High Sierra) або новішої версії. Компанія застерігає, що якщо ви працюєте зі складними, багатосторінковими документами із сотнями монтажних плат, рекомендується один з найпотужніших Macs, завантажених оперативною пам’яттю. Я протестував Sketch 53.2 на MacBook Pro 2018 з процесором Intel Core i9 2, 9 ГГц, 32 ГБ оперативної пам’яті та відеокарткою Radeon Pro 560X.

Прямо на сторінці завантаження Sketch пропонує Посібник для початківців, велику документацію, підручники та підказки, а також посилання на соціальні медіа та спільноти розробників, блоги та чати та Dribble. Бажає та надихає переглянути список зустрічей та подій глобальної дизайнерської спільноти. Крім того, на сайті пропонується безліч безкоштовних та преміальних ресурсів Sketch App UX / UI, включаючи набори каркасних каркасів, набори мобільних інтерфейсів, шаблони, макети, інформаційні панелі, концепції та піктограми.

Інтерфейс і полотно

Ескіз веде за своїм прикладом і забезпечує чистий, контекстуальний інтерфейс з трьома основними розділами - і (за дизайном) без плаваючих панелей. Якщо ви вже користуєтеся Mac, ви знайдете інтерфейс Sketch знайомий, оскільки він моделюється на інтерфейсах таких програм Apple, як Pages, Numbers та Keynote. З цією останньою версією, тепер підтримується темний режим Apple.

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

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

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

Малювання та набір тексту на ескізі

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

Створення, імпорт та збірка вмісту починається натисканням на спадне меню Вставити. Там ви знайдете очікувані інструменти форми, малюнка та тексту. Праворуч зручні такі операції розташування, як приведення вперед, вирівнювання та розподіл; і неруйнуючі основні булеві інструменти, такі як союз, віднімання, пересічення та різниця. Інтуїтивні та ефективні векторні інструменти дозволяють створювати та редагувати фігури, їх точки та криві Безьє. Хоча Sketch може впоратися з найважливішими завданнями з малювання, це не Illustrator - і це не повинно бути.

Основна типографія у "Ескізі" - це просто, із знайомими функціями Microsoft Word, поряд із декоративними варіантами тіней, заливок та меж. Форматування блоків типу може вимагати певного зусилля вручну в Sketch, яке, наприклад, не підтримує вкладку - ви повинні використовувати клавішу пробілу, щоб імітувати бажаний ефект. Це просто чудово, тому що будь-яка складна набір тексту не має сили при розробці чутливих макетів: все типографічне (розмір, розрив рядків, дефіс тощо) змінюється при перегляді на різних пристроях різного розміру.

Прототипування та чуйний дизайн

На відміну від інших програм малювання (але дуже схожий на Adobe XD), Sketch полегшує побудову інтерактивного прототипу. Щоб імітувати шлях вашого веб-сайту чи програми (UI) та який буде досвід роботи (UX), ви можете призначити певні області як прокручування чи не прокручування, меню посилань та перехресних посилань, символи, розділи, сторінки та екземпляри та визначити гарячі точки (області, на які можна натискати). Ви не тільки можете переглянути свої зусилля в додатку, але ви також можете використовувати Дзеркало ескізу (докладніше про цю функцію нижче).

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

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

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

У програмі "Ескіз" ви повинні створити варіанти макетів та спрощення різних співвідношень сторін вручну, копіюючи та вставляючи кожен елемент або групу. Однак я хотів би, щоб існувала можливість інтелектуальної настройки для чутливих модифікацій компонування, подібних до функції Responsive Resize в XD або навіть функції InDesign Adjust Layout. Хоча Adjust Layout майже ніколи не дає ідеального рішення, це, безумовно, заощаджує час і забезпечує краще місце для початку, ніж порожня сторінка.

Для попереднього перегляду конструкцій Sketch в режимі реального часу на ваших пристроях є безкоштовне дзеркало Sketch для iOS, а також кілька додатків для цього на пристроях Android. У всіх випадках для пристроїв знадобиться Wi-Fi або USB-з'єднання. Прийняття обґрунтованих дизайнерських рішень приносить користь будь-якому робочому процесу, і для цього можливість бачити ваші коригування, урожай та розмір тексту в прямому ефірі за допомогою ескізного дзеркала на фактичному пристрої є великим завданням.

Вихід та співпраця

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

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

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

Ви також можете експортувати обкладинки у вигляді PDF-сторінок, які можуть бути позначені коментарями у Apple Preview, Adobe Acrobat або будь-якому іншому програмному забезпеченні для перегляду PDF. Ескіз також експортує графіку, фрагменти та сторінки у вигляді файлів JPG, PNG та SVG. Більше того, він може експортувати код для атрибутів SVG та CSS.

Нічого схематичного про цю програму

Ескіз - це повноцінний інструмент, створений для дизайнерів, які створюють дизайн на основі екрана, і це робить майстерно. Завдяки своєму знайомому (для користувачів Mac), інтуїтивно зрозумілому інтерфейсу та легкій взаємодії між дизайнерами та їх клієнтами, Sketch заслужив свою надійну репутацію як інструмент для створення прототипів, оскільки це полегшує та прискорює процес перевірки та затвердження дизайну. Щоб отримати найкращі можливості у векторній ілюстрації, зверніться до нашого редактора, Adobe Illustrator.