BBE: UX/UI и продуктовый дизайн
10.7K subscribers
2.46K photos
85 videos
17 files
927 links
⚫️ Канал школы дизайна и технологий Bang Bang Education, посвященный продуктовому дизайну: https://tinyurl.com/5xtc4jtj

Чат → https://t.me/+6kGcOtk2cUc4NTJi

Номер заявления в РКН: 5317852641
Download Telegram
Обновления Figma после Config 2022
Вкратце расскажем, что нового в редакторе. Видео с выступлением СЕО Figma уже есть на YouTube.

Темная тема
Быстрый способ сменить тему интерфейса: нажать правую кнопку мыши > Quick actions > ввести «Dark mode» и выбрать тему в выпадающем списке.

Обновленный Auto layout
Теперь можно настраивать отступы с каждой стороны по отдельности, выставлять отрицательные значения в расстояниях между объектами, чтобы создавать эффект «наложения», и перемещать объект внутри фрейма независимо от заданных настроек через абсолютное позиционирование.

Figma опубликовала видео-туториал по Auto layout и презентацию с инструкциями в Figma Community.

Обновленные компоненты
Больше не надо создавать отдельный вариант на каждое состояние компонента. Достаточно выбрать содержимое компонента, которые нужно сделать редактируемым, и превратить в Property. Text property в разделе Content позволяет менять текст, а Boolean property в разделе Layers — убирать/добавлять выбранный объект внутри компонента.

NB! Чтобы эти функции заработали, компонент должен быть настроен через Auto layout.

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

Минус, что такие настройки доступны далеко не у всех шрифтов, а если и доступны, то в английской раскладке.

​​✦ Анимация «пружина»
Новый вид анимации во вкладке Smart animate, который хорошо подойдет для всплывающих уведомлений. Подробная инструкция в блоге Figma.

Обновленная обводка
Обводку каждой сотороны фигуры теперь можно настраивать по отдельности. Работает для квадратов и прямоугольников.

Избранные файлы
Чтобы не терять файлы, можно добавить их в «Избранное», нажав на звезду рядом с названием. Они появятся в левой колонке в разделе Favourite files.

Обновленное приложение для десктопа
Вкладки с проектами теперь работают как в браузере: их можно закрепить через Pin tab или перетащить в отдельное окно.

→ Какие обновления стали для вас полезными, а какие кажутся лишними и ненужными? Поделитесь в комментариях.
👍254🔥2
This media is not supported in your browser
VIEW IN TELEGRAM
Добавили на Behance новые кейсы студентов курса «UI-анимация»

→ Если вы тоже хотите освоить Principle, Origami и продвинутую анимацию в Figma, присоединяйтесь к курсу «UI-анимация» со скидкой 25%. Старт — 1 июня.
19
Что происходит на картинке?

Попробуйте сначала угадать в комментариях, а потом посмотрите ответ ☻

Это сессия рефлексии с кураторами годовой программы «UX/UI: дизайн цифровых продуктов». Студенты подводят итоги модуля, рассказывают, чему научились, и заряжаются на последний рывок в третьем модуле.

На картинке каждый заполняет свой блок в Miro с вопросами о своих выводах и плане действий для развития в дизайне.
14👍3🔥1😁1🤮1
Знания расцветают в школе.

Курсы
Интенсивы
7👍1
Forwarded from Bang Bang Education
A/B-тестирование (англ. A/B testing)

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

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

В реальности факторов может быть больше, а анализ аудитории — сложнее, поэтому исследования могут занимать недели и даже месяцы. Вот примеры A/B-тестов платформы ux-исследований VWO.

Больше о продуктовом дизайне — в тематическом канале школы.
9👍4
Как сделать правдоподобный макет? 3 приема анимации

Плавный переход
В интерфейсах переход между разными экранами происходит не сразу, а занимает где-то полсекунды. Попробуйте разблокировать телефон, и вы увидите, что темный экран как бы растворяется. Поэтому при настройке перехода между фреймами вместо Instant выставляйте Dissolve на 500 мс.

