Початок роботи з UX Design в ескізі

Буквар для нових дизайнерів UX та студентів-дизайнерів

Ми багато писали про поради щодо ескізів на UX Power Tools протягом останніх двох років, і я хотів організувати їх таким чином, щоб допомогти дизайнерам, які тільки починають користуватися UX.

Я також хочу зазначити, що я не збираюся обговорювати, який інструмент найкращий - я просто припускаю, що ви вже зрозуміли, що ескіз є найкращим (на даний момент), і хочу знати, як його використовувати як UX-дизайнера

Я розділив наші статті на 5 розділів, які відображають те, як я думаю, що нові дизайнери просуваються від новачка до майстерності:

  • Як отримати ідеї
  • Починаємо
  • Швидше
  • Розумніше
  • Отримання візуального

Виведення ідей

Дизайн UX починається ще до того, як ви перейдете до інструментів - він починається з того, як ідеї виходять з вашої голови (… насправді починається шлях до цього з дослідження, але давайте тримати цю статтю не довше 20 хвилин).

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

Після того, як ви будете готові вивести щось на екран, я думаю, що це дуже добре полегшить це. Перший - це інструмент InVision під назвою Freehand, який ми розглянули:

Другий інструмент, який полегшує цю фазу проектування, - це набір преміум-бібліотек для ескізу під назвою Flowkit Метт Д. Сміт. Це ціна $ 29.

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

Починаємо

Найбільша сила Sketch для UX Design - це його акцент на тому, щоб зробити речі повторюваними та швидкими.

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

Але чудовий дизайн настільки ж хороший, як організований дизайнер. Нам подобається метафора приготування:

І нам також подобається розширювати концепцію таблиць стилів від коду до дизайну (оскільки ми це писали, системи дизайну дійсно вибухнули на сцену, але більшість цих прийомів актуальні і сьогодні):

І наостанок для святого граалу статей про те, як розпочати проект у Sketch, який охоплює все це (аж до структури папок):

З бонусною статтею про те, як налаштувати макети в ескізі:

Швидше

Гаразд, тепер, коли ви зрозуміли, як ефективно запустити проект "Ескіз", саме час почати швидше використовувати цей інструмент. Особисто мені здається образливим бачити, як дизайнер не використовує жодних ярликів під час проектування - я маю на увазі, це справді болить моїй душі. Не будь тим хлопцем / галом:

З того часу, як ми написали цю статтю, вийшло близько мільйона з половиною нових інструментів та плагінів, але, на правду, найкращі супутники для Sketch на мою думку насправді не змінилися (Nudg.it зараз підтримується у програмі Sketch, Anima все ще корисна, навіть якщо частина її була включена у функцію компонування Sketch):

Поради та рекомендації

Джон Мур передав свою власну мудрість мудрості у кількох статтях, які підірвуть ваш розум у їхній простоті та силі:

Розумніше

Ви знаєте, як налаштувати проект, ви дізналися, як швидше використовувати Sketch, а тепер настав час застосувати все це до дизайну UX.

Як я вже говорив раніше, Sketch ідеально підходить для UX-дизайну, оскільки робить повторення, послідовність та модульність легкими. Ось декілька прикладів використання Sketch для інтелектуального створення елементів інтерфейсу (і всі вони поставляються з халявою ):

Ефективна робота з іконками та графікою

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

Вкладені символи можуть насправді автоматизуватися зовсім небагато:

Нарешті, мене відпустять, якби не зазначив найбільший прогрес ескізу за останні 12 місяців - Бібліотеки:

Отримання візуального

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

Коли я починав розробляти UX-дизайн, мені стало складним ознайомлення з «матеріалами», які мені потрібні для розробки: пропорції, розміри шрифту, ваги, кольоровий контраст тощо.

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

Ми висвітлювали це в минулому році та надаємо посилання на декілька поширених продуктів, створених у програмі Sketch (хоча деякі з них були перероблені):

Звідти ви дійсно можете почати використовувати невеликі прийоми, щоб додати лише трохи чуття до ваших дизайнів:

Але не забувайте, що точні зразки даних так само важливі для візуального дизайну, як і самі візуальні зображення:

* ми ніколи не писали частини 2

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

Минуло 18 місяців, допомагаючи дизайнерській спільноті завдяки електроінструментам UX. І хоча Sketch, безумовно, не єдиний інструмент, який дизайнер повинен мати у своєму арсеналі, він, безумовно, найпотужніший. Я сподіваюсь, що цей додаток допоможе тим із вас, хто тільки починає кар’єру на UX, або хто робить перехід на ескіз для вашого дизайну.

Якщо вас зацікавила система дизайну ванілі, яка ідеально підходить для запуску нових проектів, ми будемо раді вам перевірити ті, які ми створили. Вони заощадять тисячі годин дизайну:

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

Слідкуйте за електроінструментами UX у Twitter
Слідкуйте за мною у Twitter