Интервью с дизайнером: Практическое руководство для преобразования проекта в прототип

Издание MaterialUp взяло интервью у украинского дизайнера Ярослава Зубко о современных трендах, о его работе и предложило ему составить практические рекомендации читателям для преобразования их проекта из эскиза в прототип. Специально для TJ я перевел это интервью (+ бонус в конце).

Моушн, как кажется на первый взгляд, это новая форма дизайнерского искусства, которая является важной частью дизайна сегодня. Взять тот же язык Material Design, где моушн является важной главной в гайдлайне и явно играет не последнюю роль в материальной эстетике.

Встречайте Ярослава Зубко, дизайнера из Украины, чье мастерство изготовления моушн дизайна весьма интригующе! Мы связались с ним, чтобы узнать больше о тех инструментах, кооторые он использует в своей работе, о методах и его мышлении. К счастью, Ярослав очень открыт для общения и предоставил нам много хороших советов, чтобы вы создавали отличный моушн дизайн.

Привет, Ярослав! Каков твой набор инструментов для дизайна, прототипирования и т.д.?

Хоть я все еще и использую Photoshop и Illustrator, мой основной выбор включает в себя следующие программы:

Balsamiq Mockups — для создания грубого эскиза. Я считаю, что это довольно хороший инструмент для начала проектирования, сразу после построение информационной архитектуры. Это быстрый, простой и кликабельный инструмент. Все что нужно.

Маркер и бумага — для еще более грубого эскиза, особенно учитывая, что я не хорош в рисовании от руки.

Sketch — мой главный инструмент. В нем я воплощаю все свои идеи и макеты, в нем делается большая часть работы.

Principle — очень быстрый и интуитивно понятный инструмент для анимации фреймов и мокапов, хотя он относительно ограничен в функциональности. Но скорость работы — это его главное преимущество.

Afte Effects — этот инструмент нужен, когда нужно разработать более сложные анимации.

InVision — инструмент для объединения статичных макетов в кликабельный прототип.
Photoshop — с недавнего времени, нужен просто для экономии времени и настройки картинок.
Illustrator — нужен для основной своей задачи — иллюстрации. Если связать его с After Effects, то может получиться что-то вроде этого:

Ezgif — хороший инструмент для уменьшения размера гиф-анимации. Иногда она делает гиф в два раза легче и с весьма приемлемым качеством.

Используешь ли ты какие-либо плагины?

В моем Sketch куча плагинов, установленных и проверенных временем. Среди них: Distributor, Font Awesome, Select Layers с Same, Sketch Palettes, Craft (ну конечно-же), Zeplin и Runner.

Круто, надо бы тоже начать использовать Runner! Давайте поговорим о твоей работе — у тебя есть определенный дизайн-процесс, которому ты следуешь?

В компании, где я работаю, есть «дизайн-мышление» или «дизайн-в-первую-очередь». Эти подходы мы применяем в наших проектах. Это в какой-то степени похоже на методику компании Google, которая называется «дизайн-эстафета». Но у нас есть различные методики, основанные на наших корпоративных проектах.

Независимо от размера проекта, это все может быть разбито на несколько общих этапов:

То ли это огромный проект, и мне нужно начать с определения потребностей пользователей и бизнеса; или это просто небольшой рабочий процесс создания анимации навигации в приложении для поста на Dribbble. первым шагом здесь будет задача понять и определить проблему. Если же это существующий проект, то это поле, где я исследую его.

Что может из этого выйти:

Когда я достаточно разбираюсь в проблеме, я могу начать набрасывать идеи в грубых формах. Это могут быть некоторые части интерфейса, части бизнес-процесса или даже слайды, показывающие путь пользователя при использовании приложения. Чаще всего я делаю это на бумаге (хотя и не всегда). Как я уже говорил, я не силен в рисовании от руки, так что мои наброски выглядят довольно уродливо, хотя они и выполняют свою задачу — представляют как можно больше идей в сжатые сроки настолько, насколько это возможно. На данном этапе я отдаю предпочтение количеству, нежели качеству.

