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

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

Номер заявления в РКН: 5317852641
Download Telegram
Кому пригодится дизайн-мышление, что это такое, и как оно поможет изменить свою жизнь?

Поговорили с Алиной Ермаковой, UX Research Lead в SberDevices и преподавателем на курсе «Дизайн-мышление: от исследования к концепции продукта».

Что такое дизайн-мышление?

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

Дизайн-мышление — только для дизайнеров?

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

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

Кому полезно освоить такой подход?

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

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

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

Что значит «пользоваться методологией» дизайн-мышления?

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

Далее — уметь создать это решение быстро, сфокусировавшись на главном в виде прототипа и отправить его в некое тестирование. Это может быть естественная среда, например, запускаем стартап и смотрим отклик рынка. Или это может быть картонный прототип, который протестируем и поймем, стоит ли дальше разрабатывать это решение.

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

Чему ты хочешь научить студентов на своем курсе?

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

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

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

Присоединяйтесь к онлайн-курсу Алины по дизайн-мышлению, старт — 16 мая.
👍71
Обновления 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