UI LOVER. Влюбиться в красоту и не сойти с ума
У меня сегодня не кейс, не такой, знаете, формат вебинара. У меня сегодня формат беседы, и это мой личный опыт.
Меня зовут Максим Власкин. Я сейчас работаю в Озон Банке, занимаю позицию ведущего продуктового дизайнера. И уже 6 лет я влюблён в дизайн, и моя любовь она постоянно со мной. И я, на самом деле, очень много рисую, не только на работе, но и в целом вне работы тоже. Рисую, так сказать, в стол, потому что мне это доставляет удовольствие.
Я сейчас покажу немножко, что я рисовал из последнего. Это вот такая история была с концептом банка.
Я его делал в плане редизайна Озон Банка, но этот концепт, к сожалению, никуда не пошёл дальше, но мне понравился результат.
Еще я рисовал вот такие штуки.
Это картинки для бота Изи бизи. О нём я расскажу подробнее. Этого бота я сделал с другом. Мне кажется, он довольно полезный, по крайней мере, мою боль он точно закрывает. Возможно, после этого, так сказать, после этой беседы, закроет ещё чью-то боль тоже.
И ещё рисовал вот такие концепты для криптокошельков. Получилось, как мне кажется, интересно.
И что же получается?
Когда я занимаюсь вот этим творчеством, моими интерфейсами, у меня есть два пути:
- Редкий путь - это когда я делаю дизайн, у меня выходит классно, я получаю удовольствие. Вот эти как раз таки картинки были после того, как я получил удовольствие, соответственно.
- Частый путь — когда дизайн получается унылым, и я грущу. Сегодня мы попробуем разобраться, как сделать так, чтобы редкие моменты радости стали более частыми.
Для этого у нас будет сегодня три такие подтемы.
1. Красота
Для меня красота - это способ получения удовольствия, знаете, не только визуального, но иногда даже физического. То есть, я рисую какой-то классный интерфейс, классный макет, и он меня настолько заряжает, что хочется, ну, даже потанцевать там, побегать, попрыгать. Такое и правда бывает.
И, исходя из этого, я понял для себя три потребности:
- У меня есть личные потребности - это когда мне важно делать красиво для себя.
- Есть социальные, когда мне важно делать красиво для других.
- И есть микс, когда важно делать красиво для себя и для других.
Я пробовал оба типа. В первом всё вроде прикольно, но мне не хватает социальной подоплёки. Делать красиво для кого-то не получается долго, потому что процесс не нравится. Я стремлюсь к миксу: создавать красиво для себя и для других.
2. Как делать красиво для себя и других людей?
Есть два направления:
1) Прокачивать UI можно разными способами: копированием, френками, челленджами и кейсами. Об этом мы сегодня поговорим.
2) И формирование своей аудитории, то есть для тех людей, которым мы стараемся сделать красоту.
2.1. Прокачка UI
Начнём с качалки, как раз-таки, с нашей UI-качалочки.
Первый способ, который я для себя нашёл, это копирование.
Хотел бы сказать очень популярную историю про насмотренность, о которой говорят все: Надо качать насмотренность, смотреть Dribbble, Behance,сидеть, листать ленту". Для меня эта история не работает. Вот как только я закрываю эту ленту, у меня всё из головы и пропадает
Поэтому я немножко прокачал этот процесс: перерисовываю дизайны, которые мне нравятся, чтобы анализировать сетки, типографию и логику, как-то вот понять. Раньше меня хватало на 3-4 дня, но потом интерес пропадал, и всё скатывалось на нет.
Я с другом сделал вот этого бота, он называется "Изи Бизи". Я отобрал там 30 картинок себе мобильных интерфейсов. Он просто каждый день в 10 утра присылает мне одну картинку мобильного интерфейса, чтобы я не забыл, сел, порисовал, получил удовольствие, попрактиковался.
И маленькое такое достижение: этим ботом пользуются около 70 человек. Если вы им тоже пользовались, спасибо вам большое. Если нет, то, возможно, после этой встречи попользуетесь.
Дальше идет способ Френки, сокращенно он Франкенштейна.
Когда мы берем один, два, редко три дизайна, и комбинируем из них что-то уникальное. В любом случае здесь видны отсылки от мамы и папы. Поэтому я рекомендую такие дизайны не выкладывать никуда, не выкладывать в портфолио, потому что, на самом деле, можно найти, откуда растут ноги.
• "Детепр" от Антона Шейна.
Его разработал мой бывший дизайн-директор, Антон, которому передаю привет. Он даёт недельное задание на отрисовку мобильного интерфейса и собрал вокруг себя сильных дизайнеров, которые дают обратную связь.
Обратная связь в формате оценки: дизайнеры оценивают ваш дизайн от 1 до 5, и вы получаете среднюю оценку. Антон также записывает видео-ревью. Можно внести правки, отправить работу снова и увидеть, как изменится оценка.
В какой-то момент я видел на просторах интернета, что ребята там рисуют много виджетов для системы iOS. И вот Вова, я так понимаю, на волне вот этого обсуждения сделал группу. Вова дает ежедневные задания, можно попрактиковаться. В большом чате можно делиться результатами, и как бы тоже за счёт этого немножечко своё присутствие в интернет-пространстве увеличивать.
Есть такая история, как мне кажется, что после того, как ребята заканчивают курсы, то забывают о кейсах, как о способе донесения дизайна, как о способе практики вообще. Вычёркивают из своей жизни.
Вот я нарисовал три кейса в своё портфолио после обучения, я так их наелся, мне больше этого не надо, пожалуйста никогда.
Я понимаю, что кейсы энергозатратные по себе, много времени требуют. Но помимо того, что вы практикуете дизайн не только там интерфейсов. Можете практиковать брендинг, какие нибудь логотипы. Но плюсы еще того, что это навыки презентации, сторителлинга тоже прокачиваются. Потому что правильно показать всю вашу работу тоже надо уметь.
И самое интересное, что все эти способы, да, копирования, френки, челленджи, кейсы, они универсальны. Их можно применять и к 3D, да. То есть, сначала я буду копировать 3D-модельку, потом буду что-то делать непонятное из двух моделек. И к анимации тоже, копировать какие-нибудь микро-анимации. В общем, эти способы они универсальны в любом творчестве.
И самое главное для себя, по крайней мере, я понял, что у меня появилась уверенность в своих силах, потому что я делал все эти упражнения.
Конечно, и страх там перед пустым экраном, он стал сильно меньше.
2.2 Формирование своей аудитории
То есть, мы сейчас проговорили с вами важность личную, а как же закрыть эту социальную подоплеку? Что же делать?
Выбор платформы
Я предлагаю выбрать платформу на которой хотите сосредоточиться. : Dribbble, Behance или DProfile, и проанализировать её.
Важно также делиться своими работами в Телеграм, Инстаграм и, что самое главное, в Pinterest. Раньше считал Pinterest мёртвой платформой для генерации аудитории, но это не так. Не забывайте просто оставлять ссылку на основной канал, чтобы привлечь людей — это действительно работает.
Анализ платформы
Давайте на примере Dribbble проведем верхнеуровневый анализ. Мы будем рассматривать работы Глеба Кузнецова, который мне очень нравится.
Я заметил, что работы с анимацией привлекают больше внимания. У Dribbble эффект Инстаграмма: глубина просмотра кейсов намного ниже, чем на Behance. Но при этом энергия, временные затраты на эту самую работу, которую туда публикуют, тоже сильно меньше — это всего один-два шота.
Так вот, шоты с анимацией по просмотрам сильно выигрывают.
Или можно проанализировать сами работы.
Но если мы возьмем эти самые работы и интегрируем их в это пространство. Например, если мы делаем интерфейс для TV, поставим его на TV, и это будет в комнате какой-то стоять. Это еще больше увеличивает конверсию в просмотры и лайки.
Конечно, сложно их считывать, хотя тренд на глассморфизм было легко считать — стекло и блюр были повсюду. Ну вот, даже открыв первую страницу Дриббла, выбрал мобилки и сделал скриншот.
Но можно, наверное, предположить, что интерфейсы в тёмной теме менее популярны. Люди пресыщаются, и хочется видеть, что происходит в светлой теме.
Последнее, наверное, в этой теме. Не стоит забывать, конечно, про поиск своего стиля. Это довольно сложно, я сам к этому не пришел.
И поиск своей аудитории — понимать, для кого вы делаете дизайн: для других дизайнеров или для кого-то ещё.
И выберите направление: любите финтех — делайте его, любите делать эдтехи, пожалуйста. Можно на этом сосредоточиться. По крайней мере, на старте своей популяризации, эта история будет работать хорошо. Потому что аудитория будет знать, что она увидит.
Но, как говорит мой психолог, мир меняется, и люди тоже, поэтому не стоит прям упарываться, если спустя какое-то время захотите порисовать что-то другое. Пожалуйста. Ни в чем себе не отказывайте. Не надо ставить самому себе какие-то блоки.
3. Как оценить красоту?
Ну и маленькая история: "За красоту и двор". Попытаемся понять, как объяснить то, что мы рисуем, не только себе, но и другим.
В целом, красота — она очень субъективна. Все это прекрасно знают: кто-то может сказать, что ты рисуешь круто, кто-то — что это жесть, в плохом смысле, а бабушка вообще не поймет, что это такое. Это абсолютно нормально, у всех своё мнение, свой vision. Не стоит сильно на этом заострять внимание.
Но, опираясь на базовые правила, например, копируя что-то, проходя ту самую "UI качалку", можно объяснять, собственно, что я делаю-то вообще. А правильно ли у меня с точки зрения композиции всё выстроено: сетки, цвета, шрифты? То есть, не стоит об этом забывать. И постоянно, после того, как вы делаете челлендж, почелленджите еще раз.
Взять так, спустя два дня, вернуться к своему дизайну и посмотреть, а всё ли хорошо?
И главное, когда к вам приходит коллега (если он не дизайнер), он спрашивает вас: "А почему ты выбрал здесь такой цвет, а почему у тебя этот блок не такой?". Не стоит ругаться. Надо всегда помнить, что вы можете это знать как дизайнер. Ваш коллега, скорее всего, этого не знает. И надо ему просто показать, рассказать, и красоту, которую вы закладывали, он, скорее всего, тоже увидит.
Еще можно проверить это исследованиями. Я выписал зедсь два метода: side by side и анкетирование. Эти исследования лучше проводить на своей аудитории.
При использовании метода side by side, когда сравниваете два разных дизайна, результаты могут быть не очень точными, если показывать всем. Но если показывать это своей аудитории, ответы будут ближе к реальности.
Есть история с анкетированием. Это когда вы показываете свой дизайн, просто спрашиваете, что человек там чувствует, что ему нравится или не нравится. То есть задаете какие-то вопросы с точки зрения своей красоты.
Есть история с attention insight, благодаря моему коллеге Сереже. Он открыл удивительный плагин для Фигмы, который с помощью ИИ анализирует макеты и показывает акценты, на которые может смотреть пользователь.
Минус плагина в том, что даётся всего 12 попыток. Но Сережа подсказал лайфхак: можно создать однодневные почты, заново зарегистрировать Фигму и снова использовать плагин, получая ещё 12 попыток для анализа дизайна.
когда вы понимаете, что UX-задача решена, но результат всё равно не удовлетворяет, на эту же задачу можно посмотреть с точки зрения UI, например, повысить чуть-чуть контрастность, и ваша форма будет давать абсолютно другие результаты. Поэтому не забывайте про это тоже.
Какой же итог у нас сегодня?
И в последнюю очередь хочу сказать, что любите красоту, она непременно ответит вам взаимностью. Спасибо большое!
4. Вопросы
1) Когда ходишь в UI-качалку, нужно ли пить какие-то БАДы?
Ребятки, могу только посоветовать витамин D – хорошая штука. Вот, иногда витамин C. Вот такой в шипучке, я его тоже люблю пить, особенно зимой. Хорошая штука, чтобы не заболеть, потому что все мы понимаем, что болезни влияют на продуктивность и в обычной качалке, и в UI-качалке тоже.
2) Скажи, а как понять, когда визуальный тренд устарел? Обычно говорят: "Посмотри на конкурентов, если юзают, значит тренд живет". Но это не всегда показательно и релевантно для своей ниши.
100%! Я полностью согласен, что история с релевантностью считывается сложно. В целом, я бы на самом деле пользовался трендами для того, чтобы рисовать для себя. Но если вы хотите, чтобы он проник в вашу работу, например, в ваш продукт, то тут надо точно понимать, стоит оно того или нет. Потому что в целом продукты живут дольше, чем тренды, и тренды могут, там, не знаю, месяц жить и все будут хайповать. Они быстренько станут не релевантными. И вам придется с ними доживать еще очень долго.
Но в целом, как же вот понять для себя, даже лично, что тренд начинает устаревать?
Вот, например, был ещё тренд, назывался скевоморфизм. Когда вот он вышел из неоморфизма, когда начали делать такие выпуклые интерфейсы, выпуклые дизайны. И на самом деле, мне кажется, что, с моей точки зрения, тренды не устаревают. То есть, в плане того, что они могут быть на хайпе и они могут быть не на хайпе. Если вы возьмёте тот же самый неоморфизм, начнёте сейчас его рисовать, и у вас получится круто и красиво, и вы сами кайфанёте от этого, и кайфанёт ещё кто-то, то вот это и есть победа!
Поэтому тренды лучше всего использовать если вы хотите как раз-таки наращивать ту самую аудиторию.
Если вы понимаете, что сейчас это классно и всем нравится, порисуйте два-три концепта, сколько угодно, для того, чтобы другие люди, которым это откликается, тоже откликнулись на ваши работы.
3) Какие сейчас самые популярные тренды, кроме глассморфизма?
Глассморфизм – это когда у нас везде стекло, полупрозрачное такое, с размытием. Его очень много используют в интерфейсах. И даже я в своё время, когда работал в банке, тоже пытался его немножечко протиснуть, но разработка мне сказала: "Прости, родной, прости! Эта история очень-очень недружелюбна для разных браузеров", поэтому мы от него отказались, и, как оказалось, не зря.
Вопрос: Какие же сейчас у нас тренды? На самом деле, самый лучший тренд – это на искренность.
Как я уже говорил чуть раньше, можно следовать трендам, можно их рисовать, но если вы от этого не получаете никакого удовольствия, то, наверное, того не стоит. И когда вы рисуете дизайн, и он получается у вас прямо вот… вас зажигает! Мне кажется, это тоже отчасти видят и ребята, которым вы показываете. Тренд – это хорошо, но слепо следовать им не рекомендую, не советую.
4) Скажи, а насколько история с прокачкой UI бьётся с работой в продукте?
Ведь пользователи ориентируются скорее на удобство, проработанный сценарий и так далее. Хочу разобраться, как найти баланс между красотой ради красоты и продуктовым подходом, когда упор горазд метрик?
Я в своей работе с этим сталкиваюсь постоянно.
Ну, с этим сталкиваюсь постоянно. И я бы попробовал вот такой способ. То есть, когда мы понимаем, что ваша компания, ваш продукт безусловно стремится к тому, чтобы зарабатывать как можно больше. У нас всё завязано на метриках, всё завязано на том, чтобы каждый пиксель приносил деньги, а не был красивым. И здесь очень сложно искать баланс.
И, как мне кажется, компании проходят несколько стадий.
Первая стадия – это когда ребята наращивают, собственно, вот этот, так сказать, денежный потенциал. Они там набирают себе клиентскую базу, делают всё для того, чтобы пользователю там было удобно, иногда даже подзабивают на красоту. И в какой-то момент это период заканчивается, и можно выдохнуть, и вот в этом момент, как раз-таки дизайнер который любит красоту, может немножко активизироваться.
Активизироваться по двум способам: первый – просто на работу появляется больше времени, которое можно инвестировать в ту самую красоту. И второе – это делать концепты.
Я этот лайфхак, на самом деле, подслушал у Серёжи Черновых, это когда давно работал в Яндексе.
И вот есть такой способ. Например, я продуктовый дизайнер рисует, делает все по дизайн-системе, но чувствует, что чего-то не хватает.
Ну по первому способу, сначала надо будет своё личное время выделять, но потом, возможно, это ребята оценят из команды и тоже будут на это выделять время для вас.
Делать концепты. То есть, взять, просто посмотреть на свой кусок флоу. Если вы, как дизайнер, видите, как это можно сделать лучше, симпатичней. Взять и выделить время и отрисовать то, как вы это видите. Забуббенить туда анимации, классные переходы, показать как это будет работать, в какие нибудь мокапы вставить, что прямо wow. И прийти к своему там ЛПР, человеку, принимающему решение (например, Стасу): "Смотри, Стас, какая же классная штука у нас может быть! Давай попробуем узнать, сколько это будет нам стоить, сколько это будет стоить времени, и вообще классно же!" Вот, один из способов.
Потом, как я уже говорил, можно, конечно же, ссылаться на что-то другое, например, там проводить тесты, брать свой дизайн текущий и сделать чуть покрасивее, самому сходить потестировать и сказать: "Смотрите, ребята, у нас вот конверсия, к примеру, когда формы не острые, скругления появились, она стала как-то лучше, давайте через А/Б проверим", если хватает, конечно, базы людей. То есть, как-то попытаться к этому, знаете, не сломя голову бежать, маленькими кусочками стараться всё-таки прививать вот эту ту самую красоту в своём продукте, в своей команде. И я думаю это рано или поздно даст свои плоды.
5) Да и, мне кажется, связанный вопрос: бывали ли у тебя долгие согласования визуала, когда не получается найти общее видение с клиентом или заказчиком?
Ну, так как я работаю в продукте, у нас в целом уже есть какой-то vision, который выстроили три года назад, и сейчас таких проблем нет. Но когда встаёт вопрос о сильных визуальных изменениях, иногда приходится доказывать правоту и ценность красоты. Думаю, этот вопрос актуальнее для ребят, работающих в студии. Там заруба с заказчиками может быть долгой и упорной.
Поэтому, прежде чем бежать рисовать дизайн, соберите мудборды, общайтесь с заказчиком, узнайте, как он видит проект, поймите его боль и потребности.
Зная это, можно пойти простым путем и сделать, как он хочет. Но есть более сложный и интересный путь – сделать так, как вы знаете и видите с точки зрения дизайна и профессионализма, и пойти не на конфликт, а на переговоры. Расскажите, презентуйте, проведите исследования, покажите примеры той же самой аудитории, соберите обратную связь и докажите ценность красоты, которую вы предлагаете.
6) Макс, скажи, а какое для тебя идеальное ТЗ?
Давайте так. Для меня, как для продуктового дизайнера, идеальное ТЗ – это когда менеджер приходит и говорит: "Макс, у нас тут какая-то странная конверсия. Что можно сделать, чтобы стало лучше?" И всё! В этот момент и начинает работать дизайнерская жилка.
Надо не просто нарисовать кнопку и думать, что станет лучше, а разобраться в проблеме, посмотреть overview. Может, проблема вообще не в дизайне, а в разработке? Может, где-то затык и что-то отваливается? Вот такие задачи самые интересные – когда нужно копать, думать, интересоваться не только у дизайнеров, но и у разработчиков, посмотреть, как работает бизнес в целом. Это классно!
7) Как дизайнеру защитить свои решения в условиях отсутствия экспертизы в оценке визуальных решений внутри команды? Ситуация: единственный дизайнер получает правки от множества некомпетентных сотрудников. Какие аргументы (бенчмаркинг, исследования, данные) наиболее эффективны в такой ситуации?
А, хороший вопрос, потому что, когда вы одинокий дизайнер, это и правда очень сложно. Я могу даже немножко разделить эту боль: у меня тоже были в карьере этапы, когда я был единственным дизайнером.
Стоите такие, знаете, ветер обдувает лицо, и вы не знаете, что с этим делать. Вроде получается классно, но никто не думает, что это классно — это очень грустная история.
Первым делом советую поискать другое место, где у вас будет вокруг куча классных профессионалов, с которыми вы будете расти и развиваться.
Но если это осознанный выбор — оставаться единственным дизайнером, то нужно искать индивидуальный подход.
Знаете, на самом деле, здесь нет какой-то там таблетки от этого всего, здесь очень надо смотреть на это индивидуально. Надо понимать, с какими людьми вы работаете, что они ценят в работе, и вообще, нужно ли это сейчас.
Если вы понимаете, что в данный момент, например, ребята ну просто не знают, что такое красота, сделайте пару вебинаров, покажите, как бывает красиво в мире, в других продуктах. То есть, просто расскажите этим ребятам, что такое интернет, что такое другие продукты.
Вот, и маленькими шажками (сейчас они отказываются это воспринимать) две-три встречи с ребятами, просто какие-то разговоры о красоте — и они, может быть, начнут ценить.
Если нет, значит, это те люди, которые вам не подходят в карьере. И надо что-то поискать.
Источник
Пост Максима, где он делится ссылками на ресурсы, которые позволяют прокачивать UI.