Новый сезон /designer

/designer

Мой рабочий загул завершился и я снова с вами. Пора восстанавливать просевший канал. Накопилось много интересного.

Начнём с неожиданного погружения в историю клавиатур. Для тех, кто любит Маки, но параллельно с этим работает на Windows и страдает.

Ctrl и Command: Как стереть разницу в клавишах между Mac и Windows

О простой идее, которая в хорошем смысле взорвала мой мозг. Будет актуальна для тех, кто параллельно использует обе платформы и спотыкается о Ctrl и Command. Например, разворачивает меню Пуск при попытке что-то скопировать.

Спойлер: Я решил проблему тем, что поменял назначение клавиш Ctrl и Win между собой. Это, например, позволяет зажимать команду Ctrl + C большим и указательным пальцами, так же как на Маке. При этом используется физическая клавиша Win.

Вдруг нелюбимый Windows-компьютер становится послушным как любимый Мак: начинает работать моторная память. Десятки клавиш, которые я использую на Маке, оживают на Windows. Офигенное чувство.

medium.com/slashdesigner/command-fix-807ba5de9042

—
#для_профи

К статье про клавиши: Мой файл настроек для Sharp Keys.

/designer на Яндекс Знатоках
/designer на Яндекс Знатоках
Ребята из Яндекса позвали меня на новый сервис вопросов и ответов Яндекс Знатоки. На нём любой человек может задать вопрос и получить ответ.

yandex.ru/znatoki/user/slashdesigner

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

Уже ответил:
- Как стать дизайнером интерфейсов
- Как освоить вёрстку
- Чем отличаются UX и UI
- Как поставить задачу дизайнеру
- Как делать так чтобы клиенты доверяли

Задавай интересующие вопросы!

—
#первые_шаги  #анонсы

Зарегистрироваться  |  Пост

Встреча «Секреты создания клиентоцентричных цифровых продуктов»

13 февраля 2019, в среду, в 19:00
Москва, ул. Коровий вал, д. 5с1. Газпромбанк

Ребята из дружественного департамента организуют GPB Talks — бесплатные лекции о диджитале. Эта встреча будет о персонализации, дизайне на основе данных и создании цифровых продуктов.

Лекторы:

1. Юрий Ветров
Дизайн-директор mail-ru и автор @pdigest расскажет про тренды дизайна цифровых продуктов в корпорациях, дизайн инновационных решений и проектирование дизайн-систем.

2. Дмитрий Сатин
Основатель Usability Lab расскажет про сбор данных через исследования, анализ существующих данных бизнеса и новый инструмент визуализации данных для ускорения исследований.

3. Анастасия Попова
Руководитель направления Дизайна и пользовательского опыта в IBM Interactive Experience. IBM iX – диджитал-консалтинг IBM. Что?

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

Зарегистрироваться →

Не забудь паспорт.

Запись предыдущего митапа можно посмотреть в Ютюбе Газпромбанка.

—
#для_профи  #анонсы

О других околодизайн-мероприятиях в Москве рекомендую канал @mosdesign. Таня Смирнова из Почта Банка собирает интересные анонсы.

Для тех, кто не попал, я вёл телеграм-трансляцию.

Пост  |  Исходник

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 и через меню оверрайдов разрешаем все связи до последней.

—
#первые_шаги  #инструменты  #Скетч

Пример, в котором можно удалить мастер-символ и получить эту ситуацию

В Фигме такой проблемы вообще не может произойти, потому что удалённый мастер можно в любой момент воскресить при помощи функции Restore Master Component.

Пост |  Фреймер-проект

АБ-тесты в Фреймере

В Фреймер-чате спросили интересный вопрос про то, как в рамках одного фреймер-проекта показывать альтернативные ветки сценариев для удалённых АБ-тестов. Имя сценария можно передавать в URL через хэш — текстовую часть вместе с символом #.

Таким образом, ссылка framer.cloud/wdjop/index.html#A будет вести на сценарий А с синими экранами, а framer.cloud/wdjop/index.html#B - на B с зелёными.

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

Конечно, в рамках одного проекта можно сделать разводящий экран с кнопками перехода на нужный сценарий. Но его увидит респондент. Мы не хотим зависеть от него и хотим свести подготовку к минимуму.


Ключевые моменты

1. Доступ к значению хэша можно получить через свойство

window.location.hash

2. Фреймер отображает прототипы в облаке внутри айфрейма. Страница-обёртка показывает блок с описанием прототипа и кнопкой Open In Framer. Это значит, что если присобачить хэш к ссылке, полученной от облака, ничего не получится. Страница с прототипом не получит хэш страницы-обёртки. Основатель Фреймера Кун Бок подсказал, что нужно дописать к ссылке /index.html/index.html, чтобы страница прототипа открывалась без обёртки. И тогда уже добавлять хэш.

3. Чтобы объединить экраны в сценарий, используем FlowComponent. Итого, имеем два флоу-компонента: flowA и flowB. В зависимости от значения хэша, ифом выбираем нужный.

4. Чтобы отобразить нужный сценарий, используем метод placeBefore() и при помощи него вытягиваем флоу наверх, как карту в колоде.

—
#для_профи  #инструменты  #Фреймер

Фреймер-проект

Пост  |  Интервью |  Билеты

ProfsoUX 2019: мой воркшоп в Питере

2 марта в Питере пройдёт большая ежегодная конференция ProfsoUX [профсоюкс], на которой я буду вести воркшоп по скоростному проектированию в Фигме.

Он будет про эффективную коммуникацию и совместную работу проектировщика с другими членами команды.

Рассчитан для тех, кому нужно быстро визуализировать бизнес-требования.

Мы пройдём через те же этапы, которые я выработал в своей ежедневной практике:

1. Получим бизнес-требования и из них выстроим схемы данных
2. Построим логику на базе цели пользователя
3. Визуализируем в виде экранов
4. Прокликаем, чтобы исправить косяки
5. Протестируем на соседе

Когда на ранней стадии работы появляется такой прототип, участникам становится понятно, что делать. Так ещё до стадии визуального дизайна мы экономим время. Сокращается разрыв от идеи до реализации, а значит, оунер способен точнее направлять дальнейшее развитие. Проект в Фигме начнёт играть роль ТЗ.

Ограничу и сфокусирую дизайнеров
- Запретим вырисовывание: забудем про сетки, цвета и шрифты
- Запретим себе использовать компоненты кроме самых простых
- Устроим хаос в слоях, нет времени на ренейм
- Для тех, кто из Скетча: порадуемся, что не надо больше отправлять всем актуальные джипеги

Окрылю недизайнеров
- В общих чертах освоимся в Фигме
- Научимся создавать экраны, накидывать в них готовые компоненты, собирать прототипы
- Поймём, что есть единое пространство, в котором идёт работа по проекту, а дизайн всегда актуален
- Порадуемся, что не надо больше клянчить актуальные джипеги у дизайнеров, чтобы их комментировать в Ворде

Чтобы попасть на воркшоп, нужно купить билет на первый день конференции.

Цена билета: 8 800 ₽, студентам 2 640 ₽.

Для читателей /designer действует промо-код SLASHDESIGNER, который позволяет купить стандартный билет на 1 320 ₽ дешевле. Промо-код надо ввести по ссылке на странице покупки билета. Там ещё всякие скидки, если идёте толпой.

Купить билет →

Если идёшь, вступай в чатик для обсуждения воркшопа.

—

#для_профи  #проектирование  #анонсы

ProfsoUX взяли у меня небольшое интервью перед воркшопом:

https://www.youtube.com/watch?v=Fm_foNy2d-8