Кращі товариші UX-дизайнера для ескізу

Пакет інструментів, наповнений ефективністю

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

Частина прийняття Sketch також пояснюється простотою інтеграції з іншими сторонніми програмами та підходом до плагінів.

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

Ескіз швидше та ефективніше

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

Робот ескізу Роя ван Руйєна (і команди!)

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

Перейменуйте шари Родріго Соареса

Я цим постійно користуюся. Масове перейменуйте шари або знайдіть та замініть. Для нескінченно організованого дизайнера це обов'язково використання.

Ремесло від InVision

В основному я використовую дані Craft для вилучення зразкових даних, а Craft Sync - для підключення макетів до InVision, щоб їх можна було переглянути за допомогою Inspect (докладніше про це пізніше).

Nudg.it від Ентоні Колурафіфі

Якщо ви використовуєте 8-пікс-сітку для свого інтерфейсу (який і слід), вам цей інструмент абсолютно потрібен. Це дозволяє змінювати те, що маленькі та великі прирости для натискання на Sketch (за замовчуванням відповідно 1px та 10px). Пройшли дні, коли я би SHIFT-стрілка вправо, а потім стрілка вліво + стрілка вліво для переміщення об'єкта праворуч на 8 пікселів. Я не можу придумати більш простий інструмент, який врятував мені стільки дратівливих клацань на ескізі, ніж цей.

Авто-макет від Anima App

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

Поділіться із зацікавленими сторонами

Marvel від Marvel

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

Ознайомтесь з цим проектом тут.

Швидше розвиток Гандоф

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

Цеплін від Zeplin

Любіть команду та підтримку цього додатка. Коротше кажучи, це вбило специфікацію інтерфейсу користувача. Експортуйте обкладинки із програми "Ескіз", які ви хочете зробити доступними для розробників, і вони синхронізуються з доступною URL-адресою. Розробники можуть натиснути будь-який графічний елемент і отримати майже будь-яке властивість (рамку, колір, шрифт тощо) з відповідним CSS. Zeplin спритно не тримається HTML, що важко екстраполювати з дизайну інтерфейсу.

Перегляд InVision від InVision

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

Анімуйте свій інтерфейс користувача

Ключове рішення, яке потрібно прийняти, - наскільки складна ви хочете, щоб ваша анімація. Я перераховую два варіанти тут для найпростішого та більш досконалого. Також зауважте, що я залишаю повноцінне програмне забезпечення для анімації, як After Effects і Flash (lol jk), які недостатньо добре інтегровані в робочий процес проектування продукту.

Принцип Даніеля Гупера

Principle - це дуже ескізний інтерфейс для додавання простих анімацій та переходів до вашого дизайну. Це вимагає, щоб ваші шари були згруповані та названі добре, тому що вони імпортуються в Принцип із тими іменами, а керувати об’єктами набагато простіше з хорошими іменами… ПОДАЧА.

FramerJS від Framer Team

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

Управління ресурсами

IconJar

На ринку є деякі інші альтернативи, такі як Lingo від Noun Project, але ця дешевша і працює як шарм . IconJar дозволяє вам легко керувати іконками, і в якості бонусу ви можете скидати шрифти, і це створить SVG для кожного гліфа. Це означає, що ви можете ввести шрифт піктограми та отримати всі символи як окремі символи, а не використовувати болісні шпаргалки. Все більше і більше дизайнерів іконок роблять свої іконки сумісними з IconJar з коробки, а це означає, що ваші масивні набори іконок будуть організовані без особливих зусиль.

Просто ваші ресурси

Як ми вже говорили раніше щодо дизайну додатків, більшість UX-дизайнерів створюють додатки без розкоші на власні візуальні активи. Цей список допоможе звести море ресурсів у невеликий набір, яким ви можете користуватися безкоштовно.

Значки

  • Google Material Icons - для проектів MD це основний набір.
  • Nova Icons - чудовий набір іконок з MD-відчуттям.
  • Nucleo - різноманітний і зростаючий набір іконок, який поставляється як рідне додаток, яке дає вам контроль над радіусом, кольором і розміром.
  • Magicons - менший набір, але чудовий як основа для більшості додатків.

Шрифти

Вибір шрифтів для UI Design - це не зовсім ракетна хірургія, тому що ви просто повинні вибрати розбірливий sans-serif, який є універсальним і розбірливим, який повинен працювати над кнопками, мітками, заголовками тощо. Я уникаю перераховувати шрифти TypeKit тут, оскільки відверто кажучи, занадто багато тонких варіантів шрифтів, які відповідають законопроекту. Наведені нижче безкоштовні шрифти Google зазвичай працюватимуть для більшості ваших проектів.

  • Roboto - це чудовий шрифт, але дуже прив’язаний до Material Design, тому його можна важко використовувати поза проектами на базі MD.
  • Open Sans - Найбільш універсальний шрифт групи. Це вже в моді роками і не виявляє ознак уповільнення. У ньому є маса ваг для всіх ваших потреб у користувальницькому інтерфейсі.
  • Лато - я не використовую це для будь-якого типу дизайну, оскільки він має деякі тонкі штрихи, які не завжди добре справляються. Це елегантно, проте може чудово підходити до заголовків із іншим шрифтом, що використовується для елементів управління інтерфейсом.
  • Кабіна - майже така ж універсальна, як Open Sans, і не настільки ж всюдисуща.
  • Монтсеррат - не настільки універсальний, але я часто його використовую для каркасів. Це ідеально підходить для концепцій або додатків з більш м'яким відчуттям.
  • Nunito - новий шрифт від Google, який на перший погляд схожий на безкоштовну версію Proxima Nova Soft
  • Джалді - достатньо стилю, щоб надати інтерфейсу трохи чуття. Він також добре виводиться при невеликих розмірах.

Плавник. Сподіваємось, очевидно, що це не є вичерпним. Це лише наші улюблені супутні програми для Sketch, коли ми працюємо на UX Power Tools. Якщо ви хочете, щоб ми додали більше, ми спробуємо ваш плагін або додаток на суму 65 000 доларів, або скільки коштує нова Tesla

Коли я не в середовищі Medium, я працюю над інструментами Sketch на UX Power Tools, щоб зробити вас кращим і ефективнішим дизайнером. Слідкуйте за нами на Twitter @uxpowertools. Слідуйте за мною, якщо дух рухає вас!