/designer
15.8K subscribers
405 photos
26 videos
24 files
431 links
Канал про продуктовый дизайн, инструменты и практику. Рекламы нет.

Рубрики: #первые_шаги #для_профи #Figma #майндсет #UX_задача #UI_ревью #дизайн_системы #помоги_беженцам #эмиграция

Форматы: #снек #статья #видео #анонс #видео #подкаст

Автор: @okunev
Download Telegram
Серёжа и большая красная кнопка

Арт-директор из Питера Даша Почекуева написала очень годный пост в Дизайн-кабак про осозанность дизайнера.

В нём на метком жизненном примере с кнопкой Даша разбирает, как относятся к одной и той же задаче дизайнеры разных уровней.

Начинающий ставит кнопку и концентрирует внимание на том, какая она: злится, что заказчик его пушит и пытается кнопку увеличить. Дизайнер более высокого уровня вникает в суть проблемы и понимает, что какой бы ни была кнопка, люди проигнорируют неё, пока не увидят пользы. Опытный дизайнер предлагает не делать кнопку красивее и больше, а предлагает решать проблему на том уровне, на котором её можно решить.

Если дизайнер не задаёт вопросов тому, кто ставит ему задачу, это плохо: он не заинтересован в проекте, либо имеет низкий уровень мышления.

Такие посты подталкивают к тому, чтобы начать задавать правильные вопросы и лучше решать дизайн-задачи.


#первые_шаги
Итог первого месяца в Фигме

Чем больше я работаю в Фигме, тем больше я понимаю, что это всерьёз и надолго. Они слишком далеко ушли от Скетча.

Презентации в Фигме
В последнем апдейте выкатили возможность выгружать экраны в PDF, что открывает новые возможности для дизайна презентаций и экспорта векторных ассетов для iOS-разработчиков. Здесь Фигма наступает на пятки Google Slides — пионеру коллаборационной работы над презами. Скетч тоже неплох как инструмент для создания презентаций, но их могут редактировать только избранные, кто работает на Маках. Этим они вызывают ненависть и зависть у всех остальных. Той же хворью болеет и эпловский Keynote. Хотя, презы хотят редактировать и обычные менеджеры с аналитиками, и поэтому жизнь их полна боли и Пауэрпоинта. А Google Slides хоть и хорош, но просасывает, потому что в нём нельзя подгрузить свои шрифты. Мне кажется, именно перспектива делать презы может привлечь в Фигму орды недизайнеров, ещё больше усилив отрыв от Скетча.

Прикольная тема: в Фигме можно делать бесшовные презентации, правый край первого слайда в которых плавно перетекает в левый край следующего. Для этого нужно настроить эффект перехода в Push. Первый слайд сместится влево вторым, скрывая смену слайдов.

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

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

Обновляться на новую версию клиента не страшно, потому что макеты в веб-платформе от этого точно не поломаются. Когда в документе помимо тебя ползают чужие курсоры, это напоминает онлайн-стратегию и страшно вдохновляет работать и играть мускулами перед зрителями.
Возвращаясь в рабочие макеты в Скетче, ужасаешься, как криво в нём сделаны оверрайды: контент оторван от дизайна и чтобы менять тексты, нужно бегать в правый узенький блок. Также очень не хватает контурного режима Outline View, который есть в Фигме и Иллюстраторе. Другая заметная вещь — скорость и гладкость рендера. В этом @rubik_ua была права в нашем старом фигмасраче.

Гораздо быстрее работают жесты на трекпаде, о чём запишу отдельное видео. Особенно это заметно при приближении холста при помощи щипков. Даже такие вещи как зум во время растягивания объекта работает гладко. Я сделал огромный макет с целью повесить Фигму. И на хорошем компе мне это так и не удалось, всё работает очень быстро.

Мой учебник написан на 80% и съедает все те короткие вечера, которые есть после работы в банке. Жаль, пока я не могу распространяться о самой работе, время ещё не пришло.


#для_профи
Мой способ проектировать и презентовать сценарии

https://medium.com/slashdesigner/ux-flow-3bd707afc29b

Когда-то я рассказывал про Overflow — великолепный инструмент для проектирования и демонстрации UX-сценариев и прототипов. Увы, только для Мака.

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

Ссылка на сценарий

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

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

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

#для_профи #UX #Overflow
demo-scenario.overflow
153 KB
Демо-проект сценария из поста
Product Design Weekend

В эти выходные иду на двухдневный интенсив от образовательного проекта Binary District и приглашаю тебя присоединиться. Он пройдёт в центре Digital October на Красном Октябре в Москве.

Хочу подглядеть, как выстроен дизайн-процесс в Акронисе, Мегафоне и Сбербанке. Сравнить с тем, что есть у нас и написать об этом пост.

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

В первый день послушаем лекции:
• Про плохих и хороших продуктовых дизайнеров
• Эргономику, UX и тёмные паттерны
• Тенденции: веб-брутализм, текстовые интерфейсы, дизайн-системы и типографику в вебе
• Про персонализированные интерфейсы и паттерны пользователей
• Про управление командой дизайнеров: как находить хороших и не нанимать плохих
• Разделимся на команды и получим кейс на завтра

Во второй день закатаем рукава:
• Будем делать дизайн продукта
• Проверять с помощью исследований, что он эффективный
• Узнаем правила работы для дизайнеров и менеджеров

Цена: 14 000 р.

Участвовать

Для читателей действует промо-код: slashdesigner на скидку в 1 400 рублей.


#анонсы #для_профи
Product Design Weekend: впечатления и тезисы

В выходные 22–23 декабря на Красном Октябре в Москве состоялся двухдневный интенсивный курс для продуктовых дизайнеров и менеджеров. Я поучаствовал в нём. Это был хороший способ развеяться от рутинной работы, послушать крутые лекции и поработать в команде.

https://medium.com/slashdesigner/product-weekend-1248c3e670f8

В посте cобрал лучшие тезисы из докладов трёх лекторов: Михаила Федосова, Григория Савенка и Василия Гордеева:

О трендах: почему развиваются текстовые интерфейсы, про кричащий брутализм в дизайне.

О эволюционном дизайне: качество и детализация прототипов не так важны, как их количество и замер эффективности.

Первый вопрос, который позволяет решать, брать ли проект в работу: внятное «Зачем?»

Про синергию дизайнеров: два мидла лучше, чем один синьёр, потому что можно подумать в голову соседа.

План идеальной презентации и как презентовать дизайн топам.

#для_профи #UX #дизайн_презентаций
Новый сезон /designer

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

Начнём с неожиданного погружения в историю клавиатур. Для тех, кто любит Маки, но параллельно с этим работает на Windows и страдает.
Ctrl и Command: Как стереть разницу в клавишах между Mac и Windows

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

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

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

slashdesigner.ru/posts/ctrl-command-mac-windows


#для_профи
cmd-fix.skl
40 B
К статье про клавиши: Мой файл настроек для Sharp Keys.
/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 и через меню оверрайдов разрешаем все связи до последней.


#первые_шаги #инструменты #Скетч
missing-symbol-example.sketch
310.3 KB
Пример, в котором можно удалить мастер-символ и получить эту ситуацию