Состояние элементов
Интерактивные компоненты в Figma позволяют проработать состояния элементов при наведении, нажатии или ошибке. Сделайте кнопке хотя бы 2 состояния: default и hover, — чтобы макет стал отзывчивым на действия пользователя.

Видео-туториал по интерактивным компонентам от Figma.

Выбор устройства
Если вы сделали мобильное приложение, показывайте его в телефоне через Prototype Settings > Device в Figma или через Figma Mirror для заказчика. И наоборот, десктопные макеты открывайте через браузер, чтобы прототип был в среде, в которой он будет существовать дальше.

Это базовые приемы, которые помогут оживить ваш макет.

→ Если вы хотите освоить продвинутую анимацию, пополнить портфолио красивыми дриббл-шотами и научиться работать в Principle, приглашаем на курс «UI-анимация» со скидкой 25%. Старт — 1 июня.
24
This media is not supported in your browser
VIEW IN TELEGRAM
Не тратьте время на дизайн

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

Эти правила и есть дизайн-система. Одно дело — создать ее, другое — поддерживать и мыслить ее категориями. О системном мышлении дизайнера, ограничениях и возможностях дизайн-системы поговорим на бесплатном вебинаре с Евгением Семеновым и Колей Соболевым. Сейчас они работают в Российском экспортном центре, а до этого принимали участие в развитии дизайн-системы «СберБанк Онлайн» и даже получили награду.

Регистрируйтесь и приходите на вебинар 2 июня в 19:00.
🔥10👍32
Как оказалось, справляться с боязнью белого листа лучше с карандашом в руке, до того как откроешь Figma

Прежде чем что-то нарисовать в редакторе, нарисуйте это на бумаге. Практике прототипирования студенты годовой программы учатся у Насти Поповой, руководителя направления продуктового дизайна в «Альфа-Банке». Делимся бумажными набросками и открытиями студентов:

❶ Женя: «Прототип рисовала для домашнего задания по созданию сервиса бронирования коттеджей. Я всегда перед работой на компьютере делаю небольшие наброски по проектам. Но в подходе Насти Поповой мне очень понравилась идея с большим листом и маркерами. Такое рисование всегда приводит в порядок накопившиеся в голове идеи, поэтому буду применять дальше. Ну а дети улучшат, что мама не докрутила ☺️».

❷ Никита: «Как оказалось, справляться с боязнью белого листа лучше с карандашом в руке, до того как откроешь Figma. Бумага-то все стерпит, а ориентируясь на визуальное представление будущего макета, не рискуешь упустить что-нибудь важное. Главное, не забыть, что имел в виду под этими каракулями изначально».

❸ Марина: «Я делала прототип для проекта лендинг курсов компании Моторика. Пользуюсь быстрым проектированием на бумаге недавно. Первые прототипы всегда делаю на бумаге карандашом, потом переношу в FigJam».

❹ Антон: «Я первый раз набрасывал прототипы на бумаге. И это оказалось значительно удобнее и быстрее, нежели в редакторе. За пару часов сложилось какое-то виденье, которого позже я старался придерживаться. Носил их в рюкзаке из дома на работу и обратно, чтобы в свободную пятиминутку была возможность в них взглянуть вновь и как-то по-новому оценить или что-то изменить».
10👍3
Знания расцветают в школе.

🌸 Курсы
🌱 Интенсивы
6
Расписание курсов и интенсивов по UX/UI-дизайну в июне

🌷 1 июня
«UI-анимация» — за полтора месяца научимся анимировать свои прототипы в Principle, Figma и Origami и соберем портфолио. Вот примеры работ студентов прошлых потоков.

Курс ведет Саша Груздев. Раньше руководил отделом диджитал-дизайна в студии ONY, работал арт-директором в отделе коммуникаций «Яндекс.Маркета». Сейчас развивает свой продакшн в cuprum.me.

🌱 2 июня
«Не тратьте время на дизайн» — бесплатный вебинар, где поговорим о системном мышлении и роли дизайн-систем в разработке продукта.

