Встреча «Секреты создания клиентоцентричных цифровых продуктов»
13 февраля 2019, в среду, в 19:00
Москва, ул. Коровий вал, д. 5с1. Газпромбанк
Ребята из дружественного департамента организуют GPB Talks — бесплатные лекции о диджитале. Эта встреча будет о персонализации, дизайне на основе данных и создании цифровых продуктов.
Лекторы:
1. Юрий Ветров
Дизайн-директор mail-ru и автор @pdigest расскажет про тренды дизайна цифровых продуктов в корпорациях, дизайн инновационных решений и проектирование дизайн-систем.
2. Дмитрий Сатин
Основатель Usability Lab расскажет про сбор данных через исследования, анализ существующих данных бизнеса и новый инструмент визуализации данных для ускорения исследований.
3. Анастасия Попова
Руководитель направления Дизайна и пользовательского опыта в IBM Interactive Experience. IBM iX – диджитал-консалтинг IBM. Что?
Анастасия расскажет, как создаются продукты в большой организации, про KPI и о том как понять, что продукт не нужен рынку.
Зарегистрироваться →
Не забудь паспорт.
Запись предыдущего митапа можно посмотреть в Ютюбе Газпромбанка.
—
#для_профи #анонсы
13 февраля 2019, в среду, в 19:00
Москва, ул. Коровий вал, д. 5с1. Газпромбанк
Ребята из дружественного департамента организуют GPB Talks — бесплатные лекции о диджитале. Эта встреча будет о персонализации, дизайне на основе данных и создании цифровых продуктов.
Лекторы:
1. Юрий Ветров
Дизайн-директор mail-ru и автор @pdigest расскажет про тренды дизайна цифровых продуктов в корпорациях, дизайн инновационных решений и проектирование дизайн-систем.
2. Дмитрий Сатин
Основатель Usability Lab расскажет про сбор данных через исследования, анализ существующих данных бизнеса и новый инструмент визуализации данных для ускорения исследований.
3. Анастасия Попова
Руководитель направления Дизайна и пользовательского опыта в IBM Interactive Experience. IBM iX – диджитал-консалтинг IBM. Что?
Анастасия расскажет, как создаются продукты в большой организации, про KPI и о том как понять, что продукт не нужен рынку.
Зарегистрироваться →
Не забудь паспорт.
Запись предыдущего митапа можно посмотреть в Ютюбе Газпромбанка.
—
#для_профи #анонсы
О других околодизайн-мероприятиях в Москве рекомендую канал @mosdesign. Таня Смирнова из Почта Банка собирает интересные анонсы.
/designer
Зарегистрироваться | Пост
Для тех, кто не попал, я вёл телеграм-трансляцию.
Missing Symbol: как возникает и как бороться
В Скетче может возникнуть неприятная ситуация, когда в сложных символах вдруг слетают оверрайды, а вместо них остаются красные заглушки c надписью Missing Symbol. Этот пост поможет понять, почему так происходит и что по этому поводу делать.
Чтобы было наглядно, смотри исходник, в котором разбирается дальнейший пример.
1. Допустим, есть символ каточки — card. У него есть вложенный символ — иконка star.
2. star может быть в двух состояниях: активна (star-active) и неактивна (star-inactive). В мастер-артборде card используется вариант star-active.
3. В экземпляре card переключаем оверрайд star с -active в -inactive.
4. Удаляем мастер star-inactive. Получаем стандартное сообщение Are you sure you want to delete this Symbol?
Скетч как бы намекает нам, что у данного мастера есть живые дети. Обычно мы пропускаем это сообщение мимо ушей, не боясь отвязать символ и превратить детей в группы. Но Скетч не умеет предупреждать о том, что символ может использоваться в оверрайдах. Нельзя превратить в группу отдельный оверрайд в рамках экземпляра-родителя.
Как бороться
Таким образом, неосторожно удаляя мастер-артборд с живыми экземплярами, мы можем испортить целый скетч-проект, где оверрайд этого символа может встречаться в непредсказуемых местах нашего дизайна. Поэтому, я рекомендую никогда так не делать, а во время удаления убеждаться в том что у мастера больше нет живых детей: такие мастеры удаляются молча. Если Скетч спрашивает, используем Symbol Instance Locator и через меню оверрайдов разрешаем все связи до последней.
—
#первые_шаги #инструменты #Скетч
В Скетче может возникнуть неприятная ситуация, когда в сложных символах вдруг слетают оверрайды, а вместо них остаются красные заглушки c надписью Missing Symbol. Этот пост поможет понять, почему так происходит и что по этому поводу делать.
Чтобы было наглядно, смотри исходник, в котором разбирается дальнейший пример.
1. Допустим, есть символ каточки — card. У него есть вложенный символ — иконка star.
2. star может быть в двух состояниях: активна (star-active) и неактивна (star-inactive). В мастер-артборде card используется вариант star-active.
3. В экземпляре card переключаем оверрайд star с -active в -inactive.
4. Удаляем мастер star-inactive. Получаем стандартное сообщение Are you sure you want to delete this Symbol?
Скетч как бы намекает нам, что у данного мастера есть живые дети. Обычно мы пропускаем это сообщение мимо ушей, не боясь отвязать символ и превратить детей в группы. Но Скетч не умеет предупреждать о том, что символ может использоваться в оверрайдах. Нельзя превратить в группу отдельный оверрайд в рамках экземпляра-родителя.
Как бороться
Таким образом, неосторожно удаляя мастер-артборд с живыми экземплярами, мы можем испортить целый скетч-проект, где оверрайд этого символа может встречаться в непредсказуемых местах нашего дизайна. Поэтому, я рекомендую никогда так не делать, а во время удаления убеждаться в том что у мастера больше нет живых детей: такие мастеры удаляются молча. Если Скетч спрашивает, используем Symbol Instance Locator и через меню оверрайдов разрешаем все связи до последней.
—
#первые_шаги #инструменты #Скетч
missing-symbol-example.sketch
310.3 KB
Пример, в котором можно удалить мастер-символ и получить эту ситуацию
/designer
Missing Symbol: как возникает и как бороться В Скетче может возникнуть неприятная ситуация, когда в сложных символах вдруг слетают оверрайды, а вместо них остаются красные заглушки c надписью Missing Symbol. Этот пост поможет понять, почему так происходит…
В Фигме такой проблемы вообще не может произойти, потому что удалённый мастер можно в любой момент воскресить при помощи функции Restore Master Component.
АБ-тесты в Фреймере
В Фреймер-чате спросили интересный вопрос про то, как в рамках одного фреймер-проекта показывать альтернативные ветки сценариев для удалённых АБ-тестов. Имя сценария можно передавать в URL через хэш — текстовую часть вместе с символом #.
Таким образом, ссылка framer.cloud/wdjop/index.html#A будет вести на сценарий А с синими экранами, а framer.cloud/wdjop/index.html#B - на B с зелёными.
Это позволяет не разделять проект на два и не шерить две независимые ссылки для каждого сценария, а красиво решить проблему, меняя только хэш в ссылке.
Конечно, в рамках одного проекта можно сделать разводящий экран с кнопками перехода на нужный сценарий. Но его увидит респондент. Мы не хотим зависеть от него и хотим свести подготовку к минимуму.
Ключевые моменты
1. Доступ к значению хэша можно получить через свойство
3. Чтобы объединить экраны в сценарий, используем FlowComponent. Итого, имеем два флоу-компонента: flowA и flowB. В зависимости от значения хэша, ифом выбираем нужный.
4. Чтобы отобразить нужный сценарий, используем метод placeBefore() и при помощи него вытягиваем флоу наверх, как карту в колоде.
—
#для_профи #инструменты #Фреймер
В Фреймер-чате спросили интересный вопрос про то, как в рамках одного фреймер-проекта показывать альтернативные ветки сценариев для удалённых АБ-тестов. Имя сценария можно передавать в URL через хэш — текстовую часть вместе с символом #.
Таким образом, ссылка framer.cloud/wdjop/index.html#A будет вести на сценарий А с синими экранами, а framer.cloud/wdjop/index.html#B - на B с зелёными.
Это позволяет не разделять проект на два и не шерить две независимые ссылки для каждого сценария, а красиво решить проблему, меняя только хэш в ссылке.
Конечно, в рамках одного проекта можно сделать разводящий экран с кнопками перехода на нужный сценарий. Но его увидит респондент. Мы не хотим зависеть от него и хотим свести подготовку к минимуму.
Ключевые моменты
1. Доступ к значению хэша можно получить через свойство
window.location.hash2. Фреймер отображает прототипы в облаке внутри айфрейма. Страница-обёртка показывает блок с описанием прототипа и кнопкой Open In Framer. Это значит, что если присобачить хэш к ссылке, полученной от облака, ничего не получится. Страница с прототипом не получит хэш страницы-обёртки. Основатель Фреймера Кун Бок подсказал, что нужно дописать к ссылке /index.html, чтобы страница прототипа открывалась без обёртки. И тогда уже добавлять хэш.
3. Чтобы объединить экраны в сценарий, используем FlowComponent. Итого, имеем два флоу-компонента: flowA и flowB. В зависимости от значения хэша, ифом выбираем нужный.
4. Чтобы отобразить нужный сценарий, используем метод placeBefore() и при помощи него вытягиваем флоу наверх, как карту в колоде.
—
#для_профи #инструменты #Фреймер
Какую цветовую схему в Телеграме ты используешь? Интересно, насколько популярна тёмная тема.
Anonymous Poll
54%
Светлую с чёрным текстом
46%
Тёмную с белым текстом
ProfsoUX 2019: мой воркшоп в Питере
2 марта в Питере пройдёт большая ежегодная конференция ProfsoUX [профсоюкс], на которой я буду вести воркшоп по скоростному проектированию в Фигме.
Он будет про эффективную коммуникацию и совместную работу проектировщика с другими членами команды.
Рассчитан для тех, кому нужно быстро визуализировать бизнес-требования.
Мы пройдём через те же этапы, которые я выработал в своей ежедневной практике:
1. Получим бизнес-требования и из них выстроим схемы данных
2. Построим логику на базе цели пользователя
3. Визуализируем в виде экранов
4. Прокликаем, чтобы исправить косяки
5. Протестируем на соседе
Когда на ранней стадии работы появляется такой прототип, участникам становится понятно, что делать. Так ещё до стадии визуального дизайна мы экономим время. Сокращается разрыв от идеи до реализации, а значит, оунер способен точнее направлять дальнейшее развитие. Проект в Фигме начнёт играть роль ТЗ.
Ограничу и сфокусирую дизайнеров
- Запретим вырисовывание: забудем про сетки, цвета и шрифты
- Запретим себе использовать компоненты кроме самых простых
- Устроим хаос в слоях, нет времени на ренейм
- Для тех, кто из Скетча: порадуемся, что не надо больше отправлять всем актуальные джипеги
Окрылю недизайнеров
- В общих чертах освоимся в Фигме
- Научимся создавать экраны, накидывать в них готовые компоненты, собирать прототипы
- Поймём, что есть единое пространство, в котором идёт работа по проекту, а дизайн всегда актуален
- Порадуемся, что не надо больше клянчить актуальные джипеги у дизайнеров, чтобы их комментировать в Ворде
Чтобы попасть на воркшоп, нужно купить билет на первый день конференции.
Цена билета: 8 800 ₽, студентам 2 640 ₽.
Для читателей /designer действует промо-код SLASHDESIGNER, который позволяет купить стандартный билет на 1 320 ₽ дешевле. Промо-код надо ввести по ссылке на странице покупки билета. Там ещё всякие скидки, если идёте толпой.
Купить билет →
Если идёшь, вступай в чатик для обсуждения воркшопа.
#для_профи #UX #анонсы
2 марта в Питере пройдёт большая ежегодная конференция ProfsoUX [профсоюкс], на которой я буду вести воркшоп по скоростному проектированию в Фигме.
Он будет про эффективную коммуникацию и совместную работу проектировщика с другими членами команды.
Рассчитан для тех, кому нужно быстро визуализировать бизнес-требования.
Мы пройдём через те же этапы, которые я выработал в своей ежедневной практике:
1. Получим бизнес-требования и из них выстроим схемы данных
2. Построим логику на базе цели пользователя
3. Визуализируем в виде экранов
4. Прокликаем, чтобы исправить косяки
5. Протестируем на соседе
Когда на ранней стадии работы появляется такой прототип, участникам становится понятно, что делать. Так ещё до стадии визуального дизайна мы экономим время. Сокращается разрыв от идеи до реализации, а значит, оунер способен точнее направлять дальнейшее развитие. Проект в Фигме начнёт играть роль ТЗ.
Ограничу и сфокусирую дизайнеров
- Запретим вырисовывание: забудем про сетки, цвета и шрифты
- Запретим себе использовать компоненты кроме самых простых
- Устроим хаос в слоях, нет времени на ренейм
- Для тех, кто из Скетча: порадуемся, что не надо больше отправлять всем актуальные джипеги
Окрылю недизайнеров
- В общих чертах освоимся в Фигме
- Научимся создавать экраны, накидывать в них готовые компоненты, собирать прототипы
- Поймём, что есть единое пространство, в котором идёт работа по проекту, а дизайн всегда актуален
- Порадуемся, что не надо больше клянчить актуальные джипеги у дизайнеров, чтобы их комментировать в Ворде
Чтобы попасть на воркшоп, нужно купить билет на первый день конференции.
Цена билета: 8 800 ₽, студентам 2 640 ₽.
Для читателей /designer действует промо-код SLASHDESIGNER, который позволяет купить стандартный билет на 1 320 ₽ дешевле. Промо-код надо ввести по ссылке на странице покупки билета. Там ещё всякие скидки, если идёте толпой.
Купить билет →
Если идёшь, вступай в чатик для обсуждения воркшопа.
#для_профи #UX #анонсы
ProfsoUX взяли у меня небольшое интервью перед воркшопом:
https://www.youtube.com/watch?v=Fm_foNy2d-8
https://www.youtube.com/watch?v=Fm_foNy2d-8
YouTube
Александр Окунев о мастер-классе по скоростному проектированию пользовательских сценариев в Figma.
Саша создает сложные интерфейсы и ведет Телеграм-канал об интерактивном дизайне.
2 марта на ProfsoUX 19 он расскажет как превратить бизнес требования в рабочие прототипы с помощью Figma на своём мастер-классе.
2 марта на ProfsoUX 19 он расскажет как превратить бизнес требования в рабочие прототипы с помощью Figma на своём мастер-классе.
Урок «3 этапа создания анимационного сюжета»
В работе интерфейсного дизайнера иногда возникает потребность рисовать и анимировать забавных персонажей — маскотов. Они оживляют скучный образ какой-нибудь корпорации и от её имени в дружественной форме рассказывают о продуктах и услугах. Например, когда Почта Банк запускал приложение для детей, использовали летающего робота. Сделать запоминающегося целостного персонажа — непростая задача и к ней надо готовиться сильно раньше, чем она появится на горизонте: систематически рисовать персонажей, если это увлекает.
Сегодня хочу поделиться большим уроком талантливого дизайнера Артёма Станицкого из Embria, который даст импульс в 2D-иллюстрации и её последующей анимации.
В посте рассказывает об идее.
В видео в ускоренном скринкасте показывает два последних этапа: рисует иллюстрацию с мопсом, домом и горами в Фотошопе, затем делает анимацию мопса и веток в Afrer Effects.
Урок нашёл в Учебнике дизайнера.
—
#для_профи #иллюстрация #Фотошоп #AE #анимация
В работе интерфейсного дизайнера иногда возникает потребность рисовать и анимировать забавных персонажей — маскотов. Они оживляют скучный образ какой-нибудь корпорации и от её имени в дружественной форме рассказывают о продуктах и услугах. Например, когда Почта Банк запускал приложение для детей, использовали летающего робота. Сделать запоминающегося целостного персонажа — непростая задача и к ней надо готовиться сильно раньше, чем она появится на горизонте: систематически рисовать персонажей, если это увлекает.
Сегодня хочу поделиться большим уроком талантливого дизайнера Артёма Станицкого из Embria, который даст импульс в 2D-иллюстрации и её последующей анимации.
В посте рассказывает об идее.
В видео в ускоренном скринкасте показывает два последних этапа: рисует иллюстрацию с мопсом, домом и горами в Фотошопе, затем делает анимацию мопса и веток в Afrer Effects.
Урок нашёл в Учебнике дизайнера.
—
#для_профи #иллюстрация #Фотошоп #AE #анимация
Какие причины переходить на Фигму? В серии постов, объединённых хэш-тегом #причина я раскрою основные доводы: свои и других моих собеседников.
#причина №1: Для больших компаний Зеплин неадекватно дорогой
Любопытное услышал от Ветрова. Команда Меил ру готовится переходить на Фигму. Одна из основных причин этого решения — Зеплин использовать слишком дорого. Это было неожиданно, но затем я понял, что всё логично. С такими же проблемами сталкивался и сам в банке.
В посте привёл конкретные цифры и рассказал о проблемах управления доступом на Зеплин в крупных компаниях.
medium.com/slashdesigner/zeplin-941e177acf8a
#для_профи #Zeplin #Figma
#причина №1: Для больших компаний Зеплин неадекватно дорогой
Любопытное услышал от Ветрова. Команда Меил ру готовится переходить на Фигму. Одна из основных причин этого решения — Зеплин использовать слишком дорого. Это было неожиданно, но затем я понял, что всё логично. С такими же проблемами сталкивался и сам в банке.
В посте привёл конкретные цифры и рассказал о проблемах управления доступом на Зеплин в крупных компаниях.
medium.com/slashdesigner/zeplin-941e177acf8a
#для_профи #Zeplin #Figma
Medium
Зеплин — причина переходить на Фигму
Слишком дорог для больших команд, поскольку берёт деньги не только за редакторов, но и за зрителей.
Интересная заметка про то как в Фигме вырезать экраны с комментариями. Нельзя делать это через Cmd + X, иначе все комментарии потеряются в блоке Unattached Comments и их нельзя будет привязать к фреймам снова.
#первые_шаги #Figma
#первые_шаги #Figma