Начало работы с UX Design в Sketch

Учебник для начинающих UX дизайнеров и студентов-дизайнеров

За последние два года мы много писали о советах по Sketch в UX Power Tools, и я хотел организовать их так, чтобы они помогли дизайнерам, которые только начинают пользоваться UX.

Я должен также упомянуть, что я не буду обсуждать, какой инструмент лучше - я просто предположу, что вы уже поняли, что Sketch является лучшим (на данный момент) и хотите знать, как использовать его в качестве UX Designer

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

  • Получать идеи
  • Начиная
  • Становится быстрее
  • Становится умнее
  • Получение Visual

Получать идеи

UX-дизайн начинается до того, как вы приступите к работе с инструментами - он начинается с момента, когда идеи приходят вам в голову (… на самом деле он начинается гораздо раньше с исследований, но давайте оставим эту статью на 20 минут дольше).

По общему признанию, я прыгаю прямо в цифровые инструменты довольно рано. Но это во многом потому, что я делаю больше в голове и делаю наброски совместно на доске с моей командой дизайнеров. UX-дизайнеры, только начинающие, должны действительно оставаться в низком качестве, исследуя проблемное пространство и совершая ошибки.

Как только вы будете готовы что-то показать на экране, я думаю, что есть два инструмента, которые очень хорошо это облегчат. Первый - это инструмент InVision под названием Freehand, который мы рассмотрели:

Вторым инструментом, облегчающим этот этап проектирования, является набор премиум-библиотек для Sketch под названием Flowkit от Matt D. Smith. Это стоит $ 29.

Он не только отлично подходит для создания каркасных схем, но и может быть использован на более поздних этапах разработки, когда вам необходимо наметить ключевые рабочие процессы с высокой точностью, чтобы передать свой дизайн.

Начиная

Безусловно, самая сильная сторона Sketch для UX Design - это акцент на том, чтобы сделать вещи повторяемыми и быстрыми.

Все еще вызывает тревогу то, что многие дизайнеры Sketch не используют такие простые и мощные вещи, как Shared Styles или более поздние разработки, такие как Nested Symbols. Я предполагаю, что это потому, что дизайнеры нетерпеливы и просто хотят что-то сделать. Я полностью понимаю это.

Но великолепный дизайн настолько хорош, насколько хорошо организован дизайнер. Нам нравится метафора кулинарии:

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

И, наконец, священный грааль статей о том, как запустить проект в Sketch, который охватывает все это (вплоть до структуры папок):

С бонусной статьей о том, как быстро настроить макеты в Sketch:

Становится быстрее

Хорошо, теперь, когда у вас есть представление о том, как эффективно запустить проект Sketch, пришло время начать быстрее работать с этим инструментом. Лично я нахожу это оскорбительным, когда дизайнер не использует ярлыки во время разработки - я имею в виду, что это действительно ранит мою душу. Не будь тем парнем / галом

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

Секреты и уловки

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

Становится умнее

Вы знаете, как настроить проект, вы узнали, как работать с Sketch быстрее, и теперь пришло время применить все это к UX-дизайну.

Как я уже говорил ранее, Sketch идеально подходит для UX-дизайна, потому что он упрощает повторение, последовательность и модульность. Вот несколько примеров того, как использовать Sketch для интеллектуального создания элементов пользовательского интерфейса (и все они поставляются с бесплатными файлами):

Эффективная обработка значков и графики

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

Вложенные символы могут на самом деле совсем немного автоматизировать:

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

Получение Visual

Как будто всего этого было недостаточно, дизайнеры UX сегодня имеют гораздо более высокий стандарт для визуального дизайна.

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

Чтобы стать лучше, я начал с копирования существующих продуктов, чтобы понять, как составлен пользовательский интерфейс.

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

Оттуда вы действительно можете начать использовать некоторые небольшие приемы, чтобы добавить немного изящества в свои проекты:

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

* мы никогда не писали часть 2

И последнее, но не менее важное: в какой-то момент вашей карьеры вам придется создавать приборную панель, и это часто является одним из самых больших кошмаров для дизайнера UX. Лично я считаю, что информационные панели приносят предельное значение в таблицу, поэтому я бы не стал тратить дни на то, чтобы диаграммы выглядели хорошо:

Это были удивительные 18 месяцев, которые помогали сообществу дизайнеров с помощью UX Power Tools. И хотя Sketch, конечно, не единственный инструмент, который дизайнер должен иметь в своем арсенале, он, безусловно, самый мощный. Я надеюсь, что это приложение поможет тем из вас, кто только начинает свою карьеру в UX, или кто переходит на Sketch для вашего рабочего процесса проектирования.

Если вам интересна система дизайна Vanilla, которая идеально подходит для запуска новых проектов, мы будем рады, если вы ознакомитесь с теми, которые мы создали. Они сэкономят вам тысячи часов времени на разработку:

Когда я не собираю статьи Sketch на Medium, я работаю над инструментами дизайна Sketch в UX Power Tools, чтобы сделать вас лучшим и более эффективным дизайнером.

Следите за UX Power Tools в Твиттере
Подпишись на меня в Твиттере