Когда эта стадия заканчивается, у меня уже есть четкое представление о том, что нужно анимировать, что нужно отразить в прототипе или с чего начать работу над архитектурой проекта. Так что, по сути, на данном этапе я просто генерирую столько идей, насколько это возможно. Некоторые из них остаются на бумаге, некоторые нет. Некоторые я отбрасываю даже не задумываясь, потому что они выглядят глупо, но до этого момента они выполняли свою задачу — делали меня лучше.

От первых набросков... до финальных прототипов:

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

Если проект очень большой, это может быть Mindmap или Draw.io. Если архитектура ясна, и я могу пропустить ее разработку, то я перехожу к более подробному прототипированию с помощью Balsamiq или просто сразу рисую в Sketch. Поэтому я не начинаю анимировать интерфейс, пока у меня не появится хоть какое-то решение на макете.

Второй и третий этап повторяется, пока все открытые вопросы испытаны и утверждены с пользователями, утверждены с клиентами или, если это один из моих личных проектов, пока я сам не буду доволен результатом. Но даже в этом случае нужно проверить его на аудитории и получить фидбек на Dribbble или UpLabs.

Результаты процесса из моего другого проекта:

Можешь ли ты поделиться некоторыми приемами, которые ты разработал для совершенствования своей работы?

Я не уверен, что могу назвать именно методы, но я постараюсь поделиться некоторыми мыслями по этой теме:

— Искать правильное решение.

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

— Переставать быть перфекционистами.

Хоть я и потратил тонну внимания на детали в своем дизайне, я считаю, что совершенство не может существовать в реальном мире. Скорее только в головах людей. Но это субъективно.

Есть куча факторов, которые генерируются настроением человека, мнением об этом объекте, его возможностью, значимостью и т.д. Все это имеет значение, так что иногда я просто задаю себе вопрос «хочу ли я конкурировать со всеми этими факторами, используя разрешение 800/600?». Я могу попробовать, но если это займет слишком много времени, я знаю, что лучше просто бросить его, чем перейти к следующей вещи. Есть нечто гораздо более ценное, чем «перфекционизм». Это образование и обучение на каждом этапе. Уверен в этом.

— Работать утром.

Для меня, самое продуктивное время для творчества — это утро, поэтому обычно я стараюсь начать работу в период времени с 6:30 до 9 утра. Это время, когда все средства связи отключены, что положительно влияет на деятельность мозга.

— Использование материалистичного подхода в дизайне.

Мне нравится Material Design из-за его естественных движение и видов объектов. Иногда я просто замечаю предметы на улице, которые бросают тень или двигаются естественно, и я останавливаюсь, чтобы просто посмотреть на это. Я надеюсь, что это не звучит слишком странно, но просто попробуйте взглянуть на афиши супермаркетов примерно в 8 утра, когда солнце еще не слишком высоко и тени размыты, и вы поймете о чем я говорю. Поэтому я просто стараюсь отражать то, что вижу в своем дизайне.

Кроме того, на улице нет никаких по-настоящему острых углов, так что, даже если я не хочу выделять закругленные углы, я срезаю 1-2 пикселя вокруг них, потому что так выглядит естественнее и дружелюбнее. Если, конечно, все дело в дизайне острых углов и в цветах. 😊

Иногда я даже использую едва заметные градиенты, чтобы сделать элементы более выраженными, и чтобы пользователю хотелось «нажать» на них. 😊

— Внимание к деталям.

Я, мягко говоря, не люблю готовые иконки. Поэтому, в своем дизайне я обычно использую технологию «Пиксель Пёрфект» [Пиксель Пёрфект — технология верстки, при которой видимый результат изначально отрисован пиксель-в-пиксель — прим. перев.] для отрисовки иконок.

— Сохранение внимания пользователей.

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

