[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "cndo", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "cndo", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "i", "ps": "cndo", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "i", "ps": "cndo", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "cndo", "p2": "ezfk" } } }, { "id": 6, "disable": true, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "clmf", "p2": "ffyh" } } }, { "id": 7, "disable": true, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "cndo", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "cndo", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "cndo", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "create", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "cndo", "p2": "flvn" } } } ] { "gtm": "GTM-NDH47H" }
{ "author_name": "Alex Pavljenko", "author_type": "self", "tags": [], "comments": 33, "likes": 11, "favorites": 10, "is_advertisement": false, "section": "club" }
865
Клуб

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

Издание 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

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

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

Анимация в 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. Вам интересно такое предложение или нет? Отпишитесь пожалуйста в комментариях или ответьте на опрос в твитере.

Популярные материалы
Показать еще
{ "is_needs_advanced_access": true }

Лучшие комментарии

Дискуссии по теме
доступны только владельцам клубного аккаунта

Купить за 75₽
Авторизоваться

Преимущества
клубного аккаунта

  • отсутствие рекламы
  • возможность писать комментарии и статьи
  • общение с членами клуба
Подробнее

Преимущества
клубного аккаунта

  • отсутствие рекламы
  • возможность читать и писать комментарии
  • общение с членами клуба
  • возможность создавать записи

Сколько это стоит?

Членство в клубе стоит всего 75₽ в месяц. Или даже дешевле при оплате за год.

Что такое клуб?

Клуб ТЖ это сообщество единомышленников. Мы любим читать новости, любим писать статьи, любим общаться друг с другом.

Вступить в клуб

Комментарии Комм.

Популярные

По порядку

Прямой эфир

Вы не против подписаться на важные новости от TJ?

Нет, не против