Стратегия для продуктового портфолио
4 вопроса, которые помогут собрать релевантные кейсы.
❶ Кто аудитория вашего портфолио?
Портфолио для стартапа и портфолио для крупной корпорации будут отличаться. В первом случае нужно показать свою мультифункциональность и самостоятельность. Например, как вы сами анимировали элементы сайта или написали хорошие тексты.
Для корпорации важнее ваша компетенция в конкретной нише и хорошие навыки коммуникации. Здесь лучше выбрать интересную вам сферу — например, по продаже недвижимости — и через кейсы показывать знание этой области. Это может быть конструктор квартир, календарь сдачи объектов или лендинг об оформлении ипотеки.
Мы обучаем продуктовых дизайнеров как для крупных корпораций, так и для стартапов. Так как практика показывает, что нужно с самого начала правильно выстраивать процессы подготовки.
❷ Какую проблему решает ваше портфолио для этой аудитории?
В случае стартапа вы можете помочь сэкономить на специалистах — моушн-дизайнере, копирайтере и иллюстраторе. Для этого нужно показать в кейсах эти навыки.
Для фриланса это может быть скорость и команда, если вы работаете в паре с разработчиком. Тогда заказчик получит комплексную услугу от дизайна до верстки без необходимости поиска других специалистов — экономия времени и денег. Поэтому хорошо показать, сколько дней занял каждый этап работы, а в конце презентовать готовый сайт со ссылкой.
❸ В какой точке касания разместить портфолио?
Необязательно упаковывать все свои кейсы только на Behance — платформа хорошо подходит для курсовых проектов, но у нее есть недостаток — плохая адаптация под мобильные устройства. HR из крупной компании, скорее всего, посмотрит ваше портфолио через браузер, а вот заказчик — не всегда.
Иногда лучше продублировать портфолио на Tilda, Readymag или вести LinkedIn для развития собственного бренда. Кейсы тестовых заданий или редизайны уже сущетсвующих сайтов можно размещать на Dribbble.
❹ Какие метрики успеха у вашего портфолио?
Важно понять, чего вы ждете от своего портфолио — ленточек на Behance для повышения узнаваемости или трудоустройства. Поставьте реальные сроки для своей цели — например, найти работу в дизайн-студию в своем городе в течение 6 месяцев.
Если не получается достигнуть цели, попросите обратную связь. Не бойтесь узнать причины отказа у HR или обратиться к опытному продуктовому дизайнеру для ревью ваших кейсов. Возможно, что причина вообще не в портфолио, а в резюме, сопроводительных письмах, или вы просто пока не нашли ту самую компанию.
Еще одна метрика, которая поможет оценить уже рабочие кейсы — Monthly Active Users (MAU). Это количество активных пользователей, которых вы осчастливили своим дизайном: чем больше людей соприкоснулись с вашим решением, тем «тяжелее» портфолио. Поэтому начинающим дизайнерам советуем идти сначала в крупную компанию, пусть и с небольшой зарплатой, чтобы портфолио быстрее набрало вес.
→ Если вы хотите пополнить свой продуктовый портфель релевантным кейсом и защитить его перед реальным заказчиком, приглашаем на курс Ярослава, который начнется 16 мая. До 30 апреля действует скидка 25% на все курсы и интенсивы школы.
4 вопроса, которые помогут собрать релевантные кейсы.
❶ Кто аудитория вашего портфолио?
Портфолио для стартапа и портфолио для крупной корпорации будут отличаться. В первом случае нужно показать свою мультифункциональность и самостоятельность. Например, как вы сами анимировали элементы сайта или написали хорошие тексты.
Для корпорации важнее ваша компетенция в конкретной нише и хорошие навыки коммуникации. Здесь лучше выбрать интересную вам сферу — например, по продаже недвижимости — и через кейсы показывать знание этой области. Это может быть конструктор квартир, календарь сдачи объектов или лендинг об оформлении ипотеки.
Мы обучаем продуктовых дизайнеров как для крупных корпораций, так и для стартапов. Так как практика показывает, что нужно с самого начала правильно выстраивать процессы подготовки.
❷ Какую проблему решает ваше портфолио для этой аудитории?
В случае стартапа вы можете помочь сэкономить на специалистах — моушн-дизайнере, копирайтере и иллюстраторе. Для этого нужно показать в кейсах эти навыки.
Для фриланса это может быть скорость и команда, если вы работаете в паре с разработчиком. Тогда заказчик получит комплексную услугу от дизайна до верстки без необходимости поиска других специалистов — экономия времени и денег. Поэтому хорошо показать, сколько дней занял каждый этап работы, а в конце презентовать готовый сайт со ссылкой.
❸ В какой точке касания разместить портфолио?
Необязательно упаковывать все свои кейсы только на Behance — платформа хорошо подходит для курсовых проектов, но у нее есть недостаток — плохая адаптация под мобильные устройства. HR из крупной компании, скорее всего, посмотрит ваше портфолио через браузер, а вот заказчик — не всегда.
Иногда лучше продублировать портфолио на Tilda, Readymag или вести LinkedIn для развития собственного бренда. Кейсы тестовых заданий или редизайны уже сущетсвующих сайтов можно размещать на Dribbble.
❹ Какие метрики успеха у вашего портфолио?
Важно понять, чего вы ждете от своего портфолио — ленточек на Behance для повышения узнаваемости или трудоустройства. Поставьте реальные сроки для своей цели — например, найти работу в дизайн-студию в своем городе в течение 6 месяцев.
Если не получается достигнуть цели, попросите обратную связь. Не бойтесь узнать причины отказа у HR или обратиться к опытному продуктовому дизайнеру для ревью ваших кейсов. Возможно, что причина вообще не в портфолио, а в резюме, сопроводительных письмах, или вы просто пока не нашли ту самую компанию.
Еще одна метрика, которая поможет оценить уже рабочие кейсы — Monthly Active Users (MAU). Это количество активных пользователей, которых вы осчастливили своим дизайном: чем больше людей соприкоснулись с вашим решением, тем «тяжелее» портфолио. Поэтому начинающим дизайнерам советуем идти сначала в крупную компанию, пусть и с небольшой зарплатой, чтобы портфолио быстрее набрало вес.
→ Если вы хотите пополнить свой продуктовый портфель релевантным кейсом и защитить его перед реальным заказчиком, приглашаем на курс Ярослава, который начнется 16 мая. До 30 апреля действует скидка 25% на все курсы и интенсивы школы.
👍17❤3
✦ Собрали подборку шорткатов Figma в одну кнопку — они быстро запоминаются, и с них легко начать знакомство с горячими клавишами.
🔥7👍2
Чем заняться на выходных? Подборка бесплатных материалов от ВВЕ
❶ «Работа и дружба» — беседа с Алиной Ермаковой, UX Research Lead Sber Devices
О клиентоцентричном дизайне, закалке в «Студии Лебедева» и личности в цифровом мире. Если вы хотите улучшить свои навыки UX-исследования, приглашаем на курс Алины «Дизайн-мышление: от исследования к концепции продукта», который начнется 16 мая.
❷ Эфир ВВЕ с Эйч о поиске работы за рубежом
Полезные ссылки и платформы, о которых рассказали на встрече, собрали в отдельный файл в Notion.
❸ «Живой разбор» с Сергеем Королем, руководителем редакции в «Яндексе»
На вебинаре разобрали наполнение сайтов, портфолио дизайнера, макеты в Figma и статьи. Тех, кто хочет научиться легко писать хорошие тексты, приглашаем на курс Сергея «Текст: от статей до интерфейса», который начнется 11 мая.
❹ Бесплатные курсы в «Дизайн-библиотеке»
Добавили уроки с годовых программ по иллюстрации и графическому дизайну.
→ До 30 апреля действует скидка 25% на все курсы и интенсивы школы и 20% на все годовые программы.
❶ «Работа и дружба» — беседа с Алиной Ермаковой, UX Research Lead Sber Devices
О клиентоцентричном дизайне, закалке в «Студии Лебедева» и личности в цифровом мире. Если вы хотите улучшить свои навыки UX-исследования, приглашаем на курс Алины «Дизайн-мышление: от исследования к концепции продукта», который начнется 16 мая.
❷ Эфир ВВЕ с Эйч о поиске работы за рубежом
Полезные ссылки и платформы, о которых рассказали на встрече, собрали в отдельный файл в Notion.
❸ «Живой разбор» с Сергеем Королем, руководителем редакции в «Яндексе»
На вебинаре разобрали наполнение сайтов, портфолио дизайнера, макеты в Figma и статьи. Тех, кто хочет научиться легко писать хорошие тексты, приглашаем на курс Сергея «Текст: от статей до интерфейса», который начнется 11 мая.
❹ Бесплатные курсы в «Дизайн-библиотеке»
Добавили уроки с годовых программ по иллюстрации и графическому дизайну.
→ До 30 апреля действует скидка 25% на все курсы и интенсивы школы и 20% на все годовые программы.
❤13👍4
Расписание курсов по UX/UI-дизайну в мае
11 мая
«Текст: от статей до интерфейса» — научимся писать статьи, инструкции, рассылки и тексты для интерфейса. Будет полезно как практикующим копирайтерам, так и дизайнерам, которые хотят научиться самостоятельно наполнять сайт текстом.
Сергей Король
16 мая
«Дизайн-мышление: от исследования к концепции продукта» — поймем, как находить интересные инсайты, общаясь с пользователями, как на их базе проектировать решение и презентовать его своей команде.
Алина Ермакова
16 мая
«UX/UI: от стратегии к прототипу» — научимся выстраивать стратегию продукта, определять его сегмент и формулировать решения. В течение курса сделаем командный проект — интерактивный прототип и посадочную страницу.
Ярослав Шуваев
11 мая
«Текст: от статей до интерфейса» — научимся писать статьи, инструкции, рассылки и тексты для интерфейса. Будет полезно как практикующим копирайтерам, так и дизайнерам, которые хотят научиться самостоятельно наполнять сайт текстом.
Сергей Король
16 мая
«Дизайн-мышление: от исследования к концепции продукта» — поймем, как находить интересные инсайты, общаясь с пользователями, как на их базе проектировать решение и презентовать его своей команде.
Алина Ермакова
16 мая
«UX/UI: от стратегии к прототипу» — научимся выстраивать стратегию продукта, определять его сегмент и формулировать решения. В течение курса сделаем командный проект — интерактивный прототип и посадочную страницу.
Ярослав Шуваев
👍4
This media is not supported in your browser
VIEW IN TELEGRAM
Проблема: вы вставляете скрин целого лендинга или сайта, но в Figma качество становится сильно хуже.
Решение: установить плагин Insert Big Image. Откройте файл, куда нужно вставить скрин, нажмите правую кнопку мыши, затем Plugins и выберите Insert Big Image. Появится окно, где нужно нажать Choose Image Files и выбрать картинку.
Подсказка: чтобы делать скрин всей страницы, воспользуйтесь плагинами Scrnli или GoFullPage для Chrome.
Решение: установить плагин Insert Big Image. Откройте файл, куда нужно вставить скрин, нажмите правую кнопку мыши, затем Plugins и выберите Insert Big Image. Появится окно, где нужно нажать Choose Image Files и выбрать картинку.
Подсказка: чтобы делать скрин всей страницы, воспользуйтесь плагинами Scrnli или GoFullPage для Chrome.
❤28
Бесплатный вебинар «Бизнес-процессы и кризисное управление» от преподавателя ВВЕ и бизнес-консультанта Евгении Дацко
Будет полезен руководителям и тем, кто хочет стать тимлидом и управлять командой. Разберемся, почему во времена экономической нестабильности важно смещать фокус на внутренние процессы и выстраивать систему. Узнаем, с чего начать и какие инструменты управления и организации использовать.
→ Регистрация
12 мая в 19:00
Евгения основала Artery.Agency, до этого руководила дизайн-департаментом в «РБК», где объединяла разрозненные дизайн-отделы в одну команду, повышая качество их работы. Оптимизировала процессы в «Учи.ру», 12storeez, Сo-Operation, Sulliwan Studio, Poisson Spot.
Будет полезен руководителям и тем, кто хочет стать тимлидом и управлять командой. Разберемся, почему во времена экономической нестабильности важно смещать фокус на внутренние процессы и выстраивать систему. Узнаем, с чего начать и какие инструменты управления и организации использовать.
→ Регистрация
12 мая в 19:00
Евгения основала Artery.Agency, до этого руководила дизайн-департаментом в «РБК», где объединяла разрозненные дизайн-отделы в одну команду, повышая качество их работы. Оптимизировала процессы в «Учи.ру», 12storeez, Сo-Operation, Sulliwan Studio, Poisson Spot.
❤10
READ ME! — интерактивная статья от Readymag о верстке лонгридов в вебе
Платформа Медиум провела исследование и выяснила, что только 2 из 5 читателей доходят до конца текста. Авторы статьи, Цветелина Митева и Виталий Волк, предположили, что это связано не только с клиповым мышлением.
Проблема может заключаться в том, что контент на сайте просто сложно прочесть из-за плохой верстки. Статья рассказывает о базовых ошибках и как их исправить. В конце — 9 подсказок по улучшению читабельности длинных текстов.
Платформа Медиум провела исследование и выяснила, что только 2 из 5 читателей доходят до конца текста. Авторы статьи, Цветелина Митева и Виталий Волк, предположили, что это связано не только с клиповым мышлением.
Проблема может заключаться в том, что контент на сайте просто сложно прочесть из-за плохой верстки. Статья рассказывает о базовых ошибках и как их исправить. В конце — 9 подсказок по улучшению читабельности длинных текстов.
❤16👍1
Бесплатный интенсив от Коли Иванова, эксперта по продуктам в Райффайзен Банке и преподавателя на годовой программе «UX/UI: дизайн цифровых продуктов»
Это первое мероприятие в рамках проекта «Воробушки» — двухдневный онлайн-интенсив, где начинающие дизайнеры узнают о базовых правилах и сделают свои первые работы.
Каждый день разбит на три блока: сначала рассказ о теории на основе гайда по UI-дизайну, затем разбор примеров для закрепления, и последнее — дизайн сайта для веб в режиме реального времени, где участники повторяют макет за Колей. Во второй день разберем правила дизайна для мобильных устройств и нарисуем два экрана приложения.
Интенсив рассчитан на начинающих дизайнеров, которые уже умеют работать в Figma, но еще не углубились в изучение дизайн-базы.
Эфир пройдет 18 и 19 мая в 19:00 в Zoom. Ссылку пришлем в чат в день старта.
Это первое мероприятие в рамках проекта «Воробушки» — двухдневный онлайн-интенсив, где начинающие дизайнеры узнают о базовых правилах и сделают свои первые работы.
Каждый день разбит на три блока: сначала рассказ о теории на основе гайда по UI-дизайну, затем разбор примеров для закрепления, и последнее — дизайн сайта для веб в режиме реального времени, где участники повторяют макет за Колей. Во второй день разберем правила дизайна для мобильных устройств и нарисуем два экрана приложения.
Интенсив рассчитан на начинающих дизайнеров, которые уже умеют работать в Figma, но еще не углубились в изучение дизайн-базы.
Эфир пройдет 18 и 19 мая в 19:00 в Zoom. Ссылку пришлем в чат в день старта.
👍43❤8🔥2
Кому пригодится дизайн-мышление, что это такое, и как оно поможет изменить свою жизнь?
Поговорили с Алиной Ермаковой, UX Research Lead в SberDevices и преподавателем на курсе «Дизайн-мышление: от исследования к концепции продукта».
❶ Что такое дизайн-мышление?
Это навык, методология, с помощью которой можно создавать продукты в условиях неопредленности и недостатка информации на входе. Когда нет конкретного плана действий, но есть желание решить какую-то проблему, закрыть потребность как пользователей, так и свою личную.
❷ Дизайн-мышление — только для дизайнеров?
Эта приставка в названии действительно отсылает нас к дизайнерскому подходу. Ведь дизайнеры — это те люди, которые умеют работать с входящей задачей, определять главное, думать про пользователя — а значит, про человека, на самом-то деле. Результат их работы — это диджитал-продукт, набор классных инструментов для решения задачи и потребностей.
Поэтому методология и получила такую приставку. На самом деле, это лишь обозначает подход и видение, которые мы используем.
❸ Кому полезно освоить такой подход?
Пользоваться методологией и применять ее как в работе, так и в жизни могут продакты, руководители проектов, разработчики, аналитики, стратеги, предприниматели и владельцы бизнеса. В любой смежной с диджитал области найдутся люди, которым небезразлична судьба своей компании и своего продукта, и они хотят понять, как его изменить и вывести на новый качественный уровень.
Методология может быть применима и в жизни. Например, в решении каких-то личных вопросов о том, что делать в жизни, как обустроить квартиру, как построить отношения, куда развиваться в карьере, как качественно улучшить свою жизнь.
Ведь мы изучаем, что есть сейчас, анализируем, генерим, запускаем, смотрим, что получилось, — и идем дальше, делая какие-то выводы и превращая свои цели в реальные задачи и продукты.
❹ Что значит «пользоваться методологией» дизайн-мышления?
Уметь структурировать информацию, вычленять главное, правильно анализировать полученные данные, вводить фокусировку, уметь генерить идеи, как мы можем решать поставленную задачу. Видеть своего пользователя, понимать, что ему надо, и через это придумывать какой-то новый интересный продукт, сервис, конкретный функционал или целое новое направление в бизнесе.
Далее — уметь создать это решение быстро, сфокусировавшись на главном в виде прототипа и отправить его в некое тестирование. Это может быть естественная среда, например, запускаем стартап и смотрим отклик рынка. Или это может быть картонный прототип, который протестируем и поймем, стоит ли дальше разрабатывать это решение.
Самое главное, что есть в дизайн-мышлении — это итерационность. Есть возможность возвращаться на каждый шаг назад, продумывать что-то, доделывать или дорабатывать и идти дальше.
❺ Чему ты хочешь научить студентов на своем курсе?
Я хочу дать методологию, которая будет заключаться в понимании того, как можно подходить к разного уровня задачам. Какие инструменты использовать, чтобы из расплывчатой идеи на входе в итоге получилось рабочее решение, в которое вы верите и которое основано на понятном пути, которое вы прошли вместе с продуктом и пользователем.
Далее вы сможете сами чередовать те методики и подходы, которые заложены в дизайн-мышлении. Это не жесткий регламент — это принцип того, как вы смотрите на любую свою задачу и проблему, как вы подходите к их решению: насколько вы открыты к экспериментам, к придумыванию новых нестандартных идей, выходу за рамки, что тоже полезно для мозга.
Чем больше у мозга есть определенность и понятный план, тем он спокойнее и защищеннее себя чувствует. А значит, вырабатывает больше энергии, которая в итоге приводит к новым идеям и новым свершениям. Творческая составляющая в дизайн-мышлении как раз помогает создавать полезные, удобные креативные продукты, от которых будете кайфовать как вы, так и ваши пользователи. Или в случае применения этой практики к своей жизни, будете наслаждаться решением как вы, так и ваше окружение.
→ Присоединяйтесь к онлайн-курсу Алины по дизайн-мышлению, старт — 16 мая.
Поговорили с Алиной Ермаковой, UX Research Lead в SberDevices и преподавателем на курсе «Дизайн-мышление: от исследования к концепции продукта».
❶ Что такое дизайн-мышление?
Это навык, методология, с помощью которой можно создавать продукты в условиях неопредленности и недостатка информации на входе. Когда нет конкретного плана действий, но есть желание решить какую-то проблему, закрыть потребность как пользователей, так и свою личную.
❷ Дизайн-мышление — только для дизайнеров?
Эта приставка в названии действительно отсылает нас к дизайнерскому подходу. Ведь дизайнеры — это те люди, которые умеют работать с входящей задачей, определять главное, думать про пользователя — а значит, про человека, на самом-то деле. Результат их работы — это диджитал-продукт, набор классных инструментов для решения задачи и потребностей.
Поэтому методология и получила такую приставку. На самом деле, это лишь обозначает подход и видение, которые мы используем.
❸ Кому полезно освоить такой подход?
Пользоваться методологией и применять ее как в работе, так и в жизни могут продакты, руководители проектов, разработчики, аналитики, стратеги, предприниматели и владельцы бизнеса. В любой смежной с диджитал области найдутся люди, которым небезразлична судьба своей компании и своего продукта, и они хотят понять, как его изменить и вывести на новый качественный уровень.
Методология может быть применима и в жизни. Например, в решении каких-то личных вопросов о том, что делать в жизни, как обустроить квартиру, как построить отношения, куда развиваться в карьере, как качественно улучшить свою жизнь.
Ведь мы изучаем, что есть сейчас, анализируем, генерим, запускаем, смотрим, что получилось, — и идем дальше, делая какие-то выводы и превращая свои цели в реальные задачи и продукты.
❹ Что значит «пользоваться методологией» дизайн-мышления?
Уметь структурировать информацию, вычленять главное, правильно анализировать полученные данные, вводить фокусировку, уметь генерить идеи, как мы можем решать поставленную задачу. Видеть своего пользователя, понимать, что ему надо, и через это придумывать какой-то новый интересный продукт, сервис, конкретный функционал или целое новое направление в бизнесе.
Далее — уметь создать это решение быстро, сфокусировавшись на главном в виде прототипа и отправить его в некое тестирование. Это может быть естественная среда, например, запускаем стартап и смотрим отклик рынка. Или это может быть картонный прототип, который протестируем и поймем, стоит ли дальше разрабатывать это решение.
Самое главное, что есть в дизайн-мышлении — это итерационность. Есть возможность возвращаться на каждый шаг назад, продумывать что-то, доделывать или дорабатывать и идти дальше.
❺ Чему ты хочешь научить студентов на своем курсе?
Я хочу дать методологию, которая будет заключаться в понимании того, как можно подходить к разного уровня задачам. Какие инструменты использовать, чтобы из расплывчатой идеи на входе в итоге получилось рабочее решение, в которое вы верите и которое основано на понятном пути, которое вы прошли вместе с продуктом и пользователем.
Далее вы сможете сами чередовать те методики и подходы, которые заложены в дизайн-мышлении. Это не жесткий регламент — это принцип того, как вы смотрите на любую свою задачу и проблему, как вы подходите к их решению: насколько вы открыты к экспериментам, к придумыванию новых нестандартных идей, выходу за рамки, что тоже полезно для мозга.
Чем больше у мозга есть определенность и понятный план, тем он спокойнее и защищеннее себя чувствует. А значит, вырабатывает больше энергии, которая в итоге приводит к новым идеям и новым свершениям. Творческая составляющая в дизайн-мышлении как раз помогает создавать полезные, удобные креативные продукты, от которых будете кайфовать как вы, так и ваши пользователи. Или в случае применения этой практики к своей жизни, будете наслаждаться решением как вы, так и ваше окружение.
→ Присоединяйтесь к онлайн-курсу Алины по дизайн-мышлению, старт — 16 мая.
👍7❤1
Обновления 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 или перетащить в отдельное окно.
→ Какие обновления стали для вас полезными, а какие кажутся лишними и ненужными? Поделитесь в комментариях.
Вкратце расскажем, что нового в редакторе. Видео с выступлением СЕО 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 или перетащить в отдельное окно.
→ Какие обновления стали для вас полезными, а какие кажутся лишними и ненужными? Поделитесь в комментариях.
👍25❤4🔥2
This media is not supported in your browser
VIEW IN TELEGRAM
Добавили на Behance новые кейсы студентов курса «UI-анимация»
→ Если вы тоже хотите освоить Principle, Origami и продвинутую анимацию в Figma, присоединяйтесь к курсу «UI-анимация» со скидкой 25%. Старт — 1 июня.
→ Если вы тоже хотите освоить Principle, Origami и продвинутую анимацию в Figma, присоединяйтесь к курсу «UI-анимация» со скидкой 25%. Старт — 1 июня.
❤19
Что происходит на картинке?
Попробуйте сначала угадать в комментариях, а потом посмотрите ответ ☻
Это сессия рефлексии с кураторами годовой программы «UX/UI: дизайн цифровых продуктов». Студенты подводят итоги модуля, рассказывают, чему научились, и заряжаются на последний рывок в третьем модуле.
На картинке каждый заполняет свой блок в Miro с вопросами о своих выводах и плане действий для развития в дизайне.
Попробуйте сначала угадать в комментариях, а потом посмотрите ответ ☻
На картинке каждый заполняет свой блок в Miro с вопросами о своих выводах и плане действий для развития в дизайне.
❤14👍3🔥1😁1🤮1
Forwarded from Bang Bang Education
A/B-тестирование (англ. A/B testing)
— метод исследования, который помогает выбрать из двух вариантов самый удачный. Вы делите аудиторию на части и показываете каждой один из вариантов интерфейса. После анализируете, где показатели лучше, а где — хуже. Так можно протестировать тексты, кнопки, изображения — все, что связано с коммуникацией с пользователем.
Попробуем разобраться на простом примере: на сайте нет регистраций. Если предположить, что анкета нового пользователя слишком длинная, вы можете простетировать регистрацию по номеру телефона, без дополнительных данных. Если количество регистраций в этой части аудитории увеличится, то короткую анкету можно реализовать на всех пользователей.
В реальности факторов может быть больше, а анализ аудитории — сложнее, поэтому исследования могут занимать недели и даже месяцы. Вот примеры A/B-тестов платформы ux-исследований VWO.
Больше о продуктовом дизайне — в тематическом канале школы.
— метод исследования, который помогает выбрать из двух вариантов самый удачный. Вы делите аудиторию на части и показываете каждой один из вариантов интерфейса. После анализируете, где показатели лучше, а где — хуже. Так можно протестировать тексты, кнопки, изображения — все, что связано с коммуникацией с пользователем.
Попробуем разобраться на простом примере: на сайте нет регистраций. Если предположить, что анкета нового пользователя слишком длинная, вы можете простетировать регистрацию по номеру телефона, без дополнительных данных. Если количество регистраций в этой части аудитории увеличится, то короткую анкету можно реализовать на всех пользователей.
В реальности факторов может быть больше, а анализ аудитории — сложнее, поэтому исследования могут занимать недели и даже месяцы. Вот примеры 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 июня.
❶ Плавный переход
В интерфейсах переход между разными экранами происходит не сразу, а занимает где-то полсекунды. Попробуйте разблокировать телефон, и вы увидите, что темный экран как бы растворяется. Поэтому при настройке перехода между фреймами вместо 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.
Чтобы поддерживать приложения и целые экосистемы дизайнеры создают правила, по которым будут работать все элементы интерфейса: расстояния, кнопки, градиенты, шрифты и даже тени. Так продукт выглядит цельным, а команды, отвечающие за разные части этого продукта, не тратят время на пересоздание дизайна.
Эти правила и есть дизайн-система. Одно дело — создать ее, другое — поддерживать и мыслить ее категориями. О системном мышлении дизайнера, ограничениях и возможностях дизайн-системы поговорим на бесплатном вебинаре с Евгением Семеновым и Колей Соболевым. Сейчас они работают в Российском экспортном центре, а до этого принимали участие в развитии дизайн-системы «СберБанк Онлайн» и даже получили награду.
→ Регистрируйтесь и приходите на вебинар 2 июня в 19:00.
🔥10👍3❤2