Спикеры — Евгений Семенов и Коля Соболев. Сейчас работают в Российском экспортном центре, а до этого принимали участие в развитии дизайн-системы «СберБанк Онлайн».

🌸 20 июня
«Управление процессами в креативной индустрии» — курс для middle+ специалистов, которые планируют управлять или уже управляют командой. Разберемся, как выстраивать процессы и выстраивать коммуникацию, чтобы по пути ничего не ломалось.

Курс ведет Евгения Дацко, основательница консалтингового агентства Artery.Agency. Еще Женя руководила дизайн-отделом в «РБК» и помогала наладить процессы в «Учи.ру» и 12storeez.

🌿 25 июня
«Продуктовый дизайн: от ноля до ста» — интенсив для новичков в UX-дизайне и участников продуктовых команд. За два дня проанализируем задачу, проведем исследование, соберем карту пользователя (CJM) и тестируем прототип.

Все этапы разработки продукта пройдем вместе с Лизой Ревзиной, руководительницей дизайн-направления в консалтинговом агентстве BCG.

Скидка 25% на все курсы и интенсивы до конца дня, 31 мая.
4👍1
Зачем дизайнеру участвовать в конкурсах?

Рассказала Даша Егорова, арт-директор b2b в «МТС», преподавательница на годовой программе и член жюри конкурса ArtMasters.

Желание попробовать себя в чем-то новом

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

Комьюнити

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

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

Личный вызов

Если чувствуете, что хочется чего-то нового или не получается расти. Конкурс — это возможность решить задачу, поставить себе цель: «В этот раз я должен сделать вот настолько круто, попробовать вот такие новые подходы».

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

Портфолио

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

Ценные призы

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

В целом, дизайн-конкурс — это набор возможностей, который зависит участника: как он ими воспользуется и что для этого сделает.

→ Регистрируйтесь на конкурс ArtMasters до 12 июня. Работы участников компетенции «Веб-дизайнер» получат обратную связь от Даши.
11👍2
Первый вебинар на третьем модуле годовой программы «UX/UI: дизайн цифровых продуктов»

В левом верхнем углу кураторы Митя и Полина

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

На третьем потоке будут кейсы от:
• Метра Квадратного, экосистемы недвижимости. Участники разработают продукт для оценки ремонта квартир;
• Авито, сервиса частных объявлений. Участники придумают инструменты, которые помогут выбирать и сравнивать товары внутри экосистемы.
• Meet for Charity, благотворительного аукциона встреч с известными людьми. Участники разработают приложение для меценатов.

И еще один секретный кейс.

В следующих постах мы расскажем, как студенты работают над своими проектами, и покажем результаты. Stay tuned!

Шестой поток курса начнется 19 июля.
12👍4
Я впервые работаю дизайнером в команде: что делать?

Советы начинающим дизайнерам от Сергея Иконникова, наставника годовой программы «UX/UI: дизайн цифровых продуктов», которые помогут быстро поймать новый рабочий ритм.

В начале будет небольшая зарплата — это нормально. Не просите сильно много, но и не работайте за еду

Зарплата начинающего специалиста варьируется в пределах 30 – 50 000 рублей в зависимости от региона. Не рекомендуем соглашаться на бесплатную работу — это обесценит ваш труд, но и сильно больше просить не стоит.

Чтобы в будущем завести разговор о повышении, с самого начала ставьте себе цели или KPI — «оформить UI kit за неделю», «провести 5 интервью за месяц», «разработать дизайн 10 страниц». Со временем вы начнете делать работу быстрее и качественнее, и такие отметки помогут отследить это через факты, а не на словах.

Задавайте много вопросов, чтобы быстрее во всем разобраться

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

Другие дизайнеры более опытные, но они не боги

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

Делайте больше, чем просят

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

Не ждите, пока кто-то придет к вам с проблемой или интересным предложением — ищите и создавайте свои точки роста самостоятельно.
42👍12🤯1