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
Как сделать правдоподобный макет? 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
Как создать продукт, который нужен

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

Так случилось с социальной сетью Ping от Apple. Задумка была понятной: создать комьюнити вокруг музыкальных исполнителей и направлений. Но сервис несильно отличался от других соцсетей и не привлек аудиторию, поэтому взлета не произошло. Спустя несколько лет проект закрыли.

Как понять, что на самом деле надо пользователям? Как правильно поставить вопрос, чтобы получить важную информацию? И что делать с полученными данными?

Разберемся на бесплатном вебинаре «UX-тестирование: как найти и исправить ошибки». Вы изучите три основных типа тестирования: юзабилити-тест, тест на восприятие навигации и удаленный тест, и сразу закрепите теорию на практике.

Встречу ведет Лиза Ревзина, Senior strategic designer в дубайском офисе BCG. Работала над сервисом по поиску недвижимости «ДомКлик» в «Сбербанке». Создавала сервисы для мобильных приложений, веба и терминалов компании QIWI.

→ Вебинар пройдет 15 июня в 19:00. Регистрация по ссылке.
16👍2
This media is not supported in your browser
VIEW IN TELEGRAM
8
Подборка книг от Леры, методиста годовой программы по UX/UI-дизайну, которые ее поддерживают, вдохновляют и просто нравятся.

«Терапия беспокойства» Дэвид Бернс
Книга с упражнениями из когнитивно-поведенческой терапии, которые помогают при тревоге и депрессии. Я запомнила всего несколько, но они здорово поддерживают меня в последний год.

«Сказать жизни ”Да!”» Виктор Франкл
О том, как «что-то большее» помогает нам справляться с трудностями. Хоть книга и тяжёлая, о жизни в концлагере, впечатление оставляет светлое. Хочется жить.

«Важные годы» Мэг Джей
Ее мне посоветовали одновременно шесть человек, которых я уважаю. Книга о том, что не стоит размениваться на «временное» и откладывать жизнь, когда тебе 20 – 30 лет.

«Мы» Евгений Замятин
Любимая антиутопия. Когда перечитывать, если не сейчас? В антиутопиях я почему-то отдыхаю: там всегда хуже и беспросветней, чем в любом реальном мире.

«1984» Джордж Оруэлл
Нет таких же красивых метафор, как у Замятина, зато гораздо проще проводить параллели с современным миром.

«Правила деловой переписки» Максим Ильяхов и Людмила Сарычева
Если нет сил учиться, но очень хочется читать «полезное». Последний месяц часто вспоминаю фразу из книги: «Не пишите на эмоциях».

→ Поделитесь в комментариях, какие книги помогают вам? Что бы вы посоветовали?
20👍4🔥4👏1
UX-тестирование: как найти и исправить ошибки

Сегодня, в 19:00, пройдёт бесплатный вебинар Лизы Ревзиной. Вы изучите три основных типа тестирования: юзабилити-тест, тест на восприятие навигации и удаленный тест. После короткой лекции разделитесь на команды и проведёте тестирования в группах, чтобы закрепить теорию на практике.

→ Регистрация по ссылке.
20👍1
This media is not supported in your browser
VIEW IN TELEGRAM
Новая подборка видео от Figma: «Создай свой первый плагин»

Даже если вы не собираетесь делать что-то свое, советуем посмотреть хотя бы первые короткие видео. На простых примерах спикерка рассказывает о том, что такое API, и объясняет разницу между HTML и CSS.

Ссылка на весь плейлист.
👍162
Zero-code: плюсы и минусы

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

Начнем с плюсов:

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

✓ Цена. Команда разработчиков (да даже один разработчик) будет стоить дороже, чем годовая оплата самого дорогого тарифа Tilda.

✓ Самостоятельность. Zero-code инструменты позволяют дизайнеру работать без команды. Меньше зависимости от других людей и более высокие чеки за fullstack-проекты.

✓ Гибкость. В такие сайты и приложения легко вносить изменения. Если продукт локальный и команда маленькая, первое время можно обслуживать сайт без отдела разработки.

Теперь к минусам:

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

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

Минусы касаются объемных продуктов и экосистем. Для лендингов, стартапов и локальных проектов zero-code платформы экономят время, деньги и ресурсы.

→ Поделитесь в комментариях, какими zero-code платформами вы пользуетесь (Tilda, Readymag, Webflow, Bubble)? Что вам в них нравится и не нравится?
14