— Любовь к горячим сочетаниям.

Говоря на техническом языке, я люблю горячие клавиши и сочетания команд. Когда я начал изучать After Effects, я распечатал и повесил списки горячих сочетаний клавиш над своим рабочим местом, чтобы запомнить их побыстрее.

Мог бы ты описать креативный процесс создания этой анимации?

Эта анимация является частью «Интерактивной Библиотеки», поэтому я хотел создать ее в первую очередь. Вы можете узнать больше о ней в описании к этой анимации.

Вторая причина заключалась в том, что вопрос фильтрации сложных таблиц на мобильных телефонах реализован плохо уже долгое время. Здесь я показал как я вижу его в одном из моих проектов. Я решил дать ему больше «мысли».

Сначала я нарисовал эскиз на бумаге, прежде чем начать анимировать.

Затем я обрисовал эскиз в Sketch, чтобы посмотреть как он соотносится с другими частями «Интерактивной Библиотеки» и подобрать правильные цвета.

Вы можете видеть, что у меня в Sketch хранятся какие-то куски из «Интерактивной Библиотеки» наряду с некоторыми будущими идеями. Так что, когда я попытался включить этот кадр в общую картину, я увидел все необходимые замеры пространства, цвета и общий контент.

На следующем шаге мы выполняем работу в Principle. Здесь выполняется ее большая часть.

Следующим шагом необходимо сохранить видео, полученное в Principle с помощью Photoshop. Он по-прежнему является лучшим инструментом, который я знаю, для преобразования .mov в .gif. Он также имеет широкий выбор опций для этого.

Затем я обратился к Ezgif.com. Это уникальный инструмент, который поможет значительно уменьшить размер гифки. Ниже вы можете увидеть метод оптимизации, который я использовал для своей анимации.

Что позволяет тебе идти в ногу со временем и последними тенденциями?

Во-первых книги, среди прочих наибольшее влияние на меня оказали эти:

About Face 3: The Essentials of Interaction Design 3rd Edition от Алана Купера

Don't Make Me Think, Revisited: A Common Sense Approach to Web Usability (Voices That Matter) 3rd Edition от Стива Круга

Information Architecture for the World Wide Web: Designing Large-Scale Web Sites, 3rd Edition 3rd Edition от Питера Морвиля и Луис Роузенфелд

The Elements of User Experience: User-Centered Design for the Web and Beyond (2nd Edition) (Voices That Matter) 2nd Edition от Джесс Джеймс Гарретта

Lean UX: Applying Lean Principles to Improve User Experience от Джеффа Гозельфа

Designing Interface Animation от Вал Хеда

Во-вторых, конечно, интернет-ресурсы, которые каждый день обновляются. Помимо всех социальных сетей я также использую различные интернет-сервисы, такие как Medium, UXPin, uxdesign.cc, UX Mastery, UX for the masses, Creative Bloq.

И, наконец, учитывая, что я работаю в международной компании, где работает около 40 других дизайнеров, я получаю много информации от наших внутренних каналов в Slack, Skype или просто от людей, сидящих рядом со мной.

Спасибо, Ярослав! Это было очень поучительно 😊

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

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

Для меня это дополнительная практика английского языка, к тому же, мне просто интересно заниматься оформлением статей на TJ и получать от читателей фидбек.

Я начинаю новый проект, который в результате может быть опубликован в iBooks Store. А именно, собираюсь перевести книгу Don't Make Me Think, Revisited 3rd Edition от Стива Круга. Она изобилует наглядными примерами, которые будут интересны всем web-дизайнерам и дизайнерам интерфейсов. К тому же, книга совсем небольшая и ее даже можно прочитать на английском, если у вас базовые знания, так как все будет понятно благодаря множеству примеров.

Я бы хотел публиковать переведенные главы книги постепенно здесь, на TJ. Вам интересно такое предложение или нет? Отпишитесь пожалуйста в комментариях или ответьте на опрос в твитере.